/* =========================================================================
   WISE FISHERMAN - marketing styles. Light & airy / authoritative.
   Tokens are the source of truth; the app shares them via app.css.
   Fonts (Fraunces / Hanken Grotesk / IBM Plex Mono) loaded in the template.
   Mobile-first: the nav is a real menu on phones, not a hidden one.
   ========================================================================= */
:root{
  /* Brand - cool, deep, confident */
  --ink:#0C2A39; --sea:#15536E; --sea-bright:#2C7E9B;
  --seaglass:#A9CFCF; --seaglass-soft:#DCEAE9;
  /* Neutrals - light & airy */
  --paper:#FAFAF7; --cloud:#FFFFFF; --mist:#EDF2F2; --line:#D9E2E2;
  --slate:#2F3D44; --slate-soft:#5E6E75;
  /* Accent - sunrise / signal */
  --sunrise:#E89A45; --sunrise-deep:#C97E2E; --sunrise-soft:#FBEAD6;
  /* Condition semantics */
  --prime:#2F8F76; --fair:#DE9F39; --rough:#C2543E;
  /* AA-safe text partners (see app.css for the rationale) */
  --link-ink:#15536E; --prime-ink:#1F6E58; --fair-ink:#8A5B14; --rough-ink:#9E3B28;
  /* Type */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  /* Shape / depth */
  --radius:18px; --radius-sm:10px; --radius-pill:999px;
  --shadow-card:0 1px 0 rgba(12,42,57,.03), 0 26px 48px -34px rgba(12,42,57,.30);
  --tap:44px;
  --maxw:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--slate);
  background:var(--paper);line-height:1.7;font-size:17px;
  -webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}

/* Atmosphere: dawn glow + faint nautical-chart contours, fixed behind */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(232,154,69,.16), transparent 60%),
    radial-gradient(1200px 700px at 8% 4%, rgba(169,207,207,.28), transparent 58%),
    linear-gradient(180deg,#FBFBF8 0%, var(--paper) 38%);}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' viewBox='0 0 1200 600'><g fill='none' stroke='%230C2A39' stroke-opacity='0.05' stroke-width='1.1'><path d='M0,120 C200,80 420,170 620,130 C820,90 1020,170 1200,120'/><path d='M0,180 C200,140 420,230 620,190 C820,150 1020,230 1200,180'/><path d='M0,250 C220,210 430,300 640,255 C840,212 1030,295 1200,250'/><path d='M0,330 C210,288 440,380 650,335 C860,292 1040,372 1200,330'/><path d='M0,420 C230,378 440,470 660,420 C870,374 1050,458 1200,420'/><path d='M0,510 C220,470 450,560 660,512 C880,466 1060,548 1200,510'/></g></svg>");
  background-size:1200px 600px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 32px}}
.center{text-align:center}

/* Accessibility */
:focus-visible{outline:2px solid var(--sea);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);
  color:var(--paper);padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;
  font-weight:600}
.skip:focus{left:0;text-decoration:none}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Typography */
.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sea)}
h1,h2,h3{font-family:var(--font-display);color:var(--ink);font-weight:400;
  margin:0;line-height:1.08}
.display{font-size:clamp(38px,7.5vw,84px);font-weight:300;letter-spacing:-.015em}
h2{font-size:clamp(27px,4.6vw,46px);letter-spacing:-.01em}
h3{font-size:22px;letter-spacing:-.005em}
.lead{font-size:clamp(17px,2.2vw,22px);color:var(--slate);font-weight:300;
  line-height:1.6}
.mono{font-family:var(--font-mono)}
a{color:var(--link-ink);text-decoration:none}

/* Nav ------------------------------------------------------------------- */
.m-nav{position:sticky;top:0;z-index:20;background:rgba(250,250,247,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.m-nav-inner{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:66px}
.m-brand{display:flex;align-items:center;gap:11px;
  font-family:var(--font-display);font-size:20px;color:var(--ink)}
.m-brand svg{flex:0 0 auto}
@media(min-width:768px){.m-brand{font-size:23px}}

.m-nav-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);padding:0;background:transparent;
  border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);
  cursor:pointer}
.m-nav-toggle svg{width:22px;height:22px}
.m-nav-toggle .ico-close{display:none}
.m-nav-toggle[aria-expanded="true"] .ico-open{display:none}
.m-nav-toggle[aria-expanded="true"] .ico-close{display:block}

/* Mobile: nav is a disclosure panel. Without JS the toggle is hidden and
   the links show inline, so navigation is never unreachable. */
.m-nav-links{display:none;position:absolute;left:0;right:0;top:100%;
  flex-direction:column;align-items:stretch;gap:0;background:var(--cloud);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-card);
  padding:6px 20px 14px}
.m-nav-links.open{display:flex}
.m-nav-links a:not(.btn){display:flex;align-items:center;min-height:var(--tap);
  color:var(--slate);font-weight:600;font-size:1rem;
  border-top:1px solid var(--line)}
.m-nav-links a:not(.btn):first-child{border-top:none}
.m-nav-links a:not(.btn):hover{color:var(--ink)}
.m-nav-links .btn{margin-top:12px;width:100%}
.no-js .m-nav-toggle{display:none}
.no-js .m-nav-links{display:flex;position:static;flex-direction:row;
  flex-wrap:wrap;align-items:center;gap:14px;background:none;border:none;
  box-shadow:none;padding:8px 0}
.no-js .m-nav-links a:not(.btn){border-top:none;min-height:0}
.no-js .m-nav-links .btn{width:auto;margin-top:0}

@media(min-width:860px){
  .m-nav-toggle{display:none}
  .m-nav-links,.m-nav-links.open{display:flex;position:static;
    flex-direction:row;align-items:center;gap:26px;background:none;
    border:none;box-shadow:none;padding:0}
  .m-nav-links a:not(.btn){font-size:.95rem;border-top:none;min-height:auto}
  .m-nav-links .btn{margin-top:0;width:auto}
}

/* Buttons --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:600;font-size:15px;
  border-radius:var(--radius-pill);padding:13px 26px;min-height:var(--tap);
  cursor:pointer;border:1px solid transparent;
  transition:transform .18s ease,box-shadow .2s ease,background .2s ease}
.btn-primary{background:var(--sunrise);color:var(--ink);
  box-shadow:0 12px 26px -14px rgba(232,154,69,.9)}
.btn-primary:hover{background:var(--sunrise-deep);transform:translateY(-2px)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:var(--paper)}
.btn-ghost{background:var(--mist);color:var(--sea)}
.btn-ghost:hover{background:var(--seaglass-soft)}
.btn.big{padding:15px 30px;font-size:1.02rem}
.btn.full{display:flex;width:100%;justify-content:center}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:12px;font-weight:500;letter-spacing:.04em;padding:7px 13px;
  border-radius:var(--radius-pill);text-transform:uppercase}
.pill .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.pill-prime{background:rgba(47,143,118,.12);color:var(--prime-ink)}
.pill-prime .dot{background:var(--prime)}
.pill-season{background:var(--sunrise-soft);color:var(--fair-ink)}
.pill-season .dot{background:var(--sunrise)}
.pill-info{background:var(--mist);color:var(--sea)}
.pill-info .dot{background:var(--sea-bright)}

/* Cards / sections ------------------------------------------------------ */
.card{background:var(--cloud);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-card);padding:24px}
@media(min-width:768px){.card{padding:28px}}
section{padding:64px 0;border-top:1px solid var(--line)}
@media(min-width:768px){section{padding:96px 0}}
.sec-head{display:flex;gap:18px;align-items:baseline;margin-bottom:32px}
.sec-num{font-family:var(--font-mono);font-size:13px;color:var(--fair-ink);
  padding-top:6px}
.grid{display:grid;gap:20px}
.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
@media(min-width:640px){
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .cols-4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:900px){
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .cols-4{grid-template-columns:repeat(4,1fr)}
  .grid{gap:24px}
}

/* Hero ------------------------------------------------------------------ */
.hero{padding:56px 0 60px;border:none}
@media(min-width:900px){.hero{padding:96px 0 90px}}
.hero-inner{display:grid;grid-template-columns:1fr;gap:38px;align-items:center}
@media(min-width:900px){
  .hero-inner{grid-template-columns:1.05fr .95fr;gap:54px}
}
.hero .eyebrow{display:block;margin-bottom:20px}
.hero .display{max-width:15ch}
.hero .lead{max-width:50ch;margin-top:22px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.trust{margin-top:18px;font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.04em;color:var(--slate-soft)}

/* Sample forecast panel (hero + in-context) */
.panel{background:linear-gradient(180deg,#FFFFFF,#FCFDFC);
  border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow-card);padding:20px;position:relative;overflow:hidden}
@media(min-width:768px){.panel{padding:28px}}
.panel-top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:18px;flex-wrap:wrap}
.tile{background:var(--cloud);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 16px}
.tile .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-soft)}
.tile .val{font-family:var(--font-mono);font-size:26px;font-weight:500;
  color:var(--ink);margin-top:6px;line-height:1}
.tile .val small{font-size:13px;color:var(--slate-soft);font-weight:400}
.tile .sub{font-size:12.5px;color:var(--slate-soft);margin-top:6px}
.tiles4{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:640px){.tiles4{grid-template-columns:repeat(4,1fr);gap:12px}}

/* Problem band */
.band{background:var(--mist);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:52px 0}
.sub{color:var(--slate-soft);font-size:1.02rem;max-width:64ch;margin:0 auto}

/* Steps */
.steps{display:grid;grid-template-columns:1fr;gap:20px;margin-top:8px}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:22px}}
.step .step-num{width:40px;height:40px;border-radius:11px;display:grid;
  place-items:center;font-family:var(--font-mono);font-weight:600;
  color:var(--ink);background:var(--sunrise-soft);border:1px solid var(--line);
  margin-bottom:16px}
.step h3{margin:0 0 8px}
.step p{margin:0;color:var(--slate-soft);font-size:.98rem}

/* Feature grid */
.feature{transition:border-color .2s,transform .1s}
.feature:hover{border-color:var(--seaglass);transform:translateY(-2px)}
.feature .ico{width:44px;height:44px;border-radius:11px;display:grid;
  place-items:center;background:var(--mist);border:1px solid var(--line);
  margin-bottom:16px}
.feature .ico svg{width:24px;height:24px}
.feature h3{margin:0 0 8px}
.feature p{margin:0;color:var(--slate-soft);font-size:.95rem}

/* Pricing tiers --------------------------------------------------------- */
.tiers{display:grid;grid-template-columns:1fr;gap:18px;margin-top:8px;
  align-items:start}
@media(min-width:640px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tiers{grid-template-columns:repeat(4,1fr)}}
.tier{position:relative;background:var(--cloud);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-card);padding:26px 22px;
  display:flex;flex-direction:column}
.tier.feature{border-color:var(--sunrise);
  box-shadow:0 0 0 1px var(--sunrise),0 30px 60px -34px rgba(232,154,69,.55)}
.tier.feature:hover{transform:none}
.tier-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--sunrise);color:var(--ink);font-family:var(--font-mono);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 14px;border-radius:var(--radius-pill);white-space:nowrap}
.tier-name{font-family:var(--font-display);font-size:1.5rem;color:var(--ink)}
.tier-who{color:var(--slate-soft);font-size:.84rem;margin-top:2px}
.tier-price{margin:16px 0 2px;display:flex;align-items:baseline;gap:4px}
.tier-price .amt{font-family:var(--font-mono);font-size:2.2rem;font-weight:500;
  color:var(--ink)}
.tier-price .per{color:var(--slate-soft);font-size:.95rem}
.tier-yr{font-family:var(--font-mono);font-size:.82rem;color:var(--slate-soft);
  min-height:18px}
.tier-yr .save{color:var(--prime-ink);font-weight:600}
.tier-tag{color:var(--slate-soft);font-size:.92rem;margin:12px 0 2px}
@media(min-width:1000px){.tier-tag{min-height:40px}}
.tier-feats{list-style:none;padding:0;margin:16px 0 0}
.tier-feats li{position:relative;padding:9px 0 9px 22px;color:var(--slate);
  font-size:.92rem;border-top:1px solid var(--line)}
.tier-feats li:before{content:"";position:absolute;left:2px;top:16px;width:7px;
  height:7px;border-radius:50%;background:var(--seaglass)}
.tier .btn{margin-top:18px}

/* Plan comparison table */
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:26px}
table.compare{width:100%;border-collapse:collapse;font-size:.9rem;
  min-width:640px;background:var(--cloud);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
table.compare th,table.compare td{border-bottom:1px solid var(--line);
  padding:12px 14px;text-align:center}
table.compare th:first-child,table.compare td:first-child{text-align:left;
  color:var(--slate)}
table.compare thead th{background:var(--mist);color:var(--ink);
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:500}
table.compare .yes{color:var(--prime-ink);font-weight:600}
table.compare .no{color:var(--slate-soft)}

/* Final CTA + footer ---------------------------------------------------- */
.final{padding:70px 0;border-top:1px solid var(--line);
  background:radial-gradient(900px 420px at 50% 120%, rgba(232,154,69,.14), transparent 60%)}
.final h2{margin:0 0 12px}
.foot{border-top:1px solid var(--line);padding:36px 0 56px;
  color:var(--slate-soft);font-size:14px}
.foot .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-links a{color:var(--slate);min-height:32px;display:inline-flex;
  align-items:center}
.fineprint{color:var(--slate-soft);font-size:13.5px;max-width:72ch;
  margin:36px auto 0;text-align:center}

/* Tide curve */
.tide-curve{margin-top:8px}

/* Motion ---------------------------------------------------------------- */
/* .reveal only hides content when JS is present to un-hide it; without JS
   (or before the observer runs) the page renders fully visible. */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .btn:hover,.feature:hover{transform:none}
}