/* AcctRelay
   Direction: "the back office" — an accountant's desk drawn in ink, a beige tower PC, and one amber cable to the cloud.
   Editorial, warm-technical. One memorable thing: the desk scene. Everything else quiet. */
:root{
  --ink:#14213a;          /* navy ink — text, line art */
  --ink-2:#4d5b72;        /* secondary text */
  --wall:#e7ebf0;         /* page, cool office wall */
  --paper:#fbfaf6;        /* invoice / letter paper */
  --beige:#d9d1bf;        /* 90s PC plastic */
  --beige-2:#c6bca6;
  --rule:#cfd6df;
  --amber:#e9a10b;        /* the cable / the one action color */
  --amber-ink:#2a1c00;
  --green:#2f7a57;

  --sans:"Archivo", system-ui, sans-serif;
  --serif:"Newsreader", Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  --max:1200px;
  --gutter:clamp(20px, 4vw, 48px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--wall); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased}
/* faint paper grain */
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
::selection{background:var(--amber); color:var(--amber-ink)}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
p{margin:0}

/* type */
h1,h2,h3{font-family:var(--sans); margin:0; letter-spacing:-.022em}
h1{font-size:clamp(2.6rem, 5vw + .6rem, 5.6rem); line-height:.96; font-weight:800; font-variation-settings:"wdth" 112}
h2{font-size:clamp(1.9rem, 2.2vw + 1rem, 2.8rem); line-height:1.05; font-weight:750; font-variation-settings:"wdth" 110}
h3{font-size:1.05rem; font-weight:700}
.serif{font-family:var(--serif)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px; font-weight:650; font-size:1rem; text-decoration:none; border:1.5px solid var(--ink); cursor:pointer; background:transparent}
.btn-amber{background:var(--amber); border-color:var(--amber); color:var(--amber-ink)}
.btn-amber:hover{background:#f5b324; border-color:#f5b324}
.btn-line:hover{background:rgba(20,33,58,.06)}

/* nav */
.nav{padding:22px 0}
.nav .wrap{display:flex; align-items:center; gap:28px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-variation-settings:"wdth" 115; text-decoration:none; font-size:1.1rem}
.logo svg{width:30px; height:30px}
.nav ul{display:flex; gap:26px; list-style:none; margin:0 0 0 auto; padding:0; font-size:.95rem}
.nav ul a{text-decoration:none; color:var(--ink-2)}
.nav ul a:hover{color:var(--ink)}

/* HERO */
.hero{padding:56px 0 0}
.hero h1{max-width:15ch; font-size:clamp(2.4rem, 4vw + .6rem, 4.6rem)}
.hero-row{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; align-items:end}
.hero-aside p{font-size:1.15rem; color:var(--ink-2)}
.hero-aside .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
.hero-aside small{display:block; margin-top:12px; color:var(--ink-2); font-size:.88rem}

/* the desk scene — the one memorable thing */
.desk{position:relative; margin-top:56px}
.desk .stage{position:relative}
.desk svg.scene{display:block; width:100%; height:auto}
.desk .screen-ui{position:absolute; left:6.4%; top:12.3%; width:33.2%; height:42%; background:#f4f6f8; border:1px solid #9aa5b3; overflow:hidden; font-size:clamp(7px, .78vw, 11px); line-height:1.35}
.screen-ui .tb{background:linear-gradient(90deg,#1f3b66,#3a5f97); color:#fff; padding:.4em .6em; font-weight:600; display:flex; justify-content:space-between}
.screen-ui .mn{padding:.25em .6em; border-bottom:1px solid #b8c0ca; color:#2c3a4d; display:flex; gap:1em}
.screen-ui table{width:calc(100% - 1.2em); margin:.5em .6em; border-collapse:collapse; background:#fff}
.screen-ui th{background:#dfe4ea; text-align:left; font-weight:600; padding:.25em .4em; border:1px solid #b8c0ca}
.screen-ui td{padding:.25em .4em; border-bottom:1px dotted #c9d0d8; white-space:nowrap}
.screen-ui tr.hot td{background:#ffe7a6}
.desk .code-ui{position:absolute; right:0; top:8%; width:36%; background:var(--ink); color:#e3e8ef; border-radius:12px; padding:clamp(12px,1.6vw,22px); font-family:var(--mono); font-size:clamp(8px, .82vw, 12.5px); line-height:1.7; box-shadow:0 30px 60px -28px rgba(20,33,58,.55)}
.code-ui .q{color:#90a2bb}
.code-ui .k{color:#ffd27a} .code-ui .s{color:#a9e3c6}
.code-ui .ln{opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease; white-space:nowrap}
.code-ui.on .ln{opacity:1; transform:none}
.cable-path{fill:none; stroke:var(--amber); stroke-width:3; stroke-linecap:round}
.cable-run{fill:none; stroke:#fff6dc; stroke-width:3; stroke-linecap:round; stroke-dasharray:14 400; stroke-dashoffset:414}
.desk-captions{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:28px; padding:24px 0 72px; border-bottom:1px solid var(--rule)}
.desk-captions p{color:var(--ink-2); font-size:.98rem}
.desk-captions h3{margin-bottom:6px}

/* LETTER */
.letter{padding:96px 0}
.letter .wrap{display:grid; grid-template-columns:260px minmax(0,1fr); gap:64px}
.letter .side h2{font-size:1.6rem}
.letter .side p{margin-top:10px; color:var(--ink-2); font-size:.95rem}
.letter .body{background:var(--paper); padding:clamp(28px,4vw,56px); border-radius:4px; box-shadow:0 1px 0 var(--rule), 0 24px 48px -36px rgba(20,33,58,.4); max-width:720px}
.letter .body p{font-family:var(--serif); font-size:1.24rem; line-height:1.62; color:#1d2a42; margin-bottom:1em}
.letter .body sup a{font-family:var(--sans); font-size:.62em; color:var(--green); text-decoration:none; font-weight:700; padding:0 1px}
.sign{display:flex; align-items:center; gap:16px; margin-top:28px; padding-top:20px; border-top:1px solid var(--rule)}
.sign svg{width:120px; height:44px}
.sign span{font-size:.92rem; color:var(--ink-2)}

/* DEVELOPERS */
.dev{padding:96px 0; background:var(--ink); color:#e3e8ef}
.dev .wrap{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:start}
.dev h2{color:#fff; max-width:14ch}
.dev dl{margin:36px 0 0}
.dev dt{font-weight:700; color:#fff; margin-top:22px}
.dev dd{margin:4px 0 0; color:#a9b6c8; max-width:44ch}
.tabs{border:1px solid #2b3b58; border-radius:12px; overflow:hidden; background:#0f1a2e}
.tabbar{display:flex; border-bottom:1px solid #2b3b58}
.tabbar button{font:inherit; font-size:.9rem; color:#a9b6c8; background:transparent; border:0; padding:14px 18px; cursor:pointer; border-right:1px solid #2b3b58}
.tabbar button[aria-selected="true"]{color:#fff; background:#14223a; box-shadow:inset 0 -2px 0 var(--amber)}
.tabs pre{margin:0; padding:24px; font-family:var(--mono); font-size:.84rem; line-height:1.75; overflow:auto; color:#e3e8ef}
.tabs pre[hidden]{display:none}
.tabs .c{color:#7d8ea8} .tabs .k{color:#ffd27a} .tabs .s{color:#a9e3c6}
.dev .objects{margin-top:40px; font-size:.95rem; color:#a9b6c8}
.dev .objects b{color:#fff; font-weight:600}

/* PRICING — an invoice */
.pricing{padding:110px 0}
.pricing .wrap{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:start}
.pricing .intro p{margin-top:16px; color:var(--ink-2); max-width:36ch}
.pricing .intro ul{list-style:none; padding:0; margin:28px 0 0; color:var(--ink-2)}
.pricing .intro li{padding:10px 0; border-top:1px solid var(--rule)}
.invoice{position:relative; background:var(--paper); padding:44px 44px 36px; box-shadow:0 30px 60px -40px rgba(20,33,58,.5); transform:rotate(-.6deg)}
.invoice::after{content:""; position:absolute; left:0; right:0; bottom:-12px; height:12px;
  background:radial-gradient(circle at 10px -2px, transparent 9px, var(--paper) 10px) 0 0/20px 12px repeat-x}
.inv-head{display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:20px; border-bottom:2px solid var(--ink)}
.inv-head .t{font-weight:800; font-variation-settings:"wdth" 115; font-size:1.4rem; letter-spacing:-.01em}
.inv-head .meta{font-family:var(--mono); font-size:.8rem; color:var(--ink-2); text-align:right; line-height:1.6}
.inv-lines{width:100%; border-collapse:collapse; margin-top:18px; font-variant-numeric:tabular-nums}
.inv-lines th{font-size:.8rem; color:var(--ink-2); font-weight:600; text-align:left; padding:8px 0; border-bottom:1px solid var(--rule)}
.inv-lines td{padding:14px 0; border-bottom:1px dashed var(--rule)}
.inv-lines .r{text-align:right}
.inv-lines tr.zero td{color:var(--ink-2)}
.qty{display:flex; align-items:center; gap:14px}
.qty input{width:100%; max-width:220px; accent-color:var(--amber)}
.qty output{font-weight:700; min-width:3ch}
.inv-total{display:flex; justify-content:space-between; align-items:baseline; padding-top:18px}
.inv-total .lbl{font-weight:700}
.inv-total .amt{font-weight:800; font-variation-settings:"wdth" 115; font-size:2.2rem; letter-spacing:-.02em}
.inv-compare{margin-top:14px; font-size:.92rem; color:var(--ink-2)}
.inv-compare b{color:var(--green)}
.stamp{position:absolute; left:38%; top:30px; transform:rotate(-8deg); border:2.5px solid var(--green); color:var(--green); font-weight:800; font-variation-settings:"wdth" 120; letter-spacing:.04em; padding:6px 12px; border-radius:6px; font-size:.9rem; opacity:.85; text-align:center; line-height:1.2}
.stamp small{display:block; font-weight:600; font-size:.7rem; letter-spacing:0}
.invoice .btn{margin-top:26px}

/* FAQ */
.faq{padding:0 0 110px}
.faq .wrap{display:grid; grid-template-columns:260px minmax(0,1fr); gap:64px}
.faq-list{display:grid; grid-template-columns:1fr 1fr; gap:0 48px}
.faq details{border-top:1px solid var(--rule); padding:18px 0}
.faq summary{cursor:pointer; font-weight:650; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details p{color:var(--ink-2); margin-top:8px; font-size:.97rem}

/* closing */
.closing{background:var(--paper); padding:96px 0; border-top:1px solid var(--rule)}
.closing .wrap{display:flex; justify-content:space-between; align-items:end; gap:40px; flex-wrap:wrap}
.closing h2{max-width:17ch}
.closing .actions{display:flex; gap:12px; flex-wrap:wrap}

/* footer */
footer{padding:48px 0; font-size:.88rem; color:var(--ink-2)}
footer .wrap{display:grid; grid-template-columns:1fr auto; gap:32px}
footer nav{display:flex; gap:22px}
.notes{margin-top:16px; padding-left:18px; max-width:80ch}
.notes li{margin-bottom:4px}
.disc{margin-top:16px; max-width:80ch}

/* legal pages */
.legal{padding:48px 0 96px}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(2.2rem,2.5vw + 1.2rem,3.2rem); margin-bottom:20px}
.legal h2{font-size:1.35rem; margin:40px 0 12px}
.legal p,.legal li{color:#2d3b55; max-width:72ch; margin-bottom:10px}
.placeholder{background:#ffe7a6; padding:0 4px; border-radius:3px}

/* responsive */
@media (max-width:1000px){
  .hero-row,.letter .wrap,.dev .wrap,.pricing .wrap,.faq .wrap{grid-template-columns:1fr; gap:36px}
  .faq-list{grid-template-columns:1fr}
  .nav ul{display:none}
  .desk .screen-ui{font-size:1.25vw}
  .desk .screen-ui .mn{display:none}
  .desk .screen-ui td,.desk .screen-ui th{padding:.2em .3em}
  .desk .code-ui{position:relative; width:100%; right:auto; top:auto; margin-top:20px}
  .desk-captions{grid-template-columns:1fr; gap:18px}
  .invoice{transform:none; padding:32px 24px}
  .stamp{left:auto; right:18px; top:-14px; background:var(--paper)}
  footer .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .code-ui .ln{opacity:1; transform:none; transition:none}
}

/* ===== v6: explain → benefit → sell ===== */
.navlink{color:var(--ink-2); text-decoration:none; font-size:.95rem; font-weight:600}
.navlink:hover{color:var(--ink)}
.readmore{display:inline-block; margin-top:22px; font-weight:650; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--amber); padding-bottom:2px}
.desk{padding-bottom:72px}

.what{padding:96px 0; background:var(--paper); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.what .wrap{display:grid; grid-template-columns:260px minmax(0,1fr); gap:64px}
.what-body{display:grid; grid-template-columns:1fr 1fr; gap:44px 56px}
.what-body h3{margin-bottom:8px}
.what-body p{color:var(--ink-2)}
.what-body sup a{color:var(--green); font-weight:700; text-decoration:none; font-size:.7em}
.who{list-style:none; padding:0; margin:12px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; color:var(--ink)}
.who li{padding:6px 0; border-top:1px solid var(--rule); font-size:.95rem}

.how{padding:96px 0}
.how h2{margin-bottom:40px}
.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px}
.how .step{border-top:2px solid var(--ink); padding-top:22px}
.how .step .n{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--amber); color:var(--amber-ink); font-weight:800; margin-bottom:14px}
.how .step h3{margin-bottom:8px}
.how .step p{color:var(--ink-2)}
.dev .keynote{margin-top:12px; font-size:.88rem; color:#8fa0b8}

.why{padding:96px 0 24px}
.why h2{margin-bottom:40px}
.benefits{display:grid; grid-template-columns:1fr 1fr; gap:0 56px}
.benefits > div{padding:24px 0; border-top:1px solid var(--rule)}
.benefits h3{font-size:1.2rem; margin-bottom:8px}
.benefits p{color:var(--ink-2); max-width:46ch}
.letter{padding:64px 0 96px}

.pricing{padding:96px 0}
.offer{background:var(--ink); color:#e3e8ef; padding:110px 0}
.offer-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start}
.offer h2{color:#fff; max-width:14ch}
.offer-lead{margin-top:18px; color:#b8c4d6; font-size:1.12rem; max-width:44ch}
.offer .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.btn-line.light{border-color:#e3e8ef; color:#fff}
.btn-line.light:hover{background:rgba(255,255,255,.08)}
.terms{display:grid; grid-template-columns:1fr 1fr; gap:32px}
.terms h3{color:#fff; margin-bottom:12px}
.terms ul{list-style:none; padding:0; margin:0}
.terms li{padding:10px 0; border-top:1px solid #2b3b58; color:#b8c4d6}
.terms li::before{content:"✓"; color:var(--amber); font-weight:800; margin-right:10px}

@media (max-width:1000px){
  .what .wrap,.what-body,.offer-grid,.terms,.benefits,.how-grid{grid-template-columns:1fr; gap:28px}
  .who{grid-template-columns:1fr}
}

/* ===== v8: review fixes ===== */
/* 1. dev section overflowed on phones: let grid children shrink */
.dev .wrap > div, .pricing .wrap > div, .what .wrap > div{min-width:0}
.tabs pre{max-width:100%}
/* 2. touch targets ≥ 44px */
.faq summary{padding:12px 0; min-height:44px}
.faq details{padding:6px 0}
.qty input{height:32px}
/* 3. headings in the narrow side column wrapped into 3 lines: stack on top instead */
.what .wrap{grid-template-columns:1fr; gap:40px}
.what h2{max-width:none}
.what-body p{font-size:1.02rem}
.logo img{width:38px; height:38px; display:block}

/* ===== v10: motion layer (light theme) ===== */
:root{--ease:cubic-bezier(.16,1,.3,1)}
.progress{position:fixed; top:0; left:0; height:3px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--green),var(--amber)); z-index:60}
.nav{position:sticky; top:0; z-index:40; transition:background .3s, padding .3s, box-shadow .3s}
.nav.scrolled{background:rgba(231,235,240,.86); backdrop-filter:blur(10px); padding:12px 0; box-shadow:0 1px 0 var(--rule)}
.logo img{transition:transform .6s var(--ease)} .logo:hover img{transform:rotate(-8deg) scale(1.06)}
.nav ul a{position:relative}
.nav ul a::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.nav ul a:hover::after{transform:scaleX(1)}
.btn{position:relative; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s}
.btn:hover{transform:translateY(-2px)}
.btn-amber{box-shadow:0 10px 26px -14px rgba(233,161,11,.8)}
.btn-amber::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%); transform:translateX(-120%); transition:transform .8s var(--ease)}
.btn-amber:hover::after{transform:translateX(120%)}
.readmore{transition:padding .3s var(--ease)} .readmore:hover{padding-right:10px}

/* hero entrance */
.hero{position:relative}
.hero > .wrap{position:relative; z-index:1}
.leaves{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.leaf{position:absolute; top:-40px; width:12px; height:19px; border-radius:0 100% 0 100%; background:var(--amber); opacity:.45; animation:fall linear infinite}
@keyframes fall{0%{transform:translate3d(0,-40px,0) rotate(0)} 50%{transform:translate3d(40px,40vh,0) rotate(180deg)} 100%{transform:translate3d(-20px,90vh,0) rotate(360deg); opacity:0}}
.hero h1 .w{display:inline-block; overflow:hidden; vertical-align:bottom}
.hero h1 .w > span{display:inline-block; transform:translateY(105%); transition:transform .9s var(--ease)}
.hero.ready h1 .w > span{transform:none}
.hero-aside{opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s}
.hero.ready .hero-aside{opacity:1; transform:none}
.desk{opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease) .7s, transform 1s var(--ease) .7s}
.hero.ready .desk{opacity:1; transform:none}
.packet{fill:var(--amber); filter:drop-shadow(0 0 5px rgba(233,161,11,.9))}
.screen-ui td{transition:background .4s}
.code-ui .ln{white-space:nowrap; opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s}
.code-ui .ln.on{opacity:1; transform:none}
.code-ui .cursor{display:inline-block; width:.55em; height:1.1em; background:#a9e3c6; vertical-align:-2px; animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* scroll reveals */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}
.stagger > *{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.stagger.in > *{opacity:1; transform:none}
.stagger.in > *:nth-child(2){transition-delay:.1s} .stagger.in > *:nth-child(3){transition-delay:.2s} .stagger.in > *:nth-child(4){transition-delay:.3s}
.what-body .block, .benefits > div{transition:transform .4s var(--ease)}
.what-body .block:hover, .benefits > div:hover{transform:translateY(-3px)}
.how-grid{position:relative}
.how .step{border-top-color:transparent; position:relative}
.how .step::before{content:""; position:absolute; top:-2px; left:0; right:0; height:2px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease)}
.how-grid.in .step::before{transform:scaleX(1)}
.how-grid.in .step:nth-child(2)::before{transition-delay:.25s} .how-grid.in .step:nth-child(3)::before{transition-delay:.5s}
.how .step .n{transition:transform .5s var(--ease)} .how .step:hover .n{transform:scale(1.15) rotate(-8deg)}
.sign svg path{stroke-dasharray:420; stroke-dashoffset:420; transition:stroke-dashoffset 2.2s var(--ease) .3s}
.letter.in .sign svg path{stroke-dashoffset:0}
.invoice{transition:transform .6s var(--ease), box-shadow .6s var(--ease)}
.invoice:hover{transform:rotate(0) translateY(-6px)}
.inv-total .amt.bump{animation:bump .35s var(--ease)}
@keyframes bump{50%{transform:scale(1.08); color:var(--green)}}
.faq summary{display:flex; justify-content:space-between; gap:16px}
.faq summary::after{content:"+"; color:var(--amber); font-weight:800; transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] p{animation:fadein .4s var(--ease)}
@keyframes fadein{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.tabs pre{animation:fadein .4s var(--ease)}
.offer{position:relative; overflow:hidden}
.offer::before{content:""; position:absolute; width:520px; height:520px; right:-160px; top:-200px; border-radius:50%; background:radial-gradient(circle, rgba(233,161,11,.22), transparent 65%); animation:pulse 6s ease-in-out infinite}
.offer .wrap{position:relative}
@keyframes pulse{50%{transform:scale(1.15); opacity:.7}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal,.stagger > *,.hero-aside,.desk,.hero h1 .w > span,.code-ui .ln{opacity:1 !important; transform:none !important}
  .leaves{display:none}
  .how .step::before{transform:none}
  .sign svg path{stroke-dashoffset:0}
}