/* ============================================================
   ActionScale UI system
   Structure, geometry and rhythm modelled on the commas.com
   interface. Light, warm, medium weight, one accent.
   Rules of the house:
     - headings are weight 500, never bold
     - cards are flat: fill + 1px line, no shadow
     - one accent, used on buttons and badges only
     - motion only on direct input
   ============================================================ */

/* Inter v4 variable. One file, two cuts: the opsz axis at 14 is
   the text cut, at 32 it is the Display cut used for headings. */
@font-face{
  font-family:"InterVar";
  src:url("/fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* surfaces */
  --surface:#ffffff;
  --surface-muted:#f6f5f3;      /* every card */
  --surface-input:#f7f7f8;
  --surface-brand:#fff1ea;      /* badge fill */
  --surface-dark:#0a0a0a;       /* the one dark section */

  /* ink */
  --ink:#141414;
  --ink-hushed:#14141499;       /* 60%, every secondary line */
  --ink-faint:#14141466;
  --ink-on-dark:#ffffff;
  --ink-on-dark-hushed:#ffffff99;

  /* lines */
  --line:#dedddb;
  --line-subtle:#0000000d;
  --line-strong:#0000001a;

  /* accent */
  --brand:#ff5a1f;
  --brand-light:#ffb27a;
  --brand-ink:#c9430f;          /* accent text on pale fill, keeps contrast legal */
  --brand-tint-10:#ffb27a1a;
  --brand-tint-20:#ffb27a33;

  /* geometry */
  --r-sm:6px;
  --r-btn:12px;
  --r-md:16px;
  --r-card:20px;
  --r-pill:999px;

  /* rhythm */
  --pad-section:clamp(3.5rem,2.5rem + 4vw,7rem);
  --container:1440px;
  --gutter:clamp(20px,4vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--surface);color:var(--ink);
  font-family:InterVar,Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;font-weight:400;
  font-variation-settings:"opsz" 14;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}

/* ---------- LAYOUT ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--pad-section)}
.section.tight{padding-block:calc(var(--pad-section) * .6)}

/* the one dark section */
.section.dark{background:var(--surface-dark);color:var(--ink-on-dark)}
/* every hushed thing has to flip, not just .hushed: p, .tiny and the stat
   captions all inherit dark ink and vanish against #0a0a0a otherwise */
.section.dark .hushed,
.section.dark p,
.section.dark .tiny,
.section.dark .stat span,
.section.dark .quote .who span{color:var(--ink-on-dark-hushed)}
.section.dark .card,.section.dark .quote{background:#ffffff0d;border-color:#ffffff1a}
.section.dark .quote blockquote,.section.dark strong{color:var(--ink-on-dark)}
.section.dark .rule,.section.dark .quote .stats{border-color:#ffffff1a}

/* ---------- TYPE ----------
   Display cut via the optical size axis, weight 500, tight tracking. */
.display,h1,h2,h3{
  font-variation-settings:"opsz" 32;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.06;
  text-wrap:balance;
}
h1,.h1{font-size:clamp(34px,1.6rem + 2.6vw,56px);letter-spacing:-.03em}
h2,.h2{font-size:clamp(28px,1.4rem + 1.8vw,40px)}
h3,.h3{font-size:clamp(20px,1.1rem + .6vw,24px);letter-spacing:-.015em;line-height:1.2}
.lede{font-size:clamp(16px,.98rem + .2vw,18px);line-height:1.5;color:var(--ink-hushed)}
.hushed{color:var(--ink-hushed)}
.small{font-size:14px}
.tiny{font-size:13px;color:var(--ink-hushed)}
p{color:var(--ink-hushed)}
strong{font-weight:600;color:var(--ink)}
.measure{max-width:56ch}

/* section head: badge, heading, one hushed line under it */
.sectionhead{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,48px)}
.sectionhead .lede{max-width:52ch}
.sectionhead.center{align-items:center;text-align:center}
.sectionhead.center .lede{margin-inline:auto}
.sectionhead.center .badge{align-self:center}   /* .badge sets flex-start, centre must win */

/* ---------- BADGE ---------- */
.badge{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  background:var(--surface-brand);color:var(--brand-ink);
  border-radius:var(--r-pill);padding:6px 12px;
  font-size:13px;font-weight:500;line-height:1;
}
.badge svg{width:14px;height:14px}
.badge.plain{background:var(--surface-muted);color:var(--ink-hushed)}
.badge.onDark{background:#ffffff14;color:#fff}

/* ---------- BUTTONS ---------- */
/* Physical, pressable buttons. All depth comes from blurred shadow, never from a
   hard edge, and the button travels downward on :active. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:46px;padding-inline:26px;border-radius:15px;
  font-size:16px;font-weight:600;line-height:1;white-space:nowrap;
  transition:transform .12s cubic-bezier(.2,.7,.2,1),box-shadow .16s ease,filter .16s ease;
}
.btn .arw{transition:transform .16s ease}
.btn:hover .arw{transform:translateX(3px)}
.btn svg{width:19px;height:19px;flex:0 0 19px}

/* Measured off the reference, pixel by pixel, rather than styled by feel.
   Three findings drove this:
     1. A horizontal scan across the reference is a CONSTANT colour end to end,
        so there is no side shading. The face is flat, not domed.
     2. A vertical scan is one clean linear ramp, so there are no inset shadows
        at all. The whole 3D read comes from the gradient itself.
     3. The corner radius is almost exactly one third of the height.
   Stops, as a percentage of height: a light rim to 7.4%, a long linear body to
   95.4%, then a short dark ramp to 100% that reads as the extruded bottom edge.
   The drop shadow is small, neutral and below only. No coloured glow. */
.btn.primary{
  color:#fff;border:0;
  background:linear-gradient(180deg,#ffc7a3 0%,#ff9e68 7.4%,#f05f14 95.4%,#c94b08 100%);
  box-shadow:0 2px 5px -1px rgba(20,20,20,.16),0 6px 13px -6px rgba(20,20,20,.12);
}
.btn.primary:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg,#ffd0b0 0%,#ffa876 7.4%,#f4691e 95.4%,#d0510b 100%);
  box-shadow:0 4px 8px -1px rgba(20,20,20,.17),0 10px 20px -8px rgba(20,20,20,.14);
}
.btn.primary:active{
  transform:translateY(2px);
  background:linear-gradient(180deg,#f8a877 0%,#ef8552 7.4%,#d95410 95.4%,#b84208 100%);
  box-shadow:0 1px 2px rgba(20,20,20,.16);
}

/* white sibling: same construction, one hairline so it exists on a white page */
.btn.outline{
  color:var(--ink);
  background:linear-gradient(180deg,#ffffff 0%,#fdfcfb 7.4%,#eeecE8 95.4%,#e0ddd8 100%);
  border:1px solid #dbd9d5;
  box-shadow:0 2px 5px -1px rgba(20,20,20,.09),0 6px 13px -7px rgba(20,20,20,.10);
}
.btn.outline:hover{transform:translateY(-1px);
  box-shadow:0 4px 8px -1px rgba(20,20,20,.11),0 10px 20px -9px rgba(20,20,20,.12)}
.btn.outline:active{transform:translateY(2px);
  background:linear-gradient(180deg,#f4f2ef 0%,#efedea 7.4%,#e4e1dc 95.4%,#d8d5cf 100%);
  box-shadow:0 1px 2px rgba(20,20,20,.10)}

/* quietest: nav login */
.btn.subtle{
  color:var(--ink);
  background:linear-gradient(180deg,#fbfaf9 0%,#f5f3f1 7.4%,#e9e6e2 95.4%,#dcd9d4 100%);
  border:1px solid #dbd9d5;
  box-shadow:0 1px 3px rgba(20,20,20,.08),0 4px 9px -5px rgba(20,20,20,.09);
}
.btn.subtle:hover{transform:translateY(-1px);box-shadow:0 3px 6px -1px rgba(20,20,20,.10),0 7px 14px -7px rgba(20,20,20,.11)}
.btn.subtle:active{transform:translateY(2px);box-shadow:0 1px 2px rgba(20,20,20,.09)}

.btn.sm{height:38px;padding-inline:17px;font-size:14px;border-radius:13px;gap:7px}
.btn.sm svg{width:16px;height:16px;flex:0 0 16px}
.btn.block{display:flex;width:100%}
.btn.lg{height:56px;padding-inline:34px;font-size:17px;border-radius:19px}

/* ---------- ICONS ----------
   One drawing standard so every icon looks like it came from the same set and
   sits beside the logo: 24 grid, 1.7 stroke, round caps and joins, no fill. */
.icon{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* the rounded-square tile the icons sit in, same language as the logo */
.itile{
  width:46px;height:46px;flex:0 0 46px;border-radius:13px;
  display:grid;place-items:center;color:var(--brand-ink);
  background:linear-gradient(180deg,#fff3ea 0%,#ffe4d3 100%);
  border:1px solid #ffd6bd;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.itile .icon{width:23px;height:23px;flex:0 0 23px;stroke-width:1.65}
.itile.plain{background:linear-gradient(180deg,#fff 0%,#f4f3f1 100%);border-color:var(--line);color:var(--ink)}
.itile.sm{width:36px;height:36px;flex:0 0 36px;border-radius:10px}
.itile.sm .icon{width:19px;height:19px;flex:0 0 19px}

/* circular arrow button that sits in the corner of a card */
.iconbtn{
  width:40px;height:40px;flex:0 0 40px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  transition:background .15s ease,transform .15s ease;
}
.iconbtn svg{width:16px;height:16px}

/* ---------- CARDS ---------- */
.card{
  background:var(--surface-muted);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .18s ease;
}
a.card:hover{border-color:#c9c8c5}
a.card:hover .iconbtn{background:var(--brand);border-color:var(--brand);color:#fff;transform:rotate(45deg)}

/* the visual well: icon tile on top, then the screenshot or mini interface */
.card .media{
  position:relative;flex:1;min-height:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  padding:26px 24px 10px;
}
/* Sized by its content, not a fixed ratio. A locked aspect left a third of every
   card empty under the visual, which read as unfinished rather than airy. */
.card.portrait .media{padding:28px 26px 8px}
.card .media img{border-radius:10px;box-shadow:0 12px 30px #14141412}

/* bottom label: bold lead-in, regular tail, arrow right */
.card .foot{
  display:flex;align-items:flex-end;gap:16px;
  padding:22px 24px 24px;
}
.card .foot p{color:var(--ink);font-size:16px;line-height:1.35;flex:1}
.card .foot p b{font-weight:600}

/* bento */
.bento{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.bento{grid-template-columns:1fr}}
.cols2{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.cols3{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cols2,.cols3{grid-template-columns:1fr}}

/* ---------- HERO PANEL ----------
   The big rounded well with a photographic backdrop and a UI floating inside. */
.panel{
  border-radius:var(--r-card);overflow:hidden;position:relative;
  background:linear-gradient(160deg,#e8eef6 0%,#dfe7f2 45%,#eef1f4 100%);
  border:1px solid var(--line);
  padding:clamp(28px,5vw,72px) clamp(20px,4vw,64px) 0;
}
.panel .shot{
  border-radius:14px;overflow:hidden;
  border:1px solid #ffffff80;
  box-shadow:0 30px 70px #14141426,0 4px 14px #14141410;
  background:#fff;
}
.panel .shot img{width:100%;height:auto}
.panel.dark{background:var(--surface-dark);border-color:#ffffff14}

/* ---------- QUOTE / PROOF CARD ---------- */
.quote{
  background:var(--surface-muted);border:1px solid var(--line);
  border-radius:var(--r-card);padding:28px;
  display:flex;flex-direction:column;gap:20px;
}
.quote blockquote{font-size:17px;line-height:1.5;color:var(--ink)}
.quote .who{display:flex;align-items:center;gap:12px}
.quote .who img{width:44px;height:44px;border-radius:var(--r-pill);object-fit:cover}
.quote .who b{display:block;font-size:15px;font-weight:600}
.quote .who span{display:block;font-size:13px;color:var(--ink-hushed)}
.quote .stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;
  border-top:1px solid var(--line);padding-top:18px;margin-top:auto}
.quote .stats b{display:block;font-variation-settings:"opsz" 32;font-weight:500;
  font-size:26px;letter-spacing:-.02em;line-height:1.1}
.quote .stats span{display:block;font-size:13px;color:var(--ink-hushed);margin-top:2px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 0;
  display:flex;align-items:center;gap:20px;
  font-size:17px;font-weight:500;font-variation-settings:"opsz" 32;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";margin-left:auto;flex:0 0 20px;width:20px;height:20px;
  background:currentColor;opacity:.35;transition:transform .2s ease;
  -webkit-mask:var(--plus) center/20px no-repeat;mask:var(--plus) center/20px no-repeat;
}
.faq details[open] summary::after{transform:rotate(45deg);opacity:.6}
.faq .answer{padding:0 0 24px;max-width:70ch;color:var(--ink-hushed);font-size:16px;line-height:1.55}
:root{--plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}

/* ---------- ANNOUNCEMENT BAR ---------- */
.announce{
  background:var(--surface-dark);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 44px 11px 20px;position:relative;font-size:14px;text-align:center;
}
.announce a{text-decoration:underline;text-underline-offset:3px}
.announce .x{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;display:grid;place-items:center;opacity:.6;border-radius:var(--r-sm)}
.announce .x:hover{opacity:1;background:#ffffff14}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:60;background:#fffffff2;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.navin{display:flex;align-items:center;gap:8px;height:72px}
.brandmark{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:600;
  font-variation-settings:"opsz" 32;letter-spacing:-.02em;margin-right:16px}
.navlinks{display:flex;align-items:center;gap:2px}
.navlink{display:inline-flex;align-items:center;gap:5px;
  padding:10px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:400;color:var(--ink)}
.navlink:hover{background:var(--surface-muted)}
.navlink svg{width:12px;height:12px;opacity:.5}
.navright{margin-left:auto;display:flex;align-items:center;gap:8px}
.navtoggle{display:none;margin-left:auto}
@media(max-width:900px){
  .navlinks{display:none}
  .navright .btn.subtle{display:none}
  .navtoggle{display:inline-flex}
}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--line);padding-block:56px 48px;background:var(--surface-muted)}
/* minmax(0,1fr), not 1fr: a long unbreakable string (the email address) sets the
   column's min-content width and pushes the whole grid past the viewport otherwise. */
.footgrid{display:grid;grid-template-columns:1.8fr repeat(3,minmax(0,1fr));gap:32px}
@media(max-width:820px){.footgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.footh{font-size:13px;font-weight:600;margin-bottom:14px}
.footl{display:block;font-size:14px;color:var(--ink-hushed);padding:6px 0;overflow-wrap:anywhere}
.footl:hover{color:var(--ink)}
.footbase{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-hushed)}

/* ---------- CHECK LIST ---------- */
.checks{display:grid;gap:12px;list-style:none;padding:0}
.checks li{list-style:none;display:grid;grid-template-columns:16px 1fr;gap:12px;
  font-size:15px;line-height:1.5;color:var(--ink-hushed)}
.checks li::before{content:"";width:7px;height:7px;border-radius:2px;
  background:var(--brand);margin-top:8px}

/* ---------- BITS ---------- */
.rule{height:1px;background:var(--line);border:0}
.pillrow{display:flex;flex-wrap:wrap;gap:8px}
.stat b{display:block;font-variation-settings:"opsz" 32;font-weight:500;
  font-size:clamp(28px,2vw,36px);letter-spacing:-.02em;line-height:1.1}
.stat span{display:block;font-size:14px;color:var(--ink-hushed);margin-top:4px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- MOTION: staggered reveals ----------
   Children of a grid come in one after another instead of as a block. Pure CSS
   so there is no JS bookkeeping, and it is ignored under reduced motion. */
.js .reveal.in{transition-delay:var(--d,0ms)}
.bento>*:nth-child(2),.cols3>*:nth-child(2),.cols2>*:nth-child(2){--d:70ms}
.bento>*:nth-child(3),.cols3>*:nth-child(3){--d:140ms}
.bento>*:nth-child(4){--d:210ms}
.bento>*:nth-child(5){--d:280ms}
.bento>*:nth-child(6){--d:350ms}
.stepline{--d:0ms}
.stepline:nth-child(2){--d:80ms}
.stepline:nth-child(3){--d:160ms}
.stepline:nth-child(4){--d:240ms}

/* icon tiles lift with their card */
a.card:hover .itile{transform:translateY(-2px) rotate(-3deg);
  box-shadow:0 8px 18px -6px rgba(224,72,16,.32)}
.itile{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease}

/* ---------- BEFORE / AFTER ---------- */
.vs{display:grid;grid-template-columns:1fr 64px 1fr;align-items:stretch;gap:0}
@media(max-width:840px){.vs{grid-template-columns:1fr;gap:14px}}
.vscol{border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(22px,3vw,32px);background:#fff}
.vscol.before{background:var(--surface-muted)}
.vscol.after{border-color:#ffd6bd;
  background:linear-gradient(180deg,#fffaf7 0%,#fff3ec 100%);
  box-shadow:0 14px 34px -18px rgba(224,72,16,.35)}
.vshead{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px}
.vscol.after .vshead{color:var(--brand-ink)}
.vslist{display:grid;gap:13px;list-style:none;padding:0}
.vslist li{display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:15.5px;line-height:1.45;
  color:var(--ink-hushed)}
.vscol.after .vslist li{color:var(--ink)}
.vslist .icon{width:19px;height:19px;flex:0 0 19px;margin-top:2px;color:#b9b7b2}
.vscol.after .vslist .icon{color:var(--brand)}
.vsarrow{display:grid;place-items:center;color:var(--brand)}
.vsarrow svg{width:30px;height:30px;animation:nudge 2.4s ease-in-out infinite}
@media(max-width:840px){.vsarrow{padding:2px 0}.vsarrow svg{transform:rotate(90deg)}}
@keyframes nudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@media(max-width:840px){@keyframes nudge{0%,100%{transform:rotate(90deg) translateX(-3px)}50%{transform:rotate(90deg) translateX(3px)}}}
@media(prefers-reduced-motion:reduce){.vsarrow svg{animation:none}}

/* Counters sit INSIDE .stat b, so the generic `.stat span` caption rule was also
   matching them and forcing display:block at 14px on its own line. Reassert. */
.stat b .count,.count{font-variant-numeric:tabular-nums}
.stat b .count{display:inline;font-size:inherit;font-weight:inherit;color:inherit;margin:0;letter-spacing:inherit}

/* ============================================================
   FORMS
   The intake forms and the data dashboard. Same house rules:
   fill plus a hairline, one accent, motion only on direct input.
   Choices borrow the button gradient so a tappable row reads as
   tappable, and press travel matches .btn at 2px.
   ============================================================ */

/* ---------- field shell ---------- */
.field{margin-top:6px}
.field-q{font-size:20px;line-height:1.34;font-weight:600;letter-spacing:-.012em;
  font-variation-settings:"opsz" 32;color:var(--ink);margin:0 0 8px}
.field-help{display:block;color:var(--ink-hushed);font-size:14.5px;line-height:1.55;margin:0 0 18px}
.field-block{padding:26px 0;border-bottom:1px solid var(--line)}
.field-block:first-child{padding-top:0}
.field-block:last-child{border-bottom:0;padding-bottom:4px}
.req{color:var(--brand);margin-left:5px}

/* ---------- text inputs ---------- */
.input,.textarea{
  width:100%;padding:14px 15px;font:inherit;font-size:16.5px;color:var(--ink);
  background:var(--surface-input);border:1px solid var(--line);border-radius:var(--r-btn);
  -webkit-appearance:none;transition:border-color .15s,box-shadow .15s,background .15s}
.textarea{min-height:112px;resize:vertical;line-height:1.6}
.input::placeholder,.textarea::placeholder{color:var(--ink-faint)}
.input:hover,.textarea:hover{border-color:var(--line-strong)}
.input:focus,.textarea:focus{outline:none;background:var(--surface);
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint-20)}

/* ---------- choices ---------- */
.choices{display:grid;gap:9px}
.choice{
  display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer;
  font-size:15.5px;line-height:1.35;color:var(--ink);text-align:left;
  border:1px solid var(--line);border-radius:var(--r-btn);
  background:linear-gradient(180deg,#fbfaf9 0%,#f5f3f1 7.4%,#e9e6e2 95.4%,#dcd9d4 100%);
  box-shadow:0 1px 2px rgba(20,20,20,.06);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s,background .12s}
.choice:hover{transform:translateY(-1px);box-shadow:0 3px 6px -1px rgba(20,20,20,.10)}
.choice:active{transform:translateY(2px);box-shadow:0 1px 2px rgba(20,20,20,.09)}
.choice.on{
  border-color:var(--brand);color:var(--brand-ink);font-weight:600;
  background:linear-gradient(180deg,#fff6f1 0%,#ffefe6 7.4%,#ffe2d3 95.4%,#ffd7c3 100%);
  box-shadow:0 1px 2px rgba(201,67,15,.12)}
.choice .mark{width:17px;height:17px;border-radius:var(--r-pill);flex:0 0 17px;
  border:1px solid var(--line-strong);background:var(--surface);transition:.12s}
.choice.multi .mark{border-radius:5px}
.choice.on .mark{border-color:var(--brand);background:var(--brand);
  box-shadow:inset 0 0 0 3px #fff}

/* ---------- 1 to 5 scale ---------- */
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.scalebtn{
  padding:16px 0;text-align:center;cursor:pointer;font-size:17px;font-weight:600;
  font-variation-settings:"opsz" 32;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-btn);
  background:linear-gradient(180deg,#fbfaf9 0%,#f5f3f1 7.4%,#e9e6e2 95.4%,#dcd9d4 100%);
  box-shadow:0 1px 2px rgba(20,20,20,.06);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s,background .12s}
.scalebtn:hover{transform:translateY(-1px);box-shadow:0 3px 6px -1px rgba(20,20,20,.10)}
.scalebtn:active{transform:translateY(2px)}
.scalebtn.on{border-color:var(--brand);color:var(--brand-ink);
  background:linear-gradient(180deg,#fff6f1 0%,#ffefe6 7.4%,#ffe2d3 95.4%,#ffd7c3 100%)}
.scale-ends{display:flex;justify-content:space-between;font-size:12.5px;
  color:var(--ink-hushed);margin-top:9px}

/* ---------- escape hatch ---------- */
.esc{display:flex;align-items:center;gap:10px;margin-top:11px;font-size:13.5px;
  color:var(--ink-hushed);cursor:pointer;user-select:none}
.esc input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;flex:none}
.esc:hover{color:var(--ink)}

/* ---------- progress ---------- */
.progress{height:3px;background:var(--surface-muted);border-radius:var(--r-pill);overflow:hidden}
.progress .fill{height:100%;width:0;background:var(--brand);
  border-radius:var(--r-pill);transition:width .35s ease}
.progress-note{font-size:12.5px;color:var(--ink-hushed);margin:12px 0 0;letter-spacing:.01em}
/* thicker cut, used for the summary distributions where the bar IS the data */
.progress.chart{height:9px;background:var(--surface-muted)}
.nowrap{white-space:nowrap}

/* ---------- success tick ---------- */
.tickmark{width:52px;height:52px;border-radius:var(--r-pill);
  background:var(--surface-brand);border:1px solid var(--brand-light);
  display:flex;align-items:center;justify-content:center;
  font-size:23px;color:var(--brand-ink);margin-bottom:18px}

/* ---------- data tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface)}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{position:sticky;top:0;z-index:1;background:var(--surface-muted);
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-hushed);padding:10px 13px;border-bottom:1px solid var(--line);white-space:nowrap}
table.data td{padding:10px 13px;border-bottom:1px solid var(--line-subtle);vertical-align:top;
  color:var(--ink)}
table.data tr:last-child td{border-bottom:0}
table.data tr.click:hover{background:var(--surface-brand);cursor:pointer}
.num{font-variant-numeric:tabular-nums}

/* ---------- answer block ---------- */
.answer{white-space:pre-wrap;background:var(--surface-muted);
  border-left:2px solid var(--brand);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:9px 13px;color:var(--ink);font-size:15px;margin:0 0 16px}
.answer:last-child{margin-bottom:0}
.answer.blank{border-left-color:var(--line);color:var(--ink-faint);font-style:italic}
.answer.sensitive{border-left-color:#c9430f;background:var(--surface-brand)}

@media(max-width:520px){
  .field-q{font-size:19px}
  .scale{gap:6px}
  .scalebtn{padding:14px 0;font-size:16px}
}