/* Marketing landing page. Extends base.html; the design system (tokens +
   components) is loaded app-wide, so this file only styles the page-specific
   layout. Colours are DS tokens only — no hex literals. The bespoke rgba()
   scrims on the hero and the feature washes are deliberate exceptions: they are
   translucent glass/overlay tints at design-specific opacities, not palette
   colours, so they don't map onto --surface-glass/--surface-overlay. */

/* clip (not hidden) so the sticky nav's containing block isn't turned into a
   scroll container — overflow:hidden would break position:sticky. */
.lp{overflow-x:clip}
/* base.css underlines every <a>; landing links get their affordance from
   component/nav styles, so drop the default border. */
.lp a{border-bottom:none}

/* Smooth in-page anchor scroll. The DS reduced-motion reset (tokens/base.css)
   only zeroes animation/transition durations, not scroll-behavior, so guard it
   here. scroll-margin-top keeps section headings clear of the 72px sticky nav. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.lp-hero,.lp-feat,.lp-pricing{scroll-margin-top:72px}

/* ---------------- Nav ---------------- */
.lp-nav{position:sticky;top:0;z-index:40;background:var(--surface-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle)}
.lp-nav__inner{padding:0 24px;height:72px;display:flex;align-items:center;gap:16px}
.lp-nav__logo{display:flex;align-self:stretch;align-items:center}
.lp-nav__logo img{height:44px;width:auto;display:block}
.lp-nav__spacer{flex:1}
.lp-nav__links{display:flex;align-items:center;gap:2px}
.nav-link{display:inline-flex;align-items:center;height:40px;padding:0 10px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;color:var(--slate-700);text-decoration:none}
.nav-link:hover{background:var(--surface-hover);color:var(--text-strong)}
.lp-nav__cta{flex:none;white-space:nowrap}

/* ---------------- Hero ---------------- */
/* slate-900 base so the section still reads as a deliberate dark hero if the
   poster/video ever fail to load. */
.lp-hero{position:relative;overflow:hidden;background:var(--slate-900);border-bottom:1px solid var(--border-subtle)}
.lp-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block;border:0}
@media (prefers-reduced-motion:reduce){.lp-hero__video{display:none}}
.lp-hero__overlay{position:absolute;inset:0;background:linear-gradient(270deg,rgba(30,35,43,.72) 0%,rgba(30,35,43,.55) 50%,rgba(30,35,43,.25) 100%)}
.lp-hero__inner{position:relative;max-width:1400px;margin:0 auto;padding:clamp(72px,10vw,140px) 20px;display:flex;justify-content:flex-end}
.lp-hero__card{width:100%;max-width:620px;display:flex;flex-direction:column;gap:22px;padding:28px 30px;background:rgba(30,35,43,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(252,252,250,.14);border-radius:var(--radius-2xl)}
.lp-hero__title{font-size:clamp(32px,3.6vw,48px);line-height:1.06;font-weight:800;letter-spacing:-.03em;color:var(--paper-50)}
.lp-hero__lead{font-size:var(--text-md);line-height:1.6;color:var(--slate-200);max-width:48ch}

/* ---------------- Feature sections (know / prepare / apply / track) ------- */
.lp-feat{position:relative;background:var(--paper-100)}
.lp-feat__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0}
.lp-feat__wash{position:absolute;inset:0;background:rgba(255,255,255,.7)}
.lp-feat__inner{position:relative;max-width:1160px;margin:0 auto;padding:clamp(64px,8vw,110px) 20px}
.lp-feat__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:32px;align-items:center}
.lp-feat--media-left .lp-copy{order:2}
.lp-feat--media-left .lp-media{order:1}

.lp-copy{background:rgba(255,255,255,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:.5px solid var(--slate-500);border-radius:var(--radius-2xl);box-shadow:var(--shadow-sm);max-width:600px;padding:28px 30px;display:flex;flex-direction:column;gap:18px}
.lp-copy__label{color:var(--orange-600)}
.lp-copy__title{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.03em;color:var(--text-strong)}
.lp-copy__lead{font-size:var(--text-md);line-height:1.6;color:var(--text-body)}
.lp-chip-mono{font-family:var(--font-mono);font-size:var(--text-sm);background:var(--surface-sunken);color:var(--text-strong);padding:1px 6px;border-radius:var(--radius-xs)}

.lp-rows{display:flex;flex-direction:column;gap:14px}
.lp-row{display:flex;gap:12px;align-items:flex-start}
.lp-row__icon{flex:none;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--orange-50);color:var(--orange-600)}
.lp-row__text{font-size:var(--text-sm);line-height:1.55;color:var(--text-body)}
.lp-row__text strong{color:var(--text-strong);font-weight:700}

/* ---------------- KNOW media: synthetic offer card ---------------- */
.lp-media{display:flex;flex-direction:column;gap:10px}
.lp-offer{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);overflow:hidden}
.lp-offer__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border-subtle)}
.lp-offer__co{font-weight:700;color:var(--text-strong);font-size:var(--text-lg)}
.lp-offer__meta{font-size:var(--text-sm);color:var(--text-muted);margin-top:2px}
.lp-offer__conf{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap}
.lp-dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--green-500);flex:none}
.lp-offer__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-subtle)}
.lp-stat{background:var(--surface-card);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.lp-stat__k{font-size:var(--text-2xs);color:var(--text-muted)}
.lp-stat__v{font-weight:700;color:var(--text-strong);font-size:var(--text-lg)}
.lp-offer__scroll{overflow-x:auto}
.lp-offer__table{width:100%;border-collapse:collapse}
.lp-offer__table th{text-align:right;padding:8px 16px;border-bottom:1px solid var(--border-subtle);white-space:nowrap}
.lp-offer__table th:first-child{text-align:left}
.lp-offer__table td{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-body);text-align:right;padding:7px 16px;border-bottom:1px solid var(--border-subtle);white-space:nowrap}
.lp-offer__table td:first-child{font-family:var(--font-sans);color:var(--text-strong);text-align:left}
.lp-offer__table td:nth-child(4){font-weight:600;color:var(--text-strong)}
.lp-offer__table td:last-child{color:var(--text-muted)}
.lp-offer__table tr:last-child td{border-bottom:none}
.lp-offer__q{background:var(--paper-100);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.lp-q{display:flex;align-items:baseline;gap:8px}
.lp-q__stage{flex:none;font-size:var(--text-2xs);font-weight:700;color:var(--slate-600);text-transform:uppercase;letter-spacing:var(--tracking-label)}
.lp-q__text{flex:1;font-size:var(--text-sm);color:var(--text-body)}
.lp-q__n{flex:none;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted)}
/* Caption sits outside the card (a sibling of .lp-offer inside .lp-media). */
.lp-offer__cap{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.lp-offer__cap p{font-size:var(--text-xs);color:var(--text-body);line-height:1.5}
.lp-mono-note{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-subtle);white-space:nowrap;flex:none}

/* ---------------- Product-photo placeholder ---------------- */
.lp-photo{aspect-ratio:4/3;border:1px solid var(--border-subtle);border-radius:var(--radius-2xl);background:var(--surface-card);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}

/* ---------------- Pricing ---------------- */
.lp-pricing{position:relative;background:var(--paper-100);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.lp-pricing__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0}
.lp-pricing__wash{position:absolute;inset:0;background:rgba(255,255,255,.7)}
.lp-pricing__inner{position:relative;max-width:1160px;margin:0 auto;padding:clamp(64px,8vw,110px) 20px}
/* Intro stacks above a right-aligned period toggle (ref: column, gap 32). */
.lp-pricing__head{display:flex;flex-direction:column;gap:32px;margin-bottom:32px}
.lp-pricing__intro{max-width:660px;display:flex;flex-direction:column;gap:14px}
.lp-pricing__title{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.03em;color:var(--text-strong)}
.lp-pricing__lead{font-size:var(--text-sm);line-height:1.6;color:var(--text-muted)}
.lp-pricing__head .ifyi-toggroup{align-self:flex-end}

/* Wrapper lets the "Most popular" badge float above the premium column edge. */
.lp-table-outer{position:relative;padding-top:14px}
.lp-table-wrap{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-card)}
.lp-table{width:100%;min-width:720px;table-layout:fixed;border-collapse:collapse}
.lp-table th,.lp-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--border-subtle)}
.lp-table th{vertical-align:bottom}
.lp-table td{vertical-align:top}
.lp-table th.lp-plan,.lp-table td:not(.lp-table__feat){text-align:center}
.lp-table__feat{width:30%;font-size:var(--text-sm);font-weight:600;color:var(--text-body)}
.lp-plan--prem{background:var(--orange-50)}
.lp-plan__name{font-weight:700;color:var(--text-strong);font-size:var(--text-md)}
.lp-plan__price{font-weight:800;color:var(--text-strong);font-size:var(--text-2xl);letter-spacing:-.02em;margin-top:2px}
.lp-plan__cadence{font-size:var(--text-2xs);color:var(--text-muted);margin-top:4px;line-height:1.4}
.lp-plan__pop{position:absolute;top:0;left:calc(30% + (100% - 30%) * 5 / 6);transform:translate(-50%,-50%);z-index:2}
/* 7-day-pass column (3rd) gets a paper tint, matching Premium's. */
.lp-table th:nth-child(3),.lp-table td:nth-child(3){background:var(--paper-100)}

/* Section group rows: sans text-md/700, strong, no tint, left-aligned. */
.lp-table .lp-group td{background:none;font-size:var(--text-md);font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--text-strong);text-align:left;padding:16px 18px 8px}
.lp-cell--prem{background:var(--orange-50)}
.lp-celltext{font-size:var(--text-xs);color:var(--text-muted);line-height:1.4}
.lp-cell--prem .lp-celltext{color:var(--text-strong)}
.lp-check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--radius-sm);color:var(--paper-0)}
.lp-check--free{background:var(--slate-700)}
.lp-check--pass{background:var(--clay-500)}
.lp-check--prem{background:var(--orange-400)}
.lp-table__cta td{border-bottom:none;padding-top:18px;padding-bottom:18px}
.lp-footnote{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-subtle);margin-top:16px;line-height:1.5}

/* ---------------- CTA band ---------------- */
.lp-cta{max-width:1160px;margin:0 auto;padding:clamp(48px,7vw,88px) 20px}
.lp-cta__card{background:var(--surface-inverse);color:var(--text-inverse);border:1px solid var(--border-inverse);border-radius:var(--radius-2xl);padding:clamp(32px,5vw,64px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.lp-cta__text{display:flex;flex-direction:column;gap:10px;max-width:560px}
.lp-cta__title{color:var(--paper-50);font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.03em}
.lp-cta__lead{color:var(--slate-300);font-size:var(--text-md);line-height:1.6}

/* ---------------- Footer ---------------- */
.lp-footer{border-top:1px solid var(--border-subtle);background:var(--surface-chrome)}
.lp-footer__inner{max-width:1160px;margin:0 auto;padding:32px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.lp-footer__brand{display:flex;align-items:center;gap:12px}
.lp-footer__brand img{height:22px;width:auto;display:block}
.lp-footer__tag{font-size:var(--text-sm);color:var(--text-muted)}
.lp-footer__links{display:flex;flex-wrap:wrap;gap:4px 6px;margin-left:auto}

@media (max-width:760px){
  /* Keep the anchor nav reachable on phones: drop the four section links but
     keep Pricing + Log in. Hide the redundant nav CTA (the hero carries its
     own) and trim the logo so the row can't overflow at ~375px. */
  .lp-nav__inner{padding:0 16px;gap:8px}
  .lp-nav__logo img{height:36px}
  .lp-nav__hide-sm{display:none}
  .lp-nav__cta{display:none}
  .lp-offer__stats{grid-template-columns:1fr}
  .lp-footer__links{margin-left:0}
}