/* internetschminternet v4: calm and credible. Warm white, one accent (the logo red), an editorial serif for headings.
   The personality lives in the logo, the footer line, the 404 page and the About ID card; everything else stays quiet.
   Signature: the staged path with a gate between each stage, shown in the hero and in full under "How it works". */
:root{
  --bg:#faf8f4; --surface:#ffffff; --sunk:#f3efe7; --ink:#15171a; --ink-2:#4a4e55; --ink-3:#73777e; --line:#e6e0d5;
  --accent:#c8102e; --accent-ink:#a50d26; --accent-soft:#fbeae7; --on-accent:#ffffff;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:dark;
  --bg:#111214; --surface:#18191c; --sunk:#1e2023; --ink:#f2efe9; --ink-2:#c3c0b9; --ink-3:#8f8c86; --line:#2a2c30;
  --accent:#ff5a66; --accent-ink:#ff7d87; --accent-soft:#33171a; --on-accent:#111214; } }
:root[data-theme="dark"]{ color-scheme:dark;
  --bg:#111214; --surface:#18191c; --sunk:#1e2023; --ink:#f2efe9; --ink-2:#c3c0b9; --ink-3:#8f8c86; --line:#2a2c30;
  --accent:#ff5a66; --accent-ink:#ff7d87; --accent-soft:#33171a; --on-accent:#111214; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
main.wrap{display:flex;flex-direction:column;gap:120px;padding-bottom:120px}
@media (max-width:700px){ main.wrap{gap:88px;padding-bottom:88px} }
section{display:flex;flex-direction:column;gap:20px;scroll-margin-top:88px}
h1,h2,h3{margin:0;text-wrap:balance}
h1,h2{font-family:var(--serif);font-weight:560;letter-spacing:-.02em;font-variation-settings:"opsz" 96, "SOFT" 30}
h1{font-size:clamp(42px,6.4vw,72px);line-height:1.02}
h2{font-size:clamp(32px,4.2vw,46px);line-height:1.08}
h3{font:600 19px/1.3 var(--sans);letter-spacing:-.005em}
h1 em,h2 em{font-style:italic;color:var(--accent-ink)}
p{margin:0;max-width:62ch}
.lede{font-size:clamp(18px,1.9vw,20px);color:var(--ink-2);max-width:56ch}
.muted{color:var(--ink-3);font-size:15px}
.kicker{font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 16px/1 var(--sans);text-decoration:none;padding:14px 20px;border-radius:999px;border:1.5px solid transparent;transition:background .15s, color .15s, border-color .15s}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-ink)}
.btn.ghost{border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}

/* Header */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb, var(--bg) 90%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.brand{display:flex;align-items:center;min-width:0}
.brand img{display:block;height:28px;width:auto}
.nav{display:flex;align-items:center;gap:26px;font:500 15px/1 var(--sans)}
.nav a{text-decoration:none;color:var(--ink-2)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav .btn{padding:11px 16px;font-size:15px;color:var(--on-accent)}
@media (max-width:860px){ .nav .hide-sm{display:none} }
@media (max-width:520px){ .brand img{height:22px} .nav{gap:16px} .nav .btn{display:none} }

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:start;padding-top:72px}
@media (max-width:880px){ .hero{grid-template-columns:1fr;gap:40px;padding-top:44px} }
.hero-copy{display:flex;flex-direction:column;gap:24px}
.hero .note{font-size:15px;color:var(--ink-3)}

/* Path card: the staged offer at a glance */
.path{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -18px rgba(0,0,0,.18)}
.path .title{font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.path ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.path li.step{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:baseline;padding:10px 0}
.path .n{font:500 13px/1 var(--mono);color:var(--ink-3)}
.path .what b{display:block;font-weight:600}
.path .what span{font-size:14px;color:var(--ink-3)}
.path .cost{font:600 15px/1 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.path li.gate{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--accent-ink);padding:2px 0 2px 2px}
.path li.gate::before{content:"";width:8px;height:8px;background:var(--accent);transform:rotate(45deg)}
.path .after{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3)}

/* Situations */
.situations{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.situation{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:8px}
.situation p{font-size:16px;color:var(--ink-2)}

/* Stages */
.stages{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.stage{display:grid;grid-template-columns:72px minmax(0,1fr) 220px;gap:10px 28px;padding:32px 0;border-bottom:1px solid var(--line)}
@media (max-width:820px){ .stage{grid-template-columns:48px 1fr} .stage .meta{grid-column:2} }
.stage .num{font:400 44px/1 var(--serif);color:var(--accent-ink);font-variation-settings:"opsz" 96}
.stage .body{display:flex;flex-direction:column;gap:10px;min-width:0}
.stage .body h3{font:560 26px/1.15 var(--serif);letter-spacing:-.01em;font-variation-settings:"opsz" 72}
.stage ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;color:var(--ink-2)}
.stage .gate{display:flex;gap:10px;align-items:flex-start;font-size:16px;margin-top:4px}
.stage .gate::before{content:"";flex:none;width:9px;height:9px;margin-top:8px;background:var(--accent);transform:rotate(45deg)}
.stage .gate b{font-weight:600}
.stage .meta{display:flex;flex-direction:column;gap:4px}
.stage .price{font:560 26px/1.1 var(--serif);font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 72}
.stage .time{font-size:15px;color:var(--ink-3)}

/* Retainer */
.retainer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;background:var(--sunk);border-radius:20px;padding:clamp(24px,4vw,48px)}
@media (max-width:820px){ .retainer{grid-template-columns:1fr;gap:24px} }
.retainer > div{display:flex;flex-direction:column;gap:16px}
.retainer .price{font:560 34px/1 var(--serif);font-variation-settings:"opsz" 72}
.retainer .price small{font:400 16px var(--sans);color:var(--ink-3)}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{position:relative;padding-left:28px}
.ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.ticks.no li::before{left:2px;top:.8em;width:12px;height:0;border-left:0;border-bottom:2px solid var(--ink-3);transform:none}

/* Build method */
.method{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;counter-reset:m}
@media (max-width:900px){ .method{grid-template-columns:1fr} }
.method li{counter-increment:m;padding:22px;display:flex;flex-direction:column;gap:6px;font-size:15.5px;color:var(--ink-2);border-left:1px solid var(--line)}
.method li:first-child{border-left:0}
@media (max-width:900px){ .method li{border-left:0;border-top:1px solid var(--line)} .method li:first-child{border-top:0} }
.method li::before{content:counter(m);font:400 30px/1 var(--serif);color:var(--accent-ink)}
.method b{font-weight:600;color:var(--ink);font-size:17px}

/* Fit */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){ .fit{grid-template-columns:1fr} }
.fit > div{border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px;background:var(--surface)}

/* FAQ */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{display:flex;justify-content:space-between;gap:16px;align-items:center;font:600 18px/1.35 var(--sans);cursor:pointer;padding:20px 0;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:300 28px/1 var(--sans);color:var(--ink-3);flex:none;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-bottom:20px;color:var(--ink-2)}

/* Final call */
.cta-panel{background:var(--ink);color:var(--bg);border-radius:20px;padding:clamp(28px,5vw,60px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px;align-items:center}
@media (max-width:820px){ .cta-panel{grid-template-columns:1fr} }
.cta-panel > div{display:flex;flex-direction:column;gap:16px}
.cta-panel h2{color:var(--bg)}
.cta-panel p{color:color-mix(in srgb, var(--bg) 75%, var(--ink))}
.cta-panel .channel{font-size:15px;color:color-mix(in srgb, var(--bg) 62%, var(--ink))}

/* Footer */
.foot{border-top:1px solid var(--line);padding:36px 0 48px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.foot .sig{display:flex;align-items:center;gap:18px}
.foot img{width:170px;height:auto;display:block}
.foot .line{font:italic 400 18px/1.3 var(--serif);color:var(--ink-2)}
.foot .small{font-size:14px;color:var(--ink-3)}

/* ===== About ===== */
.about-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;padding-top:72px}
@media (max-width:900px){ .about-hero{grid-template-columns:1fr;padding-top:44px} }
.principles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.principles li{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2);font-size:16px}
.principles b{font:560 22px/1.2 var(--serif);color:var(--ink);font-variation-settings:"opsz" 72}
.pull{font:italic 450 clamp(28px,3.6vw,40px)/1.2 var(--serif);letter-spacing:-.01em;margin:0;max-width:24ch}
.pull span{color:var(--accent-ink)}

/* The Control ID card: the one playful object on the site */
.idwrap{display:flex;flex-direction:column;align-items:center;gap:14px;perspective:1400px}
.idcard{position:relative;width:min(100%,480px);aspect-ratio:1.586;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.1,.2,1);transform:rotate(-2deg)}
.idcard.flipped{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#f7f2e7;color:#16181c;box-shadow:0 1px 0 rgba(0,0,0,.06),0 22px 44px -16px rgba(0,0,0,.35);border:1px solid rgba(0,0,0,.1)}
.face.back{transform:rotateY(180deg)}
.id-band{display:flex;align-items:center;gap:10px;background:#c8102e;color:#fff;padding:2.6% 4.5%}
.id-band img{width:11%;height:auto;flex:none;filter:brightness(0) invert(1)}
.id-org{display:flex;flex-direction:column;gap:3px;line-height:1}
.id-org b{font:700 clamp(22px,6vw,32px)/.9 var(--sans);letter-spacing:.12em}
.id-org span{font:500 clamp(8px,2vw,11px)/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.id-band .tier{margin-left:auto;font:500 clamp(8px,2vw,10px)/1.3 var(--mono);letter-spacing:.08em;text-align:right;text-transform:uppercase}
.id-body{display:grid;grid-template-columns:26% 1fr;gap:5%;padding:4% 4.5% 0}
.photo{position:relative;aspect-ratio:.82;background:#ddd3bf;border-radius:4px;display:grid;place-items:end center;overflow:hidden}
.photo svg{width:92%;height:auto;display:block}
.photo span{position:absolute;top:7%;left:0;right:0;text-align:center;font:500 clamp(7px,1.8vw,9px)/1 var(--mono);letter-spacing:.08em;color:#6c675c}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:9px 6%;align-content:start;margin:0}
.fields div{display:flex;flex-direction:column;gap:2px;min-width:0}
.fields .wide{grid-column:1/-1}
.fields dt{font:500 clamp(6.5px,1.6vw,8.5px)/1 var(--mono);letter-spacing:.12em;color:#6c675c;text-transform:uppercase}
.fields dd{margin:0;font:600 clamp(10px,2.6vw,14px)/1.2 var(--sans);overflow-wrap:anywhere}
.fields dd.name{font:560 clamp(22px,6vw,32px)/1 var(--serif)}
.mrz{position:absolute;left:0;right:0;bottom:0;padding:2.2% 4.5%;background:#ede5d3;border-top:1px solid rgba(0,0,0,.08);font:500 clamp(7px,1.9vw,11px)/1.35 var(--mono);letter-spacing:.12em;color:#4a463e;white-space:pre;overflow:hidden}
.back-inner{display:flex;flex-direction:column;gap:3.5%;padding:7% 6% 5%;height:100%}
.back-inner h3{font:560 clamp(18px,4.4vw,24px)/1 var(--serif)}
.back-inner ol{margin:0;padding-left:1.3em;font:500 clamp(9.5px,2.4vw,13px)/1.5 var(--sans);display:flex;flex-direction:column;gap:1px}
.back-inner .return{margin-top:auto;font:italic 400 clamp(9px,2.1vw,12px)/1.4 var(--serif);color:#6c675c}
.face .stripe{position:absolute;left:0;right:0;top:0;height:4%;background:#c8102e}
.face .wm{position:absolute;right:-6%;bottom:-12%;width:48%;opacity:.1;transform:rotate(-14deg);pointer-events:none}
.flip{font:500 14px/1 var(--sans);color:var(--ink-2);background:none;border:1px solid var(--line);border-radius:999px;padding:10px 16px;cursor:pointer}
.flip:hover{border-color:var(--ink);color:var(--ink)}
@media (prefers-reduced-motion: reduce){ .idcard{transition:none} }