/* DeSpoof landing page, warm theme.
 *
 * An alternative to site.css. Load it INSTEAD of site.css, after dsp.css.
 * It overrides the tokens, so nothing else needs changing.
 *
 * Softer than the cool theme: apricot gradients, a serif for headings, large
 * radii everywhere, and almost no straight-cornered boxes.
 */

/* ---------------------------------------------------------------- headings
 * Three smooth sans candidates are loaded below. Pick one by changing the
 * --display line in :root, nothing else. They are ordered by how soft they
 * read, softest first.
 *
 *   Jakarta   warm and slightly humanist, a little personality in the a and g
 *   Outfit    geometric, near circular bowls, the roundest of the three
 *   Figtree   the most neutral, closest to a plain modern UI face
 *
 * The serif is still here if you want to go back to it.
 */

@font-face{font-family:'Jakarta';src:url('/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url('/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Jakarta';src:url('/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:'Outfit';src:url('/fonts/outfit-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url('/fonts/outfit-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url('/fonts/outfit-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:'Figtree';src:url('/fonts/figtree-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/fonts/figtree-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/fonts/figtree-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:'Plex Serif';src:url('/fonts/ibm-plex-serif-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Serif';src:url('/fonts/ibm-plex-serif-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --paper:#fdf7f2;
  --card:#ffffff;
  --panel:#2b1a14;
  --panel-2:#3a251d;
  --ink:#241713;
  --ink-2:#7a6259;
  --ink-3:#a89388;
  --rule:#f0e2d8;
  --rule-dark:#4b332a;

  --signal:#f4642a;          /* the orange everything leans on */
  --signal-deep:#d94a15;
  --signal-soft:#ffeee6;
  --berry:#f0568c;
  --violet:#9d6bf0;
  --live:#f4642a;
  --flag:#c8365f;
  --flag-soft:#fdeaf0;

  /* Swap this one line to try another. The alternatives:
       --display:'Outfit',ui-sans-serif,system-ui,sans-serif;
       --display:'Figtree',ui-sans-serif,system-ui,sans-serif;
       --display:'Plex Serif',Georgia,serif;                    (the old one)   */
  --display:'Jakarta',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --body:'Plex Sans',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --mono:'Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --r:16px;
  --r-lg:26px;
  --r-xl:36px;
  --shadow:0 2px 4px rgba(80,40,20,.04),0 18px 44px rgba(120,60,30,.09);
  --shadow-lift:0 24px 60px rgba(120,60,30,.16);
}

body{background:var(--paper);color:var(--ink);letter-spacing:-.002em}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.028em;line-height:1.12}

.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal-deep);font-weight:500}

/* everything is a pill or a soft rectangle, nothing has a hard corner */
.btn{border-radius:999px;padding:.95em 1.7em;font-weight:600;letter-spacing:.005em;
  background:linear-gradient(115deg,#ff8a4c,#f4642a 55%,#ef4f6d);
  box-shadow:0 8px 22px rgba(244,100,42,.3);transition:transform .16s ease,box-shadow .16s ease}
.btn:hover{background:linear-gradient(115deg,#ff7a35,#e8551c 55%,#e13e5e);
  box-shadow:0 12px 30px rgba(244,100,42,.4);transform:translateY(-1px)}
.btn--ghost{background:rgba(255,255,255,.7);color:var(--ink);border:1px solid var(--rule);
  box-shadow:none;backdrop-filter:blur(6px)}
.btn--ghost:hover{background:#fff;border-color:var(--signal);color:var(--signal-deep);box-shadow:none}
.btn--small{padding:.66em 1.25em;font-size:.9rem}

.wrap{max-width:1160px;margin:0 auto;padding:0 26px}
.sec{padding-top:96px;padding-bottom:96px;border-top:0}
.sec--flush{padding-top:24px}
.sec-head{max-width:740px;margin:0 auto 48px;text-align:center}
.sec-head h2{font-size:clamp(2rem,4vw,3.1rem);margin:.7rem 0 .8rem}
.sec-head p{color:var(--ink-2);font-size:1.06rem}

/* ------------------------------------------------------------------ header */

.top{position:sticky;top:0;z-index:50;background:rgba(253,247,242,.82);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid rgba(240,226,216,.8)}
.top-in{display:flex;align-items:center;gap:28px;height:68px}
.brand{font-family:var(--display);font-weight:700;font-size:1.14rem;letter-spacing:-.02em;text-decoration:none;
  display:flex;align-items:center;gap:9px}
.brand-dot{width:11px;height:11px;border-radius:50%;
  background:linear-gradient(140deg,#ff9a5c,#f0568c);box-shadow:0 0 0 4px rgba(244,100,42,.14)}
.top-nav{display:flex;gap:24px;margin-left:auto;font-size:.93rem}
.top-nav a{text-decoration:none;color:var(--ink-2);transition:color .15s ease}
.top-nav a:hover{color:var(--signal-deep)}
.top-cta{display:flex;gap:10px;align-items:center;margin-left:22px}
.top-cta a.plain{text-decoration:none;font-size:.93rem;font-weight:600}
@media(max-width:920px){.top-nav{display:none}.top-cta{margin-left:auto}}

/* -------------------------------------------------------------------- hero */

.hero{position:relative;padding-top:84px;padding-bottom:88px;overflow:visible}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.25rem);letter-spacing:-.036em;margin:0 0 1.1rem}
.hero h1 em{font-style:normal;font-weight:700;
  background:linear-gradient(100deg,#f4642a,#f0568c 55%,#9d6bf0);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lede{font-size:1.18rem;color:var(--ink-2);max-width:34em;margin-bottom:1.9rem}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:1.4rem}
.hero-note{font-size:.9rem;color:var(--ink-2)}
.hero-note b{color:var(--ink)}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:44px}
  .sec{padding-top:72px;padding-bottom:72px}}

/* the soft colour behind everything at the top of the page */
.glows{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.glow{position:absolute;border-radius:50%;filter:blur(70px)}
.glow--a{width:620px;height:520px;top:-190px;left:-160px;
  background:radial-gradient(circle,rgba(255,168,110,.65),transparent 68%)}
.glow--b{width:560px;height:520px;top:-120px;right:-140px;
  background:radial-gradient(circle,rgba(240,86,140,.4),transparent 68%)}
.glow--c{width:520px;height:460px;top:300px;right:8%;
  background:radial-gradient(circle,rgba(157,107,240,.28),transparent 70%)}
.glow--d{width:640px;height:520px;bottom:-160px;left:-120px;
  background:radial-gradient(circle,rgba(255,190,140,.45),transparent 70%)}
/* clip, not hidden: clip does not create a scroll container, so position:sticky
   on the header keeps working. */
html{overflow-x:clip}
body{position:relative;overflow-x:clip}

/* Nothing may push the page sideways. */
img,svg,video,iframe{max-width:100%}
code,.mono{overflow-wrap:anywhere}
p,li,summary,.answer,dd{overflow-wrap:break-word}

/* ------------------------------------------------------------------- demo */

.demo-video{width:100%;border-radius:var(--r-xl);box-shadow:var(--shadow-lift);display:block}
.demo{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-lift);cursor:pointer}
.demo-chrome{position:relative;display:flex;align-items:center;gap:7px;padding:13px 20px;
  border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:.73rem;color:var(--ink-3);
  background:linear-gradient(180deg,#fff7f2,#fdf7f2)}
.demo-chrome i{width:8px;height:8px;border-radius:50%;background:#f3ddd0;display:inline-block}
.demo-chrome span{margin-left:8px}
.demo-ctrl{margin-left:auto;display:flex;gap:6px}
.demo-ctrl-btn{display:inline-flex;align-items:center;gap:.35em;background:#fff;
  border:1px solid var(--rule);border-radius:999px;padding:.32em .8em;cursor:pointer;
  font-family:var(--body);font-size:.74rem;font-weight:600;color:var(--ink-2);
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.demo-ctrl-btn:hover{border-color:var(--signal);color:var(--signal-deep)}
.demo-ctrl-btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.demo-ctrl-btn[aria-pressed=true]{background:var(--signal-soft);border-color:var(--signal);color:var(--signal-deep)}
.demo-ctrl-ico{font-size:.9em;line-height:1}
@media(max-width:440px){.demo-ctrl-btn span:last-child{display:none}.demo-ctrl-btn{padding:.35em .55em}}

.demo-screen{position:relative;height:380px;overflow:hidden}
.demo-page{position:absolute;inset:0;padding:36px 32px;display:flex;flex-direction:column;
  justify-content:center;gap:15px}
/* the pretend signup behind the check. Both fields are the same width now,
   with placeholder wording so it reads as a form rather than two grey bars. */
.demo-field{height:40px;width:100%;border:1px solid var(--rule);border-radius:14px;
  background:#fffaf6;display:flex;align-items:center;padding:0 15px;
  font-size:.92rem;color:var(--ink-3);opacity:.75}
.demo-btn{align-self:flex-start;margin-top:6px;color:#fff;border:0;border-radius:999px;
  background:linear-gradient(115deg,#ff8a4c,#f4642a 60%,#ef4f6d);
  padding:.85em 1.5em;font-family:var(--body);font-weight:600;font-size:.95rem;
  transition:transform .16s ease,box-shadow .16s ease;pointer-events:none;
  box-shadow:0 8px 20px rgba(244,100,42,.28)}
.demo-btn.is-pressed{transform:scale(.94);box-shadow:0 0 0 7px rgba(244,100,42,.14)}

.demo-modal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;transform:translateY(100%);
  background:linear-gradient(160deg,#3a241c,#2b1a14 60%,#41221f);
  transition:transform .34s cubic-bezier(.22,.9,.3,1)}
.demo-oval{position:relative;width:214px;height:280px;border-radius:50%;
  border:2px solid rgba(255,190,150,.4);overflow:hidden}

/* the three photographs. All are in the DOM from the start so the browser has
   them decoded before the first turn, which is the difference between a head
   turn and a flicker. */
.demo-shots{position:absolute;inset:0}
.demo-shots picture{display:contents}
.demo-shot{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .28s ease}
.demo-shot.is-on{opacity:1}
/* the moment of certainty: a short quiet lift rather than a camera flash,
   which would read as a photograph being taken and we keep none */
.demo-oval.is-capture::after{content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.5);animation:dspCapture .5s ease}
@keyframes dspCapture{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.demo-prompt{font-family:var(--display);font-weight:600;font-size:1.38rem;color:#fff}

.demo-done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;opacity:0;pointer-events:none;transition:opacity .22s ease;
  background:linear-gradient(160deg,#fff6f0,#ffeee6)}
.demo-done b{font-family:var(--display);font-size:1.32rem}
.demo-done span:last-child{font-size:.88rem;color:var(--ink-2)}
.demo-tick{width:60px;height:60px;border-radius:50%;color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:1.8rem;margin-bottom:8px;
  background:linear-gradient(140deg,#ff9a5c,#f4642a);box-shadow:0 10px 26px rgba(244,100,42,.35)}
.demo[data-stage=check] .demo-modal,.demo[data-stage=done] .demo-modal{transform:none}
.demo[data-stage=done] .demo-done{opacity:1}

/* A run of stages, not a row of controls. Rounded filled pills read as
   things you can press, so this is a progress track instead: one segment of
   rule per stage, filling as the check runs, wording plain underneath. */
.demo-track{list-style:none;counter-reset:d;margin:0;padding:14px 18px 16px;
  display:flex;gap:8px;border-top:1px solid var(--rule);background:#fffaf6}
.demo-track li{counter-increment:d;flex:1 1 0;min-width:0;padding-top:9px;
  border-top:2px solid var(--rule);transition:border-color .3s ease}
.demo-track li b{display:block;font-weight:500;font-size:.7rem;line-height:1.35;
  color:var(--ink-3);transition:color .3s ease}
.demo-track li b::before{content:counter(d) '. ';font-family:var(--mono);font-size:.86em;opacity:.75}
.demo-track li.is-done{border-top-color:rgba(244,100,42,.45)}
.demo-track li.is-now{border-top-color:#f4642a}
.demo-track li.is-now b{color:var(--signal-deep)}
@media(max-width:560px){
  /* five labels at once is unreadable on a phone, so only the stage actually
     running keeps its wording and the rule carries the rest */
  .demo-track li b{visibility:hidden;height:0;overflow:hidden}
  .demo-track li.is-now b{visibility:visible;height:auto;white-space:nowrap}
}

/* ------------------------------------------------------------- soft cards */

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:860px){.grid3,.grid2{grid-template-columns:1fr}}

.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.trust-card{border-radius:var(--r-lg);padding:32px 30px;border:1px solid var(--rule);
  background:linear-gradient(165deg,#fff,#fff9f5);box-shadow:var(--shadow)}
.trust-card:first-child{background:linear-gradient(160deg,#ffe9d9,#ffd9e4 90%);border-color:transparent}
.trust-card h3{font-size:1.15rem;margin-bottom:.5rem}
.trust-card p{font-size:.94rem;color:var(--ink-2)}
@media(max-width:860px){.trust{grid-template-columns:1fr}}

.tile{background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);padding:30px;
  box-shadow:var(--shadow)}
.tile h3{font-size:1.14rem;margin-bottom:.5rem}
.tile p{font-size:.94rem;color:var(--ink-2)}

/* --------------------------------------------------------------- vs CAPTCHA */

.vs{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:var(--shadow)}
.vs-row{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;padding:1em 26px;
  border-bottom:1px solid var(--rule);font-size:.94rem;align-items:center}
.vs-row:last-child{border-bottom:0}
.vs-row>span:first-child,.vs-row>span:nth-child(2){color:var(--ink-2)}
.vs-us{font-weight:600;color:var(--ink)}
.vs-head{background:linear-gradient(120deg,#fff2ea,#ffe9f0);font-family:var(--mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.vs-head .vs-us{color:var(--signal-deep)}
@media(max-width:700px){
  .vs-row{grid-template-columns:1fr;gap:2px;padding:1em 20px}
  .vs-row>span:nth-child(2)::before{content:'CAPTCHA: ';font-size:.8em;color:var(--ink-3)}
  .vs-row .vs-us::before{content:'DeSpoof: ';font-size:.8em;color:var(--signal-deep);font-weight:400}
  .vs-head{display:none}
}

/* ------------------------------------------------- how it works, offset rows */

.rows{display:flex;flex-direction:column;gap:26px;margin-bottom:34px}
.row3{position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center;
  background:#fff;border:1px solid var(--rule);border-radius:var(--r-xl);padding:40px 44px;
  box-shadow:var(--shadow)}
.row3:nth-child(even){grid-template-columns:1.15fr 1fr}
.row3:nth-child(even) .row3-text{order:2}
.row3:nth-child(even) .row3-art{order:1}
.row3-num{position:absolute;top:-18px;left:34px;font-family:var(--mono);font-size:.82rem;font-weight:500;
  color:#fff;background:linear-gradient(115deg,#ff8a4c,#f4642a 60%,#ef4f6d);
  border-radius:999px;padding:.5em 1.15em;box-shadow:0 8px 20px rgba(244,100,42,.32)}
.row3:nth-child(even) .row3-num{left:auto;right:34px}
.row3-text h3{font-size:1.55rem;margin-bottom:.6rem}
.row3-text p{color:var(--ink-2);font-size:.98rem}
.row3-art{border-radius:var(--r-lg);overflow:hidden;display:flex;align-items:center;justify-content:center;
  padding:22px;min-height:200px}
.row3-art--a{background:linear-gradient(150deg,#ffe6d5,#ffd7e6)}
.row3-art--b{background:linear-gradient(150deg,#3a241c,#2b1a14 60%,#41221f)}
.row3-art--c{background:linear-gradient(150deg,#ffe2d2,#f3ddff)}
.row3-art svg{width:100%;max-width:250px;height:auto;display:block}
.a-box{fill:#fff;stroke:rgba(244,100,42,.25);stroke-width:2}
.a-soft{fill:rgba(244,100,42,.16)}
.a-btn{fill:#f4642a}
.a-label{fill:#fff;font-family:var(--body);font-size:11px;font-weight:600}
.a-cursor{fill:#3a2018;animation:tap 2.4s ease-in-out infinite}
.a-oval{fill:none;stroke:rgba(255,190,150,.45);stroke-width:2}
.a-head{fill:rgba(255,205,175,.22)}
.a-eye{fill:#ffe9dc}
.a-arc{fill:none;stroke:#ff9a5c;stroke-width:3;stroke-linecap:round;animation:arcpulse 1.8s ease-in-out infinite}
.a-tick-bg{fill:#f4642a}
.a-tick{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
@keyframes tap{0%,100%{transform:translate(0,0)}45%,55%{transform:translate(-4px,-8px)}}
@keyframes arcpulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(max-width:820px){
  .row3,.row3:nth-child(even){grid-template-columns:1fr;gap:26px;padding:38px 26px 30px}
  .row3:nth-child(even) .row3-text{order:1}
  .row3:nth-child(even) .row3-art{order:2}
  .row3:nth-child(even) .row3-num{right:auto;left:26px}
  .row3-num{left:26px}
}

/* ------------------------------------------------------------- the one line */

.oneline{border-radius:var(--r-xl);padding:34px 36px;
  background:linear-gradient(150deg,#2b1a14,#3a241c 55%,#45231f)}
.oneline-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:#c69a86;display:block;margin-bottom:14px}
.oneline-code{margin:0 0 16px;overflow-x:auto;font-family:var(--mono);font-size:.82rem;line-height:1.75;
  color:#ffc4a3;white-space:pre;min-height:1.75em}
.oneline-code .caret{display:inline-block;width:7px;height:1.05em;background:#ff9a5c;
  vertical-align:-2px;animation:caret 1s steps(1) infinite}
@keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}
.oneline-note{font-size:.88rem;color:#c8a595;border-top:1px solid var(--rule-dark);padding-top:16px}
.oneline-note .mono{color:#ffddc9}

/* --------------------------------------------------------------- how good */

.good{background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:30px 30px 30px 64px;position:relative;box-shadow:var(--shadow)}
.good h3{font-size:1.1rem;margin-bottom:.45rem}
.good p{font-size:.94rem;color:var(--ink-2)}
.good::before{position:absolute;left:26px;top:31px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.74rem;color:#fff;font-weight:700}
.good--yes::before{content:'\2713';background:linear-gradient(140deg,#ff9a5c,#f4642a)}
.good--no::before{content:'\2715';background:#c7b0a5}

/* --------------------------------------------------------------- dashboard */

.you{list-style:none;margin:0;padding:0}
.you li{padding:18px 0 18px 38px;border-bottom:1px solid var(--rule);position:relative}
.you li:first-child{padding-top:0}
.you li:first-child::before{top:5px}
.you li:last-child{border-bottom:0}
.you li::before{content:'';position:absolute;left:4px;top:23px;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--signal)}
.you li:last-child::before{background:linear-gradient(140deg,#ff9a5c,#f4642a);border-color:transparent}
.you b{display:block;font-family:var(--display);font-size:1.1rem;margin-bottom:.28rem}
.you span{font-size:.93rem;color:var(--ink-2)}

.dash-shot{background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow)}
.dash-bar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:.75rem;color:var(--ink-2);background:#fffaf6}
.dash-bar i{width:8px;height:8px;border-radius:50%;background:#f3ddd0;display:inline-block}
.dash-rows{padding:6px 0}
.dash-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:12px 20px;border-bottom:1px solid var(--rule);font-size:.88rem}
.dash-row:last-child{border-bottom:0}
.dash-row .tag{font-family:var(--mono);font-size:.71rem;padding:.28em .65em;border-radius:999px}
.tag.pass{background:var(--signal-soft);color:var(--signal-deep)}
.tag.fail{background:var(--flag-soft);color:var(--flag)}
.dash-row .meta{color:var(--ink-2);font-family:var(--mono);font-size:.77rem}

/* ------------------------------------------------------------------- devs */

.dev{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lift);
  background:linear-gradient(150deg,#2b1a14,#3a241c 60%,#45231f)}
.dev-tabs{display:flex;gap:4px;padding:14px 16px 0;flex-wrap:wrap;background:rgba(0,0,0,.16)}
.dev-tabs button{background:transparent;border:0;color:#c69a86;font-family:var(--mono);font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.8em 1.2em;border-radius:999px;cursor:pointer;
  transition:background .16s ease,color .16s ease}
.dev-tabs button[aria-selected=true]{background:rgba(244,100,42,.24);color:#fff}
.dev-pane{display:none;padding:26px 30px 30px}
.dev-pane[data-open=true]{display:block}
.dev-pane pre{margin:0;overflow-x:auto;font-size:.83rem;line-height:1.7;color:#f0d9cc}
.dev-pane .cm{color:#a8877a}
.dev-pane .st{color:#ffc4a3}
.dev-pane .kw{color:#ff9a5c}
.dev-note{margin-top:20px;font-size:.87rem;color:#c8a595;border-top:1px solid var(--rule-dark);padding-top:16px}

/* ---------------------------------------------------------------- pricing */

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.plan{background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);padding:32px 28px;
  display:flex;flex-direction:column;box-shadow:var(--shadow)}
.plan--pick{border-color:transparent;background:linear-gradient(165deg,#fff3ec,#ffe6ee);
  box-shadow:0 22px 50px rgba(244,100,42,.18)}
.plan h3{font-size:1.05rem;margin-bottom:.6rem}
.plan .price{font-family:var(--display);font-weight:700;font-size:2.5rem;line-height:1;
  letter-spacing:-.03em;margin-bottom:.2rem}
.plan .per{font-size:.83rem;color:var(--ink-2);margin-bottom:1.2rem}
.plan ul{list-style:none;margin:0 0 1.5rem;padding:0;font-size:.91rem;color:var(--ink-2)}
.plan li{padding:.38em 0}
.plan .btn{margin-top:auto}
.plan-flag{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal-deep);margin-bottom:.5rem}
@media(max-width:980px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.plans{grid-template-columns:1fr}}
.price-note{margin-top:24px;font-size:.87rem;color:var(--ink-2);max-width:60em;text-align:center;
  margin-left:auto;margin-right:auto}

/* -------------------------------------------------------------------- faq */

.faq{max-width:840px;margin:0 auto}
.faq details{border:1px solid var(--rule);border-radius:var(--r);background:#fff;margin-bottom:12px;
  box-shadow:var(--shadow);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:22px 26px;font-family:var(--display);
  font-size:1.08rem;font-weight:700;display:flex;justify-content:space-between;gap:20px;
  transition:color .15s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--signal);font-size:1.4rem;line-height:1}
.faq summary:hover{color:var(--signal-deep)}
.faq details[open] summary::after{content:'\2013'}
.faq .answer{padding:0 26px 24px;max-width:72ch;color:var(--ink-2);font-size:.96rem}
.faq .answer p+p{margin-top:.85rem}

/* ------------------------------------------------------------------- end */

.closer{position:relative;border-radius:var(--r-xl);padding:76px 44px;text-align:center;overflow:hidden;
  color:#fff;background:linear-gradient(140deg,#ff9a5c,#f4642a 42%,#ef4f6d 74%,#9d6bf0)}
.closer h2{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:.9rem;color:#fff}
.closer p{color:rgba(255,255,255,.9);max-width:44em;margin:0 auto 1.8rem}
.closer .btn{background:#fff;color:var(--signal-deep);box-shadow:0 12px 30px rgba(90,30,10,.24)}
.closer .btn:hover{background:#fff;color:var(--signal-deep);transform:translateY(-2px)}

.foot{border-top:1px solid var(--rule);padding:60px 0 44px;font-size:.91rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.foot h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;margin-bottom:1rem}
.foot a{display:block;color:var(--ink-2);text-decoration:none;padding:.24em 0}
.foot a:hover{color:var(--signal-deep)}
.foot-legal{margin-top:38px;padding-top:22px;border-top:1px solid var(--rule);color:var(--ink-3);
  font-size:.83rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}

/* --------------------------------------------------------------- motion */

.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .55s ease var(--d,0ms),transform .55s cubic-bezier(.2,.7,.3,1) var(--d,0ms)}
.reveal.is-in{opacity:1;transform:none}

.tile,.trust-card,.good,.plan,.row3{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tile:hover,.trust-card:hover,.good:hover,.row3:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.plan:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.vs-row:not(.vs-head){transition:background .15s ease}
.vs-row:not(.vs-head):hover{background:#fffaf6}

@media(prefers-reduced-motion:reduce){
  .demo-shot{transition:none}
  .demo-oval.is-capture::after{animation:none;opacity:0}
  .reveal{opacity:1;transform:none;transition:none}
  .tile:hover,.trust-card:hover,.good:hover,.plan:hover,.row3:hover{transform:none}
  .a-cursor,.a-arc,.oneline-code .caret{animation:none}
}


/* Anything that also carries .wrap must set padding-top and padding-bottom
   separately. The padding shorthand resets left and right to zero and throws
   away the horizontal padding .wrap just set, which leaves sections flush to
   the screen edge on a phone. */

/* --------------------------------------------------------------- small screens */
/* The problem on a phone is not that things are too big, it is that everything
   ends up in one column with the same gap between every pair of items. Cards
   inside a section were 22px apart and the sections themselves 60px apart,
   which is not enough difference for the eye to group anything.
   
   So: pull the cards closer together, push the sections much further apart,
   and give every heading the same left edge as the cards under it. */

@media(max-width:640px){
  .wrap{padding:0 20px}

  /* far apart */
  .sec{padding-top:84px;padding-bottom:84px}
  .sec--flush{padding-top:24px}
  .sec + .sec{border-top:1px solid var(--rule)}

  /* close together */
  .grid3,.grid2,.trust{gap:14px}
  .rows{gap:14px}
  .plans{gap:14px}

  .sec-head{text-align:left;margin-bottom:36px}
  .sec-head h2{font-size:clamp(1.7rem,7.4vw,2.2rem);margin:.6rem 0 .7rem}
  .sec-head p{font-size:1rem}
  .price-note{text-align:left;margin-top:20px}

  /* room at the top of the page, under the sticky header */
  .hero{padding-top:76px;padding-bottom:76px}
  .hero h1{font-size:clamp(2.1rem,9.4vw,2.8rem);margin: 20% 5% 5% 5%;}
  .hero-lede{font-size:1.06rem;margin: 10% 5% 3rem 5%;}
  .hero-actions{gap:10px;margin-bottom:1.6rem}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}
  .hero-grid{gap:38px}

  .demo-screen{height:330px}
  .demo-page{padding:26px 22px}
  .demo-oval{width:176px;height:230px}
  .demo-prompt{font-size:1.18rem}
  .demo-track{padding:12px 14px 14px;gap:6px}
  .demo-track li b{font-size:.68rem}

  .trust-card{padding:26px 22px}
  .tile{padding:24px 22px}
  .good{padding:26px 22px 26px 54px}
  .good::before{left:20px;top:28px}

  .row3,.row3:nth-child(even){padding:38px 22px 30px}
  .row3-num,.row3:nth-child(even) .row3-num{left:22px;right:auto}
  .row3-text h3{font-size:1.3rem}
  .row3-art{padding:18px;min-height:0}

  .oneline{padding:26px 22px;margin-top:8px}
  .oneline-code{font-size:.76rem}

  .vs-row{padding:1em 20px}
  .faq details{margin-bottom:10px}
  .faq summary{padding:20px;font-size:1rem}
  .faq .answer{padding:0 20px 22px}

  .dev-tabs{padding:10px 10px 0}
  .dev-tabs button{padding:.7em .85em;font-size:.72rem}
  .dev-pane{padding:22px 18px 26px}
  .dev-pane pre{font-size:.75rem}

  .plan{padding:28px 24px}
  .closer{padding:60px 24px;border-radius:26px}
  .foot{padding:56px 0 40px}
  .foot-grid{gap:30px}
}

@media(max-width:380px){
  .wrap{padding:0 17px}
  .sec{padding-top:76px;padding-bottom:76px}
  .demo-ctrl-btn{padding:.32em .5em}
}



/* ------------------------------------------------------------- badge strip */
/* Lifted from the FaceLogon strip so the two products read as one family.
   Same grid, same sizes, same marquee on a phone. The wrapper is .badgeband
   rather than FaceLogon's .trust, because .trust already means something else
   in this sheet. */

.badgeband{background:var(--card);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:42px 0 36px}
/* #how is .sec--flush, which trims its top padding to 24px because it used to
   sit straight under the hero. The strip now sits between them, so the gap
   below it has to come from here. Only above the phone breakpoint: the
   marquee layout is already comfortable at its own spacing. */
@media(min-width:641px){
  .badgeband{margin-bottom:56px}
}
.badges{overflow:hidden}
.badges-row{display:grid;grid-template-columns:repeat(6,1fr);gap:26px 18px}
.badges-row.dup{display:none}
.badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:13px;
  font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink-2)}
.badge .ic{height:54px;display:grid;place-items:center}
.badge svg{display:block}
@keyframes badge-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media(max-width:900px){
  .badges-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  /* six across is unreadable on a phone, so the row becomes a slow marquee and
     the duplicate row (hidden everywhere else) is what makes the loop seamless */
  .badgeband{padding:34px 0 30px}
  .badges-track{display:flex;width:max-content;animation:badge-marquee 26s linear infinite}
  .badges-row,.badges-row.dup{display:flex;gap:0}
  .badges-row .badge{flex:0 0 116px;margin-right:30px}
  .badge{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  /* a strip that slides past on its own is exactly what reduced motion is for */
  .badges-track{display:block;width:auto;animation:none}
  .badges-row{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 14px}
  .badges-row.dup{display:none}
  .badges-row .badge{flex:none;margin-right:0}
}