/* Sell My Phone — redesign design system (scoped under body.redesign) */
:root{
    --ground:#fbf8f366; --surface:#FFFFFF; --surface-2:#fbf8f366; --surface-3:#fbf8f366;
    --ink:#2A1E16; --ink-strong:#1B120C; --muted:#8C7E70; --line:#E8DED1; --line-soft:#F1E9DD;
    --brand:#E0592B; --brand-2:#C44C22; --brand-tint:#F7E7DC; --btn-fg:#FFF8F3;
    --on-deep:#F1E8DD; --on-deep-mut:#B3A492;
    --shadow-sm:0 1px 2px rgba(35,25,19,.06);
    --shadow-md:0 16px 44px -24px rgba(35,25,19,.32);
    --shadow-pop:0 20px 44px -18px rgba(35,25,19,.28);
    --r:14px; --r-lg:22px; --maxw:1120px;
    --f-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --f-round:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
    /* Product photos are transparent PNGs: give them a warm tinted plate,
       never flat white, so they sit in the palette in both themes. */
    --photo-bg:linear-gradient(155deg,#FFFDFB 0%,#F7EADF 100%); --photo-line:rgba(196,76,34,.13);
  }
@media (prefers-color-scheme:dark){
:root{
      --ground:#17110C; --surface:#201811; --surface-2:#2A2017; --surface-3:#2A2016;
      --ink:#F1E8DD; --ink-strong:#FCF6EE; --muted:#A89A8B; --line:#352A20; --line-soft:#241C15;
      --brand:#F06A3B; --brand-2:#FF7E52; --brand-tint:#3A2119; --btn-fg:#1C130C;
      --shadow-md:0 18px 44px -22px rgba(0,0,0,.65); --shadow-pop:0 22px 48px -18px rgba(0,0,0,.7);
      --photo-bg:linear-gradient(155deg,#33271D 0%,#241B14 100%); --photo-line:rgba(255,255,255,.08);
    }
}
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root{color-scheme:dark}}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{--photo-bg:linear-gradient(155deg,#FFFDFB 0%,#F7EADF 100%);--photo-line:rgba(196,76,34,.13);--ground:#fbf8f366;--surface:#FFFFFF;--surface-2:#fbf8f366;--surface-3:#fbf8f366;--ink:#2A1E16;--ink-strong:#1B120C;--muted:#8C7E70;--line:#E8DED1;--line-soft:#F1E9DD;--brand:#E0592B;--brand-2:#C44C22;--brand-tint:#F7E7DC;--btn-fg:#FFF8F3}
:root[data-theme="dark"]{--photo-bg:linear-gradient(155deg,#33271D 0%,#241B14 100%);--photo-line:rgba(255,255,255,.08);--ground:#17110C;--surface:#201811;--surface-2:#2A2017;--surface-3:#2A2016;--ink:#F1E8DD;--ink-strong:#FCF6EE;--muted:#A89A8B;--line:#352A20;--line-soft:#241C15;--brand:#F06A3B;--brand-2:#FF7E52;--brand-tint:#3A2119;--btn-fg:#1C130C}
body.redesign *{box-sizing:border-box}
/* WebKit re-runs a "text autosizing" pass AFTER first layout and rewrites the
   computed font-size of blocks it decides are body copy. It is on by default on
   iOS, it fires a few milliseconds after paint, and the page it re-lays-out is
   not the page we designed. The redesign inherited this the day it dropped
   Bootstrap, whose reboot pinned it — this line puts it back, site-wide. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.redesign{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-sans);line-height:1.6;-webkit-font-smoothing:antialiased}
body.redesign .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
body.redesign a{color:inherit;text-decoration:none}
body.redesign h1,body.redesign h2,body.redesign h3{margin:0;text-wrap:balance;letter-spacing:-.023em;font-weight:800;line-height:1.07}
body.redesign p{margin:0}
body.redesign .eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
body.redesign .tnum{font-variant-numeric:tabular-nums}
body.redesign .brandlink img{height:clamp(32px,4.4vw,42px);width:auto}
body.redesign .logo-onlight{display:block}
body.redesign .logo-ondark{display:none}
@media (prefers-color-scheme:dark){
body.redesign .logo-onlight{display:none}
body.redesign .logo-ondark{display:block}
}
:root[data-theme="dark"] .logo-onlight{display:none}
:root[data-theme="dark"] .logo-ondark{display:block}
:root[data-theme="light"] .logo-onlight{display:block}
:root[data-theme="light"] .logo-ondark{display:none}
body.redesign .btn{display:inline-flex;align-items:center;gap:.5em;font:inherit;font-weight:700;font-size:15px;border:1px solid transparent;border-radius:999px;padding:12px 20px;cursor:pointer;transition:.18s ease;line-height:1;white-space:nowrap}
body.redesign .btn-primary{background:var(--brand);color:var(--btn-fg)}
body.redesign .btn-primary:hover{background:var(--brand-2);transform:translateY(-1px)}
body.redesign .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
body.redesign .btn-ghost:hover{border-color:var(--ink)}
body.redesign .btn-lg{padding:15px 26px;font-size:15.5px}
body.redesign .btn:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 42%,transparent);outline-offset:2px}
body.redesign header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
body.redesign .nav{display:flex;align-items:center;gap:22px;height:74px;flex-wrap:nowrap;min-width:0}
body.redesign .brandlink{display:inline-flex;align-items:center;height:100%;flex:0 0 auto}
body.redesign .nav .links{display:flex;gap:30px;margin-left:32px}
body.redesign .nav .links a{font-size:14.5px;color:var(--muted);font-weight:600}
body.redesign .nav .links a:hover{color:var(--ink)}
body.redesign .nav .right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}
body.redesign .icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink);font-size:14px}
body.redesign .langdd{position:relative}
body.redesign .langdd-trig{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:700;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:7px 10px 7px 11px;cursor:pointer;transition:.15s}
body.redesign .langdd-trig:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
body.redesign .langdd-trig:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
body.redesign .langdd-trig .glb{width:16px;height:16px;stroke:var(--muted);stroke-width:1.7;fill:none}
body.redesign .langdd-trig .chv{font-size:10px;color:var(--muted);transition:transform .2s}
body.redesign .langdd[data-open="true"] .langdd-trig{border-color:var(--brand)}
body.redesign .langdd[data-open="true"] .chv{transform:rotate(180deg);color:var(--brand)}
body.redesign .langdd-list{position:absolute;right:0;top:calc(100% + 8px);z-index:40;list-style:none;margin:0;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-pop);min-width:190px;animation:pop .16s ease}
body.redesign .langdd-list[hidden]{display:none}
body.redesign .langopt{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--ink)}
body.redesign .langopt .code{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--muted);background:var(--surface-2);border-radius:7px;padding:4px 0;min-width:34px;text-align:center}
body.redesign .langopt:hover,body.redesign .langopt.active{background:var(--surface-2)}
body.redesign .langopt[aria-selected="true"]{background:var(--brand-tint);color:var(--brand-2)}
body.redesign .langopt[aria-selected="true"] .code{background:var(--brand);color:var(--btn-fg)}
body.redesign .hero{padding:46px 0 0;position:relative;overflow:hidden}
/* Softer and pushed further out than before: the hero artwork now carries its
   own baked warm glow, and the two stacking on the same side turned the whole
   right half muddy. */
body.redesign .hero::before{content:"";position:absolute;inset:-28% -26% auto auto;width:52vw;height:52vw;max-width:640px;max-height:640px;background:radial-gradient(circle at 62% 40%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 62%);z-index:0}
body.redesign .hero .wrap{position:relative;z-index:1}
/* Two columns from 900px up. BOTH tracks are minmax(0,…): a bare `1fr` floors
   at min-content, so a long unbroken word in the h1 (or the image's intrinsic
   width) silently widens the track and pushes the row into overflow. */
body.redesign .hero-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:clamp(28px,4vw,68px)}
body.redesign .hero-copy{min-width:0}
body.redesign .hero-art{min-width:0;justify-self:end;width:100%;max-width:720px}
/* No aspect-ratio here on purpose: the hero image is replaceable from Regras,
   so its shape is not knowable at stylesheet-authoring time. home.php sets
   aspect-ratio inline from the image's own width/height, which is what reserves
   the box before it loads (no CLS) whatever shape gets uploaded. A fixed ratio
   here would squash any upload that is not 1120x1042. */
body.redesign .hero-art img{display:block;width:100%;height:auto}
body.redesign .hero h1{font-size:clamp(36px,4.6vw,58px);max-width:16ch;margin-top:16px}
body.redesign .hero h1 .u{color:var(--brand)}
body.redesign .hero .lede{margin-top:22px;font-size:20px;color:var(--muted);max-width:42ch}
body.redesign .hero .cta-row{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
/* inline-flex, not flex: as an <a> this is now a link, and a block-level box
   would stretch the full column and make dead space to the right clickable. */
body.redesign .trustline{margin-top:30px;display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);flex-wrap:wrap;text-decoration:none;border-radius:8px;transition:color .18s ease}
body.redesign .stars{color:var(--brand);letter-spacing:1px}
body.redesign .trustline b{color:var(--ink);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .18s ease}
body.redesign a.trustline:hover b,
body.redesign a.trustline:focus-visible b{text-decoration-color:currentColor}
body.redesign a.trustline:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
body.redesign .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.5}
body.redesign section.band{padding:88px 0}
body.redesign #compramos{padding-top:40px}
body.redesign .sec-head{max-width:560px;margin-bottom:44px}
body.redesign .sec-head h2{font-size:clamp(28px,3.7vw,38px);margin-top:14px}
body.redesign .sec-head p{margin-top:14px;color:var(--muted);font-size:16.5px}
body.redesign .devices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
body.redesign .device{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;transition:.2s ease;cursor:pointer}
body.redesign .device:hover{border-color:color-mix(in srgb,var(--brand) 42%,var(--line));transform:translateY(-3px)}
body.redesign .device h3{font-size:18px}
body.redesign .device .to{font-size:14px;color:var(--muted);margin-top:5px}
body.redesign .device .to b{color:var(--ink-strong);font-weight:800}
body.redesign .device .arw{color:var(--muted);transition:.2s;font-size:15px}
body.redesign .device:hover .arw{color:var(--brand);transform:translateX(3px)}
body.redesign .valuate{background:var(--surface);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
/* minmax(0,…) not plain fr: a grid item defaults to min-width:auto, so a
   1fr track refuses to shrink below its content and a long product name
   in the estimator pushed the track — and the page — past the viewport. */
body.redesign .vwrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
body.redesign .vcopy h2{font-size:clamp(27px,3.5vw,37px);margin-top:14px}
body.redesign .vcopy p{margin-top:15px;color:var(--muted);font-size:16.5px;max-width:34ch}
body.redesign .vchecks{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
body.redesign .vchecks li{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;color:var(--ink)}
body.redesign .vchecks li svg{width:20px;height:20px;color:var(--brand);flex:none;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.redesign .quote{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-md)}
body.redesign .quote h3{font-size:17px;letter-spacing:-.015em}
/* Category selector: separate outlined buttons that wrap and centre, rather
   than one segmented track. Sizing them from their own content (flex:0 1 auto
   with a floor, never 1 1) is what produces the 3-then-2 shape — the row that
   does not fill stays centred instead of stretching to the edges. The count is
   whatever the API returns, so nothing here assumes five. */
body.redesign .seg{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px;
  background:none;border:0;padding:0}
/* Padding stays symmetric so the label sits centred on the button. */
body.redesign .seg button{font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 1 auto;min-width:min(158px,100%);padding:10px 26px;
  border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--muted);
  transition:border-color .15s,background .15s,color .15s}
body.redesign .seg button:hover{color:var(--ink);border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
body.redesign .seg button[aria-selected="true"]{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-2)}
/* No tick: the active tab is carried by the brand border, tint and text colour
   above, and aria-selected states it for assistive tech. */
body.redesign .seg button:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 42%,transparent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){body.redesign .seg button{transition:none}}
body.redesign .qlabel{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:16px 0 7px;display:flex;justify-content:space-between}
body.redesign .qlabel .hint{color:var(--muted);letter-spacing:.02em;text-transform:none;font-size:12px;font-weight:600}
body.redesign .combo{position:relative}
body.redesign .combo-trigger{width:100%;max-width:100%;display:flex;align-items:center;gap:10px;font:inherit;text-align:left;background:var(--surface-2);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:.16s}
body.redesign .combo-trigger:hover{border-color:color-mix(in srgb,var(--brand) 55%,var(--line))}
body.redesign .combo-trigger:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
body.redesign .combo[data-open="true"] .combo-trigger{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
/* min-width:0 is what makes the ellipsis work. A flex item defaults to
   min-width:auto, so it refuses to shrink below its content's intrinsic
   width — overflow/text-overflow never engage, and a long product name
   pushes the trigger (and the page) wider than the viewport. */
body.redesign .combo-name{font-size:15px;font-weight:600;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.redesign .combo-val{font-size:14px;font-weight:800;color:var(--ink-strong);white-space:nowrap}
body.redesign .combo-chev{color:var(--muted);transition:transform .2s;font-size:12px;flex:none;margin-left:2px}
body.redesign .combo[data-open="true"] .combo-chev{transform:rotate(180deg);color:var(--brand)}
body.redesign .combo-pop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-pop);overflow:hidden;transform-origin:top center;animation:pop .16s ease}
body.redesign .combo-pop[hidden]{display:none}
body.redesign .combo-search{position:relative;display:flex;align-items:center;padding:8px 8px 4px}
body.redesign .combo-search-ic{position:absolute;left:20px;width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
body.redesign .combo-input{width:100%;font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:var(--surface-2);border:1.5px solid var(--line);border-radius:10px;padding:10px 34px}
body.redesign .combo-input::placeholder{color:var(--muted);font-weight:500}
body.redesign .combo-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
body.redesign .combo-clear{position:absolute;right:18px;width:22px;height:22px;display:grid;place-items:center;border:none;border-radius:50%;background:var(--line);color:var(--ink);font-size:15px;line-height:1;cursor:pointer;padding:0}
body.redesign .combo-clear:hover{background:var(--brand);color:var(--btn-fg)}
body.redesign .combo-clear[hidden]{display:none}
body.redesign .combo-empty{padding:6px 14px 16px;font-size:14px;color:var(--muted)}
body.redesign .combo-empty[hidden]{display:none}
body.redesign .combo-count{padding:0 14px 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
body.redesign .combo-list{list-style:none;margin:0;padding:4px 6px 6px;max-height:264px;overflow:auto;overscroll-behavior:contain}
body.redesign .combo-list[hidden]{display:none}
body.redesign .combo-opt mark{background:none;color:var(--brand);font-weight:800;padding:0}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
body.redesign .combo-list[hidden]{display:none}
body.redesign .combo-opt{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:10px;cursor:pointer}
body.redesign .combo-opt .on{flex:1;font-size:15px;font-weight:600;color:var(--ink)}
body.redesign .combo-opt .ov{font-size:14px;color:var(--muted);font-weight:700;white-space:nowrap}
body.redesign .combo-opt:hover,body.redesign .combo-opt.active{background:var(--surface-2)}
body.redesign .combo-opt[aria-selected="true"]{background:var(--brand-tint)}
body.redesign .combo-opt[aria-selected="true"] .on,body.redesign .combo-opt[aria-selected="true"] .ov{color:var(--brand-2)}
/* flex-wrap + min-width:0: a 4-digit estimate (1.201€) used to push the
   "Recolha grátis" tag straight out of the card, because .amt would not
   shrink and the tag is nowrap. Now the amount can shrink and the tag
   drops to its own line rather than escaping. */
body.redesign .result{margin-top:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 12px;min-width:0}
body.redesign .result>div{min-width:0}
body.redesign .result .amt{min-width:0;overflow-wrap:anywhere}
body.redesign .result .lab{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
body.redesign .result .amt{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:8px;color:var(--ink-strong)}
body.redesign .result .amt small{font-size:17px;font-weight:700;color:var(--muted);margin-right:6px}
body.redesign .result .amt em{font-style:normal;font-weight:800;margin-left:1px}
body.redesign .result .tag{font-size:12.5px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:7px;padding-bottom:6px;white-space:nowrap}
body.redesign .result .tag svg{width:16px;height:16px;stroke:var(--brand);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
body.redesign .quote .go{margin-top:16px;width:100%;justify-content:center}
body.redesign .quote .fine{margin-top:11px;font-size:12px;color:var(--muted);text-align:center}
body.redesign .how{background:var(--surface-3)}
body.redesign .how .sec-head{text-align:center;margin-left:auto;margin-right:auto}
body.redesign .how .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
body.redesign .hstep{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:36px 26px 32px;text-align:center;display:flex;flex-direction:column;align-items:center;box-shadow:var(--shadow-sm);transition:.2s ease}
body.redesign .hstep:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
body.redesign .hstep .bubble{position:relative;width:84px;height:84px;border-radius:50%;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;margin-bottom:20px}
body.redesign .hstep .bubble svg{width:34px;height:34px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.redesign .hstep .num{position:absolute;top:-3px;right:-3px;width:28px;height:28px;border-radius:50%;background:var(--brand);color:var(--btn-fg);display:grid;place-items:center;font-weight:800;font-size:13px;border:4px solid var(--surface)}
body.redesign .hstep h3{font-size:19.5px}
body.redesign .hstep p{color:var(--muted);font-size:15px;margin-top:10px;max-width:26ch}
body.redesign .vid{max-width:800px;margin:52px auto 0}
body.redesign .vid-frame{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-md);background:linear-gradient(135deg,#F2836B,#E0592B 55%,#F0885A);}
body.redesign .vid-frame::before{content:"";position:absolute;width:56%;height:120%;left:-14%;top:-30%;border-radius:50%;background:rgba(255,248,243,.14)}
body.redesign .vid-frame::after{content:"";position:absolute;width:42%;height:90%;right:-10%;bottom:-40%;border-radius:50%;background:rgba(27,18,12,.12)}
body.redesign .vid-play{position:absolute;inset:0;margin:auto;width:82px;height:82px;border-radius:50%;border:0;background:#FFF8F3;color:#C44C22;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 34px -10px rgba(27,18,12,.45);transition:.18s ease;z-index:2}
body.redesign .vid-play svg{width:26px;height:26px;fill:currentColor;margin-left:4px}
body.redesign .vid-frame:hover .vid-play{transform:scale(1.07)}
body.redesign .vid-badge{position:absolute;right:16px;bottom:14px;z-index:2;background:rgba(27,18,12,.55);color:#FFF8F3;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px)}
body.redesign .vid-title{position:absolute;left:20px;bottom:14px;z-index:2;color:#FFF8F3;font-weight:700;font-size:15px;text-shadow:0 1px 6px rgba(27,18,12,.35)}
body.redesign .vid figcaption{text-align:center;color:var(--muted);font-size:13.5px;margin-top:14px}
body.redesign .nums{background:var(--surface);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
body.redesign .nums .sec-head{text-align:center;margin-left:auto;margin-right:auto;margin-bottom:40px}
body.redesign .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
body.redesign .stat{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:30px 22px;text-align:center}
body.redesign .stat .sic{width:66px;height:66px;border-radius:18px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;margin:0 auto 18px}
body.redesign .stat .sic svg{width:33px;height:33px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.redesign .stat .sv{font-size:clamp(32px,4vw,44px);font-weight:800;letter-spacing:-.02em;color:var(--ink-strong);line-height:1}
body.redesign .stat .sl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:11px}
body.redesign .stat.in .sic{animation:grow .7s cubic-bezier(.34,1.56,.64,1) both}
body.redesign .stat.in .sv{animation:grow .7s .12s cubic-bezier(.34,1.56,.64,1) both}
body.redesign .stat.in .sl{animation:fadeup .6s .28s ease both}
@keyframes grow{from{transform:scale(.35);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fadeup{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
body.redesign .adv .feat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
body.redesign .feature{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 22px;transition:.2s ease;box-shadow:var(--shadow-sm)}
body.redesign .feature:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
body.redesign .feature .fic{width:46px;height:46px;border-radius:12px;background:var(--brand-tint);display:grid;place-items:center;color:var(--brand);margin-bottom:16px}
body.redesign .feature .fic svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.redesign .feature h3{font-size:16.5px}
body.redesign .feature p{color:var(--muted);font-size:14.5px;margin-top:8px}
body.redesign .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
body.redesign .review{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
body.redesign .review .stars{font-size:13px;margin-bottom:12px}
body.redesign .review p{font-size:15px;line-height:1.55}
body.redesign .review .who{margin-top:16px;font-size:13.5px;color:var(--muted)}
body.redesign .review .who b{color:var(--ink);font-weight:700}
body.redesign .final{padding:72px 0 96px}
body.redesign .final .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:60px;text-align:center;box-shadow:var(--shadow-md)}
body.redesign .final h2{font-size:clamp(28px,4vw,42px)}
body.redesign .final p{margin:14px auto 28px;max-width:44ch;color:var(--muted);font-size:17px}
body.redesign .wa{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:9px;background:var(--brand);color:var(--btn-fg);font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px;box-shadow:0 0 22px 1px rgba(224,89,43,.16),0 12px 28px -8px rgba(224,89,43,.42),0 3px 8px rgba(20,12,8,.12);transition:box-shadow .2s,transform .18s,background .18s}
body.redesign .wa:hover{background:var(--brand-2);transform:translateY(-2px);box-shadow:0 0 26px 2px rgba(224,89,43,.22),0 16px 34px -8px rgba(224,89,43,.5),0 4px 10px rgba(20,12,8,.14)}
body.redesign .wa svg{width:17px;height:17px;fill:currentColor}
body.redesign .note{max-width:var(--maxw);margin:20px auto -10px;padding:0 28px}
body.redesign .note .inner{border:1px dashed var(--line);border-radius:11px;padding:11px 15px;font-size:12.5px;color:var(--muted);background:var(--surface)}
body.redesign .note b{color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
body.redesign ::view-transition-old(root),body.redesign ::view-transition-new(root){animation-duration:.5s;animation-timing-function:ease}
}
/* Scoped to .js-reveal, set by the inline head script. Without the gate an
   element stayed opacity:0 whenever redesign.js was blocked, slow or errored —
   i.e. the whole page below the header was invisible with no way back. It also
   means LCP never waits on a stylesheet promise that only JS can keep. */
html.js-reveal body.redesign [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
html.js-reveal body.redesign [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
html.js-reveal body.redesign [data-reveal],
html.js-reveal body.redesign [data-reveal].in{opacity:1;transform:none;transition:none}
body.redesign .combo-pop,body.redesign .langdd-list{animation:none}
body.redesign .stat.in .sic,body.redesign .stat.in .sv,body.redesign .stat.in .sl{animation:none}
}
@media (max-width:900px){
body.redesign .hero{padding:28px 0 0}
/* Single column, copy FIRST. The artwork is decorative, so it must not sit
   between the headline and the buttons on a phone — the CTA stays reachable
   without scrolling past an image. */
body.redesign .hero-grid{grid-template-columns:minmax(0,1fr);gap:34px}
body.redesign .hero-art{display:none}
body.redesign .nav .links{display:none}
body.redesign .devices,body.redesign .reviews{grid-template-columns:1fr}
body.redesign .how .steps{grid-template-columns:1fr 1fr;gap:14px;max-width:560px;margin:0 auto}
body.redesign .vwrap{grid-template-columns:minmax(0,1fr);gap:34px}
body.redesign .stats{grid-template-columns:1fr;gap:12px;max-width:440px;margin:0 auto}
body.redesign .adv .feat{grid-template-columns:1fr 1fr;gap:14px}
body.redesign .final .card{padding:38px 22px}
}
@media (max-width:560px){
body.redesign .wrap{padding:0 20px}
/* Tighter still on a phone so the artwork reads as a supporting flourish
   rather than a full screen of scrolling before anything else appears. */
body.redesign .hero-grid{gap:26px}
body.redesign .adv .feat{grid-template-columns:1fr}
/* On a phone the same wrap lands two per row on its own — the 150px floor and
   the centring do the work, so there is no grid special-case left to maintain. */
body.redesign .seg{gap:8px}
body.redesign .seg button{font-size:13.5px;padding:9px 24px;min-width:min(138px,100%)}
body.redesign .vid-play{width:66px;height:66px}
}
body.redesign footer.site{background:var(--surface-2);color:var(--muted);border-top:1px solid var(--line);padding:78px 0 30px}
body.redesign footer .flogo{display:flex}
body.redesign footer .flogo img{height:46px;width:auto}
body.redesign .contact{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
body.redesign .cinfo{display:flex;flex-direction:column;align-items:center;text-align:center}
body.redesign .cinfo h2{color:var(--ink);font-size:clamp(30px,3.6vw,42px);line-height:1.04;margin:24px 0 14px;letter-spacing:-.02em}
body.redesign .clead{font-size:16px;line-height:1.62;max-width:44ch;color:var(--muted);margin:0 auto}
body.redesign .cinfo-list{list-style:none;margin:32px auto 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:18px;width:-moz-fit-content;width:fit-content;max-width:100%;text-align:left}
body.redesign .ci{display:flex;align-items:center;gap:14px}
body.redesign .ci-ic{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand);border:1px solid var(--line)}
body.redesign .ci-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.redesign .ci-tx{display:flex;flex-direction:column;gap:2px}
body.redesign .ci-tx b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
body.redesign .ci-tx a,body.redesign .ci-tx .v{color:var(--ink);font-size:16px;font-weight:600}
body.redesign .ci-tx a:hover{color:var(--brand)}
body.redesign .grev{display:inline-flex;align-items:center;gap:14px;margin-top:30px;padding:14px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.05))}
body.redesign .grev-g{flex:none;display:grid;place-items:center}
body.redesign .grev-top{display:flex;align-items:center;gap:9px}
body.redesign .grev-top b{color:var(--ink);font-size:19px}
body.redesign .grev .stars{color:#F5A623;letter-spacing:1px;font-size:15px}
body.redesign .grev-sub{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
body.redesign .tpilot{margin-top:30px;display:inline-flex;flex-direction:column;align-items:center;gap:11px;padding:18px 24px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.05))}
body.redesign .tp-stars{display:flex;gap:4px}
body.redesign .tp-box{width:30px;height:30px;display:grid;place-items:center;background:#00b67a;border-radius:5px}
body.redesign .tp-box svg{width:20px;height:20px;fill:#fff}
body.redesign .tp-meta{margin:0;font-size:12.5px;color:var(--muted)}
body.redesign .tp-meta strong{color:var(--ink)}
body.redesign .tp-brand{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink);font-size:15px}
body.redesign .tp-brand svg{width:18px;height:18px;fill:#00b67a}
body.redesign .cform{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-md);padding:36px 34px 30px;overflow:hidden}
body.redesign .cform-bar{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand-2,#c94a20))}
body.redesign .cform h3{color:var(--ink);font-size:22px;margin:6px 0 5px;letter-spacing:-.01em}
body.redesign .cform-sub{color:var(--muted);font-size:14.5px;margin:0 0 22px}
body.redesign .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
body.redesign .field-msg{margin-top:16px}
body.redesign .field{display:flex;flex-direction:column;gap:7px;min-width:0}
body.redesign .field>span{font-size:12.5px;font-weight:600;color:var(--ink)}
body.redesign .field>span i{color:var(--brand);font-style:normal;margin-left:2px}
body.redesign .field input,body.redesign .field select,body.redesign .field textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
body.redesign .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23947b6b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;cursor:pointer}
body.redesign .field textarea{min-height:98px;resize:vertical}
body.redesign .field input::placeholder,body.redesign .field textarea::placeholder{color:var(--muted);opacity:.75}
body.redesign .field input:focus,body.redesign .field select:focus,body.redesign .field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
body.redesign .phone{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
body.redesign .phone:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
body.redesign .phone .cc{display:flex;align-items:center;padding:0 12px;background:var(--brand-tint);font-size:14px;font-weight:600;color:var(--ink);border-right:1px solid var(--line);white-space:nowrap}
body.redesign .phone input{border:none;border-radius:0}
body.redesign .phone input:focus{box-shadow:none}
body.redesign .cform-send{width:100%;margin-top:20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:var(--btn-fg,#fff);font-weight:700;font-size:15.5px;border:none;border-radius:12px;padding:14px 20px;cursor:pointer;transition:background .15s,transform .15s}
body.redesign .cform-send:hover{background:var(--brand-2,#c94a20);transform:translateY(-1px)}
body.redesign .cform-send:disabled{opacity:.75;cursor:default;transform:none}
body.redesign .resp{display:flex;align-items:center;gap:8px;justify-content:center;margin:16px 0 0;font-size:13px;color:var(--muted)}
body.redesign .resp svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.redesign .cform-ok{margin:12px 0 0;text-align:center;font-size:13.5px;font-weight:600;line-height:1.55;color:var(--muted)}
body.redesign .cform-ok:empty{display:none}
body.redesign .cform-ok.is-err{color:#C0492B}
/* Sent: the control stops looking like something to press again — it goes calm
   and green, keeps the height so the card doesn't jump, and drops the hover. */
body.redesign .cform-send.is-sent,body.redesign .cform-send.is-sent:hover{
  background:color-mix(in srgb,#0E9F6E 14%,transparent);
  color:#0E9F6E;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#0E9F6E 34%,transparent);
  opacity:1;transform:none;cursor:default}
body.redesign .cform-send .cform-tick{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24;animation:cform-tick .34s ease-out .04s forwards}
@keyframes cform-tick{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  body.redesign .cform-send .cform-tick{animation:none;stroke-dashoffset:0}
}
body.redesign .foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin:66px 0 0;padding-top:34px;border-top:1px solid var(--line)}
body.redesign .foot-nav a{color:var(--muted);font-size:13.5px;transition:color .15s}
body.redesign .foot-nav a:hover{color:var(--ink)}
body.redesign .foot-base{text-align:center;margin-top:22px;font-size:12.5px;color:var(--muted)}
body.redesign .foot-lrline{text-align:center;margin-top:6px;font-size:11.5px}
@media (max-width:900px){
body.redesign .contact{grid-template-columns:1fr;gap:40px}
body.redesign .cinfo{display:flex;flex-direction:column;align-items:center;text-align:center}
body.redesign .cinfo .flogo{justify-content:center}
body.redesign .clead{margin-left:auto;margin-right:auto}
body.redesign .cinfo-list{align-self:stretch;max-width:360px;margin-left:auto;margin-right:auto}
body.redesign .foot-nav{margin-top:46px}
}
@media (max-width:560px){
body.redesign footer.site{padding:56px 0 28px}
body.redesign .frow{grid-template-columns:1fr}
body.redesign .cform{padding:26px 20px 24px}
body.redesign .cinfo h2{font-size:30px}
}
/* ---------- Elfsight widgets: skeleton while the bundle loads ----------
   The reviews bundle is the heaviest asset on the site (~520 KB). redesign.js
   holds the platform script back until a widget is near the viewport, so this
   placeholder is what stands in until it paints — a soft sweep over a faint
   base, GPU-only (transform) so it costs nothing on the main thread. */
@keyframes smp-shimmer{100%{transform:translateX(100%)}}
body.redesign .elf-wrap{position:relative;min-height:var(--elf-min,150px);overflow:hidden;border-radius:16px}
body.redesign .elf-skel{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 5%,transparent);overflow:hidden}
body.redesign .elf-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 8%,transparent),transparent);
  animation:smp-shimmer 1.6s infinite}
body.redesign .elf-wrap.is-ready .elf-skel{display:none}
@media (prefers-reduced-motion:reduce){body.redesign .elf-skel::after{animation:none}}

/* ---------- product/content imagery ----------
   Deterrent, not protection: the file is still one request away for anyone who
   wants it. This stops the casual save — no drag, no long-press sheet, no
   selection. The context-menu suppression itself is in redesign.js, since CSS
   cannot cancel that event. */
body.redesign img{-webkit-user-drag:none;-khtml-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

body.redesign .acctdd{position:relative}
body.redesign .acct-trig svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.redesign .acctdd[data-open="true"] .acct-trig{border-color:var(--brand);color:var(--brand)}
/* ---------- account dropdown ----------
   The identity row is laid out so that NO viewport, font or engine can reflow
   it. Two things had made it fragile:

   1. It was a flex row whose text column was `flex:0 1 auto`, i.e. sized to
      max-content — exactly the width of the name, zero slack (measured: column
      104.08px, name 104.08px). A layout with zero slack survives only while
      every engine measures the string identically. WebKit's intrinsic-sizing
      pass rounds differently, the name spills onto a second line, and
      `align-items:center` then parks the avatar between the two lines. That is
      the "correct for a frame, then broken" glitch.
   2. The rules that gave it slack lived in a `max-width:560px` block, so the
      panel was only safe on phones — every wider context still had the
      zero-slack version.

   A grid with an explicit `minmax(0,1fr)` text track hands the column the
   REMAINING space instead of its own content width, and nowrap+ellipsis means
   an over-long name truncates instead of reflowing the panel. Both apply at
   every width; the media query below is now cosmetics only. */
body.redesign .acctdd-menu{position:absolute;right:0;left:auto;top:calc(100% + 10px);z-index:55;
  width:min(250px, calc(100vw - 24px));background:var(--surface);border:1px solid var(--line);
  border-radius:15px;box-shadow:var(--shadow-md);padding:8px;animation:none}
body.redesign .acctdd-menu[hidden]{display:none}
body.redesign .acctdd-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:11px;padding:9px 10px 13px;border-bottom:1px solid var(--line);margin-bottom:6px}
body.redesign .acctdd-head .av{width:38px;height:38px;border-radius:50%;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:15px}
body.redesign .acctdd-ident{min-width:0}
/* Named, not `.acctdd-head span` — that selector also matched the avatar and
   only lost the cascade on a specificity technicality. */
body.redesign .acctdd-head b,
body.redesign .acctdd-mail{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.redesign .acctdd-head b{font-size:14px;color:var(--ink)}
body.redesign .acctdd-mail{font-size:12.5px;color:var(--muted)}
/* The name is a single text node and nothing here underlines it, so an
   underline under one word of it can only be drawn through a wrapper element
   something outside the page injected — a translate overlay, a browser
   extension, an OS content-highlight feature. !important is the only thing
   that outranks an injected inline style, and the blast radius is two
   selectors inside a dropdown. */
body.redesign .acctdd-head b,body.redesign .acctdd-head b *,
body.redesign .acctdd-mail,body.redesign .acctdd-mail *{text-decoration:none!important}
/* When a data detector does inject a link into the DOM (rather than painting a
   native overlay), it looks like this. Nothing in this panel is meant to be
   tappable except the menu items below it, and mailing yourself is not a
   feature — so strip the styling and the click. */
body.redesign .acctdd-head a[x-apple-data-detectors],
body.redesign .acctdd-head a[href^="mailto:"]{
  color:inherit!important;text-decoration:none!important;pointer-events:none}
body.redesign .acctdd-menu a{display:flex;align-items:center;gap:11px;padding:10px;border-radius:9px;color:var(--ink);font-size:14.5px;font-weight:600}
body.redesign .acctdd-menu a:hover{background:var(--surface-2)}
body.redesign .acctdd-menu a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
body.redesign .acctdd-menu a.danger{color:#C0492B}
body.redesign .acctdd-menu a.danger svg{color:#C0492B}
body.redesign .acctdd-menu a.danger:hover{background:var(--brand-tint)}
body.redesign .acctdd-sep{height:1px;background:var(--line);margin:6px 4px}
body.redesign .adv-merged{margin-top:58px;padding-top:50px;border-top:1px solid var(--line)}
body.redesign .adv-merged .sec-head{text-align:center;margin-left:auto;margin-right:auto}
@media (prefers-color-scheme:dark){
:root{--ground:#17110C;--surface:#201811;--surface-2:#2A2017;--surface-3:#2A2016;--ink:#F1E8DD;--ink-strong:#FCF6EE;--muted:#A89A8B;--line:#352A20;--line-soft:#241C15;--brand:#F06A3B;--brand-2:#FF7E52;--brand-tint:#3A2119;--btn-fg:#1C130C;--ok:#43C08D;--shadow-md:0 18px 44px -22px rgba(0,0,0,.65)}
}
@media (prefers-reduced-motion:no-preference){
body.redesign ::view-transition-old(root),body.redesign ::view-transition-new(root){animation-duration:.5s}
}
body.redesign .lang-mini{font-size:12.5px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 12px}
body.redesign .note code{background:var(--surface-3);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:11.5px}
body.redesign .back{display:inline-flex;align-items:center;gap:8px;margin:26px 0 4px;font-size:14.5px;font-weight:600;color:var(--muted);cursor:pointer}
body.redesign .back:hover{color:var(--ink)}
body.redesign .back svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.redesign .col{padding:8px 0 100px;display:flex;flex-direction:column;gap:16px}
body.redesign .phead{display:flex;gap:18px;align-items:center;margin:8px 0 4px}
body.redesign .phead .pic{width:88px;height:88px;border-radius:20px;background:var(--brand-tint);display:grid;place-items:center;flex:none}
body.redesign .phead .pic svg{width:42px;height:42px;stroke:var(--brand);stroke-width:1.5;fill:none}
body.redesign .phead h1{font-size:clamp(26px,3vw,32px)}
body.redesign .phead .pill{display:inline-block;margin-top:9px;font-size:12px;font-weight:700;color:var(--brand);background:var(--brand-tint);border-radius:999px;padding:5px 11px}
body.redesign .qsec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
body.redesign .qsec>.h{display:flex;align-items:center;gap:12px;margin-bottom:18px}
body.redesign .qsec>.h .n{width:28px;height:28px;border-radius:50%;background:var(--brand);color:var(--btn-fg);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
body.redesign .qsec>.h h2{font-size:19px}
body.redesign .qsec>.h .hint{margin-left:auto;font-size:12.5px;color:var(--muted);text-align:right}
body.redesign .caps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
body.redesign .cap{border:1.5px solid var(--line);border-radius:14px;padding:15px 12px;text-align:center;cursor:pointer;background:var(--surface);transition:.15s}
body.redesign .cap:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
body.redesign .cap[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-tint)}
body.redesign .cap .c{font-size:16px;font-weight:800;color:var(--ink)}
body.redesign .cap .v{font-size:12.5px;color:var(--muted);margin-top:3px}
body.redesign .cap[aria-pressed="true"] .v{color:var(--brand-2)}
body.redesign .q{padding:18px 0;border-top:1px solid var(--line-soft)}
body.redesign .q:first-of-type{border-top:0;padding-top:0}
body.redesign .q .ql{font-size:15.5px;font-weight:600;margin-bottom:12px;display:flex;gap:9px;align-items:flex-start}
body.redesign .q .ql svg{width:20px;height:20px;color:var(--muted);flex:none;margin-top:1px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* ---------- questionnaire answers ----------
   detail.php is the only thing that builds .opt/.opts, so they are defined once
   here instead of across three blocks that partly contradicted each other: this
   rule set flex-direction:column while a later one wrote justify-content:
   space-between for a row, so an answer's emoji stacked UNDER its label and got
   pushed to the bottom of the button. The `b`/`small` rules that went with the
   old two-line card were dead — the builder only ever emits .option-text and
   .option-emoji.

   Options are centred: the button centres its row, and text-align:center keeps
   a label that wraps on a narrow phone centred too (align-items alone only
   centres the box, not the second line inside it). */
body.redesign .opts{display:flex;flex-direction:column;gap:10px}
body.redesign .opt{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;
  width:100%;text-align:center;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;
  cursor:pointer;background:var(--surface);color:var(--ink);transition:.15s}
body.redesign .opt:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
body.redesign .opt[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-tint)}
body.redesign .opt .option-text{color:var(--ink);font-size:14.5px;font-weight:600;line-height:1.35}
body.redesign .opt[aria-pressed="true"] .option-text{color:var(--ink-strong)}
body.redesign .opt .option-emoji{font-size:18px;line-height:1}

/* ---------- IBAN field ----------
   Shared component. It lived inline in buybackview.php scoped to #modalSign,
   so the sell flow's payment step — asking the same customer for the same
   number — got a bare text input with no PT50 adornment, no paste handling and
   no validation state. One definition, both screens. */
body.redesign .iban-field{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:12px;background:var(--surface-2);overflow:hidden;transition:.15s}
body.redesign .iban-field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
body.redesign .iban-field.is-valid{border-color:#0E9F6E}
body.redesign .iban-field.is-invalid{border-color:#C0492B}
body.redesign .iban-prefix{display:flex;align-items:center;padding:0 8px 0 14px;font-size:15px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--muted);flex:none;user-select:none}
body.redesign .iban-field input{flex:1;min-width:0;width:auto;border:0;background:transparent;box-shadow:none;padding:13px 8px 13px 0;font:inherit;font-size:15px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--ink)}
body.redesign .iban-field input:focus{outline:none}
body.redesign .iban-state{display:flex;align-items:center;padding:0 13px 0 4px;font-size:15px;font-weight:800;flex:none}
body.redesign .iban-field.is-valid .iban-state::after{content:"\2713";color:#0E9F6E}
body.redesign .iban-field.is-invalid .iban-state::after{content:"\2715";color:#C0492B}
body.redesign .pay{display:grid;grid-template-columns:1fr 1fr;gap:9px}
body.redesign .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.redesign .field label{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
body.redesign .field label span{text-transform:none;font-weight:600;color:var(--muted)}
body.redesign .input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px}
body.redesign .input::placeholder{color:var(--muted);opacity:.7}
body.redesign .input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
body.redesign .cont{width:100%;margin-top:16px}
body.redesign .offer{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-md)}
body.redesign .offer .lab{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
body.redesign .offer .big{font-size:54px;font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:8px;color:var(--ink-strong)}
body.redesign .offer .big em{font-style:normal}
body.redesign .offer .sum{margin:18px 0;padding:16px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:11px}
body.redesign .offer .row{display:flex;justify-content:space-between;gap:16px;font-size:13.5px}
body.redesign .offer .row>span{color:var(--muted);flex:none}
body.redesign .offer .row>b{color:var(--ink);font-weight:600;text-align:right}
body.redesign .offer .row.block{align-items:flex-start}
body.redesign .offer .est{display:flex;flex-direction:column;gap:2px;text-align:right}
body.redesign .offer .est span{font-size:12.8px;color:var(--ink);font-weight:600;line-height:1.4}
body.redesign .offer .go{width:100%}
body.redesign .offer .peace{margin-top:14px;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}
body.redesign .offer .peace svg{width:17px;height:17px;stroke:var(--ok);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
body.redesign .flash{animation:flash .5s ease}
@keyframes flash{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
body.redesign .reveal{animation:slidein .45s ease both}
body.redesign .reveal[hidden]{display:none!important}
@keyframes slidein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
body.redesign .reveal,body.redesign .flash{animation:none}
}
@media (max-width:560px){
body.redesign .wrap{padding:0 18px}
body.redesign .caps{grid-template-columns:repeat(2,1fr)}
body.redesign .pay,body.redesign .two{grid-template-columns:1fr}
}
body.redesign .wrap.wide{max-width:1120px}
body.redesign .fbig{background:var(--surface-2);color:var(--muted);border-top:1px solid var(--line);padding:64px 0 32px}
body.redesign .fbig h4{color:var(--ink);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px}
body.redesign .fbig ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
body.redesign .fbig a{color:var(--muted);font-size:14.5px}
body.redesign .fbig a:hover{color:var(--ink)}
body.redesign .fbig .blurb{font-size:14px;margin-top:16px;max-width:32ch;line-height:1.6;color:var(--muted)}
body.redesign .fbig .base{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
@media (prefers-reduced-motion:reduce){
html.js-reveal body.redesign [data-reveal],
html.js-reveal body.redesign [data-reveal].in{opacity:1;transform:none;transition:none}
body.redesign .stat.in .sic,body.redesign .stat.in .sv,body.redesign .stat.in .sl{animation:none}
}
@media (max-width:900px){
body.redesign .how .steps{grid-template-columns:1fr 1fr;gap:14px;max-width:560px;margin:0 auto}
body.redesign .stats{grid-template-columns:1fr;gap:12px;max-width:440px;margin:0 auto}
body.redesign .adv .feat{grid-template-columns:1fr 1fr;gap:16px}
body.redesign .reviews{grid-template-columns:1fr}
body.redesign .final .card{padding:38px 22px}
}
@media (max-width:560px){
body.redesign .adv .feat{grid-template-columns:1fr}
body.redesign .fbig .flogo img{margin:0 auto}
body.redesign .fbig .blurb{margin-left:auto;margin-right:auto}
body.redesign .fbig ul{align-items:center}
body.redesign .fbig .base{flex-direction:column;align-items:center;text-align:center;gap:8px}
}
body.redesign .pdp-narrow{max-width:700px;margin:0 auto;padding:0 24px}
@media (max-width:900px){
body.redesign .how .steps{grid-template-columns:1fr;gap:18px;max-width:440px;margin:0 auto}
body.redesign .stats{grid-template-columns:1fr;gap:12px;max-width:440px;margin:0 auto}
body.redesign .adv .feat{grid-template-columns:1fr 1fr;gap:14px}
body.redesign .final .card{padding:38px 22px}
body.redesign .reviews{grid-template-columns:1fr}
}
@media (max-width:560px){
body.redesign .adv .feat{grid-template-columns:1fr}
body.redesign .vid-play{width:66px;height:66px}
}
@media (prefers-color-scheme:dark){
:root{--ground:#17110C;--surface:#201811;--surface-2:#2A2017;--surface-3:#2A2016;--ink:#F1E8DD;--ink-strong:#FCF6EE;--muted:#A89A8B;--line:#352A20;--line-soft:#241C15;--brand:#F06A3B;--brand-2:#FF7E52;--brand-tint:#3A2119;--btn-fg:#1C130C;--shadow-md:0 18px 44px -22px rgba(0,0,0,.65)}
}
body.redesign h1{margin:0;letter-spacing:-.023em;font-weight:800;line-height:1.07}
body.redesign .lhead{padding:4px 0 6px}
body.redesign .lhead .eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
body.redesign .lhead h1{font-size:clamp(30px,4.4vw,44px);margin-top:12px}
body.redesign .lhead h1 .u{color:var(--brand)}
body.redesign .lhead p{margin-top:12px;color:var(--muted);font-size:17px;max-width:48ch}
body.redesign .toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0 8px}
body.redesign .cats{display:flex;gap:7px;flex-wrap:wrap}
body.redesign .cats button{font:inherit;font-size:13.5px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;transition:.15s}
body.redesign .cats button:hover{color:var(--ink);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
body.redesign .cats button[aria-selected="true"]{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-2)}
body.redesign .search{margin-left:auto;position:relative;min-width:230px;flex:1;max-width:320px}
body.redesign .search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--muted);stroke-width:1.8;fill:none;pointer-events:none}
body.redesign .search input{width:100%;font:inherit;font-size:14.5px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:11px 16px 11px 40px}
body.redesign .search input::placeholder{color:var(--muted);opacity:.75}
body.redesign .search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
body.redesign .count{font-size:13.5px;color:var(--muted);margin:14px 0 16px}
body.redesign .count b{color:var(--ink);font-weight:700}
body.redesign .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px;padding-bottom:20px}
body.redesign .mcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:4px;transition:.2s ease;position:relative;cursor:pointer;min-height:170px}
body.redesign .mcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
body.redesign .mic{width:56px;height:56px;border-radius:15px;background:var(--brand-tint);display:grid;place-items:center;color:var(--brand);margin-bottom:12px}
body.redesign .mic svg{width:28px;height:28px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.redesign .mname{font-size:16.5px;font-weight:800;letter-spacing:-.01em;margin-top:auto}
body.redesign .mval{font-size:14px;color:var(--muted)}
body.redesign .mval b{color:var(--ink-strong);font-weight:800}
body.redesign .marw{position:absolute;right:20px;top:22px;color:var(--muted);transition:.2s;font-size:16px}
body.redesign .mcard:hover .marw{color:var(--brand);transform:translateX(3px)}
body.redesign .empty{text-align:center;color:var(--muted);padding:60px 0 40px;font-size:16px}
body.redesign .empty[hidden]{display:none}
body.redesign .cta{margin:40px 0 96px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px;text-align:center;box-shadow:var(--shadow-sm)}
body.redesign .cta h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}
body.redesign .cta p{margin:10px auto 20px;color:var(--muted);max-width:44ch}
@media (max-width:560px){
body.redesign .wrap{padding:0 20px}
body.redesign .search{margin-left:0;max-width:none}
body.redesign .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (max-width:900px){
body.redesign .how .steps{grid-template-columns:1fr 1fr;gap:14px;max-width:560px;margin:0 auto}
body.redesign .stats{grid-template-columns:1fr;gap:12px;max-width:440px;margin:0 auto}
body.redesign .adv .feat{grid-template-columns:1fr 1fr;gap:14px}
body.redesign .reviews{grid-template-columns:1fr}
}
body.redesign .acct{padding:64px 0 84px}
body.redesign .acct-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
body.redesign .acct-head .eyebrow{margin-bottom:10px}
body.redesign .acct-head h1{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.02em;margin:0}
body.redesign .acct-sub{color:var(--muted);margin:8px 0 0;font-size:16px}
body.redesign .acct-actions{display:flex;align-items:center;gap:14px}
body.redesign .avatar{width:44px;height:44px;border-radius:50%;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;font-weight:800;border:1px solid var(--line)}
body.redesign .acct-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:34px 0 40px}
body.redesign .astat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow-sm)}
body.redesign .astat-v{display:block;font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
body.redesign .astat-l{display:block;color:var(--muted);font-size:13.5px;margin-top:5px}
body.redesign .acct-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line)}
body.redesign .atab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font:inherit;font-weight:600;font-size:15px;padding:12px 12px;margin-bottom:-1px;cursor:pointer;transition:.15s}
body.redesign .atab:hover{color:var(--ink)}
body.redesign .atab.is-on{color:var(--brand);border-bottom-color:var(--brand)}
body.redesign .orders{display:flex;flex-direction:column;gap:14px;margin-top:26px}
body.redesign .order{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:22px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 22px;transition:.18s}
body.redesign .order:hover{border-color:var(--brand-tint);box-shadow:var(--shadow-sm)}
body.redesign .order-dev{display:flex;align-items:center;gap:14px;min-width:0}
body.redesign .order-ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center}
body.redesign .order-ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.redesign .order-dev b{display:block;font-size:15.5px;color:var(--ink)}
body.redesign .order-dev span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
body.redesign .order-val{font-size:17px;font-weight:800;color:var(--ink);white-space:nowrap}
body.redesign .badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap}
body.redesign .badge-paid{background:rgba(14,159,110,.13);color:#0E9F6E}
body.redesign .badge-progress{background:rgba(199,119,6,.15);color:#C77706}
body.redesign .badge-offer{background:var(--brand-tint);color:var(--brand)}
body.redesign .badge-scheduled{background:var(--surface-3);color:var(--muted);border:1px solid var(--line)}
body.redesign .order-more{background:none;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:9px 15px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
body.redesign .order-more:hover{border-color:var(--brand);color:var(--brand)}
body.redesign #acct-login{max-width:440px;margin:8px auto 0}
body.redesign .login-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-md);padding:38px 34px}
body.redesign .login-card h2{font-size:26px;margin:0 0 6px;letter-spacing:-.01em}
body.redesign .login-card>p{color:var(--muted);font-size:14.5px;margin:0 0 24px}
body.redesign .login-form{display:flex;flex-direction:column;gap:16px}
body.redesign .login-row{display:flex;justify-content:space-between;align-items:center;font-size:13.5px}
body.redesign .chk{display:inline-flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer}
body.redesign .chk input{width:16px;height:16px;accent-color:var(--brand)}
body.redesign .login-row a{color:var(--brand);font-weight:600}
body.redesign .login-or{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--muted);font-size:13px}
body.redesign .login-or:before,body.redesign .login-or:after{content:"";height:1px;background:var(--line);flex:1}
body.redesign .sso{display:grid;grid-template-columns:1fr 1fr;gap:12px}
body.redesign .sso-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;font-weight:600;font-size:14.5px;color:var(--ink);cursor:pointer;transition:.15s}
body.redesign .sso-btn:hover{border-color:var(--brand);color:var(--brand)}
body.redesign .login-foot{text-align:center;margin:24px 0 0;font-size:14px;color:var(--muted)}
body.redesign .login-foot a{color:var(--brand);font-weight:700}
@media (max-width:760px){
body.redesign .acct-stats{grid-template-columns:1fr}
body.redesign .order{grid-template-columns:1fr auto;grid-template-areas:"dev val" "status more";row-gap:14px;column-gap:16px}
body.redesign .order-dev{grid-area:dev}
body.redesign .order-val{grid-area:val;text-align:right;align-self:center}
body.redesign .order-status{grid-area:status}
body.redesign .order-more{grid-area:more;justify-self:end}
}
body.redesign .pagehead{padding:66px 0 8px}
body.redesign .pagehead .eyebrow{margin-bottom:12px}
body.redesign .pagehead h1{font-size:clamp(30px,4vw,46px);letter-spacing:-.02em;margin:0;line-height:1.08}
body.redesign .lead{color:var(--muted);font-size:17px;max-width:58ch;margin:16px 0 0;line-height:1.6}
body.redesign .lead a{color:var(--brand);font-weight:600}
body.redesign .prose h2{font-size:clamp(22px,2.6vw,30px);margin:38px 0 14px;letter-spacing:-.01em;color:var(--ink)}
body.redesign .prose h3{font-size:18px;margin:24px 0 9px;color:var(--ink)}
body.redesign .prose p{margin:0 0 15px;line-height:1.72;color:var(--ink);font-size:15.5px}
body.redesign .prose ul{margin:0 0 16px;padding-left:22px;line-height:1.7}
body.redesign .prose li{margin-bottom:7px;color:var(--ink)}
body.redesign .prose a{color:var(--brand);font-weight:600}
body.redesign .faq-wrap{max-width:820px}
body.redesign .faq-group{margin-bottom:30px}
body.redesign .faq-cat{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);margin:0 0 12px}
body.redesign .acc{display:flex;flex-direction:column;gap:10px}
body.redesign .acc-item{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;transition:border-color .18s}
body.redesign .acc-item.open{border-color:var(--brand-tint)}
body.redesign .acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:none;text-align:left;font:inherit;font-weight:600;font-size:16px;color:var(--ink);padding:18px 20px;cursor:pointer}
body.redesign .acc-ic{flex:none;width:20px;height:20px;position:relative}
body.redesign .acc-ic:before,body.redesign .acc-ic:after{content:"";position:absolute;background:var(--brand);border-radius:2px;transition:.22s}
body.redesign .acc-ic:before{top:9px;left:2px;width:16px;height:2px}
body.redesign .acc-ic:after{top:2px;left:9px;width:2px;height:16px}
body.redesign .acc-item.open .acc-ic:after{transform:rotate(90deg);opacity:0}
body.redesign .acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
body.redesign .acc-item.open .acc-a{grid-template-rows:1fr}
body.redesign .acc-inner{overflow:hidden}
body.redesign .acc-inner p{margin:0;padding:2px 20px 20px;color:var(--muted);line-height:1.65;font-size:15px}
body.redesign .legal{display:grid;grid-template-columns:230px 1fr;gap:50px;align-items:start}
body.redesign .legal-toc{position:sticky;top:96px}
body.redesign .toc-h{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 12px}
body.redesign .legal-toc a{display:block;padding:7px 0 7px 14px;color:var(--muted);font-size:14.5px;font-weight:600;border-left:2px solid var(--line);transition:.15s}
body.redesign .legal-toc a:hover{color:var(--brand);border-left-color:var(--brand)}
body.redesign .legal-body{max-width:760px}
body.redesign .legal-body h2{padding-top:26px;border-top:1px solid var(--line);margin-top:44px;scroll-margin-top:96px}
body.redesign .legal-body h2:first-child{border-top:none;margin-top:0;padding-top:0}
@media (max-width:840px){
body.redesign .legal{grid-template-columns:1fr;gap:22px}
body.redesign .legal-toc{position:static}
body.redesign .legal-toc nav{display:flex;flex-wrap:wrap;gap:8px}
body.redesign .legal-toc a{border-left:none;padding:8px 14px;border:1px solid var(--line);border-radius:999px}
}
body.redesign .feat-post{display:grid;grid-template-columns:1.05fr 1fr;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface);transition:.2s;margin-bottom:40px;text-decoration:none}
body.redesign .feat-post:hover{box-shadow:var(--shadow-md);border-color:var(--brand-tint)}
body.redesign .feat-media{min-height:280px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-tint),var(--surface-3))}
body.redesign .post-ico{width:64px;height:64px;color:var(--brand)}
body.redesign .post-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
body.redesign .feat-body{padding:38px 34px;align-self:center}
body.redesign .feat-body h2{font-size:clamp(23px,2.6vw,30px);margin:14px 0 12px;letter-spacing:-.01em;color:var(--ink)}
body.redesign .feat-body p{color:var(--muted);line-height:1.6;margin:0 0 16px}
body.redesign .post-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);background:var(--brand-tint);padding:5px 11px;border-radius:999px}
body.redesign .post-meta{font-size:13px;color:var(--muted)}
body.redesign .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
body.redesign .post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface);cursor:pointer;transition:.2s;text-decoration:none}
body.redesign .post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand-tint)}
body.redesign .post-cardmedia{height:132px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--brand-tint),var(--surface-3))}
body.redesign .post-cardmedia img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
body.redesign .post-cardmedia .post-ico{width:42px;height:42px}
body.redesign .post-cardbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
/* the card is an <a>; this is its affordance, not a nested link */
body.redesign .post-cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:var(--brand);letter-spacing:-.01em}
body.redesign .post-cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
body.redesign .post-card:hover .post-cta svg{transform:translateX(3px)}
body.redesign .post-cardbody h3{font-size:16.5px;margin:0;line-height:1.35;color:var(--ink)}
body.redesign .post-cardbody p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0;flex:1}
body.redesign .article-wrap{max-width:760px}
body.redesign .back-link{display:inline-block;color:var(--muted);font-weight:600;font-size:14px;margin-bottom:22px;cursor:pointer}
body.redesign .back-link:hover{color:var(--brand)}
body.redesign .article-title{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.02em;margin:14px 0 20px;line-height:1.12;color:var(--ink)}
body.redesign .article-meta{display:flex;align-items:center;gap:12px;margin-bottom:26px}
body.redesign .article-meta b{display:block;font-size:14.5px;color:var(--ink)}
body.redesign .article-meta span{display:block;font-size:13px;color:var(--muted)}
body.redesign .article-hero{height:300px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-tint),var(--surface-3));margin-bottom:32px}
body.redesign .article-hero .post-ico{width:78px;height:78px}
@media(max-width:820px){
body.redesign .feat-post{grid-template-columns:1fr}
body.redesign .post-grid{grid-template-columns:1fr 1fr}
body.redesign .feat-media{min-height:200px}
}
@media(max-width:560px){
body.redesign .post-grid{grid-template-columns:1fr}
}
body.redesign .sobre-mission{display:grid;grid-template-columns:1.3fr 1fr;gap:44px;align-items:center}
body.redesign .sobre-mission h2{font-size:clamp(24px,3vw,34px);margin:0 0 16px;letter-spacing:-.01em;color:var(--ink)}
body.redesign .sobre-mission p{color:var(--muted);line-height:1.7;margin:0 0 14px;font-size:16px}
body.redesign .mission-card{background:linear-gradient(135deg,var(--brand-tint),var(--surface-3));border:1px solid var(--line);border-radius:20px;padding:44px 36px;text-align:center}
body.redesign .mission-card .post-ico{width:58px;height:58px;color:var(--brand);margin:0 auto 18px;display:block}
body.redesign .mission-card .post-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
body.redesign .mission-card p{color:var(--ink);font-weight:600;font-size:18px;line-height:1.5;margin:0}
body.redesign .val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
body.redesign .val-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 24px;transition:.2s}
body.redesign .val-card:hover{box-shadow:var(--shadow-sm);border-color:var(--brand-tint)}
body.redesign .val-ic{width:48px;height:48px;border-radius:12px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;margin-bottom:16px}
body.redesign .val-ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.redesign .val-card h3{font-size:17px;margin:0 0 8px;color:var(--ink)}
body.redesign .val-card p{font-size:14px;color:var(--muted);line-height:1.6;margin:0}
@media(max-width:900px){
body.redesign .sobre-mission{grid-template-columns:1fr;gap:28px}
body.redesign .val-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
body.redesign .val-grid{grid-template-columns:1fr}
}
body.redesign .authsec{padding:56px 0 76px}
body.redesign .authwrap{max-width:452px}
body.redesign .authcard{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-md);padding:38px 36px 34px}
body.redesign .authview h1{font-size:26px;letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
body.redesign .authsub{color:var(--muted);font-size:15px;margin:0 0 24px;line-height:1.55}
body.redesign .authdiv{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--muted);font-size:12.5px}
body.redesign .authdiv:before,body.redesign .authdiv:after{content:"";height:1px;background:var(--line);flex:1}
body.redesign .authform{display:flex;flex-direction:column;gap:16px}
body.redesign .pwrap{position:relative;display:flex}
body.redesign .pwrap .pwd{flex:1;padding-right:44px}
body.redesign .pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;background:none;border:none;cursor:pointer;color:var(--muted);border-radius:8px}
body.redesign .pw-toggle:hover{color:var(--brand)}
body.redesign .pw-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
body.redesign .authrow{display:flex;justify-content:space-between;align-items:center;font-size:13.5px}
body.redesign .chk-terms{align-items:flex-start;font-size:13px;line-height:1.5}
body.redesign .chk-terms a{color:var(--brand);font-weight:600}
body.redesign .authrow a{color:var(--brand);font-weight:600}
body.redesign .cform-send[data-goto],body.redesign .authform .cform-send{margin-top:4px}
body.redesign .authfoot{text-align:center;margin:22px 0 0;font-size:14px;color:var(--muted)}
body.redesign .authfoot a{color:var(--brand);font-weight:700}
body.redesign .authback{display:inline-block;color:var(--muted);font-weight:600;font-size:13.5px;margin-bottom:16px;cursor:pointer}
body.redesign .authback:hover{color:var(--brand)}
body.redesign .authview-center{text-align:center}
body.redesign .authview-center .cform-send{margin-top:4px}
body.redesign .auth-ic{width:66px;height:66px;border-radius:50%;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;margin:0 auto 20px}
body.redesign .auth-ic svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.redesign .auth-ic.ok{background:rgba(14,159,110,.14);color:#0E9F6E}
body.redesign .auth-help{text-align:center;margin:22px 0 0;font-size:13.5px;color:var(--muted)}
body.redesign .auth-help a{color:var(--brand);font-weight:600}
body.redesign .mtrig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
body.redesign .mtrig{display:flex;flex-direction:column;gap:5px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;cursor:pointer;font:inherit;transition:.18s}
body.redesign .mtrig:hover{border-color:var(--brand-tint);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
body.redesign .mtrig b{font-size:15.5px;color:var(--ink)}
body.redesign .mtrig span{font-size:13px;color:var(--muted)}
body.redesign .mtrig.danger:hover{border-color:#E7B4A6}
body.redesign .mscrim{position:fixed;inset:0;z-index:120;background:rgba(20,12,8,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
body.redesign .mscrim[hidden]{display:none}
body.redesign .rd-modal{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 80px -20px rgba(20,12,8,.5);max-height:90vh;overflow:auto;animation:mpop .22s ease}
body.redesign .rd-modal.rd-modal-lg{max-width:520px}
body.redesign .rd-modal[hidden]{display:none}
@keyframes mpop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
body.redesign .rd-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 14px;border-bottom:1px solid var(--line)}
body.redesign .rd-modal-head h3{margin:0;font-size:18px;color:var(--ink)}
body.redesign .rd-modal-x{background:none;border:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;width:32px;height:32px;border-radius:8px}
body.redesign .rd-modal-x:hover{background:var(--surface-2);color:var(--ink)}
body.redesign .rd-modal-body{padding:20px 22px}
body.redesign .rd-modal-body.center{text-align:center;padding:32px 24px 8px}
body.redesign .rd-modal-body.center h3{margin:8px 0 10px;font-size:20px;color:var(--ink)}
body.redesign .rd-modal-body.center p{color:var(--muted);font-size:14.5px;line-height:1.62;margin:0 0 10px}
body.redesign .rd-modal-lead{color:var(--ink);font-size:15px;line-height:1.62;margin:0 0 6px}
body.redesign .rd-modal-note-alt{margin:12px 0 0;font-size:13px;color:var(--muted)}
body.redesign .fl{font-size:12.5px;font-weight:600;color:var(--ink);margin:18px 0 9px}
body.redesign .rd-modal-foot{display:flex;gap:12px;padding:16px 22px 20px;border-top:1px solid var(--line)}
body.redesign .rd-modal-foot .btn2{flex:1}
body.redesign .btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:14.5px;border-radius:12px;padding:12px 18px;cursor:pointer;border:1px solid transparent;transition:.15s}
body.redesign .btn2.solid{background:var(--brand);color:var(--btn-fg,#fff)}
body.redesign .btn2.solid:hover{background:var(--brand-2,#c94a20)}
body.redesign .btn2.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
body.redesign .btn2.ghost:hover{border-color:var(--brand);color:var(--brand)}
body.redesign .btn2.danger{background:#C0492B;color:#fff}
body.redesign .btn2.danger:hover{background:#a63d23}
body.redesign .rd-modal-badge{width:62px;height:62px;border-radius:50%;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;margin:0 auto 2px}
body.redesign .rd-modal-badge svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.redesign .rd-modal-badge.ok{background:rgba(14,159,110,.14);color:#0E9F6E}
body.redesign .rd-modal-badge.warn{background:rgba(192,73,43,.13);color:#C0492B}
body.redesign .sigpad{position:relative;height:150px;border:1.5px dashed var(--line);border-radius:14px;background:var(--surface-2);display:grid;place-items:center;margin-bottom:18px;overflow:hidden}
body.redesign .sig-line{position:absolute;left:22px;right:22px;bottom:38px;height:1px;background:var(--line)}
body.redesign .sig-hint{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
body.redesign .sig-hint svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
body.redesign .sig-clear{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--brand);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
body.redesign .pay-opts{display:flex;flex-direction:column;gap:10px}
body.redesign .pay-opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;cursor:pointer;transition:.15s}
body.redesign .pay-opt:hover{border-color:var(--brand-tint)}
body.redesign .pay-opt.selected{border-color:var(--brand);background:var(--brand-tint)}
body.redesign .pay-opt input{width:17px;height:17px;accent-color:var(--brand);flex:none}
body.redesign .pay-tx{flex:1;min-width:0}
body.redesign .pay-tx b{display:block;font-size:14.5px;color:var(--ink)}
body.redesign .pay-tx small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4}
body.redesign .pay-amt{font-weight:800;color:var(--ink);white-space:nowrap}
@media (max-width:760px){
body.redesign .mtrig-grid{grid-template-columns:1fr}
body.redesign .rd-modal-foot{flex-direction:column}
}
/* ---------- Status cards (thank-you / error pages) ---------- */
body.redesign .statuscard{text-align:center}
body.redesign .statusic{width:74px;height:74px;border-radius:999px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
body.redesign .statusic svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
body.redesign .statusic.ok{background:color-mix(in srgb,var(--ok,#0E9F6E) 14%,transparent);color:var(--ok,#0E9F6E)}
body.redesign .statusic.warn{background:color-mix(in srgb,var(--bad,#C0492B) 12%,transparent);color:var(--bad,#C0492B)}
body.redesign .statuscard h1{margin:0 0 10px}
body.redesign .statuscard .authsub{margin:0 auto 22px;max-width:42ch}
body.redesign .statuscard .cform-send{display:inline-block;text-decoration:none;width:auto;padding-left:28px;padding-right:28px}
/* ---------- Fixes: stat stacking, footer left-align, in-frame video ---------- */
body.redesign .stat .sv{display:block}
body.redesign .stat .sl{display:block}
body.redesign .cinfo{align-items:flex-start;text-align:left}
body.redesign .cinfo .flogo{justify-content:flex-start}
body.redesign .cinfo-list{margin:32px 0 0}
body.redesign .tpilot{align-self:flex-start;text-align:left}
body.redesign .vid-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;background:#000;border-radius:inherit}
body.redesign .vid-frame.is-playing::before,body.redesign .vid-frame.is-playing::after{display:none}
body.redesign .vid-frame.is-playing .vid-play,body.redesign .vid-frame.is-playing .vid-title,body.redesign .vid-frame.is-playing .vid-badge{display:none}
/* Not scoped to .foot-base: the link was moved out of it, below the copyright,
   and this descendant selector quietly stopped matching — which is why the
   underline disappeared. It only ever needed its own class. */
body.redesign .foot-lr{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
body.redesign .foot-lr:hover{color:var(--ink)}
body.redesign a.review{display:block;color:inherit;text-decoration:none;transition:.18s ease}
body.redesign a.review:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
body.redesign .stars .dim{opacity:.28}
body.redesign a.tpilot{text-decoration:none;color:inherit;cursor:pointer;transition:.15s}
body.redesign a.tpilot:hover{border-color:var(--brand)}
body.redesign .tp-box.dim{opacity:.35}
/* ---------- Cookie consent banner ---------- */
body.redesign .cconsent{position:fixed;left:18px;bottom:86px;z-index:80;max-width:360px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow-md);font-size:13.5px;line-height:1.5;color:var(--muted)}
body.redesign .cconsent a{color:var(--brand);font-weight:600}
body.redesign .cconsent p{margin:0 0 12px}
body.redesign .cconsent-actions{display:flex;gap:8px}
body.redesign .cconsent-actions .btn{padding:9px 16px;font-size:13.5px}
@media (max-width:520px){body.redesign .cconsent{left:12px;right:12px;bottom:76px;max-width:none}}
/* ---------- Fractional star rating (hero trustline + footer badge) ---------- */
body.redesign .stars-frac{position:relative;display:inline-block;letter-spacing:1px;font-size:18px;line-height:1}
body.redesign .stars-frac .base{color:color-mix(in srgb,var(--muted) 38%,transparent)}
body.redesign .stars-frac .fill{position:absolute;inset:0;width:var(--fill,73.2%);overflow:hidden;white-space:nowrap;color:var(--brand)}
body.redesign .tpilot .tp-frac{font-size:22px}
body.redesign .rev-widget{min-height:280px}
body.redesign .clead{margin:0;max-width:44ch}
body.redesign .cinfo h2{margin-top:0}
body.redesign .amt{transition:opacity .25s ease}
body.redesign .amt.is-loading{opacity:.45}
/* ---------- Video poster ---------- */
body.redesign .vid-frame .vid-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;border-radius:inherit}
body.redesign .vid-frame .vid-play,body.redesign .vid-frame .vid-title,body.redesign .vid-frame .vid-badge{z-index:2}
body.redesign .vid-frame.is-playing .vid-poster{display:none}

/* ---------- Elfsight review widgets: restyle to the project's design ----------
   Verified against the mounted widgets (shadow DOM is disabled, so page CSS
   reaches inside). Targets only Elfsight's STABLE `es-*` hooks — never the
   hashed styled-components classes, which change on every widget release. */
body.redesign .es-background-overlay,
body.redesign .es-background-base,
body.redesign .es-widget-background-container,
body.redesign .es-widget-background-wrapper,
body.redesign .es-widget-background-content,
body.redesign .es-main-container,
body.redesign .es-main-content{background:transparent!important;backdrop-filter:none!important}
body.redesign .es-main-content{color:var(--ink)!important;padding:0!important}

/* review cards */
body.redesign .es-review-background-container{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:18px!important;box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.05))!important}

/* typography */
body.redesign .es-review-content,
body.redesign .es-review-content-title,
body.redesign .es-review-content-text-container,
body.redesign .es-text-shortener,
body.redesign .es-ai-summary-content,
body.redesign .es-ai-summary-list-item-text,
body.redesign .es-review-author-name{color:var(--ink)!important}
body.redesign .es-review-info-caption,
body.redesign .es-review-info-source,
body.redesign .es-review-source-source-name{color:var(--muted)!important}
body.redesign .es-text-shortener-control,
body.redesign .es-review-info-source-link{color:var(--brand)!important}

/* rating stars in brand colour */
body.redesign .es-rating-item-filled,
body.redesign .es-rating-stars-item-filled{color:var(--brand)!important;fill:var(--brand)!important}
body.redesign .es-rating-item-unfilled,
body.redesign .es-rating-stars-item-unfilled{opacity:.3}

/* buttons + carousel controls on our surfaces */
body.redesign .es-load-more-button,
body.redesign .es-header-write-review-button{background:var(--brand)!important;color:var(--btn-fg,#fff)!important;border:0!important;border-radius:999px!important;font-weight:700!important}
body.redesign .es-carousel-arrow-control,
body.redesign .es-carousel-arrow-control-icon{background:var(--surface-2)!important;color:var(--ink)!important;fill:var(--ink)!important}
body.redesign .es-carousel-arrow-control{border:1px solid var(--line)!important;border-radius:999px!important}

/* ---------- Review popup (opens from the review widgets) ----------
   Elfsight paints this rgb(29,29,29) whatever the theme, so it read as a dark
   slab on the light site. Same rule as the block above: only the stable es-
   hooks, never the sibling styled-components hash (.olhZZ), which changes on
   every widget release. Hooks that don't exist in a given release are simply
   inert. */
body.redesign .es-reviews-popup-content-container,
body.redesign .es-reviews-popup-container,
body.redesign .es-reviews-popup-content{
  background:var(--surface)!important;color:var(--ink)!important;border-radius:20px!important}
body.redesign .es-reviews-popup-content-container{border:1px solid var(--line)!important}
/* the scrim behind it must stay a scrim, not become a surface */
body.redesign .es-reviews-popup-overlay,
body.redesign .es-reviews-popup-background{
  background:rgba(20,12,8,.5)!important;backdrop-filter:blur(3px)!important}
body.redesign .es-reviews-popup-close,
body.redesign .es-reviews-popup-content-header,
body.redesign .es-reviews-popup-title{color:var(--ink)!important}

/* the widget's own padded "card" wrapper — we supply the section spacing */
body.redesign .es-widget-background-wrapper{padding:0!important}
body.redesign .es-header-container{background:transparent!important;border-radius:0!important;padding:0 0 18px!important}

/* ---------- Footer Trustpilot badge: left-aligned content ---------- */
body.redesign .tpilot{align-items:flex-start;text-align:left}

/* ---------- Smooth in-page navigation ---------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.redesign section[id]{scroll-margin-top:96px}

/* tighter top margin for the "O que compramos" band */
body.redesign .band-tight{padding-top:34px}
/* ---------- Auth card: wider, tidy terms row ---------- */
body.redesign .authwrap{max-width:560px}
body.redesign .authcard{padding:42px 44px 38px}
body.redesign .authrow-end{justify-content:flex-end}
body.redesign .chk-terms{display:flex;align-items:flex-start;gap:10px;margin-top:4px}
body.redesign .chk-terms input{flex:0 0 auto;margin-top:2px}
body.redesign .chk-terms > span{flex:1 1 auto;min-width:0}
@media(max-width:560px){body.redesign .authcard{padding:32px 22px 28px}}
/* ---------- Sell modal: delivery details sections ---------- */
body.redesign #ask-imei .sell-sec-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:18px 0 10px}
body.redesign #ask-imei .sell-sec-title:first-child{margin-top:0}
body.redesign #ask-imei .col-form-label{font-size:13.5px;font-weight:600;color:var(--ink);padding-bottom:6px}
body.redesign #ask-imei .form-group.row{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 4px}
body.redesign #ask-imei .form-group.row > [class^="col-sm-"]{flex:1 1 0;min-width:150px;padding:0}
body.redesign #ask-imei .form-group.row > .col-sm-12{flex:1 1 100%}
body.redesign #ask-imei .text-danger{color:#C0492B;font-size:12.5px;display:block;margin-top:4px}
/* ---------- PDP sell flow: progressive numbered steps ---------- */
body.redesign .pdp-head{margin:0 0 22px}
body.redesign .pdp-model{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
body.redesign .pdp-badge{display:inline-flex;align-items:center;gap:7px;background:var(--brand-tint);color:var(--brand);font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px}
body.redesign .qsteps{display:flex;flex-direction:column;gap:16px}
body.redesign .qsteps .qsec{opacity:0;transform:translateY(10px);transition:opacity .32s ease,transform .32s ease}
body.redesign .qsteps .qsec.in{opacity:1;transform:none}
body.redesign .qsteps .qsec.answered>.h .n{background:var(--ok,#43C08D)}
/* legacy option buttons keep breathing room too */
body.redesign .btn-option{margin-bottom:10px}
body.redesign .parent-btn{margin-bottom:10px}
@media (prefers-reduced-motion:reduce){
  body.redesign .qsteps .qsec{transition:none;opacity:1;transform:none}
}
/* ---------- "Resumo do equipamento" card ---------- */
body.redesign .rsum{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-md)}
body.redesign .rsum-head{display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
body.redesign .rsum-img{width:74px;height:74px;object-fit:contain;background:var(--photo-bg);border:1px solid var(--photo-line);border-radius:16px;padding:8px;flex:none}
body.redesign .rsum-eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
body.redesign .rsum-model{font-size:21px;margin:5px 0 0;color:var(--ink);letter-spacing:-.01em}
body.redesign .rsum-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
body.redesign .rsum-list li{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--ink)}
body.redesign .rsum-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none}
body.redesign .rsum-emoji{font-size:17px;line-height:1}
body.redesign .rsum-price{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:22px;padding:16px 18px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line)}
body.redesign .rsum-price-lab{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
body.redesign .rsum-price-val{font-size:clamp(28px,4vw,38px);font-weight:800;color:var(--brand);letter-spacing:-.02em}
body.redesign .rsum-fine{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
body.redesign .rsum-go{width:100%;justify-content:center;margin-top:18px}
body.redesign .rsum-redo{display:block;width:100%;margin-top:10px;background:none;border:0;color:var(--muted);font:inherit;font-size:13.5px;cursor:pointer;padding:8px}
body.redesign .rsum-redo:hover{color:var(--brand)}

/* ---------- PDP: no wrapper box around the steps/summary ---------- */
body.redesign #product-details,
body.redesign .product-details.options-box{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
body.redesign #resume-form{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}

/* ---------- account: form card must not nest inside another card ---------- */
body.redesign .profile-page fieldset:not(.acard){border:0!important;padding:0!important;margin:0!important;background:transparent!important}
body.redesign .profile-page .main-content>.container>.row{margin:0}
body.redesign .profile-page .alert{border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);padding:12px 14px}

/* ---------- order list: real product photo in the icon slot ---------- */
body.redesign .order-dev .order-ic{overflow:hidden;background:var(--photo-bg);border:1px solid var(--photo-line);display:flex;align-items:center;justify-content:center}
body.redesign .order-dev .order-ic>svg{display:block;margin:auto}
body.redesign .order-ic img{width:100%;height:100%;object-fit:contain;padding:6px;display:block}

/* Product photos never sit on flat white — see --photo-bg. */
body.redesign .thumb-image img,body.redesign .odet-img img{background:var(--photo-bg);border:1px solid var(--photo-line);border-radius:20px;padding:16px}

/* PDP breadcrumbs */
body.redesign .crumbs{margin:0 0 6px}
body.redesign .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
body.redesign .crumbs li{display:flex;align-items:center;font-size:13.5px;line-height:1.4;min-width:0}
body.redesign .crumbs li+li::before{content:"";width:6px;height:6px;margin:0 10px;flex:none;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(-45deg);opacity:.7}
body.redesign .crumbs a{color:var(--muted);font-weight:600;border-radius:7px;padding:4px 7px;margin:0 -3px;transition:.15s}
body.redesign .crumbs a:hover{color:var(--brand);background:var(--brand-tint)}
body.redesign .crumbs a:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
body.redesign .crumbs [aria-current="page"]{color:var(--ink);font-weight:700;padding:4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:480px){
  /* keep the trail on one line — the current page is the <h1> right below it */
  body.redesign .crumbs li:last-child{display:none}
}

/* Spinner used by the estimate + order pages. The @keyframes only existed in a
   dead legacy view, so every "animation: spin" on the redesign was inert. */
@keyframes smp-spin{to{transform:rotate(360deg)}}
body.redesign .spinner,body.redesign #loading-image{
  width:76px;height:76px;border-radius:50%;
  border:5px solid color-mix(in srgb,var(--brand) 22%,transparent);
  border-top-color:var(--brand);
  animation:smp-spin .8s linear infinite}
body.redesign #loading-image{position:fixed;left:50%;top:50%;margin:-38px 0 0 -38px;z-index:999}
@media (prefers-reduced-motion:reduce){
  body.redesign .spinner,body.redesign #loading-image{animation-duration:2.4s}
}

/* ---------- "Como funciona" on small phones ----------
   .how .steps is set to two columns at <=900px (in three duplicate
   max-width:900px blocks; the last wins). A .hstep can't go below its
   min-content — an 84px bubble plus 52px of padding — so two across
   overflowed a 320px viewport by 26px, measured. One column below 560px, and
   min-width:0 so a long word can't push a track wider than its share. */
@media (max-width:560px){
  body.redesign .how .steps{grid-template-columns:1fr;gap:14px;max-width:420px}
  body.redesign .hstep{min-width:0;padding:26px 20px 24px}
  body.redesign .hstep p{max-width:none}
}

/* ==========================================================================
   Article body (.prose) — the full element set a CMS article can contain
   --------------------------------------------------------------------------
   Before this block .prose styled six elements (h2 h3 p ul li a). Everything
   else — tables, images, embeds, code, rules — rendered with browser defaults
   on a themed page, and the editor's inline colours fought the theme outright
   (a #0b1f33 header row was invisible in light mode, an #e6f7f3 callout was
   invisible in dark mode). Every value below is a token, so both themes follow
   the same rules. See app/Helpers/article_helper.php and docs/blog-contract.md.
   ========================================================================== */

/* headings + anchor offset for the 74px sticky header */
body.redesign .prose h2,body.redesign .prose h3,body.redesign .prose h4{scroll-margin-top:96px}
body.redesign .prose h4{font-size:16px;margin:22px 0 8px;color:var(--ink);font-weight:800;letter-spacing:-.01em;line-height:1.35}
/* ---------- stored admin HTML ----------
   Everything inside .prose is authored in the isystem editor, which is a
   Bootstrap-era tool: it emits <h6> for a small section heading and utility
   classes (.font-weight-bold, .my-4, .text-white) from a stylesheet this site
   no longer loads. Only h2/h3/h4 were styled, so /empresas rendered its six
   subheadings at the UA default for h6 — 10.72px, MEASURED, against 15.5px body
   copy, with 25px of margin above and below each. Headings smaller than the
   text they introduce is the whole "font styles are a mess" report.

   So: finish the scale, and give the surviving Bootstrap utilities a definition
   instead of letting them silently do nothing. This is deliberately defensive —
   it covers blog posts written the same way, not just this one page. */
body.redesign .prose h5,body.redesign .prose h6{
  font-size:15.5px;margin:24px 0 8px;color:var(--ink);font-weight:800;letter-spacing:-.005em;line-height:1.4}
body.redesign .prose .font-weight-bold,body.redesign .prose .fw-bold{font-weight:800}
body.redesign .prose .text-center{text-align:center}
body.redesign .prose .my-3,body.redesign .prose .my-4,body.redesign .prose .my-5{margin-top:22px;margin-bottom:22px}
body.redesign .prose .mt-3,body.redesign .prose .mt-4,body.redesign .prose .mt-5{margin-top:22px}
body.redesign .prose .mb-3,body.redesign .prose .mb-4,body.redesign .prose .mb-5{margin-bottom:22px}
/* .feature-box was a card in the old admin theme and became a bare div here. */
body.redesign .prose .feature-box{
  border:1px solid var(--line);border-radius:14px;background:var(--surface-2);
  padding:16px 18px;margin:14px 0}
body.redesign .prose .feature-box>:first-child{margin-top:0}
body.redesign .prose .feature-box>:last-child{margin-bottom:0}
/* Legacy dark-theme colours baked into stored HTML, e.g. class="text-white". */
body.redesign .prose .text-white,body.redesign .prose [class*="text-white"],
body.redesign .prose [style*="color:#fff"],body.redesign .prose [style*="color: #fff"],
body.redesign .prose [style*="color:white"],body.redesign .prose [style*="color: white"]{color:var(--ink)!important}
/* The long-form pages (legal, ToS, privacy, empresas) each carried an identical
   copy of this in a page <style> block. One definition, four fewer copies. */
body.redesign .legal-content{max-width:820px;margin-left:auto;margin-right:auto}
/* Legal/company pages want brand-coloured links; .prose alone leaves article
   links ink-coloured with a tinted underline, which is right for the blog. */
body.redesign .legal-content a{color:var(--brand);font-weight:600}

/* text */
body.redesign .prose{overflow-wrap:break-word}
body.redesign .prose>*{max-width:100%}
body.redesign .prose strong,body.redesign .prose b{color:var(--ink-strong);font-weight:800}
body.redesign .prose em,body.redesign .prose i{font-style:italic}
body.redesign .prose small{font-size:87.5%;color:var(--muted)}
body.redesign .prose sup,body.redesign .prose sub{font-size:75%;line-height:0}
body.redesign .prose mark{background:var(--brand-tint);color:var(--ink-strong);padding:.05em .25em;border-radius:4px}
body.redesign .prose del{color:var(--muted)}
body.redesign .prose abbr[title]{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
body.redesign .prose a{overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--brand) 38%,transparent)}
body.redesign .prose a:hover{color:var(--brand-2);text-decoration-color:currentColor}
body.redesign .prose a:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 42%,transparent);outline-offset:2px;border-radius:4px}

/* lists */
body.redesign .prose ol{margin:0 0 16px;padding-left:22px;line-height:1.7}
body.redesign .prose ol li,body.redesign .prose ul li{margin-bottom:7px;color:var(--ink)}
body.redesign .prose li::marker{color:var(--brand)}
body.redesign .prose li>ul,body.redesign .prose li>ol{margin:7px 0 0}
body.redesign .prose dl{margin:0 0 16px}
body.redesign .prose dt{font-weight:800;color:var(--ink-strong);margin-top:12px}
body.redesign .prose dd{margin:4px 0 0;padding-left:16px;color:var(--ink)}

/* quote + rule */
body.redesign .prose blockquote{margin:24px 0;padding:6px 0 6px 22px;border-left:3px solid var(--brand);font-size:19px;font-style:italic;color:var(--ink)}
body.redesign .prose blockquote>:last-child{margin-bottom:0}
body.redesign .prose hr{border:0;height:1px;background:var(--line);margin:34px 0}

/* ---- tables ----
   The renderer wraps every table in .prose-table (a wrapper cannot be produced
   in CSS, and doing it in JS would leave no-JS readers with a broken layout).
   The wrapper is what scrolls, so a 640px table cannot push the page sideways —
   the site's hard rule is that <body> never scrolls horizontally. */
body.redesign .prose .prose-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 22px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
body.redesign .prose .prose-table:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 42%,transparent);outline-offset:-3px}
body.redesign .prose table{width:100%;border-collapse:collapse;background:transparent;color:var(--ink);font-size:14.5px;line-height:1.55}
body.redesign .prose caption{caption-side:top;padding:12px 16px 0;font-size:13px;color:var(--muted);text-align:left}
body.redesign .prose th,body.redesign .prose td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
body.redesign .prose tr:last-child>td,body.redesign .prose tr:last-child>th{border-bottom:0}
body.redesign .prose td>p,body.redesign .prose th>p{margin:0;font-size:inherit;line-height:inherit}
body.redesign .prose td>p+p,body.redesign .prose th>p+p{margin-top:8px}
/* header row: a brand tint that reads in both themes, whatever the editor set */
body.redesign .prose th,body.redesign .prose thead td,body.redesign .prose thead th,
body.redesign .prose th[style],body.redesign .prose thead td[style],body.redesign .prose thead th[style]{
  background:color-mix(in srgb,var(--brand) 16%,var(--surface))!important;color:var(--ink-strong)!important;
  font-weight:800;border-bottom:2px solid color-mix(in srgb,var(--brand) 34%,var(--line))!important}
/* A row with a single cell is a callout, not tabular data: let it wrap to the
   column instead of forcing a horizontal scroll to read one paragraph. */
body.redesign .prose table tr>td:only-child,body.redesign .prose table tr>th:only-child{width:auto!important;min-width:0}
/* Auto table layout would rather crush three columns into 278px of phone than
   overflow — measured, and unreadable. A real data table gets a floor width and
   scrolls inside its wrapper; a single-column callout never matches :has() and
   keeps wrapping. Browsers without :has() drop the rule and behave as before. */
body.redesign .prose table:has(td+td),body.redesign .prose table:has(th+th){min-width:520px}
body.redesign .prose table:has(td+td+td),body.redesign .prose table:has(th+th+th){min-width:640px}

/* ---- media ---- */
body.redesign .prose img{display:block;max-width:100%;height:auto;margin:22px auto;border-radius:14px}
/* Editor-set pixel dimensions distort the image once max-width kicks in; the
   intrinsic size, capped at the column, is both sharper and always in ratio. */
body.redesign .prose img[style]{width:auto!important;height:auto!important;max-width:100%!important}
body.redesign .prose figure{margin:26px 0}
body.redesign .prose figure img{margin:0 auto}
body.redesign .prose figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--muted);text-align:center}
body.redesign .prose iframe,body.redesign .prose video,body.redesign .prose embed,body.redesign .prose object{
  display:block;width:100%;max-width:100%;aspect-ratio:16/9;height:auto;margin:24px 0;border:0;border-radius:14px;background:var(--surface-2)}
body.redesign .prose iframe[style],body.redesign .prose video[style]{width:100%!important;height:auto!important;max-width:100%!important}

/* ---- code ---- */
body.redesign .prose code,body.redesign .prose kbd,body.redesign .prose samp{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:.12em .38em;color:var(--ink-strong)}
body.redesign .prose pre{margin:22px 0;padding:16px 18px;max-width:100%;overflow-x:auto;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;color:var(--ink);font-size:13.5px;line-height:1.6}
body.redesign .prose pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit}

/* ---- Editor inline-style neutralisers ----
   The contract says the editor must stop emitting colours; these keep the
   ~30 attributes already saved in published articles from breaking dark mode.
   Deliberately narrow: they only match elements that actually carry a style
   attribute, and they only reset colour/background/border-colour — structural
   inline styles (table column widths, alignment) are left completely intact,
   which is why the multi-column table below still keeps its column proportions
   and only its unreadable navy/mint fills are replaced. */
body.redesign .prose [style]{color:var(--ink)!important}
body.redesign .prose a[style]{color:var(--brand)!important}
body.redesign .prose [style*="background"]{background-image:none!important;background-color:color-mix(in srgb,var(--brand) 7%,var(--surface))!important}
body.redesign .prose [style*="border"]{border-color:var(--line)!important}

/* ---- Q&A blocks (.qa / .qa-q / .qa-a) ----
   PROGRESSIVE ENHANCEMENT, per the contract: with no JavaScript the answer is
   plain visible content. The collapse only applies once redesign.js has set
   [data-js] on the block, so a crawler or a no-JS reader still gets the text. */
body.redesign .prose .qa{margin:0 0 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
body.redesign .prose .qa-q{margin:0;padding:16px 48px 16px 18px;font-size:15.5px;font-weight:700;line-height:1.45;color:var(--ink);position:relative}
body.redesign .prose .qa[data-js] .qa-q{cursor:pointer;user-select:none}
body.redesign .prose .qa[data-js] .qa-q::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;margin-top:-7px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg);transition:transform .22s ease}
body.redesign .prose .qa[data-js].is-open .qa-q::after{transform:rotate(-135deg);margin-top:-2px}
body.redesign .prose .qa-q:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 42%,transparent);outline-offset:-3px;border-radius:13px}
body.redesign .prose .qa-a{padding:0 18px}
body.redesign .prose .qa-a>:last-child{margin-bottom:16px}
body.redesign .prose .qa-a .prose-table{margin-bottom:16px}
/* grid-template-rows animates 0fr→1fr with no wrapper element and no measuring;
   visibility takes the collapsed answer out of the accessibility tree too. */
body.redesign .prose .qa[data-js]{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .26s ease}
body.redesign .prose .qa[data-js].is-open{grid-template-rows:auto 1fr}
body.redesign .prose .qa[data-js] .qa-a{overflow:hidden;visibility:hidden;transition:visibility .26s}
body.redesign .prose .qa[data-js].is-open .qa-a{visibility:visible}
@media (prefers-reduced-motion:reduce){
  body.redesign .prose .qa[data-js],body.redesign .prose .qa[data-js] .qa-a,body.redesign .prose .qa[data-js] .qa-q::after{transition:none}
}

/* ---- .qa-spoiler: the answer COLLAPSES, and an eye marks it as a reveal ----
   It was a blur: the answer stayed in the layout, obscured by filter:blur().
   That reads as a rendering fault rather than a deliberate concealment, the
   text is still legible at large sizes or with the filter disabled, and it
   costs a full-height block of blurred paragraph before anything is read.
   A collapse is what a spoiler actually is.

   So this rule set no longer overrides the geometry at all — the block simply
   inherits the .qa[data-js] accordion above (auto 0fr -> auto 1fr, the answer
   overflow:hidden + visibility:hidden while closed). One mechanism, one
   transition, and redesign.js needs no knowledge of the difference: it already
   drives both through [data-js]/.is-open/aria-expanded.

   Structured data is unaffected: smp_article_faq_pairs() reads the answer out
   of the server-rendered HTML, so the FAQPage graph carries the same text the
   page ships, exactly as it already does for every non-spoiler .qa block.

   With no JavaScript there is no [data-js], neither this nor the accordion
   applies, and the answer is simply visible — the blog contract, unchanged.

   Only the affordance differs: an eye rather than a chevron, because this
   reveals a withheld answer rather than expanding a section. */
body.redesign .prose .qa-spoiler[data-js] .qa-q::after{
  content:"";width:17px;height:11px;margin-top:-6px;border:0;transform:none;background:var(--brand);
  transition:opacity .22s ease;
  -webkit-mask:var(--qa-eye) center/contain no-repeat;mask:var(--qa-eye) center/contain no-repeat}
body.redesign .prose .qa-spoiler[data-js].is-open .qa-q::after{transform:none;margin-top:-6px;opacity:.45}
body.redesign .prose .qa-spoiler{--qa-eye:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M12 0C5.5 0 1.3 6.2.4 7.4a1 1 0 000 1.2C1.3 9.8 5.5 16 12 16s10.7-6.2 11.6-7.4a1 1 0 000-1.2C22.7 6.2 18.5 0 12 0zm0 13a5 5 0 110-10 5 5 0 010 10zm0-8a3 3 0 100 6 3 3 0 000-6z'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){
  /* Only the eye's own fade needs killing here — the collapse transition is the
     accordion's and the .qa[data-js] rule above already covers it. */
  body.redesign .prose .qa-spoiler[data-js] .qa-q::after{transition:none}
}

/* ---- Quick navigation (table of contents) ---- */
/* ---- Article shell: body column + sticky right rail ----
   Three areas so one markup serves both layouts (see blog/article.php).
   minmax(0,…) on the body track: a wide table or a long URL in the prose would
   otherwise widen the track and push the rail off-screen. */
body.redesign .art-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:1000px){
  body.redesign .article-wrap{max-width:1090px}
  body.redesign .art-cols{grid-template-columns:minmax(0,720px) 268px;column-gap:56px;justify-content:center}
  body.redesign .art-head{grid-column:1;grid-row:1}
  body.redesign .art-main{grid-column:1;grid-row:2}
  /* Spans both rows so the rail can start level with the title and stay with
     the reader all the way down. align-self:start is what makes position:sticky
     work at all here — a stretched grid item is already as tall as its row and
     has nothing to stick within. */
  body.redesign .art-rail{grid-column:2;grid-row:1 / span 2;align-self:start;
    position:sticky;top:calc(var(--hdr-h,64px) + 22px)}
  /* The LIST scrolls, not the rail. Capping the rail meant a long table of
     contents pushed the share buttons out of the sticky viewport and you had to
     scroll the rail to reach them — so on exactly the articles people most want
     to share, sharing was hidden. Bounding the <ol> instead keeps Partilhar
     pinned in view at every article length.
     max() rather than a bare calc: on a short window the reserve would go
     negative and collapse the list to nothing. */
  body.redesign .art-toc ol{
    max-height:max(160px, calc(100vh - var(--hdr-h,64px) - 290px));
    overflow-y:auto;overscroll-behavior:contain;
    /* room for the scrollbar so the last entry's text is not clipped */
    padding-right:4px}
}

/* ---- Share ---- */
body.redesign .art-share{margin:22px 0 0}
body.redesign .art-share-h{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
body.redesign .art-share-row{display:flex;gap:10px;flex-wrap:wrap}
body.redesign .art-share-btn{display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);
  cursor:pointer;padding:0;transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease}
body.redesign .art-share-btn svg{width:17px;height:17px;fill:currentColor}
/* The copy icon is drawn with strokes, not a filled path. */
body.redesign .art-share-btn svg[fill="none"]{fill:none;stroke:currentColor}
body.redesign .art-share-btn:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-tint);transform:translateY(-1px)}
body.redesign .art-share-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 42%,transparent);outline-offset:2px}
body.redesign .art-share-note{display:block;min-height:16px;margin-top:9px;font-size:12.5px;color:var(--brand)}
@media (prefers-reduced-motion:reduce){body.redesign .art-share-btn{transition:none}}

body.redesign .art-toc{margin:0 0 30px;padding:16px 20px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
body.redesign .art-toc-h{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
body.redesign .art-toc ol{list-style:none;margin:0;padding:0}
body.redesign .art-toc li{margin:0}
/* --muted alone lands at 3.94:1 on --surface in the light theme (measured);
   mixed 80/20 toward --ink it still reads as secondary but clears AA at
   5.17:1 light / 7.70:1 dark. Still tokens, so both themes follow the palette. */
body.redesign .art-toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--line);
  color:color-mix(in srgb,var(--muted) 80%,var(--ink));font-size:14.5px;font-weight:600;line-height:1.45;transition:color .15s,border-color .15s}
body.redesign .art-toc a:hover{color:var(--brand);border-left-color:var(--brand)}
body.redesign .art-toc a.is-current{color:var(--ink-strong);border-left-color:var(--brand)}
body.redesign .art-toc a:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 42%,transparent);outline-offset:-2px;border-radius:6px}
body.redesign .art-toc .lvl-3 a{padding-left:28px;font-size:13.5px;font-weight:500}
/* The <summary> is a plain header on desktop: no marker, no chevron, no
   current-section label — the whole list is visible, so none of it earns space. */
body.redesign .art-toc-sum{list-style:none;cursor:default}
body.redesign .art-toc-sum::-webkit-details-marker{display:none}
body.redesign .art-toc-now,body.redesign .art-toc-chev{display:none}

/* ---------- phone: the TOC becomes a sticky assistant ----------
   The pattern long-form sites converge on (MDN, Stripe's docs, Smashing): a
   one-line bar pinned under the header that names the section you are in, and
   opens into the full list on tap. It beats a static block at the top of the
   article, which scrolls away and is then unreachable without going back up.
   `top` is driven by --hdr-h, measured from the real header, because the site
   header is itself position:sticky and a hard-coded offset would overlap it. */
@media (max-width:700px){
  /* +10px rather than -1px, plus a margin above: pinned flush against the
     fixed header the bar read as part of the navigation rather than as part of
     the article. The gap keeps the two visually separate while scrolling. */
  body.redesign .art-toc{
    position:sticky;top:calc(var(--hdr-h,64px) + 10px);z-index:40;
    margin:16px 0 22px;padding:0;border-radius:14px;
    box-shadow:0 10px 24px -18px rgba(35,25,19,.5)}
  body.redesign .art-toc-sum{
    display:flex;align-items:center;gap:10px;cursor:pointer;
    padding:12px 14px;border-radius:14px;background:var(--surface);
    -webkit-tap-highlight-color:transparent}
  body.redesign .art-toc-h{margin:0;flex:none}
  /* min-width:0 so a long section title truncates instead of pushing the
     chevron off the bar — the same failure the account panel had. */
  body.redesign .art-toc-now{
    display:block;min-width:0;flex:1;text-align:right;
    font-size:13px;font-weight:600;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.redesign .art-toc-chev{
    display:block;width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
  body.redesign .art-toc[open] .art-toc-chev{transform:rotate(180deg)}
  body.redesign .art-toc[open] .art-toc-sum{border-radius:14px 14px 0 0;border-bottom:1px solid var(--line)}
  body.redesign .art-toc ol{
    max-height:min(52vh,420px);overflow-y:auto;overscroll-behavior:contain;
    padding:6px 14px 12px;background:var(--surface);border-radius:0 0 14px 14px}
  body.redesign .art-toc a{padding:9px 0 9px 14px}
  body.redesign .art-toc-sum:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 42%,transparent);outline-offset:-2px}
}
@media (prefers-reduced-motion:reduce){
  body.redesign .art-toc-chev{transition:none}
}
body.redesign .article-meta-line .art-read{white-space:nowrap}

/* ---- Sources ---- */
body.redesign .art-sources{margin:40px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
body.redesign .art-sources-h{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
body.redesign .art-sources ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
body.redesign .art-sources li{color:var(--muted);font-size:14px;line-height:1.5}
body.redesign .art-sources li::marker{color:var(--muted);font-variant-numeric:tabular-nums}
body.redesign .art-sources a{color:var(--muted);font-weight:600;overflow-wrap:anywhere;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
body.redesign .art-sources a:hover{color:var(--brand);text-decoration-color:currentColor}
body.redesign .art-sources a:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 42%,transparent);outline-offset:2px;border-radius:4px}
/* Belt and braces with the sanitiser, which already unwraps emphasis: if any
   ever reaches this block the Fontes list still renders at one weight, so no
   article's sources can end up louder than another's. */
body.redesign .art-sources strong,body.redesign .art-sources b{font-weight:inherit}
body.redesign .art-sources em,body.redesign .art-sources i{font-style:normal}
body.redesign .art-sources [style]{font:inherit!important;color:inherit!important;background:none!important}

@media (max-width:560px){
  body.redesign .prose th,body.redesign .prose td{padding:10px 12px}
  body.redesign .prose table{font-size:14px}
  /* .art-toc padding used to be trimmed here. It isn't a padded block on a
     phone any more — it's the sticky bar above, whose padding lives on the
     summary and the list. This rule came later in the file and silently won. */
}

/* ---------- mobile polish: account menu, footer, blog cards ----------
   Cosmetics only. Everything that keeps the account panel from breaking now
   lives in the base rules, so a viewport this block does not match (tablet,
   split view, desktop-site mode, page zoom) cannot get the fragile version. */
@media (max-width:560px){
  body.redesign .acctdd-head{gap:10px;padding:8px 8px 12px}
  body.redesign .acctdd-head .av{width:34px;height:34px;font-size:14px}

  /* Footer: two columns reads better than one long ribbon of links. */
  body.redesign .foot-nav{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    justify-content:stretch;gap:12px 18px;text-align:center;
    margin-top:40px;padding-top:26px}
  body.redesign .foot-nav a{font-size:13.5px}

  /* Blog cards need breathing room from the screen edge. */
  body.redesign #artigos .post-grid{padding:0 4px}
  body.redesign .post-cardmedia{height:170px}
}