/* askbiff site styles. All values come from tokens.css; see design.md. */
:root{--water-h:120px;--duck-w:min(430px,76vw)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
[id]{scroll-margin-top:var(--nav-h)}
body,.deep{
  color:var(--text);background-color:var(--bg);
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:var(--tile-size) var(--tile-size);background-position:calc(50% - var(--tile-size) / 2) 0;
}
body{margin:0;overflow-x:clip;font:400 var(--text-body)/1.55 var(--font-sans)}
img{display:block;max-width:100%;height:auto}
code,pre{font-family:var(--font-mono)}
p code,li code,dd code{font-size:.84em;background:rgba(11,43,51,.08);padding:.08em .32em;border-radius:var(--radius-xs);white-space:nowrap}
:focus-visible{outline:3px solid var(--focus-color);outline-offset:3px;border-radius:var(--radius-xs)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--space-section) 0}
#review{padding-top:clamp(40px,5vw,72px)}
.display{margin:0;font-weight:800;font-stretch:75%;line-height:.92;letter-spacing:-.02em;text-wrap:balance}
h1.display{font-size:var(--text-h1)}
h2.display{font-size:var(--text-h2)}
.lede{font-size:var(--text-lede);color:var(--text-2);max-width:34em;margin:var(--space-6) 0 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);font:inherit;font-weight:700;font-size:var(--text-body);line-height:1.1;padding:var(--space-4) var(--space-6);border-radius:var(--radius-m);border:var(--line);cursor:pointer;text-decoration:none;color:var(--ink);background:var(--duck);box-shadow:var(--shadow-m);transition:transform var(--dur-press),box-shadow var(--dur-press)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-l)}
.btn:active{transform:translateY(4px);box-shadow:var(--shadow-press)}
.btn-sm{font-size:var(--text-base);padding:var(--space-2) var(--space-4);border-radius:var(--radius-s);box-shadow:var(--shadow-s)}
.btn-sm:hover{box-shadow:0 4px 0 var(--shadow-color)}
.btn-sm:active{transform:translateY(2px);box-shadow:var(--shadow-press)}
.btn:disabled,.btn:disabled:hover{cursor:not-allowed;opacity:.5;transform:translateY(4px);box-shadow:var(--shadow-press)}
.btn[aria-busy=true],.btn[aria-busy=true]:hover{cursor:progress;opacity:1}
.btn-block{width:100%}
.link{color:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.link:hover{text-decoration-color:var(--beak)}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:rgba(247,251,251,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--grout)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:var(--nav-h);display:flex;align-items:center;gap:var(--space-8)}
.logo{display:flex;align-items:center;gap:var(--space-2);color:var(--ink);text-decoration:none;font-weight:800;font-stretch:75%;font-size:1.7rem;letter-spacing:-.01em}
.av{position:relative;flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--duck-soft);border:2px solid var(--ink)}
.av img{position:absolute;max-width:none;width:150%;left:-12%;top:-3%}
.nav-links{display:flex;gap:var(--space-7);margin-left:auto}
.nav-links a{color:var(--ink);text-decoration:none;font-size:var(--text-base);font-weight:500}
.nav-links a:hover{text-decoration:underline;text-underline-offset:5px}
@media (max-width:820px){.nav-links{display:none}.nav .btn{margin-left:auto}}

/* water */
.water{position:absolute;left:0;right:0;bottom:0;height:var(--water-h);z-index:3;background:linear-gradient(var(--water),#0B7480 45%,var(--deep))}
.water::before,.water-back{content:"";position:absolute;left:0;height:28px;width:calc(100% + 160px);background-repeat:repeat-x;background-size:160px 28px;animation:drift var(--dur-drift) linear infinite}
.water::before{top:-27px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='28'%3E%3Cpath d='M0 14Q40 3 80 14T160 14V28H0Z' fill='%230E8C99'/%3E%3Cpath d='M0 14Q40 3 80 14T160 14' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='2'/%3E%3C/svg%3E")}
.water-back{bottom:calc(var(--water-h) + 6px);z-index:1;left:-160px;width:calc(100% + 320px);animation-duration:9s;animation-direction:reverse;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='28'%3E%3Cpath d='M0 14Q40 25 80 14T160 14V28H0Z' fill='%236CC7CF'/%3E%3C/svg%3E")}
@keyframes drift{to{transform:translateX(-160px)}}
@keyframes bob{from{transform:translateY(0) rotate(-1.3deg)}to{transform:translateY(8px) rotate(1.3deg)}}

/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(40px,6vw,88px) 0 var(--water-h)}
.hero-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:var(--space-6)}
.hero-copy{padding-bottom:var(--space-24);position:relative;z-index:4}
.hero .lede{margin:var(--space-7) 0 var(--space-9)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5) var(--space-7)}
.micro{font-size:var(--text-m);color:var(--text-2);margin:var(--space-6) 0 0}
.stage{position:relative;justify-self:center;padding-top:150px;margin-bottom:calc(var(--duck-w) * -.215)}
.duck-wrap{position:relative;z-index:2;width:var(--duck-w)}
.ripple{position:absolute;z-index:4;left:6%;width:84%;height:22px;bottom:calc(var(--duck-w) * .215 + 2px);border-bottom:2px solid rgba(255,255,255,.55);border-radius:50%;animation:ripple var(--dur-bob) ease-in-out infinite alternate}
.ripple::before{content:"";position:absolute;left:8%;right:8%;top:100%;height:46px;background:radial-gradient(closest-side,rgba(255,198,26,.32),transparent);filter:blur(2px)}
@keyframes ripple{from{transform:scaleX(.96)}to{transform:scaleX(1.03) translateY(6px)}}
.duck{position:relative;aspect-ratio:726/913;transform-origin:50% 78%;animation:bob var(--dur-bob) ease-in-out infinite alternate}
.duck .f{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.duck .f.on{opacity:1}
.duck .beak{position:absolute;height:auto;opacity:0}
.duck .beak.on{opacity:1}
.bubble{position:absolute;left:-6%;bottom:calc(100% - 2%);z-index:5;max-width:min(320px,82vw);background:var(--white);border:var(--line);border-radius:var(--radius-xl);padding:var(--space-3) var(--space-5) var(--space-4);box-shadow:var(--shadow-m);font-weight:800;font-stretch:85%;font-size:var(--text-bubble);line-height:1.05;letter-spacing:-.01em;transform-origin:22% 100%;transition:opacity var(--dur-fade),transform var(--dur-fade)}
.bubble::after{content:"";position:absolute;left:52px;bottom:-10px;width:18px;height:18px;background:var(--white);border-right:var(--line);border-bottom:var(--line);transform:rotate(45deg) skew(8deg,8deg)}
.bubble.hide{opacity:0;transform:scale(.92)}
.bubble.typing #say::after{content:"";display:inline-block;width:3px;height:.9em;margin-left:3px;background:var(--ink);vertical-align:-.1em;animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .hero-copy{padding-bottom:0}
  .stage{padding-top:132px}
}
@media (max-width:600px){
  .hero{padding-top:var(--space-4)}
  .hero .lede{margin:var(--space-7) 0 0}
  .hide-phone{display:none}
  .stage{--duck-w:min(240px,62vw);padding-top:100px}
  .bubble{font-size:1.3rem}
}

/* review */
.vs{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-7);align-items:start;margin-top:var(--space-10)}
.diff{margin:var(--space-12) 0 0;background:var(--deeper);border-radius:var(--radius-m);padding:var(--space-5) 0;overflow-x:auto;font-size:var(--text-s);line-height:1.7;color:var(--code-text)}
.diff .file{display:block;padding:0 var(--space-5) var(--space-2);color:var(--code-muted)}
.diff span{display:block;padding:0 var(--space-5);white-space:pre}
.diff .add{background:rgba(255,198,26,.12);color:var(--code-add)}
.card-h{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-m);font-weight:600;margin-bottom:var(--space-4)}
.card-h .wc{margin-left:auto;font-weight:500;opacity:.75}
.essay{background:var(--tile);color:var(--ink);border-radius:var(--radius-l);padding:var(--space-6) var(--space-7);font-size:var(--text-m);line-height:1.6}
.essay h4{font-size:var(--text-base);margin:var(--space-5) 0 var(--space-2)}
.essay h4:first-child{margin-top:0}
.essay p,.essay ul{margin:0}
.essay ul{padding-left:1.1em}
.essay .poem{font-style:italic}
.verdict{position:sticky;top:var(--space-24);background:var(--duck);color:var(--ink);border:var(--line);border-radius:var(--radius-l);padding:var(--space-6) var(--space-7) var(--space-8);box-shadow:var(--shadow-l)}
.verdict p{margin:0;font-weight:800;font-stretch:85%;font-size:var(--text-verdict);line-height:1.05;letter-spacing:-.015em}
.verdict .ghost{visibility:hidden}
.verdict p code{font-size:.7em;background:rgba(11,43,51,.08);font-weight:600;white-space:normal;padding:0 .18em}
@media (max-width:860px){
  .vs{grid-template-columns:1fr}
  .verdict{position:static;order:-1}
  .essay-body{max-height:440px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
}

/* steps */
.steps{list-style:none;margin:var(--space-14) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--line)}
.steps li{padding:var(--space-8) var(--space-8) 0 0}
.steps li+li{padding-left:var(--space-8);border-left:1px solid var(--grout)}
.num{display:block;font-weight:800;font-stretch:75%;font-size:var(--text-num);line-height:.8;color:var(--duck);-webkit-text-stroke:var(--line-w) var(--ink);text-shadow:0 5px 0 var(--shadow-color);margin-bottom:var(--space-7)}
.steps h3{margin:0 0 var(--space-2);font-size:var(--text-xl);line-height:1.15;font-weight:800;font-stretch:85%}
.steps p{margin:0;color:var(--text-2);max-width:22em}
@media (max-width:820px){
  .steps{grid-template-columns:1fr}
  .steps li,.steps li+li{padding:var(--space-7) 0;border-left:0;border-bottom:1px solid var(--grout)}
  .num{font-size:5rem;margin-bottom:var(--space-4)}
}

/* agents */
.agents>*,.vs>*,.privacy>*{min-width:0}
.agents{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:start}
.cap{font-size:var(--text-m);font-weight:600;margin:var(--space-8) 0 var(--space-2)}
.code{margin:0;background:var(--deeper);color:var(--code-text);border-radius:var(--radius-m);padding:var(--space-5);font-size:var(--text-s);line-height:1.65;overflow-x:auto}
.code .k{color:var(--code-key)}
.call{position:relative;padding-top:178px}
.call-duck{position:absolute;top:0;right:28px;width:230px;z-index:1}
.chat{position:relative;z-index:2;list-style:none;margin:0;padding:var(--space-6);background:var(--white);color:var(--ink);border:var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-l);display:grid;gap:var(--space-3)}
.chat li{display:grid;gap:var(--space-1)}
.chat b{font-size:var(--text-xs);font-weight:700;color:var(--ink-2)}
.chat p{margin:0;font-size:var(--text-base);line-height:1.45}
.chat .ai p{color:var(--ink-2)}
.chat .biff p{background:var(--duck-soft);border-radius:var(--radius-s);padding:var(--space-3) var(--space-4);font-weight:700}
.chat .tool{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-2);border-left:3px solid var(--water);padding-left:var(--space-2)}
@media (max-width:900px){.agents{grid-template-columns:1fr}.call{max-width:560px}}

/* privacy */
.privacy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:center}
.privacy img{border-radius:var(--radius-2xl);box-shadow:var(--shadow-2xl);aspect-ratio:1}
.facts{margin:var(--space-10) 0 0;display:grid;gap:0}
.facts div{padding:var(--space-5) 0;border-top:1px solid rgba(255,255,255,.18)}
.facts dt{font-weight:800;font-stretch:85%;font-size:var(--text-xl);line-height:1.15;color:var(--white)}
.facts dd{margin:var(--space-1) 0 0;color:var(--text-2)}
@media (max-width:900px){.privacy{grid-template-columns:1fr}.privacy img{max-width:min(520px,100%)}}

/* pricing */
.pricing{text-align:center}
.plan-wrap{position:relative;width:min(540px,100%);margin:188px auto 0}
.plan-duck{position:absolute;width:190px;right:36px;top:-178px;z-index:1}
.plan{position:relative;z-index:2;text-align:left;background:var(--white);color:var(--ink);border:var(--line);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);padding:var(--space-8) clamp(24px,5vw,40px)}
.plan h3{margin:0;font-size:var(--text-l);font-weight:800;font-stretch:85%}
.price{display:flex;align-items:flex-end;gap:var(--space-3);margin:var(--space-2) 0 var(--space-6)}
.amt{font-weight:800;font-stretch:75%;font-size:var(--text-price);line-height:.8;letter-spacing:-.03em}
.per{color:var(--ink-2);font-size:var(--text-base);line-height:1.3;padding-bottom:var(--space-2)}
.incl{list-style:none;margin:0 0 var(--space-8);padding:0;display:grid;gap:var(--space-3)}
.incl li{display:flex;gap:var(--space-3);align-items:baseline}
.incl li::before{content:"";flex:none;width:20px;height:20px;border-radius:var(--radius-xs);border:2px solid var(--ink);transform:translateY(4px);background:var(--duck) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4 5 8.8 9.6 3.4' fill='none' stroke='%230B2B33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.plan .micro{text-align:center;margin-top:var(--space-4)}

/* faq */
.faq{margin:var(--space-14) 0 0;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-14)}
.faq div{padding:var(--space-6) 0;border-top:var(--line)}
.faq dt{font-size:var(--text-body);font-weight:600;color:var(--text-2)}
.faq dd{margin:var(--space-2) 0 0;font-weight:800;font-stretch:75%;font-size:var(--text-answer);line-height:.98;letter-spacing:-.015em}
@media (max-width:760px){.faq{grid-template-columns:1fr}}

/* final */
.final{--water-h:112px;position:relative;overflow:hidden;padding:clamp(24px,4vw,56px) 0 var(--water-h)}
.final-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:var(--space-6)}
.final-copy{padding-bottom:var(--space-20);position:relative;z-index:4}
.final-copy .lede{margin:var(--space-6) 0 var(--space-8)}
.final-duck{position:relative;justify-self:center;width:min(330px,64vw);margin-bottom:calc(min(330px,64vw) * -.215)}
.final-duck img{position:relative;z-index:2;animation:bob 3.8s ease-in-out infinite alternate;transform-origin:50% 78%}
.final-duck .ripple{bottom:calc(min(330px,64vw) * .215 + 2px);animation-duration:3.8s}
@media (max-width:820px){.final-in{grid-template-columns:1fr}.final-copy{padding-bottom:var(--space-6)}}
.foot{padding:var(--space-7) 0 var(--space-10);font-size:var(--text-m);color:var(--text-2)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:var(--space-6)}

/* documents (privacy) */
.doc{max-width:42em}
.doc h1{font-size:var(--text-h2)}
.doc .updated{margin:var(--space-4) 0 0;color:var(--text-2);font-size:var(--text-m)}
.doc h2{margin:var(--space-12) 0 var(--space-3);font-weight:800;font-stretch:85%;font-size:var(--text-xl);line-height:1.15}
.doc p,.doc li{color:var(--text-2)}
.doc p{margin:0 0 var(--space-4)}
.doc ul{margin:0 0 var(--space-4);padding-left:1.1em}
.doc li+li{margin-top:var(--space-2)}
.doc mark{background:var(--duck-soft);color:var(--ink);padding:0 .2em;border-radius:var(--radius-xs)}

/* checkout */
dialog.co{width:min(460px,calc(100vw - 32px));padding:0;border:var(--line);border-radius:var(--radius-xl);background:var(--white);color:var(--ink);box-shadow:var(--shadow-xl)}
dialog.co::backdrop{background:rgba(11,43,51,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.co-in{position:relative;padding:var(--space-7)}
.co-x{position:absolute;top:var(--space-3);right:var(--space-3);width:var(--tap);height:var(--tap);border:0;border-radius:var(--radius-s);background:transparent;font:inherit;font-size:var(--text-xl);line-height:1;color:var(--ink);cursor:pointer}
.co-x:hover{background:var(--tile)}
.co h2{margin:0 0 var(--space-5);font-weight:800;font-stretch:85%;font-size:var(--text-2xl);line-height:1}
.order{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-m);background:var(--tile);border:1px solid var(--grout)}
.order .av{width:48px;height:48px}
.order b{display:block;font-size:var(--text-base)}
.order span{font-size:var(--text-m);color:var(--ink-2)}
.order .amt-s{margin-left:auto;text-align:right;font-weight:800;font-size:var(--text-l);line-height:1.1}
.order .amt-s small{display:block;font-weight:400;font-size:var(--text-xs);color:var(--ink-2)}
.co label{display:block;font-weight:600;font-size:var(--text-base);margin:var(--space-6) 0 var(--space-2)}
.co input{width:100%;font:inherit;font-size:var(--text-base);padding:var(--space-3) var(--space-4);border:2px solid var(--ink);border-radius:var(--radius-s);background:var(--white);color:var(--ink)}
.co input:focus-visible{outline:3px solid var(--water);outline-offset:1px}
.co input[aria-invalid=true]{border-color:var(--error)}
.co input:disabled{background:var(--tile);border-color:var(--grout);color:var(--ink-2);cursor:not-allowed}
.co-err{min-height:1.4em;margin:var(--space-2) 0 var(--space-3);font-size:var(--text-m);color:var(--error);font-weight:600}
.co-note{margin:var(--space-4) 0 0;text-align:center;font-size:var(--text-s);color:var(--ink-2);text-wrap:pretty}
.co-note b{color:var(--ink);font-weight:600}
.co-done{text-align:center}
.co-done img{width:150px;margin:0 auto var(--space-3)}
.co-done p{color:var(--ink-2);margin:0 0 var(--space-6)}
.co-done h2{margin-bottom:var(--space-3)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .water::before,.water-back,.duck,.final-duck img,.ripple{animation:none}
  .bubble{transition:none}
}