/* getopas.app — "The Personal Record" website design (Opas Website / Privacy / Terms /
   Support in the Opas Claude Design project). Paper #f2ede2, ink #211e16, pine #35503f,
   ochre #916219, brick #9c3a2c; Newsreader, Instrument Sans, JetBrains Mono. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f2ede2;color:#211e16;font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
svg{display:block}
::selection{background:#35503f;color:#f2ede2}
:focus-visible{outline:2px solid #35503f;outline-offset:3px;border-radius:8px}
.page{background:#f2ede2;min-height:100vh;overflow-x:clip}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:8px;z-index:10;background:#211e16;color:#f2ede2;padding:10px 16px;border-radius:999px;font:600 13px 'Instrument Sans',sans-serif}
.skip:focus{left:16px}
.eyebrow{font:600 11.5px 'Instrument Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#35503f;margin:0}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;min-height:44px;border-radius:999px;font:600 14px 'Instrument Sans',sans-serif;text-decoration:none;cursor:pointer;border:0;white-space:nowrap;transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-ink{background:#211e16;color:#f2ede2}
.btn-pine{background:#35503f;color:#f2ede2}
.btn-ghost{background:transparent;border:1px solid rgba(33,30,22,.28);color:#211e16}
.btn-ghost:hover{background:rgba(33,30,22,.05)}
.btn-sm{padding:0 18px;font-size:13px}
.link{text-decoration:none;color:#4c473c}
.link:hover{color:#211e16}
.navlink{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font:500 14px 'Instrument Sans',sans-serif}

/* nav */
.nav{padding-top:22px;padding-bottom:22px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand span{font:500 22px 'Newsreader',serif;letter-spacing:-.01em}
.spacer{flex:1}

/* footer */
.foot{border-top:1px solid rgba(33,30,22,.12);margin-top:120px}
.foot.flush{margin-top:0}
.foot-row{padding-top:28px;padding-bottom:12px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;font:400 14px 'Instrument Sans',sans-serif;color:#4c473c}
.foot-row .name{font:500 17px 'Newsreader',serif;color:#211e16}
.foot-links{display:flex;gap:10px;flex-wrap:wrap}
.foot-note{padding-bottom:28px;font:400 13px/1.55 'Instrument Sans',sans-serif;color:#6b6457;max-width:720px;margin:0}

@keyframes op-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.load{animation:op-in .8s cubic-bezier(.22,1,.36,1) both}

/* ---------- document pages ---------- */
.doc-head{padding-top:64px;padding-bottom:56px}
.doc-head h1{font:500 clamp(42px,6vw,80px)/1 'Newsreader',serif;letter-spacing:-.035em;margin:0;max-width:820px;text-wrap:balance}
.doc-head .lead{font:400 clamp(18px,1.9vw,22px)/1.5 'Newsreader',serif;color:#4c473c;margin:22px 0 0;max-width:620px}
.doc-head .lead a{color:#35503f;text-underline-offset:3px}
.doc-head .stamp{font:400 14px 'Instrument Sans',sans-serif;color:#6b6457;margin:18px 0 0}
.short{padding-bottom:72px}
.short h2{font:500 20px 'Newsreader',serif;margin:0 0 6px}
.short ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.short li{font:400 18px/1.5 'Newsreader',serif;color:#211e16;padding:18px 0;border-top:1px solid rgba(33,30,22,.18)}
.doc{display:grid;grid-template-columns:220px minmax(0,680px);gap:72px;align-items:start}
.toc{display:flex;flex-direction:column;gap:2px;font:400 14px/1.4 'Instrument Sans',sans-serif;padding-top:6px;position:sticky;top:24px}
.toc a{display:block;padding:7px 0;text-decoration:none;color:#6b6457}
.toc a:hover{color:#211e16}
.prose h2{font:500 clamp(24px,2.6vw,30px)/1.15 'Newsreader',serif;letter-spacing:-.015em;margin:56px 0 14px;scroll-margin-top:24px}
.prose > h2:first-child{margin-top:0}
.prose h3{font:600 16px/1.4 'Instrument Sans',sans-serif;margin:28px 0 8px}
.prose p,.prose li{font:400 18px/1.7 'Newsreader',serif;color:#3a362c}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 8px}
.prose li::marker{color:#8a8272}
.prose strong{font-weight:500;color:#211e16}
.prose a{color:#35503f;text-underline-offset:3px}
.table{overflow-x:auto;margin:6px 0 22px}
.table table{width:100%;border-collapse:collapse;font:400 15px/1.5 'Instrument Sans',sans-serif;color:#3a362c}
.table th{text-align:left;font:600 11.5px 'Instrument Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#211e16;padding:0 16px 10px 0;border-bottom:1px solid rgba(33,30,22,.22)}
.table td{vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid rgba(33,30,22,.12)}
.table td:first-child{color:#211e16}

/* questions (support + landing) */
.help{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:72px;align-items:start}
details.q{border-top:1px solid rgba(33,30,22,.18)}
details.q:last-of-type{border-bottom:1px solid rgba(33,30,22,.18)}
details.q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:500 clamp(19px,2vw,22px)/1.3 'Newsreader',serif;min-height:44px}
details.q summary::-webkit-details-marker{display:none}
details.q .plus{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid rgba(33,30,22,.25);position:relative;transition:transform .35s cubic-bezier(.22,1,.36,1),background .2s}
details.q .plus::before,details.q .plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:#211e16;transform:translate(-50%,-50%)}
details.q .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
details.q[open] .plus{transform:rotate(45deg);background:#35503f;border-color:#35503f}
details.q[open] .plus::before,details.q[open] .plus::after{background:#f2ede2}
details.q .a{padding:0 48px 24px 0}
details.q .a p{font:400 18px/1.65 'Newsreader',serif;color:#3a362c;margin:0 0 12px}
details.q .a a{color:#35503f;text-underline-offset:3px}
details.q[open] .a{animation:op-in .45s cubic-bezier(.22,1,.36,1) both}
.card-ink{background:#16150e;color:#ece6d8;border-radius:22px;padding:36px}
.card-ink h2{font:500 clamp(26px,3vw,34px)/1.1 'Newsreader',serif;letter-spacing:-.02em;margin:0}
.card-ink p{font:400 18px/1.6 'Newsreader',serif;color:#b6ae9e;margin:14px 0 0}
.card-ink .btn{margin-top:26px;background:#f2ede2;color:#211e16;padding:0 22px}
.card-ink .addr{font:400 14px/1.5 'Instrument Sans',sans-serif;color:#9a9384;margin:18px 0 0}
.card-ink .warn{margin-top:32px;padding-top:24px;border-top:1px solid rgba(236,230,216,.14);font:400 15px/1.6 'Instrument Sans',sans-serif;color:#b6ae9e}

/* ---------- landing ---------- */
.hero{padding-top:72px}
.hero-from{font:500 14px 'Instrument Sans',sans-serif;color:#6b6457;margin:0}
.stack{display:grid;position:relative}
.stack > *{grid-area:1/1}
.ghost{visibility:hidden}
.fi-swap{transition:opacity .22s ease,filter .22s ease,transform .22s ease}
.fi-swap.fading{opacity:0;filter:blur(4px);transform:translateY(-6px)}
.fiq{font:italic 400 clamp(17px,1.7vw,21px)/1.55 'Newsreader',serif;color:#4c473c;margin:0;text-wrap:pretty}
.head{font:500 clamp(42px,6.6vw,96px)/1 'Newsreader',serif;letter-spacing:-.035em;margin:28px 0 0;text-wrap:balance}
.try-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px}
.try{padding:11px 18px 11px 14px;font-size:13px}
.try .ring{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.try:hover .ring{transform:rotate(120deg)}
.count{font:400 14px 'Instrument Sans',sans-serif;color:#6b6457}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;margin-top:72px;padding-top:28px;border-top:1px solid rgba(33,30,22,.18)}
.hero-foot p{font:400 clamp(19px,1.9vw,23px)/1.45 'Newsreader',serif;color:#211e16;margin:0;max-width:520px}
.ctas{display:flex;gap:10px;flex-wrap:wrap}
.fine,.hero-foot p.fine{font:400 13px 'Instrument Sans',sans-serif;color:#6b6457;margin:14px 0 0}

/* authorities strip */
.strip{margin-top:56px;border-top:1px solid rgba(33,30,22,.12);border-bottom:1px solid rgba(33,30,22,.12)}
.strip-in{display:flex;align-items:center;gap:28px;padding-top:20px;padding-bottom:20px;overflow:hidden}
.strip .eyebrow{flex:none;color:#6b6457}
.marquee{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee > div{display:flex;width:max-content;animation:op-marquee 40s linear infinite}
/* The gap lives inside each item, not between them, so translating by half the
   track lands exactly on the duplicate set and the loop has no jump. */
.marquee span{font:500 21px 'Newsreader',serif;color:#4c473c;white-space:nowrap;padding-right:48px}
@keyframes op-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* the brown envelope */
.problem{padding-top:120px;padding-bottom:20px}
.problem p.big{font:400 clamp(26px,3.3vw,42px)/1.3 'Newsreader',serif;letter-spacing:-.015em;color:#211e16;margin:18px 0 0;max-width:960px;text-wrap:pretty}
.problem p.big em{font-style:italic;color:#35503f}

/* section heading shared by detail sections */
.sec{padding-top:110px}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}
.sec-head h2{font:500 clamp(32px,4.2vw,52px)/1.05 'Newsreader',serif;letter-spacing:-.025em;margin:10px 0 0;max-width:640px;text-wrap:balance}
.sec-head p{font:400 18px/1.6 'Newsreader',serif;color:#4c473c;margin:0;max-width:380px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid rgba(33,30,22,.22)}
.steps li{list-style:none;padding:28px 28px 8px 0}
.steps li + li{padding-left:28px;border-left:1px solid rgba(33,30,22,.12)}
.steps .n{font:500 13px 'JetBrains Mono',monospace;letter-spacing:.06em;color:#916219}
.steps h3,.feats h3{font:500 24px/1.2 'Newsreader',serif;margin:14px 0 10px;letter-spacing:-.01em}
.steps p,.feats p{font:400 17px/1.6 'Newsreader',serif;color:#4c473c;margin:0}
.steps,.feats{padding:0;margin:0}

/* features */
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.feats li{list-style:none;align-content:start;padding:26px 0 30px;border-top:1px solid rgba(33,30,22,.18);display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px}
.feats .ic{width:36px;height:36px;border-radius:50%;background:#e3dbc8;display:flex;align-items:center;justify-content:center;grid-row:span 2;margin-top:12px}
.feats h3{margin-top:12px}
.feats p a{color:#35503f;text-underline-offset:3px}

/* languages */
.langs{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.langs span{font:500 15px 'Instrument Sans',sans-serif;border:1px solid rgba(33,30,22,.22);border-radius:999px;padding:10px 18px}

/* closing */
.closing{padding-top:110px;padding-bottom:20px}
.closing-in{background:#35503f;color:#f2ede2;border-radius:28px;padding:64px 56px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;overflow:hidden;position:relative}
.closing-in h2{font:500 clamp(34px,4.6vw,60px)/1.02 'Newsreader',serif;letter-spacing:-.03em;margin:0;max-width:620px}
.closing-in p{font:400 19px/1.6 'Newsreader',serif;color:#d3dfd3;margin:18px 0 0;max-width:520px}
.closing-in .ctas{margin-top:30px}
.closing-in .btn-light{background:#f2ede2;color:#211e16}
.closing-in .btn-line{background:transparent;color:#f2ede2;box-shadow:inset 0 0 0 1px rgba(242,237,226,.45)}
.closing-in .mark-lg{opacity:.9}

/* phones */
.how{padding-top:120px;padding-bottom:110px;scroll-margin-top:12px}
.ph{width:376px;border-radius:50px;background:#1b1a13;padding:9px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 1px 0 1px rgba(33,30,22,.25),0 50px 90px -40px rgba(33,30,22,.6)}
.scr{border-radius:41px;overflow:hidden;height:760px;display:flex;flex-direction:column;position:relative}
.phones{display:flex;justify-content:center;align-items:flex-start;gap:44px}
.step{display:flex;flex-direction:column;align-items:center;gap:26px;flex:none}
.step .ph{zoom:.72}
.step-mid{margin-top:-56px}
.step-mid .ph{zoom:.8}
.cap{font:400 19px/1.35 'Newsreader',serif;color:#211e16;text-align:center;max-width:240px;margin:0}
.cap span{display:block;font:400 15px/1.5 'Instrument Sans',sans-serif;color:#4c473c;margin-top:4px}
@keyframes op-scan{0%{top:0}50%{top:calc(100% - 3px)}100%{top:0}}
.scanline{position:absolute;left:0;right:0;height:3px;background:#8fbb9f;box-shadow:0 0 18px 3px rgba(143,187,159,.55);animation:op-scan 3.2s cubic-bezier(.5,0,.5,1) infinite}
.row{display:flex;align-items:center;gap:11px;padding:9px 0;font:13px 'JetBrains Mono',monospace;letter-spacing:.04em}
.g{position:relative;width:14px;height:16px;flex:none}
.g span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
@keyframes op-done1{0%,18%{opacity:0}22%,94%{opacity:1}100%{opacity:0}}
@keyframes op-done2{0%,42%{opacity:0}46%,94%{opacity:1}100%{opacity:0}}
@keyframes op-done3{0%,66%{opacity:0}70%,94%{opacity:1}100%{opacity:0}}
@keyframes op-wait1{0%,18%{opacity:1}22%,94%{opacity:0}100%{opacity:1}}
@keyframes op-wait2{0%,42%{opacity:1}46%,94%{opacity:0}100%{opacity:1}}
@keyframes op-wait3{0%,66%{opacity:1}70%,94%{opacity:0}100%{opacity:1}}
.d1{animation:op-done1 7s linear infinite}.w1{animation:op-wait1 7s linear infinite}
.d2{animation:op-done2 7s linear infinite}.w2{animation:op-wait2 7s linear infinite}
.d3{animation:op-done3 7s linear infinite}.w3{animation:op-wait3 7s linear infinite}
@keyframes op-newrow{0%,30%{opacity:0;transform:translateY(-8px)}40%,92%{opacity:1;transform:none}100%{opacity:0}}
.newrow{animation:op-newrow 7s cubic-bezier(.22,1,.36,1) infinite}
@keyframes op-flash{0%,38%{background:rgba(53,80,63,0)}44%{background:rgba(53,80,63,.12)}70%,100%{background:rgba(53,80,63,0)}}
.flash{animation:op-flash 7s ease infinite}

/* privacy band */
.band{background:#eae3d3;border-top:1px solid rgba(33,30,22,.12);margin-top:110px}
.band-in{padding-top:110px;padding-bottom:110px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:56px;align-items:center}
.band h2,.pricing h2{font:500 clamp(32px,4.2vw,52px)/1.05 'Newsreader',serif;letter-spacing:-.025em;margin:0;max-width:540px;text-wrap:balance}
.band p{font:400 19px/1.6 'Newsreader',serif;color:#4c473c;margin:24px 0 0;max-width:460px}
.band p a{color:#35503f;text-underline-offset:3px}
.paper{margin:0;background:#fbf8f0;border:1px solid rgba(33,30,22,.13);border-radius:6px;padding:36px 34px;box-shadow:0 1px 0 rgba(33,30,22,.06),0 30px 60px -40px rgba(33,30,22,.45);transform:rotate(1deg)}
.paper .top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 12px 'JetBrains Mono',monospace;color:#6b6457}
.paper .subj{font:500 17px 'JetBrains Mono',monospace;margin:28px 0 20px}
.paper .body{font:400 14px/2 'JetBrains Mono',monospace;color:#4c473c}
.paper .body p{margin:18px 0 0;font:inherit;color:inherit;max-width:none}
.bar{display:inline-block;background:#211e16;border-radius:2px;height:1.05em;vertical-align:-3px;transform-origin:left center;max-width:38%}
.mark{background:rgba(145,98,25,.22);padding:1px 3px;border-radius:2px}
@keyframes op-rise{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@keyframes op-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes op-glow{from{background:rgba(145,98,25,0)}to{background:rgba(145,98,25,.22)}}
@supports (animation-timeline:view()){
  .how{view-timeline-name:--phones}
  .rise{animation:op-rise linear both;animation-timeline:--phones;animation-range:entry 0% cover 32%}
  .rise-2{animation-range:entry 8% cover 38%}
  .rise-3{animation-range:entry 16% cover 44%}
  .paper{view-timeline-name:--letter}
  .paper .bar{animation:op-sweep linear both;animation-timeline:--letter;animation-range:entry 30% cover 45%}
  .paper .bar.b2{animation-range:entry 36% cover 50%}
  .paper .bar.b3{animation-range:entry 42% cover 55%}
  .paper .mark{animation:op-glow linear both;animation-timeline:--letter;animation-range:cover 40% cover 58%}
}

/* pricing */
.pricing{background:#16150e;color:#ece6d8}
.pricing-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;padding-top:110px;padding-bottom:110px}
.pricing .intro{padding:6px 8px 24px 0}
.pricing .intro p{font:400 18px/1.6 'Newsreader',serif;color:#b6ae9e;margin:18px 0 0;max-width:300px}
.plan{border-radius:22px;padding:32px;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.plan:hover{transform:translateY(-4px)}
.plan .name{font:500 20px 'Newsreader',serif;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.plan .price{font:500 56px/1 'Newsreader',serif;letter-spacing:-.025em;margin:20px 0 0}
.plan .price small{font:400 16px 'Instrument Sans',sans-serif;letter-spacing:0}
.plan ul{list-style:none;margin:24px 0 32px;padding:0;display:flex;flex-direction:column;gap:12px;font:400 15px/1.45 'Instrument Sans',sans-serif}
.plan li{display:flex;gap:11px;align-items:baseline}
.plan li svg{flex:none;transform:translateY(2px)}
.plan .btn{margin-top:auto}
.plan-free{background:#201e16;box-shadow:inset 0 0 0 1px rgba(236,230,216,.12)}
.plan-free ul{color:#cfc8b8}
.plan-free .btn{background:transparent;color:#ece6d8;box-shadow:inset 0 0 0 1px rgba(236,230,216,.3)}
.plan-prem{background:#35503f;color:#f2ede2;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.plan-prem ul{color:#e3ebe3}
.plan-prem .price small{color:#d3dfd3}
.soon{font:600 10.5px 'Instrument Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(242,237,226,.55);border-radius:999px;padding:5px 10px}
.plan-prem .later{margin-top:auto;font:400 14px/1.5 'Instrument Sans',sans-serif;color:#d3dfd3}

/* 404 / open-letter */
.center-head{padding-top:96px;padding-bottom:40px;max-width:760px}
.center-head .btn{margin-top:32px}
.center-head .fine a{color:#35503f}

/* responsive */
@media (max-width:1100px){
  .phones{gap:24px}
  .step .ph{zoom:.6}
  .step-mid .ph{zoom:.66}
  .step-mid{margin-top:-40px}
  .cap{font-size:17px;max-width:200px}
  .cap span{font-size:14px}
  .pricing-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pricing-in > :first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .doc{grid-template-columns:minmax(0,1fr);gap:28px}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;gap:4px 18px;padding:0 0 8px;border-bottom:1px solid rgba(33,30,22,.12)}
  .short ul{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li + li{padding-left:0;border-left:0;border-top:1px solid rgba(33,30,22,.12)}
  .feats{grid-template-columns:minmax(0,1fr)}
  .closing-in{grid-template-columns:minmax(0,1fr);padding:44px 28px}
  .closing-in .mark-lg{display:none}
}
@media (max-width:820px){
  .step .ph{zoom:.46}
  .step-mid .ph{zoom:.5}
  .step-mid{margin-top:-28px}
  .phones{gap:16px}
  .cap{font-size:16px;max-width:170px}
}
@media (max-width:640px){
  .phones{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;padding:48px 24px 8px;margin:0 -24px;scrollbar-width:none;scroll-padding:0 24px}
  .phones::-webkit-scrollbar{display:none}
  .step{scroll-snap-align:center}
  .step-mid{margin-top:0}
  .step .ph,.step-mid .ph{zoom:.66}
  .cap{max-width:230px}
  .pricing-in{grid-template-columns:minmax(0,1fr)}
  .ctas{width:100%}
  .ctas > .btn{flex:1 1 auto}
  .paper{padding:28px 22px}
  .strip-in{flex-direction:column;align-items:flex-start;gap:12px}
  .marquee{width:100%}
  details.q .a{padding-right:8px}
}
/* The nav links push the "Join the test" button off-screen between roughly
   380px and 430px, so hide them on phones and keep the button whole. */
@media (max-width:480px){ .hide-xs{display:none} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .g .wait{opacity:0}.g .done{opacity:1}
}