/* i.nyla homepage: brand tokens and the parts Bootstrap does not cover.
   Layout uses Bootstrap 5 grid, buttons and utilities. */

:root {
  --cream: #F6F3EC;
  --cream-2: #EFEBE1;
  --ink: #1C1F22;
  --ink-2: #2A2E32;
  --muted: #5E6267;
  --line: #DDD7CA;
  --teal: #7B8CD9;
  --teal-ink: #4D5BB5;
  --white: #FFFFFF;
  --serif: 'Source Serif 4', Georgia, serif;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.08; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; }

/* Warning bars */
.nicotine-bar {
  background: var(--ink);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  padding: 16px 12px;
}

/* Header */
.site-nav { background: var(--cream); padding-block: 14px; }
.brand-logo { height: 60px; width: auto; background: var(--ink); padding: 8px 20px; border-radius: 999px; }
.site-nav .nav-link { color: var(--ink-2); font-size: 15px; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--ink); }
.site-nav .nav-link.active { border-bottom: 1px solid var(--ink); }

/* Buttons */
.btn-ink { background: var(--ink); color: #fff; border-radius: 999px; padding: 12px 24px; font-weight: 500; border: 0; }
.btn-ink:hover { background: var(--ink-2); color: #fff; }
.btn-teal { background: var(--teal); color: var(--ink); border-radius: 999px; padding: 12px 24px; font-weight: 600; border: 0; }
.btn-teal:hover { background: #6676C8; color: var(--ink); }
.btn-outline-ink { border: 1px solid var(--ink); color: var(--ink); border-radius: 999px; padding: 12px 24px; font-weight: 500; background: transparent; }
.btn-outline-ink:hover { background: var(--ink); color: #fff; }

/* Hero: the slider photo covers the section */
.hero {
  min-height: 680px;
  background:
    linear-gradient(90deg, rgba(246, 243, 236, .96) 0%, rgba(246, 243, 236, .78) 42%, rgba(246, 243, 236, .05) 100%),
    url('../images/slider/home-slider-1.jpg') center / cover no-repeat;
  display: flex;
  align-items: center;
}
.hero h1 { font-size: clamp(52px, 7vw, 92px); }
.eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.lead-copy { color: var(--ink-2); font-size: 17px; max-width: 46ch; }

/* Sections */
.section-pad { padding-block: 84px; }
.section-line { border-top: 1px solid var(--line); }
.section-title { font-size: clamp(36px, 4.6vw, 56px); }

/* Device panel */
.panel { background: var(--cream-2); border-radius: 8px; }
.panel img { max-height: 380px; width: auto; }

/* Product cards */
.product-card {
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--line);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product-card .media {
  background: var(--cream-2);
  border-radius: 6px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin: 16px 16px 0;
}
.product-card .media img { max-height: 100%; max-width: 100%; object-fit: contain; }
.product-card h3 { font-size: 26px; padding: 18px 20px 0; }
.product-card p { color: var(--muted); font-size: 15px; padding: 8px 20px 0; flex-grow: 1; }
.product-card a { padding: 12px 20px 20px; color: var(--teal-ink); font-weight: 500; }

/* Pack cards: teal panels, as in the reference */
.pack-card {
  background: var(--white);
  color: var(--ink);
  text-align: center;
  padding: 36px 24px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pack-card .icon { width: 64px; height: 64px; object-fit: contain; }
.pack-card h3 { font-family: Inter, sans-serif; font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.pack-card p { font-size: 15px; max-width: 28ch; margin: 0; }
.pack-card img.pack { width: 100%; max-width: 280px; height: auto; margin-top: auto; padding-top: 12px; }

/* Steps */
.step-dot {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 20px;
}
.step-title { font-size: 22px; margin-top: 14px; }
.step-copy { color: var(--muted); font-size: 15px; }

/* Footer */
.site-footer { background: var(--cream-2); padding-block: 48px 36px; }
.site-footer .legal { font-size: 13px; color: var(--muted); }
.footer-links a { color: var(--ink-2); font-size: 15px; margin-right: 22px; display: inline-block; margin-bottom: 8px; }
.footer-links a:hover { color: var(--ink); }

/* Sticky Surgeon General box, bottom-left */
.surgeon-box {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 1030;
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
}

@media (max-width: 991.98px) {
  .hero { min-height: 620px; background-position: 70% center; }
  .hero::before { content: ""; }
  .section-pad { padding-block: 60px; }
}
@media (max-width: 575.98px) {
  .brand-logo { height: 48px; padding: 6px 14px; }
  .nicotine-bar { font-size: 14px; }
  .hero { background: linear-gradient(180deg, rgba(246, 243, 236, .92) 0%, rgba(246, 243, 236, .6) 60%, rgba(246, 243, 236, .2) 100%), url('../images/slider/home-slider-1.jpg') 70% center / cover no-repeat; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Inner pages ---------- */
.page-hero { padding-block: 72px 40px; }
.page-hero h1 { font-size: clamp(44px, 6vw, 80px); }
.page-hero .lead-copy { margin-top: 18px; }

.blend-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.blend-card .media {
  background: var(--cream-2);
  border-radius: 6px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.blend-card .media img { max-height: 100%; max-width: 100%; object-fit: contain; }
.blend-card h3 { font-size: 26px; }
.blend-card p { color: var(--muted); font-size: 15px; margin: 0; flex-grow: 1; }

.step-card { height: 100%; }
.note-card {
  background: var(--white);
  border-radius: 8px;
  padding: 22px;
  height: 100%;
  color: var(--ink-2);
  font-size: 15px;
  margin: 0;
}

.faq-accordion .accordion-item { border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.faq-accordion .accordion-button {
  background: transparent;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 24px);
  color: var(--ink);
  padding: 22px 0;
  box-shadow: none;
}
.faq-accordion .accordion-button:not(.collapsed) { color: var(--ink); background: transparent; box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: none; }
.faq-accordion .accordion-button::after { filter: none; }
.faq-accordion .accordion-body { padding: 0 0 22px; color: var(--muted); font-size: 15px; }

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(24px, 4vw, 40px);
}
.form-card .form-control, .form-card .form-select {
  background: var(--cream);
  border-color: var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  min-height: 48px;
}
.form-card .form-control:focus { border-color: var(--teal-ink); box-shadow: 0 0 0 .2rem rgba(123, 140, 217, .25); }
.form-card label { font-size: 14px; color: var(--muted); margin-bottom: 6px; }

/* Age gate */
.gate-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.gate-page .gate-main { flex: 1; display: flex; }
.gate-art {
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  min-height: 260px;
}
.gate-art .brand-logo { height: 96px; }
.gate-form-wrap { display: flex; align-items: center; padding: 48px 24px; background: var(--cream); }
.gate-form-wrap .inner { width: 100%; max-width: 460px; margin: 0 auto; }
.gate-form-wrap h1 { font-size: clamp(38px, 5vw, 56px); }
@media (min-width: 992px) {
  .gate-main { display: grid; grid-template-columns: 1fr 1fr; }
  .gate-art { min-height: 100%; }
}

/* Contact */
.contact-info { font-size: 15px; color: var(--ink-2); }

/* Footer warning text sits below the links on small screens */
.site-footer .legal p { margin-bottom: 8px; }

/* Age gate stacks on phones: art above the form */
.gate-page .gate-main { display: flex; flex-direction: column; }
@media (min-width: 992px) { .gate-page .gate-main { display: grid; grid-template-columns: 1fr 1fr; } }

/* ---------- Theme consistency across all app pages ----------
   One look for every page: cream ground, white form fields with a teal focus ring,
   dark primary buttons. Teal is kept for the pack cards and the focus state. */
.form-control, .form-select {
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  min-height: 48px;
  padding: 12px 14px;
  font-size: 15px;
}
.form-control::placeholder { color: #8A8F96; }
.form-control:focus, .form-select:focus {
  border-color: var(--teal-ink);
  box-shadow: 0 0 0 .2rem rgba(123, 140, 217, .25);
}
.form-label { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.gate-art { background: var(--cream-2); border-right: 1px solid var(--line); }
.gate-art .brand-logo { height: 84px; }

/* Blend images: fixed-height frame so every stick image is the same size */
.product-card .media,
.blend-card .media {
  aspect-ratio: auto;
  height: 220px;
  padding: 12px;
}
.product-card .media img,
.blend-card .media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 575.98px) {
  .product-card .media, .blend-card .media { height: 200px; }
}

/* Hero: the section takes the photo's 16:9 shape on desktop so the head is not cut.
   Phones keep a cropped cover, anchored to the top so the head stays in frame. */
.hero { aspect-ratio: 16 / 9; min-height: 0; background-position: center top; }
.hero h1 { font-size: clamp(44px, 5.6vw, 76px); max-width: 14ch; }
@media (max-width: 991.98px) {
  .hero { aspect-ratio: auto; min-height: 620px; background-position: 72% top; }
}

/* Hero in the dark slider style: dark overlay, bold white heading, bracketed eyebrow */
.hero {
  background:
    linear-gradient(90deg, rgba(16, 18, 22, .94) 0%, rgba(16, 18, 22, .72) 45%, rgba(16, 18, 22, .15) 100%),
    url('../images/slider/home-slider-1.jpg') center top / cover no-repeat;
  color: #F5F6F8;
}
.hero h1 {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
.hero .lead-copy { color: #E6E8EB; }
.hero-eyebrow {
  position: relative;
  padding-left: 44px;
  color: #7B8CD9;
  font-weight: 700;
  letter-spacing: .14em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.hero-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 1px;
  background: #FFFFFF;
  opacity: .8;
}
.hero-eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  margin-left: -1px;
  border-radius: 50%;
  background: #7B8CD9;
}
.hero .btn-outline-light { border-color: rgba(255, 255, 255, .7); }
@media (max-width: 991.98px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(16, 18, 22, .5) 0%, rgba(16, 18, 22, .94) 70%),
      url('../images/slider/home-slider-1.jpg') 72% top / cover no-repeat;
  }
}

/* Hero intro, caption and buttons (same size and colour for both) */
.hero-intro p { color: #E6E8EB; max-width: 46ch; font-size: 16px; }
.hero-caption { display: flex; flex-direction: column; gap: 2px; }
.hero-caption strong { color: #FFFFFF; font-size: 17px; font-weight: 700; }
.hero-caption span { color: #B9BEC6; }
.hero .hero-btn {
  min-width: 220px;
  height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  background: #7B8CD9;
  color: #0F1A1E;
  border: 0;
}
.hero .hero-btn:hover { background: #6676C8; color: #0F1A1E; }

/* Caption as a sub heading above the intro text, styled as in the reference */
.hero-caption { margin-bottom: 14px; gap: 4px; }
.hero-caption strong { font-family: Inter, system-ui, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; color: #FFFFFF; }
.hero-caption span { font-size: 17px; color: #A9AFB8; line-height: 1.35; }
.hero-intro p.mb-0 { font-size: 16px; line-height: 1.6; color: #E6E8EB; }

/* Navbar: logo without its dark chip, menu centred, larger warning bar */
.site-nav .brand-logo { background: none; padding: 0; border-radius: 0; height: 60px; }
.site-nav .navbar-nav { justify-content: center; }
.nicotine-bar { font-size: 20px; padding: 20px 12px; }
@media (max-width: 575.98px) {
  .nicotine-bar { font-size: 16px; padding: 14px 10px; }
  .site-nav .brand-logo { height: 48px; }
}

/* Surgeon General box: larger text and box on every Bootstrap page */
.surgeon-box {
  max-width: min(420px, calc(100vw - 32px));
  padding: 18px 20px;
  font-size: 16px;
  line-height: 1.5;
  border-radius: 10px;
}
@media (max-width: 575.98px) {
  .surgeon-box { font-size: 14px; padding: 14px 16px; max-width: calc(100vw - 32px); }
}

/* Pack cards follow the site theme: white cards, dark text, teal icon accent */
.pack-card { background: var(--white); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; }
.pack-card h3 { color: var(--ink); }
.pack-card p { color: var(--muted); }
.pack-card img.pack { max-width: 240px; }

/* Contact image and FAQ answer formatting */
.contact-media { border-radius: 8px; overflow: hidden; background: var(--cream-2); }
.contact-media img { width: 100%; height: auto; display: block; }
.faq-accordion .accordion-body p { margin: 0 0 12px; }
.faq-accordion .accordion-body p:last-child { margin-bottom: 0; }
.faq-accordion .faq-list { padding-left: 20px; margin: 0 0 12px; }
.faq-accordion .faq-list li { margin-bottom: 6px; }
.faq-accordion .faq-important { color: var(--ink-2); background: var(--cream-2); border-radius: 6px; padding: 12px 14px; }

/* Product highlights after the slider: teal panels as in the live site */
.feature-section { padding-block: 0; background: var(--cream); }
.feature-section .row { margin-top: 0; }
.feature-card {
  background: #EFEBE1;
  color: #0F1A1E;
  text-align: center;
  padding: 36px 24px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 0;
}
.feature-icon { width: 56px; height: 56px; object-fit: contain; }
.feature-card h3 { font-family: Inter, sans-serif; font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #0F1A1E; }
.feature-card p { font-size: 15px; max-width: 30ch; margin: 0; color: #0F1A1E; }
.feature-pack { width: 100%; max-width: 260px; height: auto; margin-top: auto; padding-top: 12px; }
.feature-section .g-4 { --bs-gutter-y: 0; --bs-gutter-x: 0; }
.feature-section .col-md-6, .feature-section .col-lg-4 { padding: 0; }
.feature-section .col-md-6 .feature-card, .feature-section .col-lg-4 .feature-card { border: 1px solid var(--cream); }

/* Collection heading above the product highlights (dark, as in the reference) */
.collection-head { background: var(--cream); color: var(--ink); padding-block: 72px 56px; }
.collection-head-inner { position: relative; padding-left: 44px; padding-top: 44px; max-width: 900px; }
.collection-head-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-left: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  border-top-left-radius: 14px;
}
.collection-head-inner::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 38px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7B8CD9;
}
.collection-kicker {
  color: #7B8CD9;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.collection-title { font-family: Inter, system-ui, sans-serif; font-size: clamp(38px, 5vw, 60px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 22px; color: var(--ink); }
.collection-text { color: var(--ink-2); font-size: 17px; max-width: 70ch; margin: 0 0 36px; }
.collection-btn { min-width: 200px; height: 52px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 575.98px) {
  .collection-kicker { font-size: 17px; }
  .collection-head-inner { padding-left: 30px; }
}

/* VCT has a stick drawing, not a pack photo: keep it at a pack-like size */
.feature-stick { max-width: 110px; padding-top: 0; }

/* Navbar colour band: the white logo wordmark and the menu text both read on it */
.site-nav { background: #7B8CD9; border-bottom: 1px solid #6676C8; }
.site-nav .nav-link { color: #0F1A1E; font-weight: 500; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: #0F1A1E; }
.site-nav .nav-link.active { border-bottom: 2px solid #0F1A1E; }
.site-nav .brand-logo { height: 64px; }

/* Navbar: light grey band (overrides the periwinkle band above) */
.site-nav { background: #E6E7EA; border-bottom: 1px solid #D3D5DB; }
.site-nav .nav-link { color: #1C1F22; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: #000000; }
.site-nav .nav-link.active { border-bottom: 2px solid #1C1F22; }

/* ---------- One type scale for every page ----------
   Section title   : same size and colour everywhere
   Sub heading     : card and step titles, same size and colour everywhere
   Sub title / text: one size and colour for all supporting text
   !important keeps these rules in front of older inline copies. */
.section-title,
.collection-title,
.intro h2,
.engineered h2,
.band-title,
.page-section-title {
  font-family: var(--serif) !important;
  font-size: 44px !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
  text-transform: none !important;
}
.product-card h3, .blend-card h3, .feature-card h3, .pack-card h3,
.step-title, .hiw-step h3, .hiw-step .hiw-title, .step-card h3, .note-card-title {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
  text-transform: none !important;
}
.section-head p, .lead-copy, .collection-text, .section-sub,
.product-card p, .blend-card p, .feature-card p, .pack-card p,
.step-copy, .hiw-step p, .note-card, .contact-info, .hero-intro p {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
}

/* Kicker, FAQ questions and closing band follow the same scale */
.collection-kicker { font-family: var(--serif) !important; font-size: 22px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; margin-bottom: 14px !important; }
.faq-accordion .accordion-header { font-size: 22px !important; }
.faq-accordion .accordion-button { font-size: 22px !important; color: var(--ink) !important; }
.hiw-cta h2 { font-size: 44px !important; }

/* Bracket decoration removed site-wide */
.bracket::before, .bracket::after, .collection-head-inner::before, .collection-head-inner::after, .hero-eyebrow::before, .hero-eyebrow::after, .slide-right .bracket::before, .slide-right .bracket::after { content: none !important; display: none !important; }

/* All titles use the hero heading font (Inter) */
h1, h2, h3,
.section-title, .collection-title, .collection-kicker, .intro h2, .engineered h2,
.product-card h3, .blend-card h3, .feature-card h3, .pack-card h3,
.step-title, .hiw-step h3, .step-card h3, .hiw-cta h2,
.page-hero h1, .gate-form-wrap h1, .hero-caption strong,
.faq-accordion .accordion-button {
  font-family: Inter, system-ui, sans-serif !important;
}
.section-title, .collection-title, .intro h2, .engineered h2, .hiw-cta h2, .page-hero h1 { font-weight: 700 !important; letter-spacing: -.02em !important; }
.product-card h3, .blend-card h3, .feature-card h3, .pack-card h3, .step-title, .hiw-step h3, .step-card h3, .collection-kicker, .faq-accordion .accordion-button { font-weight: 600 !important; letter-spacing: 0 !important; }

/* Footer logo: same dark-text logo as the header, no dark chip */
.site-footer .brand-logo { background: none; padding: 0; border-radius: 0; height: 64px; }

/* Slider intro paragraph in pure white */
.hero .hero-intro p { color: #FFFFFF !important; }

/* Legal pages (Terms, Privacy): readable document with an on-page index */
.legal-toc { position: sticky; top: 120px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.legal-toc-title { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.legal-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.legal-toc a { color: var(--ink-2); font-size: 14px; }
.legal-toc a:hover { color: #4D5BB5; }
.legal-doc { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: clamp(24px, 4vw, 48px); }
.legal-block + .legal-block { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.legal-block { scroll-margin-top: 130px; }
.legal-doc h2 { font-family: Inter, system-ui, sans-serif !important; font-size: 22px !important; font-weight: 600 !important; color: var(--ink) !important; margin: 0 0 14px; }
.legal-doc p, .legal-doc li { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.legal-doc p { margin: 0 0 14px; }
.legal-doc p:last-child { margin-bottom: 0; }
.legal-doc ul { margin: 0 0 14px; padding-left: 22px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc a { color: #4D5BB5; text-decoration: underline; }

/* Products page: CORE device feature tiles */
.core-feature {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F5FB 100%);
  border: 1px solid #E3E6F2;
  border-radius: 14px;
  padding: 28px 22px;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 12px 32px rgba(28, 31, 34, .07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.core-feature:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28, 31, 34, .12); }
.core-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #7B8CD9 0%, #A9A4F0 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(123, 140, 217, .35);
}
.core-feature-icon svg { width: 30px; height: 30px; }
.core-feature h3 {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) { .core-feature { transition: none; } .core-feature:hover { transform: none; } }

/* Products page: sticks / CORE devices tabs */
.shop-tabs { gap: 10px; border: 0; flex-wrap: wrap; }
.shop-tabs .nav-link {
  border: 1px solid var(--line);
  background: #FFFFFF;
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 15px;
}
.shop-tabs .nav-link:hover { border-color: #7B8CD9; color: var(--ink); }
.shop-tabs .nav-link.active { background: #1C1F22; border-color: #1C1F22; color: #FFFFFF; }
.shop-card {
  background: #FFFFFF;
  border: 1px solid #E3E6F2;
  border-radius: 14px;
  padding: 20px 20px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 28px rgba(28, 31, 34, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.shop-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(28, 31, 34, .1); }
.shop-media {
  background: #EFEBE1;
  border-radius: 10px;
  height: 220px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-media img { width: 100%; height: 100%; object-fit: contain; }
.shop-media--device { height: 300px; }
.shop-card h3 { font-family: Inter, system-ui, sans-serif !important; font-size: 22px !important; font-weight: 600 !important; color: var(--ink) !important; margin: 4px 0 0; }
.shop-card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
/* The rating artwork has white labels, so it sits on a dark panel */
.rating-panel { background: #1C1F22; border-radius: 10px; padding: 12px 16px; }
.rating-panel img { width: 100%; max-width: 260px; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .shop-card { transition: none; } .shop-card:hover { transform: none; } }

/* Age verification overlay (shown on page load until verified) */
html.age-locked, html.age-locked body { overflow: hidden; }
.age-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(16, 18, 22, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
}
.age-dialog {
  background: #FFFFFF;
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  padding: clamp(24px, 5vw, 40px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  margin: auto;
}
.age-logo { height: 56px; width: auto; display: block; margin: 0 auto 16px; }
.age-warning {
  background: #1C1F22;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 20px;
}
.age-title { font-family: Inter, system-ui, sans-serif !important; font-size: 30px !important; font-weight: 700 !important; color: var(--ink) !important; text-align: center; margin: 0 0 8px; }
.age-text { text-align: center; color: var(--ink-2); font-size: 15px; margin: 0 0 20px; }
.age-alert { background: #FDECEC; color: #9B2C20; border: 1px solid #F3C4BF; border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }
.age-dialog .form-control { background: #FFFFFF; }
.age-submit { height: 50px; font-size: 16px; }
.age-fine { text-align: center; font-size: 12px; color: var(--muted); margin: 16px 0 0; }

/* Age gate page: dark-text logo without the dark chip */
.gate-art .brand-logo { background: none !important; padding: 0 !important; border-radius: 0 !important; height: 96px; }

/* Hero: photo anchored to the right so the person and device sit clear of the text.
   The photo keeps its full height (head in frame); the space on the left is the dark overlay colour. */
@media (min-width: 992px) {
  .hero {
    aspect-ratio: auto !important;
    min-height: 680px;
    background:
      linear-gradient(90deg, rgba(16, 18, 22, .97) 0%, rgba(16, 18, 22, .9) 34%, rgba(16, 18, 22, .35) 62%, rgba(16, 18, 22, .05) 100%),
      url('../images/slider/home-slider-1.jpg') right top / auto 100% no-repeat,
      #101216 !important;
  }
  .hero h1 { font-size: clamp(44px, 4.6vw, 66px) !important; }
}

/* Hero, desktop: split layout. Text sits on the dark left side; the photo fills the
   right side, cropped so the person and the device are fully clear of the text. */
@media (min-width: 992px) {
  .hero {
    position: relative;
    min-height: 680px;
    background: #101216 !important;
    overflow: hidden;
  }
  .hero::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56%;
    background: url('../images/slider/home-slider-1.jpg') 32% top / cover no-repeat;
  }
  .hero::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56%;
    background: linear-gradient(90deg, #101216 0%, rgba(16, 18, 22, .55) 14%, rgba(16, 18, 22, 0) 32%);
  }
  .hero > .container { position: relative; z-index: 1; }
}

/* Hero crop: show the face and the device together; tidy label and buttons */
@media (min-width: 992px) {
  .hero::before { background-position: 62% top; }
}
.hero-eyebrow { padding-left: 0 !important; }
.hero .hero-btn { min-width: 200px; }

/* Hero: softer slate-indigo instead of near-black (white text stays at about 11:1 contrast) */
@media (min-width: 992px) {
  .hero { background: linear-gradient(160deg, #3A4060 0%, #30354D 100%) !important; }
  .hero::after { background: linear-gradient(90deg, #333852 0%, rgba(51, 56, 82, .55) 14%, rgba(51, 56, 82, 0) 32%); }
}
@media (max-width: 991.98px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(51, 56, 82, .45) 0%, rgba(51, 56, 82, .93) 70%),
      url('../images/slider/home-slider-1.jpg') 72% top / cover no-repeat !important;
  }
}
.hero .hero-eyebrow { color: #B4BEF0 !important; }
.hero-caption span { color: #C9CEE6 !important; }

/* Hero, desktop (final): full-width photo again with the original 16:9 height.
   The photo is scaled to 125% and anchored left, which moves the person and the device
   to the right of the text. A lighter, see-through overlay keeps the city visible. */
@media (min-width: 992px) {
  .hero {
    aspect-ratio: 16 / 9 !important;
    min-height: 600px !important;
    background:
      linear-gradient(90deg, rgba(36, 40, 60, .78) 0%, rgba(36, 40, 60, .58) 32%, rgba(36, 40, 60, .18) 52%, rgba(36, 40, 60, 0) 70%),
      url('../images/slider/home-slider-1.jpg') left top / 125% auto no-repeat,
      #3A4060 !important;
  }
  .hero::before, .hero::after { display: none !important; content: none !important; }
}
.hero .hero-intro p, .hero-caption strong, .hero-caption span { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }

/* Hero, large desktops (1200px and up): the full photo fits the 16:9 hero exactly,
   so the head and the complete hand with the device are visible. The text column is
   kept narrow and the overlay fades out before the hand, so nothing covers it. */
@media (min-width: 1200px) {
  .hero {
    background:
      linear-gradient(90deg, rgba(36, 40, 60, .82) 0%, rgba(36, 40, 60, .62) 24%, rgba(36, 40, 60, .22) 33%, rgba(36, 40, 60, 0) 39%),
      url('../images/slider/home-slider-1.jpg') center top / cover no-repeat,
      #3A4060 !important;
  }
  .hero .col-lg-5 { flex: 0 0 auto; width: 100%; max-width: 430px; }
  .hero h1 { font-size: clamp(44px, 3.6vw, 62px) !important; }
}
@media (min-width: 1200px) {
  .hero .col-lg-5 { max-width: 370px; }
  .hero h1 { font-size: clamp(42px, 3.1vw, 56px) !important; }
}

/* Hero heading on two lines: "Innovating the" / "Tobacco Experience" */
@media (min-width: 992px) {
  .hero h1 { white-space: nowrap; max-width: none !important; }
}

/* Products page: new pack photos (white studio background), shown larger on white */
.shop-media--pack { background: #FFFFFF; border: 1px solid #ECEEF4; overflow: hidden; padding: 0; }
.shop-media--pack img { transform: scale(1.28); }

/* Updated rating artwork has black text, so it sits on a light panel */
.rating-panel--light { background: #F7F5EF; border: 1px solid #ECE7DA; padding: 12px 16px; }
.rating-panel--light img { max-width: 240px; }