/* =====================================================================
   Sojourn Logbook — marketing site
   ---------------------------------------------------------------------
   Tokens and section rhythm come from C:\Claude\Sojourn\marketing\SITE_STYLE.md,
   the shared system across sojourn.tax, sojourn-group.com and this site. Keep
   them identical — the navy trio in particular is the same on every Sojourn
   site and must not drift.

   CACHE-BUST: every page links this as style.css?v=YYYYMMDDx. Bump the version
   on EVERY change here or warm-cache visitors keep the old file. This has bitten
   the tax site before (see the marketing-site-css-cache-bust memory).
   ===================================================================== */

:root {
  /* Core navy — the brand ground. Identical on every Sojourn site. */
  --navy:            #042C53;
  --navy-highlight:  #0A3868;   /* lighter navy, only inside the hero gradient */
  --navy-dark:       #03152B;   /* the DARKER navy — accent bands + footer     */

  --white:           #FFFFFF;
  --cream:           #F1EFE8;

  --lightblue-100:   #B5D4F4;   /* body text on navy      */
  --lightblue-200:   #85B7EB;   /* secondary / italic     */
  --mid-grey:        #5A7A9E;   /* eyebrows, captions     */

  /* Logbook's accent. 6.24:1 on --navy (passes AA).
     Deep violet #6D28D9 scored 1.98:1 and is DEAD — do not reinstate it or any
     similarly dark hue. The descriptor sits ON midnight, so the accent must be
     a light tint. Settled by Pierre, 2026-07-18. ONE accent value only — the
     arc in the lockup only reads lighter because it is a thin anti-aliased
     curve, not because it carries a second colour. */
  --accent:          #38B6FF;
  /* Recommendation badge ONLY. Deliberately not a second brand accent — the
     brand is midnight + #38B6FF, and this green must not spread beyond the
     "Best value" pill. navy-dark on it = 10.52:1. */
  --good:            #4ADE80;
  --accent-deep:     #0E6BA8;   /* accent darkened for text ON light grounds   */

  /* Sibling product accents — used ONLY on the Tax bundle page, and never lit
     at the same time as --accent in one viewport (four bright accents on one
     dark screen reads as a toy). */
  --tax-ink:         #FF5F50;   /* lightened tax red, 4.72:1 — the logo red
                                   #E30F01 is 2.91:1 and fails on navy        */

  --font-serif: "Tinos", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 1180px;
  --hairline: 1px solid rgba(255, 255, 255, 0.14);
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--lightblue-100);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--white);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.15rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.16rem, 2vw, 1.42rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--white); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--navy-dark);
  padding: 12px 20px; font-weight: 600; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */

.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 820px; }

/* The navy / navy-dark MIX. A page reads dark -> navy -> dark -> navy -> dark,
   never one flat tone. This is the single most-corrected detail in the shared
   system, so the rhythm lives in these classes rather than being hand-applied. */
.band            { padding: clamp(64px, 8.5vw, 108px) 0; background: var(--navy); }
.band--dark      { background: var(--navy-dark); border-top: var(--hairline); border-bottom: var(--hairline); }
.band--cream     { background: var(--cream); color: #33413C; }
.band--cream h1,
.band--cream h2,
.band--cream h3  { color: var(--navy); }
.band--cream a   { color: var(--accent-deep); }
.band--tight     { padding: clamp(44px, 5vw, 68px) 0; }

/* ---------- masthead ---------- */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(3, 21, 43, 0.88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: var(--hairline);
}
.masthead__inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 70px;
}

/* Size the lockup by HEIGHT, never width.
   assets/logo-logbook.svg was exported on a square 810x810 canvas with the
   artwork occupying only the middle 424x175 — 78% of its height was empty. The
   file's viewBox is now cropped to the artwork (aspect ~2.36:1, matching the tax
   site's 78x34 mark), but sizing by height keeps the bar's height explicit and
   immune to any future re-export. */
.masthead__logo { display: inline-flex; align-items: center; flex: none; }
.masthead__logo img { height: 40px; width: auto; display: block; }

.masthead__nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 24px;
  font-size: 14px;
}
.masthead__nav a { color: var(--lightblue-100); text-decoration: none; white-space: nowrap; }
.masthead__nav a:hover,
.masthead__nav a[aria-current="page"] { color: var(--white); }
.masthead__nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* CTA pill — the masthead counterpart to the tax site's "Get Sojourn →".
   Navy-dark on accent is 8.12:1. */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 20px; border-radius: 999px;
  background: var(--accent); color: var(--navy-dark) !important;
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .2s ease;
}
.btn-pill:hover { background: var(--white); color: var(--navy-dark) !important; }
.masthead__cta { flex: none; }

/* Hamburger. Hidden on desktop; the three bars morph into a cross when open. */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px; padding: 0;
  background: transparent; cursor: pointer;
  border: 1px solid rgba(255,255,255,.2); border-radius: 9px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--lightblue-100);
  transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The CTA appears twice in the markup: once inside <nav> for the mobile drawer,
   once outside it for the desktop bar. Exactly one is ever visible. */
.masthead__nav .nav-cta { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .masthead__cta { display: none; }
  .masthead__nav .nav-cta { display: inline-flex; align-self: flex-start; margin-top: 6px; }

  /* Drawer. Collapsed by max-height rather than display:none so it animates and
     stays in the accessibility tree only when open (hidden via [hidden]). */
  .masthead__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 4px;
    margin: 0; padding: 14px 24px 22px;
    background: var(--navy-dark);
    border-bottom: var(--hairline);
    font-size: 16px;
  }
  .masthead__nav[hidden] { display: none; }
  .masthead__nav a { padding: 11px 0; }
  .masthead { position: sticky; }
}

/* ---------- hero ---------- */

.hero {
  background: linear-gradient(135deg, var(--navy-highlight) 0%, var(--navy) 60%, var(--navy-dark) 100%);
  padding: clamp(64px, 9vw, 128px) 0 clamp(56px, 7vw, 100px);
}
.hero__lede {
  font-size: clamp(1.06rem, 1.9vw, 1.28rem);
  color: var(--lightblue-100);
  max-width: 43ch;
}
.hero--page { padding: clamp(56px, 7vw, 92px) 0 clamp(44px, 5vw, 68px); }

/* Hero proof line. Sits between the lede and the waitlist form: verification in
   the hero where the settled positioning says it belongs, plus the CV claim. */
.hero__proof {
  margin-top: 18px;
  max-width: 46ch;
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  /* W17(a): was var(--accent) — the same blue as links, so it read as
     clickable but wasn't. Marketing asked for secondary text rather than
     white; --lightblue-100 is the body-copy tone (9.18:1 on navy), so the
     line reads as emphasis without impersonating a link. */
  color: var(--lightblue-100);
}


.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.eyebrow--quiet { color: var(--mid-grey); }

.caption { font-size: 13.5px; color: var(--mid-grey); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px;
  font-family: var(--font-sans); font-size: 15.5px; font-weight: 600;
  border-radius: 10px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
/* Navy text on the accent — 6.24:1, the same pair as accent-on-navy. */
.btn--primary { background: var(--accent); color: var(--navy-dark); }
.btn--primary:hover { background: var(--white); color: var(--navy-dark); }
.btn--ghost { border-color: rgba(255,255,255,.28); color: var(--white); background: transparent; }
.btn--ghost:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.05); color: var(--white); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- waitlist form ---------- */

.waitlist { max-width: 520px; }
.waitlist__row { display: flex; gap: 10px; flex-wrap: wrap; }
.waitlist input[type="email"] {
  flex: 1 1 260px; min-width: 0;
  padding: 14px 16px;
  font-family: var(--font-sans); font-size: 15.5px;
  color: var(--white);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 10px;
}
.waitlist input[type="email"]::placeholder { color: #7E9CBE; }
.waitlist input[type="email"]:focus { border-color: var(--accent); background: rgba(255,255,255,.1); }
/* Crew-role capture. Optional on purpose — it measures cabin-crew demand before
   we build for it (GTM §7) without adding a required field to the primary CTA. */
.waitlist__role {
  margin-top: 10px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--mid-grey);
}
.waitlist__role select {
  font-family: var(--font-sans); font-size: 14px;
  color: var(--white);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px; padding: 8px 12px;
}
.waitlist__role select option { color: #0b1c30; background: #fff; }
.waitlist__role select:focus { border-color: var(--accent); }

.waitlist__note { font-size: 13px; color: var(--mid-grey); margin: 12px 0 0; }
.waitlist__msg { font-size: 14.5px; margin: 12px 0 0; min-height: 1.3em; }
.waitlist__msg[data-state="ok"] { color: var(--accent); }
.waitlist__msg[data-state="err"] { color: var(--tax-ink); }

/* ---------- cards & grids ---------- */

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 26px 24px;
}
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card__num {
  font-family: var(--font-serif); font-size: 2rem; color: var(--accent);
  line-height: 1; display: block; margin-bottom: 10px;
}

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data {
  width: 100%; border-collapse: collapse;
  font-size: 14.5px; text-align: left;
  min-width: 640px;
}
table.data caption {
  text-align: left; font-size: 13.5px; color: var(--mid-grey);
  padding-bottom: 14px;
}
table.data th, table.data td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(255,255,255,.11);
  vertical-align: top;
}
table.data thead th {
  font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--mid-grey); font-weight: 600;
  border-bottom-color: rgba(255,255,255,.26);
  white-space: nowrap;
}
table.data tbody th { color: var(--white); font-weight: 600; white-space: nowrap; }
.band--cream table.data th,
.band--cream table.data td { border-bottom-color: rgba(4,44,83,.14); }
.band--cream table.data thead th { color: #5E6B78; border-bottom-color: rgba(4,44,83,.3); }
.band--cream table.data tbody th { color: var(--navy); }

/* Status pills for the authority table. Deliberately NOT four bright colours —
   the accent marks shipping-at-launch, everything else is quiet grey, so the
   table reads as a roadmap rather than a Christmas tree. */
.pill {
  display: inline-block; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid currentColor;
}
.pill--launch { color: var(--accent); }
.pill--next   { color: var(--lightblue-200); }
.pill--later  { color: var(--mid-grey); }

/* Verification state. The PROCESS is the differentiator, not the count — so the
   accent marks "verified against primary legislation", and everything still being
   checked stays visibly on the page rather than being hidden. Hiding the
   in-progress ones would break the very claim the page is making. */
.pill--verified { color: var(--accent); }
.pill--partial  { color: var(--lightblue-200); }
.pill--checking { color: var(--mid-grey); }

/* ---------- concept-render framing ----------
   Every app visual on this site is a CONCEPT RENDER. Sojourn Logbook does not
   exist yet. This frame + its caption are the honesty mechanism carried over
   from the group hub — do not strip the "Concept" caption or the
   "In development" tag from any section that uses one. Presenting a mockup as a
   live screenshot would be a false claim about a product we have not built. */
.concept { margin: 0; }
.concept__frame {
  background: var(--navy-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 20px;
}
.concept figcaption {
  margin-top: 12px;
  font-size: 12.5px; color: var(--mid-grey);
  display: flex; align-items: center; gap: 8px;
}
.concept figcaption::before {
  content: "Concept";
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--navy-dark); background: var(--lightblue-200);
  padding: 3px 8px; border-radius: 4px; flex: none;
}

/* Sample-document figures (the report renders). Deliberately NOT .concept —
   the W15/W14 handoff (2026-07-30) bans the "Concept" treatment for these:
   every figure in them is real engine output over a fictional persona, and
   "Concept" would undersell computed numbers as a mock-up. The chip reads
   "Sample"; the caption carries the fiction disclosure + "in development". */
.sample { margin: 0; }
.sample__page {
  display: block; width: 100%; height: auto;
  border-radius: 6px;
  border: 1px solid rgba(4,44,83,.18);
  box-shadow: 0 12px 34px rgba(3,15,32,.22);
}
.sample figcaption {
  margin-top: 12px;
  font-size: 12.5px; color: var(--mid-grey);
  display: flex; align-items: flex-start; gap: 8px;
}
.sample figcaption::before {
  content: "Sample";
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--navy-dark); background: var(--lightblue-200);
  padding: 3px 8px; border-radius: 4px; flex: none;
}
/* On the cream band the default caption grey is tuned for navy; reuse the
   cream table's ink instead. */
.band--cream .sample figcaption { color: #5E6B78; }
.sample__dl { font-size: 13px; margin-top: 8px; }
.band--cream .sample__dl a { color: var(--accent-deep); }

/* W14: hero text left, Career Summary detail right. Stacks under the form on
   narrow screens — the proof line deserves its payoff on mobile too. */
.hero__grid { display: grid; gap: 46px; align-items: center; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }

/* Hero carousel (Pierre, 2026-07-30): BOTH career summaries — pilot and cabin
   crew — as a sideways two-page wheel. Scroll-snap, one slide per view; the
   two crops are cut to identical pixel dimensions so the height cannot jump
   at the snap point. Titles double as tabs: they show which page you are on
   AND scroll there on click/keys (wired in script.js). */
.sample-carousel {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;            /* the titles are the indicator */
  -webkit-overflow-scrolling: touch;
  border-radius: 6px;
}
.sample-carousel::-webkit-scrollbar { display: none; }
.sample-carousel__slide { flex: 0 0 100%; scroll-snap-align: center; }
/* Phone-screen variant (W19): portrait 780x1688 shots would fill the column
   at silly size — cap the wheel at phone width and centre it. (Pierre saw the
   uncapped version through a stale cached stylesheet — bump ?v= with EVERY
   style.css change or returning visitors keep old layout for days.) */
.sample-carousel--phone { max-width: 340px; margin: 0 auto; }
.sample-carousel--phone + figcaption { max-width: 340px; margin-left: auto; margin-right: auto; }
/* The app screens are dark-on-dark: the default .sample__page border is a
   navy tint (built for white A4 pages, which separate themselves). Give the
   phone shots a visible light frame + device-corner radius so the screen edge
   reads against the band (Pierre, 2026-07-30). */
.sample__phone {
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

.sample-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; justify-content: center; }
/* Hero tabs sit over the left-aligned text column; keep those left-aligned. */
.hero .sample-tabs { justify-content: flex-start; }
.sample-tabs button {
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .3px;
  color: var(--lightblue-100);
  background: none; border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 5px 14px; cursor: pointer;
}
.sample-tabs button[aria-selected="true"] {
  color: var(--navy-dark); background: var(--lightblue-100);
  border-color: var(--lightblue-100);
}

.tag-dev {
  display: inline-block; margin-left: 12px; vertical-align: middle;
  font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--lightblue-200);
  border: 1px solid currentColor; border-radius: 999px;
  padding: 4px 11px;
}

/* ---------- pricing ---------- */

/* 240px min, not 270: Free is a fourth CARD (Pierre, 2026-07-30 — "restore
   the card, it makes it more obvious"), and at 270 a 1280px viewport wraps
   four cards 3+1, stranding the featured Tax Bundle alone on its own row.
   240 gives 4-up on desktop, 2x2 on tablet, 1-col on phones. */
.price-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: start; }
.price {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px; padding: 30px 26px;
  display: flex; flex-direction: column; height: 100%;
  /* Anchors the corner badge. "Best value" used to sit IN the flow and push the
     featured card's title and price down, so the three prices never sat on one
     line. Taking it out of flow aligns them. */
  position: relative;
}
.price--featured { border-color: var(--accent); border-width: 2px; }
/* Upper-right corner, out of flow. Green rather than the brand blue so it reads
   as a recommendation instead of more chrome, and cannot be mistaken for a
   second brand accent. #4ADE80 carries navy-dark text at 10.52:1 and sits at
   8.09:1 against the card; both pairs are enforced in check-site.py. */
.price__badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--navy-dark); background: var(--good);
  padding: 4px 11px; border-radius: 999px;
}
/* Stops a long tier name running under the badge. */
.price--featured h3 { padding-right: 92px; }
.price__amount { font-family: var(--font-serif); font-size: 2.5rem; color: var(--white); line-height: 1; margin: 6px 0 4px; }
.price__per { font-size: 14px; color: var(--mid-grey); }

/* W20(1): who-the-card-is-for, directly under the price. Free and Starter Pro
   are both free and adjacent; this one line is what stops them reading as a
   pricing mistake (Free = capped by usage, Starter Pro = by career stage). */
.price__who {
  margin-top: 10px;
  font-size: 13.5px; font-weight: 500;
  color: var(--lightblue-100);
}

/* W20(4): 2x2 on small screens instead of a four-card stack — a shorter
   section, and it keeps Free and Starter Pro side by side so the eligibility
   contrast is visible in one glance. Tighter padding so ~170px columns hold. */
@media (max-width: 640px) {
  .price-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .price { padding: 18px 14px; }
  .price--featured h3 { padding-right: 0; }
  .price__badge { position: static; display: inline-block; margin-bottom: 10px; }
}
.price ul { list-style: none; padding: 0; margin: 20px 0 0; font-size: 15px; }
.price li { padding-left: 26px; position: relative; margin-bottom: 11px; }
.price li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--accent);
}

/* ---------- per-authority pages ---------- */

/* A rule and the clause it came from, together. The citation is the whole point
   of these pages: an answer engine paraphrases an unsourced claim but cites a
   sourced one. Never render a rule here without its clause. */
.rule {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.rule:first-of-type { border-top: 1px solid rgba(255,255,255,.11); }
.rule h3 { margin-bottom: .35em; }
.rule p { margin: 0; max-width: 72ch; }
/* An authority we have NOT verified still gets a page — but every rule on it
   carries the tag, so the status is visible at the rule, not just in a callout
   at the top the reader may have scrolled past. #85B7EB = 6.69:1 on navy. */
/* Authority tile: name/country left, flag right. Flags are SVG via <use> from
   an inlined sprite — NEVER emoji. Flag emoji have no glyph on Windows or
   Android and degrade silently to the bare letters ("NL"), which is exactly the
   bug the app hit with react-native flags. See CLAUDE.md, iconography rule. */
.authcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.authcard__txt { min-width: 0; }
.flag {
  width: 30px;
  height: 20px;
  flex: none;
  border-radius: 2px;
  /* A hairline ring, not decoration: Canada, Singapore and Qatar are mostly
     white and would otherwise bleed into the navy card with no edge. */
  box-shadow: 0 0 0 1px rgba(255,255,255,.22);
}
@media (max-width: 420px) { .flag { width: 26px; height: 17px; } }
.rule--unconfirmed h3::after {
  content: "Unconfirmed";
  display: inline-block;
  margin-left: .6em;
  padding: .12em .5em;
  border: 1px solid rgba(133,183,235,.4);
  border-radius: 3px;
  color: #85B7EB;
  font-size: .62em;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.rule__cite {
  display: inline-block;
  color: var(--mid-grey);
  font-size: .88em;
  font-style: italic;
}

.qa {
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.qa:first-of-type { border-top: 1px solid rgba(255,255,255,.11); }
.qa h3 { margin-bottom: .4em; color: var(--white); }
.qa p { margin: 0; max-width: 74ch; }

/* ---------- prose (legal pages) ---------- */

.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.prose li { margin-bottom: .5em; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em; background: rgba(255,255,255,.08);
  padding: 2px 6px; border-radius: 4px;
}
.prose__updated { font-size: 13.5px; color: var(--mid-grey); }

.callout {
  border-left: 3px solid var(--accent);
  background: rgba(56,182,255,.07);
  padding: 18px 22px; margin: 0 0 1.4em;
  border-radius: 0 8px 8px 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */

.footer { background: var(--navy-dark); padding: 62px 0 42px; border-top: var(--hairline); }
/* Single column by default, widening at 900px.
   NOT `minmax(220px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr))` — an explicit
   track cannot wrap, so on a 374px-wide viewport that forced a 220px column plus
   a 150px column and pushed the footer ~54px past the right edge. The `min(100%,
   190px)` floor is what lets the tracks collapse to one on narrow screens. */
.footer__grid {
  display: grid; gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .footer__brand { grid-column: auto; }
}
.footer__logo img { width: 176px; display: block; margin-bottom: 16px; }
.footer h4 {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--mid-grey);
  margin: 0 0 14px;
}
.footer ul { list-style: none; padding: 0; margin: 0; font-size: 14.5px; }
.footer li { margin-bottom: 9px; }
.footer a { color: var(--lightblue-100); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }

/* Shared footer social treatment — 42px rounded-square bordered buttons, not
   bare glyphs. Identical on sojourn.tax and sojourn-group.com. Only ever link a
   channel that is actually LIVE: TikTok and LinkedIn are deliberately absent
   because those accounts do not exist yet (a dead link to an unclaimed profile
   is worse than no link). */
.footer-socials { display: flex; gap: 12px; margin-top: 4px; }
.footer-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--lightblue-100);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.footer-socials a:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.05);
}
.footer-socials svg { width: 18px; height: 18px; fill: currentColor; display: block; }

.footer__base {
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center;
  font-size: 13.5px; color: var(--mid-grey);
}
.footer__base p { margin: 0; }

/* ---------- reveal-on-scroll (progressive; visible without JS) ---------- */

.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}