/* Urbanist — the single typeface of the JRNEY product, mirroring the iOS bundle
   in TripPlannerAI/Resources/Fonts/Urbanist.

   The design project ships 13 static TTF instances (~1.5 MB) but its own type
   tokens only ever reach for four weights. Self-hosted here as the upstream
   variable font in woff2 instead: two subset files, 44 KB for the whole 100–900
   range, and `font-weight: 100 900` lets the browser synthesise any weight the
   tokens ask for. Urbanist is SIL Open Font License 1.1 (Corey Hu), so
   self-hosting and redistribution are permitted.

   Paths are relative to css/, where this file is concatenated into
   css/jrney-*.css — so ../fonts/ resolves to /fonts/. */
@font-face{
  font-family:"Urbanist";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/Urbanist-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Urbanist";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/Urbanist-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JRNEY colour system — values lifted verbatim from the iOS asset catalog
   (TripPlannerAI/Assets.xcassets/Colors) and from the literal hexes used inline
   in the SwiftUI views. Names on the left of each group are the app's own
   asset names, kept so designers and engineers can talk about the same swatch. */
:root{
  /* Brand — navy is the identity colour; dark blue is the interactive blue. */
  --jrney-navy:#162150;              /* appNavy — logo ground, primary button, FAB */
  --jrney-dark-blue:#1C43A9;         /* appDarkBlue — links, selected, index chips */
  --jrney-royal-blue:#365DF5;        /* royalBlue — outgoing chat bubble, progress */
  --jrney-malibu:#75A6FF;            /* malibu */
  --jrney-frost-blue:#DFEEFC;        /* appFrostBlue — onboarding illustration ground */
  --jrney-pale-blue:#ECF6FF;         /* appPaleBlue / neutralBlue — selected pill, tag */

  /* Text */
  --jrney-primary-text:#1B1E28;      /* appPrimaryText (light mode) */
  --jrney-primary-text-dark:#FEFFFF; /* appPrimaryText (dark mode) */
  --jrney-secondary-text:#47494E;    /* appSecondaryText / appGrayishBlue */
  --jrney-graphite:#70747D;          /* appGraphite / appLightGreyText */
  --jrney-gray:#64748B;              /* appGray — unselected option label */
  --jrney-grey-text:#9E9FA2;         /* neutralGreyText */

  /* Neutrals — light to dark */
  --jrney-white:#FFFFFF;
  --jrney-neutral-grey:#F7F7F9;      /* neutralGrey / appLightGrayishBlue — field + chip fill */
  --jrney-wild-sand:#F4F4F4;         /* wildSand */
  --jrney-light-gray:#F2F2F2;        /* appLightGray */
  --jrney-gallery:#EBEBEB;           /* gallery */
  --jrney-mercury:#EBE9E9;           /* mercury */
  --jrney-iron:#D4D5D9;              /* iron */
  --jrney-alto:#CFCFCF;              /* alto — typing dots */
  --jrney-cadet-blue:#B4BCC9;        /* cadetBlue — the shadow colour */
  --jrney-bombay:#B0B3BF;            /* bombay — disabled send button */
  --jrney-shadow-blue:#A1A4AB;       /* appShadowBlue */

  /* Semantic / status */
  --jrney-green:#0EAA16;             /* appGreen */
  --jrney-emerald:#51D48A;           /* emerald — AI online dot */
  --jrney-red:#EF505F;               /* appRed — destructive */
  --jrney-orange:#FF5922;            /* appOrange — time-overlap warning */
  --jrney-saffron:#F3B138;           /* saffron */
  --jrney-yellow:#FFD336;            /* rating star (system yellow in app) */

  /* Warm surfaces */
  --jrney-serenade:#FFF4E5;          /* serenade — hotels banner ground */
  --jrney-orange-white:#FEFBEA;      /* orangeWhite */
  --jrney-coconut-cream:#F8F3D6;     /* coconutCream */
  --jrney-blush:#FFEDEA;             /* restaurants banner ground */
  --jrney-overlap:#FFF1EC;           /* time-overlap badge ground */

  /* ---- Semantic aliases: use these in product work ---- */
  --surface-page:#FFFFFF;            /* Color.appBackground */
  --surface-card:var(--jrney-white);
  --surface-subtle:var(--jrney-neutral-grey);
  --surface-selected:var(--jrney-pale-blue);
  --surface-inverse:var(--jrney-navy);
  --surface-illustration:var(--jrney-frost-blue);

  --text-primary:var(--jrney-primary-text);
  --text-secondary:var(--jrney-secondary-text);
  --text-tertiary:var(--jrney-graphite);
  --text-muted:var(--jrney-grey-text);
  --text-placeholder:var(--jrney-gray);
  --text-on-inverse:var(--jrney-white);
  --text-link:var(--jrney-dark-blue);
  --text-heading:var(--jrney-navy);

  --border-subtle:var(--jrney-neutral-grey);
  --border-strong:var(--jrney-iron);
  --border-selected:var(--jrney-dark-blue);
  --divider:var(--jrney-neutral-grey);

  --action-primary:var(--jrney-navy);
  --action-primary-text:var(--jrney-white);
  --action-accent:var(--jrney-dark-blue);
  --action-disabled:var(--jrney-bombay);

  --status-success:var(--jrney-green);
  --status-warning:var(--jrney-orange);
  --status-danger:var(--jrney-red);
  --status-online:var(--jrney-emerald);

  /* Banner grounds (TicketsBannerView) */
  --banner-flights:var(--jrney-pale-blue);
  --banner-hotels:var(--jrney-serenade);
  --banner-restaurants:var(--jrney-blush);
}

/* The app ships only one true theme mode: appPrimaryText flips in dark mode,
   every other colour is locked light/dark in the catalog. Kept scoped so a
   consumer can opt in with [data-theme="dark"]. */
[data-theme="dark"]{--text-primary:var(--jrney-primary-text-dark)}

/* JRNEY typography — Urbanist only, four weights in production use
   (Regular 400 / Medium 500 / SemiBold 600 / Bold 700). Sizes are the literal
   point values the SwiftUI views pass to `.urbanist(_:weight:)`. */
:root{
  --font-sans:"Urbanist","SF Pro Text",-apple-system,BlinkMacSystemFont,sans-serif; /* @kind font */
  --font-body:var(--font-sans); /* @kind font */

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */

  /* Size ramp — every value in the app, nothing invented */
  --fs-10:10px; /* @kind font */   /* tab bar label, weather day meta */
  --fs-12:12px; /* @kind font */   /* weather cell, small meta */
  --fs-13:13px; /* @kind font */   /* tag pill, collaborator count */
  --fs-14:14px; /* @kind font */   /* card subtitle, timestamps, secondary rows */
  --fs-15:15px; /* @kind font */   /* rating value, segmented tab label */
  --fs-16:16px; /* @kind font */   /* body + button label — the workhorse size */
  --fs-18:18px; /* @kind font */   /* row title, banner title, chat title */
  --fs-20:20px; /* @kind font */   /* section heading, screen title */
  --fs-24:24px; /* @kind font */   /* sheet title */
  --fs-28:28px; /* @kind font */   /* screen hero ("Let's discover the world!") */
  --fs-40:40px; /* @kind font */   /* single-day weather temperature */

  --lh-tight:1.1; /* @kind other */
  --lh-snug:1.25; /* @kind other */
  --lh-normal:1.4; /* @kind other */

  /* Named roles — what to reach for in product work */
  --type-hero:var(--fw-bold) var(--fs-28)/1.15 var(--font-sans); /* @kind font */
  --type-title:var(--fw-bold) var(--fs-20)/1.2 var(--font-sans); /* @kind font */
  --type-section:var(--fw-bold) var(--fs-20)/1.2 var(--font-sans); /* @kind font */
  --type-card-title:var(--fw-semibold) var(--fs-18)/1.25 var(--font-sans); /* @kind font */
  --type-body:var(--fw-medium) var(--fs-16)/1.4 var(--font-sans); /* @kind font */
  --type-body-strong:var(--fw-semibold) var(--fs-16)/1.4 var(--font-sans); /* @kind font */
  --type-label:var(--fw-semibold) var(--fs-16)/1.2 var(--font-sans); /* @kind font */
  --type-meta:var(--fw-medium) var(--fs-14)/1.35 var(--font-sans); /* @kind font */
  --type-tag:var(--fw-semibold) var(--fs-13)/1.2 var(--font-sans); /* @kind font */
  --type-tab:var(--fw-semibold) var(--fs-10)/1.2 var(--font-sans); /* @kind font */
}

/* JRNEY spacing, radii and control sizes — measured off the SwiftUI views.
   The screen gutter is 20 everywhere; card interiors use 11/12/16.
   Note the odd values (11, 23, 15, 29): they are the design, not mistakes. */
:root{
  --space-2:2px;
  --space-4:4px;
  --space-6:6px;
  --space-8:8px;
  --space-9:9px;   /* weather cell gap */
  --space-10:10px;
  --space-11:11px; /* compact feed row padding */
  --space-12:12px;
  --space-16:16px;
  --space-20:20px; /* screen gutter */
  --space-22:22px;
  --space-23:23px; /* itinerary row block gap */
  --space-24:24px;
  --space-28:28px; /* feed section gap */

  --gutter:var(--space-20);

  /* Radii */
  --radius-4:4px;    /* progress bar */
  --radius-12:12px;  /* chat bubble, prompt chip, CTA pill */
  --radius-15:15px;  /* PrimaryButton */
  --radius-16:16px;  /* option button, feed card, banner */
  --radius-24:24px;  /* trip row, activity card, image */
  --radius-29:29px;  /* fully rounded PrimaryButton variant */
  --radius-40:40px;  /* time badge */
  --radius-pill:999px;

  /* Control sizes */
  --control-h-primary:58px; /* @kind spacing */   /* PrimaryButton default height */
  --control-h-compact:44px; /* @kind spacing */   /* inline button / prompt chip / circle button */
  --control-h-tab:39px; /* @kind spacing */       /* TabButton */
  --control-h-send:40px; /* @kind spacing */      /* chat send button */
  --size-circle-button:44px; /* @kind spacing */
  --size-index-circle:32px; /* @kind spacing */
  --size-fab:56px; /* @kind spacing */
  --size-avatar:112px; /* @kind spacing */
  --size-thumb-row:108px; /* @kind spacing */     /* trip row + compact feed thumbnail */
  --icon-16:16px; /* @kind spacing */
  --icon-20:20px; /* @kind spacing */
  --icon-24:24px; /* @kind spacing */

  --fab-inset-trailing:20px; /* @kind spacing */
  --fab-inset-bottom:24px; /* @kind spacing */
}

/* JRNEY elevation, motion and the background patterns.
   Shadows are the exact SwiftUI `.shadow(color:radius:x:y:)` calls translated to
   CSS: SwiftUI's `radius` is roughly half a CSS blur, so blur = radius * 2. */
:root{
  /* dropShadow() — the house shadow, used on every feed card and prompt chip.
     .shadow(color: .cadetBlue.opacity(0.12), radius: 16, y: 6) */
  --shadow-card:0 6px 32px rgba(180,188,201,0.12);
  /* TripRowView / SectionCard row: black 8%, radius 20, y 4 */
  --shadow-row:0 4px 40px rgba(0,0,0,0.08);
  /* Itinerary activity card: black 8%, radius 16, y 6 */
  --shadow-activity:0 6px 32px rgba(0,0,0,0.08);
  /* WeatherView: black 20%, radius 20, y 6 */
  --shadow-weather:0 6px 40px rgba(0,0,0,0.2);
  /* Chat prompt chip: black 10%, radius 2, x 2, y 2 */
  --shadow-chip:2px 2px 4px rgba(0,0,0,0.1);
  /* FloatingPlusButton: appNavy 20%, radius 16, y 8 */
  --shadow-fab:0 8px 32px rgba(22,33,80,0.2);
  /* Chat composer bar: gallery 32–40%, radius 8, y -4 */
  --shadow-composer:0 -4px 16px rgba(235,235,235,0.4);

  /* Motion — the app uses SwiftUI defaults almost everywhere:
     .easeOut for loading/disabled cross-fades, .easeInOut 0.1s for press scale,
     .default (≈ easeInOut 0.35s) for layout and toggles. No bounces, no springs. */
  --ease-out:cubic-bezier(0,0,0.58,1); /* @kind other */
  --ease-in-out:cubic-bezier(0.42,0,0.58,1); /* @kind other */
  --dur-press:100ms; /* @kind other */      /* ScaleButtonStyle */
  --dur-default:350ms; /* @kind other */    /* SwiftUI .default */
  --dur-slow:500ms; /* @kind other */

  --press-scale:0.97; /* @kind other */     /* ScaleButtonStyle */
  --disabled-opacity:0.6; /* @kind other */ /* PrimaryButton disabled */
  --overlay-scrim:rgba(0,0,0,0.6); /* @kind other */ /* full-screen alert scrim */

  /* Background patterns (assets/patterns) — the chat screen is laid over
     BgPattern2 at aspectRatio .fill. Path is relative to css/, which puts it at
     /assets/patterns/ once this file is concatenated into css/jrney-*.css. */
  --pattern-chat:url("../assets/patterns/BgPattern2.svg"); /* @kind other */
}

/* Minimal global baseline. JRNEY is a native iOS product, so this is only what
   a web recreation needs to match it: Urbanist everywhere, white page, and the
   link colour so untouched anchors never render browser-blue. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);font-weight:var(--fw-medium);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--text-link);text-decoration:none;font-weight:var(--fw-semibold)}
a:hover{color:var(--jrney-royal-blue)}
button{font-family:inherit}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);font-weight:var(--fw-bold);letter-spacing:-0.01em}
p{margin:0;text-wrap:pretty}
img{display:block}
::selection{background:var(--jrney-pale-blue);color:var(--jrney-navy)}

/* Landing page styles — the <style> block from the design's
   `JRNEY Landing Page.html`, verbatim except:
     - url(assets/…) → url(../assets/…), because this now lives in css/ rather
       than inline in a page at the site root;
     - the .cta block at the end, which gives the anchor-based CTA the hover and
       press feedback the DS button drove from React handlers. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F3F7FC;font-family:var(--font-sans);color:var(--text-primary);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--jrney-navy)}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px;width:100%}
.sec{padding:clamp(64px,7vw,104px) 0}
.phone{width:calc(402px*var(--ph,1));height:calc(874px*var(--ph,1));flex:0 0 auto}
.phone-in{width:402px;height:874px;transform-origin:top left;transform:scale(var(--ph,1));border-radius:48px;overflow:hidden;position:relative;background:#fff;display:flex;flex-direction:column}
.lp-grey{background:#E8F0FA}
.lp-navy{background:var(--jrney-navy)}
.h1{margin:0;font:700 clamp(40px,5.2vw,68px)/1.04 var(--font-sans);letter-spacing:-.03em;color:var(--text-heading)}
.h2{margin:0;font:700 clamp(30px,3.4vw,46px)/1.1 var(--font-sans);letter-spacing:-.02em;color:var(--text-heading)}
.h3{margin:0;font:700 24px/1.25 var(--font-sans);letter-spacing:-.01em;color:var(--text-heading)}
.h4{margin:0;font:700 20px/1.25 var(--font-sans);color:var(--text-heading)}
.lead{margin:0;font:500 21px/1.5 var(--font-sans);color:var(--text-secondary);text-wrap:pretty}
.body{margin:0;font:500 17px/1.55 var(--font-sans);color:var(--text-secondary);text-wrap:pretty}
.light{color:var(--jrney-white)}
.lead.light{color:rgba(255,255,255,.8)}
.eyebrow{display:inline-block;padding:8px 16px;border-radius:999px;background:var(--surface-selected);font:600 15px/1.2 var(--font-sans);color:var(--text-link)}
.eyebrow.light{background:rgba(255,255,255,.12);color:#BFD6FF}
.lp-head{max-width:720px;display:flex;flex-direction:column;gap:16px;margin-bottom:44px}
.lp-head .eyebrow{align-self:flex-start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.mark{display:block;background-image:url(../assets/brand/logo2.png);background-repeat:no-repeat;background-position:center;background-size:auto calc(var(--mh)*4.683);height:var(--mh);width:calc(var(--mh)*4.04)}
.mark.on-navy{filter:brightness(0) invert(1)}
.lp-nav{position:sticky;top:0;z-index:100;background:rgba(243,247,252,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(22,33,80,.08)}
.lp-nav-in{display:flex;align-items:center;gap:40px;height:76px}
.lp-links{flex:1;display:flex;gap:32px}
.lp-links a{font:600 17px/1.2 var(--font-sans);color:var(--text-secondary)}
.lp-links a:hover{color:var(--jrney-navy)}
.lp-hero{position:relative;padding:40px 0 clamp(32px,5vw,64px);overflow:hidden}
.lp-hero-glow{position:absolute;top:-180px;right:-160px;width:900px;height:900px;border-radius:999px;background:radial-gradient(closest-side,#DBEAFB,rgba(219,234,251,0));pointer-events:none}
.lp-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}
.lp-hero-copy{display:flex;flex-direction:column;gap:22px;padding:24px 0}
.lp-hero-phone .phone{--ph:.86}
@media(max-width:1340px){.lp-hero-phone .phone{--ph:.74}}
@media(max-width:1160px){.lp-hero-phone .phone{--ph:.64}}
@media(max-width:1000px){.lp-hero-phone .phone{--ph:.56}}
.lp-hero-copy .eyebrow{align-self:flex-start}
.lp-hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:8px}
.lp-textlink{display:inline-flex;align-items:center;gap:8px;font:600 17px/1.2 var(--font-sans);color:var(--text-link)}
.lp-textlink.light{color:#BFD6FF}
.lp-textlink.light img{filter:brightness(0) invert(1)}
.lp-note{margin:0;font:500 16px/1.45 var(--font-sans);color:var(--text-tertiary)}
.lp-hero-phone{display:flex;justify-content:center}
.lp-strip{display:none}
.lp-step{display:flex;flex-direction:column;gap:14px;padding:32px;border-radius:24px;background:#fff;box-shadow:var(--shadow-card)}
.lp-index{width:44px;height:44px;border-radius:999px;background:var(--jrney-dark-blue);color:#fff;display:grid;place-items:center;font:700 18px/1 var(--font-sans);margin-bottom:6px}
.lp-feat-grid{gap:28px}
.lp-feat{display:flex;flex-direction:column;gap:14px;padding:20px 24px 32px;border-radius:24px;background:#fff;box-shadow:var(--shadow-card)}
.lp-feat-img{height:280px;border-radius:16px;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,#DCE9FA 0%,#EDF4FC 60%,#F3F7FC 100%);display:flex;align-items:flex-end;justify-content:center;padding:22px 22px 0;margin-bottom:6px}
.lp-feat-img img{width:auto;max-width:100%;height:100%;object-fit:contain;object-position:bottom center}
.lp-feat-img.pad{align-items:center;padding:22px}
.lp-feat-img.pad img{width:72%;height:auto}
.lp-earn{background:var(--jrney-navy)}
.lp-earn-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,64px);align-items:start}
.lp-earn-copy{display:flex;flex-direction:column;gap:18px}
.lp-earn-copy .eyebrow{align-self:flex-start}
.lp-earn-actions{margin-top:10px}
.lp-earn-steps{display:flex;flex-direction:column;gap:16px}
.lp-earn-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;padding:24px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.lp-earn-n{font:700 18px/1 var(--font-sans);color:#8FB4F5;padding-top:4px}
.lp-earn-txt{display:flex;flex-direction:column;gap:6px}
.lp-earn-txt .body{color:rgba(255,255,255,.72)}
.lp-ins{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,64px);align-items:start}
.lp-ins-copy{display:flex;flex-direction:column;gap:18px;position:sticky;top:108px}
.lp-ins-copy .eyebrow{align-self:flex-start}
.lp-ins-stats{display:grid;gap:16px;margin-top:8px}
.lp-ins-stat{display:flex;flex-direction:column;gap:4px;padding-left:18px;border-left:2px solid var(--surface-selected)}
.lp-ins-num{font:700 20px/1.2 var(--font-sans);color:var(--jrney-navy)}
.lp-ins-lab{font:500 16px/1.45 var(--font-sans);color:var(--text-secondary)}
.lp-ins-cards{display:flex;flex-direction:column;gap:20px}
.lp-ins-card{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:24px;background:#fff;box-shadow:var(--shadow-card)}
.lp-ins-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lp-ins-place{font:700 18px/1.25 var(--font-sans);color:var(--text-heading)}
.lp-ins-by{display:flex;align-items:center;gap:12px}
.lp-ins-by>span{display:flex;flex-direction:column;gap:2px}
.lp-ins-who{font:600 16px/1.3 var(--font-sans);color:var(--text-heading)}
.lp-ins-from{font:500 15px/1.35 var(--font-sans);color:var(--text-tertiary)}
.lp-anat{display:grid;grid-template-columns:402px minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.lp-anat-main{display:flex;flex-direction:column;gap:20px;width:402px;max-width:100%}
.lp-anat-cap{display:flex;flex-direction:column;gap:6px;padding-left:18px;border-left:2px solid var(--surface-selected)}
.lp-anat-side{display:flex;flex-direction:column;gap:20px}
.lp-piece{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:24px;background:#fff;box-shadow:var(--shadow-card)}
.lp-piece-fig{padding:16px;border-radius:16px;background:#F3F7FC;box-shadow:inset 0 0 0 1px rgba(22,33,80,.07)}
.lp-piece-txt{display:flex;flex-direction:column;gap:6px}
.lp-rail{display:flex;gap:clamp(16px,2.4vw,32px);justify-content:flex-start;width:max-content;margin-inline:auto;max-width:100%;padding:8px 40px 14px;overflow-x:auto}
.lp-rail .phone{--ph:.5}
@media(max-width:1300px){.lp-rail .phone{--ph:.42}}
@media(max-width:1120px){.lp-rail .phone{--ph:.36}}
@media(max-width:960px){.lp-rail{width:auto;margin-inline:0}.lp-rail .phone{--ph:.38}}
.lp-navy .lp-head{margin-bottom:44px}
.lp-navy.sec{padding-bottom:56px}
.lp-rail-item{margin:0;display:flex;flex-direction:column;gap:20px;flex:0 0 auto}
.lp-rail-item figcaption{display:flex;flex-direction:column;gap:4px}
.lp-rail-t{font:700 19px/1.25 var(--font-sans);color:#fff}
.lp-rail-d{font:500 15px/1.4 var(--font-sans);color:rgba(255,255,255,.72)}
.lp-tint{background:#E8F0FA}
.lp-vs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto repeat(6,auto);gap:24px;align-items:stretch}
.lp-vs-panel{grid-row:1/-1;display:grid;grid-template-rows:subgrid;row-gap:0}
.lp-vs-panel{border-radius:28px;padding:32px}
.lp-vs-panel.manual{background:rgba(255,255,255,.6);border:1px dashed rgba(22,33,80,.2)}
.lp-vs-panel.jrney{background:var(--jrney-navy);box-shadow:0 30px 70px rgba(22,33,80,.28)}
.lp-vs-head{display:flex;flex-direction:column;gap:6px;padding-bottom:20px;margin-bottom:8px;border-bottom:1px solid rgba(22,33,80,.12);min-height:76px}
.lp-vs-panel.jrney .lp-vs-head{border-bottom-color:rgba(255,255,255,.16)}
.lp-vs-title{font:700 22px/1.2 var(--font-sans);color:var(--text-muted)}
.lp-vs-sub{font:500 16px/1.35 var(--font-sans);color:var(--text-tertiary)}
.lp-vs-panel.jrney .lp-vs-sub{color:#9FC2FF}
.lp-vs-list{list-style:none;margin:0;padding:0;display:contents}
.lp-vs-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:16px 0}
.lp-vs-list li+li{border-top:1px solid rgba(22,33,80,.08)}
.lp-vs-panel.jrney .lp-vs-list li+li{border-top-color:rgba(255,255,255,.1)}
.lp-vs-mark{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:rgba(22,33,80,.07);flex:0 0 auto;margin-top:2px}
.lp-vs-mark .x{width:11px;height:11px;position:relative}
.lp-vs-mark .x::before,.lp-vs-mark .x::after{content:'';position:absolute;inset:5px -1px auto;height:1.6px;border-radius:2px;background:var(--text-tertiary)}
.lp-vs-mark .x::before{transform:rotate(45deg)}
.lp-vs-mark .x::after{transform:rotate(-45deg)}
.lp-vs-mark.check{background:rgba(255,255,255,.14)}
.lp-vs-mark.check img{filter:brightness(0) invert(1)}
.lp-vs-txt{display:flex;flex-direction:column;gap:4px}
.lp-vs-label{font:600 14px/1.2 var(--font-sans);letter-spacing:.02em;color:var(--text-tertiary)}
.lp-vs-panel.jrney .lp-vs-label{color:#8FB4F5}
.lp-vs-line{font:500 17px/1.45 var(--font-sans);color:var(--text-muted)}
.lp-vs-panel.jrney .lp-vs-line{font-weight:600;color:#fff}
.lp-table{border-radius:24px;overflow:hidden;background:var(--surface-page);box-shadow:var(--shadow-card)}
.lp-tr{display:grid;grid-template-columns:180px 1fr 1fr;align-items:center;gap:24px;padding:20px 28px;border-top:1px solid var(--divider)}
.lp-tr:first-child{border-top:0}
.lp-th{padding:22px 28px;background:var(--surface-page)}
.lp-th .lp-col-a,.lp-th .lp-col-b{font:var(--type-body-strong);color:var(--text-tertiary)}
.lp-rowlabel{font:var(--type-body-strong);color:var(--text-heading)}
.lp-col-a{font:500 16px/1.45 var(--font-sans);color:var(--text-muted)}
.lp-col-b{display:flex;align-items:flex-start;gap:10px;font:600 16px/1.45 var(--font-sans);color:var(--text-primary)}
.lp-quote{margin:0;display:flex;flex-direction:column;gap:16px;padding:32px;border-radius:24px;background:#fff;box-shadow:var(--shadow-card)}
.lp-quote .body{color:var(--text-primary);font-size:18px;line-height:1.5}
.lp-quote footer{display:flex;align-items:center;gap:12px;margin-top:auto}
.lp-quote footer>span{display:flex;flex-direction:column;gap:2px}
.lp-quote-n{font:600 17px/1.3 var(--font-sans);color:var(--text-heading)}
.lp-quote-r{font:500 15px/1.35 var(--font-sans);color:var(--text-tertiary)}
.lp-cta{background:var(--jrney-navy);padding:88px 0}
.lp-cta-in{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.lp-cta-in>div:first-child{display:flex;flex-direction:column;gap:14px;max-width:620px}
.lp-cta-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.lp-footer{background:var(--jrney-navy);padding:0 0 40px;border-top:1px solid rgba(255,255,255,.12)}
.lp-footer-in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-top:56px;padding-bottom:48px}
.lp-footer-brand{display:flex;flex-direction:column;gap:16px;max-width:320px}
.lp-footer-brand span{font:500 16px/1.5 var(--font-sans);color:rgba(255,255,255,.65)}
.lp-footer-col{display:flex;flex-direction:column;gap:12px}
.lp-footer-h{font:600 15px/1.2 var(--font-sans);color:rgba(255,255,255,.55)}
.lp-footer-col a{font:500 16px/1.5 var(--font-sans);color:rgba(255,255,255,.85)}
.lp-footer-col a:hover{color:#fff}
.lp-footer-base{display:flex;justify-content:space-between;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font:500 15px/1.4 var(--font-sans);color:rgba(255,255,255,.55)}
@media(max-width:1040px){
.lp-feat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:1000px){
.lp-earn-in{grid-template-columns:1fr;gap:32px}
.lp-ins{grid-template-columns:1fr;gap:36px}
.lp-ins-copy{position:static}
.lp-anat{grid-template-columns:1fr;gap:36px}
.lp-anat-main{width:100%;align-items:center}
.lp-anat-cap{align-self:stretch}
}
@media(max-width:900px){
.grid-3{grid-template-columns:1fr}
.lp-feat-grid{grid-template-columns:1fr 1fr}
.lp-hero-in{grid-template-columns:1fr;gap:8px}
.lp-hero-phone{justify-content:center}
.lp-hero-phone .phone{--ph:.8}
.lp-links{display:none}
}
@media(max-width:760px){
.wrap{padding:0 20px}
.lp-vs{grid-template-columns:1fr;grid-template-rows:none;gap:16px}
.lp-vs-panel{grid-row:auto;display:flex;flex-direction:column;padding:24px 20px}
.lp-vs-list{display:grid;gap:0}
.lp-vs-head{min-height:0}
.lp-vs-list li{min-height:0}
.grid-3,.lp-feat-grid{grid-template-columns:1fr}
.lp-points{grid-template-columns:1fr}
.lp-strip-in{grid-template-columns:1fr 1fr;padding:22px}
.lp-hero-copy{padding:12px 0}
.lp-hero-phone .phone{--ph:.74}
.lp-tr{grid-template-columns:1fr;gap:8px;padding:18px 20px}
.lp-th{display:none}
.lp-rowlabel{font:var(--type-tag);color:var(--text-link)}
.lp-footer-in{grid-template-columns:1fr 1fr;gap:32px}
.lp-rail{padding:8px 20px 0;justify-content:flex-start}
.lp-cta{padding:56px 0}
}
@media(max-width:420px){
.lp-hero-phone .phone{--ph:.62}
.lp-rail .phone{--ph:.5}
}

/* CTA anchors — see src/components/cta.jsx. The DS button drove press feedback
   from React onMouseDown/onMouseUp; this page ships no JS, so it lives here.
   Colour is set inline on the element, which outranks the `a:hover` rule above. */
.cta{text-decoration:none;transition:opacity var(--dur-default) var(--ease-out),transform var(--dur-press) var(--ease-in-out)}
.cta:hover{opacity:.92}
.cta:active{transform:scale(var(--press-scale))}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.cta{transition:none}
.cta:active{transform:none}
}