/* Your Cruise Person - shared styles for inner pages. Extracted from index.html (Deck palette) 16 Sep 2026 by Claude (AI). Homepage variants keep inline CSS so layout tests stay isolated. */
:root{
  /* --- Deck, verbatim --- */
  --paper:#F4F7FA;        /* page background            */
  --ink:#14213C;          /* body text, rings, footer   */
  --ink-2:#41506B;        /* secondary copy             */
  --ink-3:#5F6B84;        /* tertiary copy, captions    */
  --sea:#1D6E96;          /* links, small headings, stats, CTA card */
  --sky:#CBE1F4;          /* soft fills, calm panels    */
  --soft-blue:#68B1D2;    /* supporting fills only      */
  --coral:#E4795E;        /* buttons, and only buttons  */

  /* --- derived, not new colours ---
     --coral-hover is coral LIGHTENED for the button hover state, not
     darkened. Button text is navy, so darkening the fill lowers the
     contrast: a darkened hover measured 4.37:1 and failed AA at the
     button's 16px bold. Lightened, it reads as a lift and measures
     6.25:1.
     Deck's sea already clears AA for small text on paper (5.25:1), so
     unlike the palette this file used to carry there is no separate
     darkened link shade: --sea does both jobs. */
  --coral-hover:#EA8770;

  --surface:#FFFFFF;
  --line:rgba(20,33,60,.14);         /* navy hairline, Deck --hair */
  --line-2:rgba(20,33,60,.09);
  --shadow:0 1px 2px rgba(20,33,60,.05),0 12px 32px -12px rgba(20,33,60,.16);
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--sea)}
/* Fraunces 600 for headings, never below 20px. Anything smaller
   that looks like a heading is DM Sans 700 with letterspacing. */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0;font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 96}
p{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:12px;top:12px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(244,247,250,.9);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line-2)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:70px}
/* Wordmark is a text lockup by design. A logo file drops into .mark-slot
   later with zero layout rework. See handoff section 10. The disc is
   sky, standing in for the photo avatar in its navy ring. */
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.mark-slot{width:30px;height:30px;border-radius:50%;background:var(--sky);display:grid;place-items:center;color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:700;line-height:1}
.mark-txt{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-.01em}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:15px;color:var(--ink-2);text-decoration:none}
.nav a:hover{color:var(--sea)}
/* Deliberately NOT coral. The email form button is the one
   coral thing above the fold and nothing may compete with it. */
.nav .btn-sm{padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14.5px}
.nav .btn-sm:hover{background:var(--sea);color:#fff}
@media(max-width:820px){.nav a:not(.btn-sm){display:none}}

/* ---------- hero ---------- */
.hero{padding:76px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}
.eyebrow{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--sea);font-weight:700;margin-bottom:18px}
h1{font-size:clamp(2.15rem,4.6vw,3.35rem)}
.hero-sub{margin-top:20px;font-size:1.15rem;color:var(--ink-2);max-width:34em}
/* MOBILE HERO COLLAPSE. Added 31 Aug 2026. Without this the hero grid
   kept two columns at every width: the photo hung off the right edge,
   the page scrolled sideways, and the email button sat about two
   screens down. Social traffic is almost entirely mobile, so this was
   the single most expensive bug on the page. Photo sits BELOW the form
   on small screens, never above it. */
@media(max-width:820px){
  .hero{padding:44px 0 40px}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-photo{max-width:420px;margin:0 auto;width:100%}
  .offer{max-width:none}
}
@media(max-width:520px){
  .mark-txt{font-size:17px}
  .nav .btn-sm{padding:8px 14px;font-size:13.5px}
  .head-in{height:62px;gap:12px}
}

/* ---------- email offer ---------- */
.offer{margin-top:34px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow);max-width:520px}
.offer-name{font-family:var(--serif);font-weight:600;font-size:1.28rem;line-height:1.25}
.offer-note{margin-top:8px;font-size:15px;color:var(--ink-3)}
.form{display:flex;gap:10px;margin-top:18px}
.form input{flex:1;min-width:0;font:inherit;font-size:16px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.form input::placeholder{color:var(--ink-3)}
.form input:focus{outline:2px solid var(--sea);outline-offset:1px;background:#fff}
.btn{font:inherit;font-weight:700;font-size:16px;padding:14px 22px;border:0;border-radius:10px;background:var(--coral);color:var(--ink);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--coral-hover)}
.form-fine{margin-top:12px;font-size:13.5px;color:var(--ink-3)}
.form-ok{display:none;margin-top:16px;padding:14px 16px;border-radius:10px;background:rgba(104,177,210,.18);color:var(--sea);font-size:15px}
@media(max-width:520px){.form{flex-direction:column}}

/* ---------- placeholder photo blocks ---------- */
.ph{
  position:relative;border:2px dashed rgba(29,110,150,.38);border-radius:14px;
  background:repeating-linear-gradient(45deg,rgba(203,225,244,.38) 0 12px,transparent 12px 24px);
  display:grid;place-items:center;text-align:center;padding:22px;color:var(--sea);
}
.ph b{display:block;font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.ph span{display:block;margin-top:8px;font-size:14px;color:var(--ink-2);max-width:30ch;line-height:1.45}
.ph em{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-3);font-style:normal}
.hero-photo{aspect-ratio:4/5}

/* ---------- parity strip ----------
   Was a near-black band, then a soft peach panel. Now a sky panel:
   same page background either side of it, one calm block on top.
   Deck has no peach, and the one warm token is reserved for buttons. */
.strip{background:var(--sky);color:var(--ink);padding:52px 0}
.strip-in{max-width:860px;margin:0 auto;text-align:center}
.strip p{font-family:var(--serif);font-weight:600;font-size:clamp(1.35rem,2.7vw,1.85rem);line-height:1.35;color:var(--ink)}
.strip small{display:block;margin-top:16px;font-size:14.5px;color:rgba(20,33,60,.72);font-family:var(--sans);line-height:1.55}

/* ---------- sections ---------- */
section{scroll-margin-top:80px}
.band{padding:76px 0}
.band-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
h2{font-size:clamp(1.6rem,3.1vw,2.15rem)}
/* the section-heading rule. Sea, not sky: at 3px it has to read. */
.band-h h2::after{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--sea);margin-top:14px}
.band-h p{color:var(--ink-3);font-size:15.5px;max-width:44ch;margin-top:12px}
.more{font-size:15px;font-weight:700;text-decoration:none;color:var(--sea);white-space:nowrap}
.more:hover{text-decoration:underline}

/* ---------- video grid: thumbnails that LINK OUT, never embeds ---------- */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.vids{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.vids{grid-template-columns:1fr}}
.vid{display:block;text-decoration:none;color:inherit}
.vid .ph{aspect-ratio:9/13}
.vid-meta{margin-top:10px;font-size:14.5px;color:var(--ink-2);line-height:1.4}
.vid-plat{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.play{width:42px;height:42px;border-radius:50%;background:rgba(104,177,210,.28);display:grid;place-items:center;margin-bottom:10px}
.play::after{content:"";border-left:12px solid var(--sea);border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;margin-left:3px}

/* ---------- free tool row ----------
   Deliberately quiet. It sits between the videos and the proof
   block, and it must not read as a second offer: no coral, no
   button, one sea text link. Coral stays with the email form. */
.tool{padding:0 0 76px}
.tool-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:30px 32px;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.tool-kicker{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sea);font-weight:700}
.tool-card h2{font-size:clamp(1.35rem,2.4vw,1.7rem);margin-top:10px}
.tool-card p{margin-top:10px;color:var(--ink-2);font-size:15.5px;max-width:52ch}
@media(max-width:640px){.tool-card{padding:26px 22px}}

/* ---------- proof ---------- */
.proof{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-grid{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:center}
/* navy hairline ring, matching the avatar spec (ICON-SPEC v3) */
.proof-photo{aspect-ratio:1/1;border-radius:50%;box-shadow:0 0 0 3px var(--ink)}
.stat{font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;color:var(--sea)}
.stat-label{margin-top:10px;font-size:15px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.proof-body{margin-top:20px;font-size:1.08rem;color:var(--ink-2);max-width:46ch}
@media(max-width:720px){.proof-grid{grid-template-columns:1fr;gap:28px}.proof-photo{max-width:190px}}

/* ---------- secondary CTA ---------- */
.cta{padding:72px 0}
.cta-card{background:var(--sea);color:#fff;border-radius:20px;padding:52px 44px;text-align:center}
.cta-card h2{color:#fff}
.cta-card h2::after{display:none}
.cta-card p{margin-top:14px;color:rgba(255,255,255,.88);max-width:48ch;margin-left:auto;margin-right:auto}
/* white, not coral: this card is a full screen of its own and the
   card itself is already the accent. Deck's --ghost token is coral,
   deliberately not followed here for that reason. */
.btn-ghost{display:inline-block;margin-top:26px;padding:15px 30px;border-radius:999px;background:#fff;color:var(--sea);font-weight:700;text-decoration:none}
.btn-ghost:hover{background:var(--paper)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:rgba(244,247,250,.76);padding:56px 0 40px;font-size:14.5px;line-height:1.65}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:28px}}
.site-foot h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;font-family:var(--sans);font-weight:700;margin-bottom:12px}
.site-foot a{color:rgba(244,247,250,.88);text-decoration:none;display:block;padding:3px 0}
.site-foot a:hover{color:#fff;text-decoration:underline}
.cred{margin-top:40px;padding-top:24px;border-top:1px solid rgba(244,247,250,.16);font-size:13.5px;color:rgba(244,247,250,.62)}
.cred p+p{margin-top:10px}

/* ---------- shared additions, 16 Sep 2026 ---------- */
.mark img{height:34px;width:auto;display:block}
@media(max-width:520px){.mark img{height:28px}}
.page-hero{padding:64px 0 40px}
.page-hero .lede{margin-top:18px;font-size:1.12rem;color:var(--ink-2);max-width:40em}
.prose{max-width:720px}
.prose h2{margin-top:44px}
.prose h3{font-size:1.3rem;margin-top:28px}
.prose p,.prose ul,.prose ol{margin-top:14px;color:var(--ink-2)}
.prose li+li{margin-top:6px}
.icon{width:56px;height:56px;display:block}
.icon-sm{width:40px;height:40px}
.photo{border-radius:14px;object-fit:cover;width:100%;height:auto}
.illus{border-radius:14px;width:100%;height:auto;background:var(--paper)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:820px){.grid-3,.grid-2{grid-template-columns:1fr}}
.site-foot .foot-logo{height:30px;width:auto;margin-bottom:14px}