:root{
  --navy:#0D2734;
  --navy-deep:#09202D;
  --navy-soft:#123240;
  --teal:#60D1C8;
  --teal-muted:#479996;
  --red:#D46A5A;
  --ink:#0B1A22;
  --paper:#F4F6F6;
  --paper-2:#E7ECEC;
  --white:#FFFFFF;
  --body-dark:#A9BEC6;
  --grey:#6E8790;
  --line:#D5DEDE;
  --line-dark:rgba(96,209,200,0.18);
  --cond:"Anton", Impact, "Arial Narrow", sans-serif;
  --display:"Archivo", system-ui, sans-serif;
  --body:"Inter", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --script:"Caveat", "Segoe Print", cursive;
  --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:1.125rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--cond);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.005em;color:var(--navy);margin:0 0 .45em}
h1{font-size:clamp(3rem,7.4vw,5.4rem);text-wrap:balance}
h2{font-size:clamp(2.3rem,5vw,3.5rem)}
p{margin:0 0 1em;max-width:36em}
strong{font-weight:600}
a{color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow > *{max-width:760px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--white);padding:8px 12px;z-index:10}
.label{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-muted);display:block;margin-bottom:10px}
.label::before{content:"// ";opacity:.6}

/* Header */
.site-head{background:var(--navy-deep);color:var(--white);border-bottom:1px solid var(--line-dark)}
.site-head .wrap{display:flex;align-items:center;height:64px}
.mark{font-family:var(--display);font-weight:700;font-size:1.15rem;text-decoration:none}
.mark span{color:var(--teal)}

/* Hero */
.hero{background:var(--navy);color:var(--white);padding:64px 0 96px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero .for{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 22px}
.hero .for::before{content:"// ";opacity:.6}
.hero h1{color:var(--white)}
.hero .lead{font-family:var(--display);font-weight:700;font-size:1.45rem;line-height:1.35;color:var(--white);margin-top:8px}
.hero .lead span{color:var(--teal)}
.hero p{color:var(--body-dark)}

/* Form card */
.join{background:var(--white);color:var(--ink);border-radius:12px;padding:32px;box-shadow:0 24px 60px rgba(3,14,20,.5);border-top:6px solid var(--teal)}
.join h2{font-size:2.1rem;margin-bottom:.25em}
.join .note{font-size:1rem;color:var(--grey);margin:0 0 20px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--display);font-weight:700;font-size:1rem;margin-bottom:6px;color:var(--navy)}
.field label small{font-family:var(--body);font-weight:400;color:var(--grey);font-size:.92rem}
.field input{width:100%;font:inherit;font-size:1.0625rem;padding:13px 14px;border:2px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--teal-muted);background:var(--white)}
.field input::placeholder{color:#8FA3AA}
.btn{display:inline-block;width:100%;font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:.02em;background:var(--teal);color:var(--navy-deep);border:0;border-radius:8px;padding:16px 20px;cursor:pointer;text-align:center;text-decoration:none;transition:background .15s, transform .15s}
.btn:hover{background:#7BDCD4}
.btn:active{transform:translateY(1px)}
.hidden{display:none}

/* Sound familiar */
.familiar{background:var(--paper);padding:88px 0}
.quotes{list-style:none;padding:0;margin:28px 0 28px;display:flex;flex-wrap:wrap;gap:14px}
.quotes li{background:var(--white);border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:14px 20px;font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--navy)}
.familiar .closer{font-size:1.2rem}

/* Sections */
.sec{padding:96px 0}
.sec.alt{background:var(--paper)}
.titles{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,1.8rem);font-weight:700;color:var(--navy);line-height:1.3;margin:24px 0 28px}
.titles span{display:block}
.pull{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.25;color:var(--navy);border-left:6px solid var(--teal);padding-left:22px;margin:40px 0 0;max-width:22em}

/* Reframe */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:32px 0}
.compare div{border-radius:12px;padding:28px}
.compare .old{background:var(--white);border:2px dashed var(--line)}
.compare .new{background:var(--navy);color:var(--white)}
.compare .new .label{color:var(--teal)}
.compare q{font-family:var(--display);font-size:1.45rem;font-weight:700;line-height:1.25;quotes:"\201C" "\201D"}
.compare .old q{color:var(--grey);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:3px}
.asks{list-style:none;padding:0;margin:0 0 8px}
.asks li{font-family:var(--display);font-size:1.25rem;font-weight:700;color:var(--navy);padding:12px 0;border-bottom:1px solid var(--line)}
.asks li:last-child{border-bottom:0}

/* Translation panel */
.translate{display:grid;grid-template-columns:1fr auto 1.3fr;margin:36px 0 28px;border-radius:14px;overflow:hidden;box-shadow:0 18px 44px rgba(13,39,52,.16)}
.t-title{background:var(--white);border:2px solid var(--line);border-right:0;border-radius:14px 0 0 14px;padding:32px;display:flex;flex-direction:column;justify-content:center}
.t-title .search{font-family:var(--cond);text-transform:uppercase;font-size:clamp(2rem,3.4vw,2.6rem);line-height:1;color:var(--navy);margin:0}
.t-arrow{background:var(--teal);display:flex;align-items:center;justify-content:center;padding:0 14px}
.t-arrow svg{width:34px;height:34px}
.t-proof{background:var(--navy);color:var(--white);padding:32px}
.t-proof .label{color:var(--teal)}
.t-proof ul{list-style:none;padding:0;margin:0}
.t-proof li{padding:9px 0 9px 30px;position:relative;font-size:1.1rem;border-bottom:1px solid var(--line-dark)}
.t-proof li:last-child{border-bottom:0}
.t-proof li::before{content:"";position:absolute;left:0;top:17px;width:14px;height:14px;border-radius:3px;background:var(--teal)}
.more{font-family:var(--script);font-weight:600;font-size:2.3rem;line-height:1.1;color:var(--teal-muted);margin-bottom:.5em}

/* Built to do */
.checks{list-style:none;padding:0;margin:24px 0 32px;display:grid;gap:12px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:1.15rem;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:16px 20px}
.checks svg{flex:0 0 24px;width:24px;height:24px;margin-top:3px}
.honest{font-size:1rem;color:var(--grey);border-top:1px solid var(--line);padding-top:20px;margin-top:32px}

/* Final CTA */
.final{background:var(--navy);color:var(--white);padding:104px 0;text-align:center}
.final h2{color:var(--white)}
.final p{color:var(--body-dark);margin-left:auto;margin-right:auto;font-size:1.2rem}
.final .btn{width:auto;padding:18px 32px;margin-top:12px}
.tagline{font-family:var(--script);font-weight:600;font-size:2.4rem;color:var(--teal)!important;margin-top:44px!important}

footer{background:var(--navy);color:var(--grey);font-size:.9rem;padding:0 0 36px;text-align:center;font-family:var(--mono);letter-spacing:.04em}
footer p{margin:0 auto}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero{padding:44px 0 64px}
  .translate{grid-template-columns:1fr}
  .t-title{border-right:2px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0}
  .t-arrow{padding:10px 0}
  .t-arrow svg{transform:rotate(90deg)}
}
@media (max-width:640px){
  body{font-size:1.0625rem}
  .sec,.familiar{padding:64px 0}
  .final{padding:72px 0}
  .compare{grid-template-columns:1fr}
  .join{padding:24px}
  .final .btn{width:100%}
}