/* 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)}

/* Contact page styles — the <style> block from the design's `JRNEY Contact.html`,
   verbatim except url(assets/…) → url(../assets/…), since this now lives in css/
   rather than inline in a page at the site root.

   Rules the design's block carries that this page's markup never renders are left
   out: the creator-form leftovers (.cf-prefix, .cf-progress, .cf-step, .cf-switch*,
   .cf-quote*, .cf-earn-list, .cf-earn-row) and two .ct-* rules the design's own JSX
   did not render either (.ct-sla, .ct-where). .cf-earn-t / .cf-earn-d stay — the
   route list and the email card use both.

   One change to a kept rule: .ct-route-top is align-items:center rather than the
   design's baseline, because each route now leads with a 20px icon and baseline
   would hang it off the text baseline. */
*{box-sizing:border-box}
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)}
input,textarea,button{font-family:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px;width:100%}
.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)}
.h1{margin:0;font:700 clamp(34px,3.6vw,46px)/1.08 var(--font-sans);letter-spacing:-.025em;color:var(--text-heading)}
.h3{margin:0;font:700 24px/1.25 var(--font-sans);letter-spacing:-.01em;color:var(--text-heading)}
.lead{margin:0;font:500 19px/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}
.eyebrow{display:inline-block;align-self:flex-start;padding:8px 16px;border-radius:999px;background:var(--surface-selected);font:600 15px/1.2 var(--font-sans);color:var(--text-link)}
.cf-nav{background:rgba(243,247,252,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(22,33,80,.08);position:sticky;top:0;z-index:50}
.cf-nav-in{display:flex;align-items:center;justify-content:space-between;height:76px}
.cf-nav-link{font:600 17px/1.2 var(--font-sans);color:var(--text-secondary)}
.cf-main{padding:clamp(40px,5vw,72px) 0 clamp(64px,7vw,96px)}
.cf-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,4vw,64px);align-items:start}
.cf-aside{display:flex;flex-direction:column;gap:28px;position:sticky;top:108px}
.cf-aside-copy{display:flex;flex-direction:column;gap:16px}
.cf-earn-t{font:600 17px/1.3 var(--font-sans);color:var(--text-heading)}
.cf-earn-d{font:500 15px/1.4 var(--font-sans);color:var(--text-tertiary)}
.cf-back{display:inline-flex;align-items:center;gap:8px;font:600 16px/1.2 var(--font-sans)}
.cf-card{display:flex;flex-direction:column;gap:32px;padding:clamp(28px,3vw,40px);border-radius:28px;background:#fff;box-shadow:0 30px 70px rgba(22,33,80,.12)}
.cf-card-head{display:flex;flex-direction:column;gap:20px;padding-bottom:28px;border-bottom:1px solid rgba(22,33,80,.1)}
.cf-card-title{display:flex;flex-direction:column;gap:8px}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cf-field{display:flex;flex-direction:column;gap:8px}
.cf-field.span{grid-column:1/-1}
.cf-label{font:600 16px/1.3 var(--font-sans);color:var(--text-heading)}
.cf-hint{font:500 15px/1.4 var(--font-sans);color:var(--text-tertiary)}
.cf-input{display:flex;align-items:center;gap:6px;min-height:56px;padding:0 18px;border-radius:16px;background:var(--surface-subtle);border:2px solid transparent;transition:border-color .15s,background .15s}
.cf-input:focus-within{border-color:var(--border-selected);background:var(--surface-selected)}
.cf-input.area{padding:16px 18px;align-items:flex-start}
.cf-input input,.cf-input textarea{flex:1;width:100%;border:0;background:transparent;outline:none;font:500 17px/1.45 var(--font-sans);color:var(--text-primary);resize:none}
.cf-input input::placeholder,.cf-input textarea::placeholder{color:var(--text-placeholder)}
.cf-block{display:flex;flex-direction:column;gap:12px}
.cf-options{display:flex;flex-wrap:wrap;gap:10px}
.cf-options>*{flex:0 0 auto;width:auto;align-self:flex-start}
.cf-submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:28px;border-top:1px solid rgba(22,33,80,.1)}
.cf-note{font:500 15px/1.4 var(--font-sans);color:var(--text-tertiary)}
.ct-routes{display:flex;flex-direction:column;gap:2px}
.ct-route{display:flex;flex-direction:column;gap:6px;padding:20px 0}
.ct-route+.ct-route{border-top:1px solid rgba(22,33,80,.1)}
.ct-route-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ct-route-d{margin:0;font:500 16px/1.45 var(--font-sans);color:var(--text-secondary)}
.ct-one-mail{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:20px;background:#fff;box-shadow:var(--shadow-card)}
.ct-one-mail .ct-mail{font-size:18px}
.ct-mail{display:inline-flex;align-items:center;gap:8px;font:600 16px/1.3 var(--font-sans);align-self:flex-start}
/* --- form plumbing (not in the design: submission, verification, states) --- */

/* Honeypot. Kept in the layout but off-screen — display:none is the one thing
   the better bots check for. */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cf-verify{min-height:65px}
.cf-turnstile-slot{display:flex}
.cf-error{margin:0;padding:12px 16px;border-radius:12px;background:var(--jrney-overlap);font:500 16px/1.45 var(--font-sans);color:var(--status-warning)}

/* Confirmation, replacing the form once it has been sent. */
.cf-done{align-items:flex-start;gap:16px;text-align:left}
.cf-done .body{color:var(--text-secondary)}
.cf-done .cf-back{margin-top:8px}

@media(max-width:1000px){
.cf-layout{grid-template-columns:1fr;gap:40px}
.cf-aside{position:static}
}
@media(max-width:640px){
.wrap{padding:0 20px}
.cf-grid{grid-template-columns:1fr}
.cf-card{padding:24px 20px;border-radius:24px}
}