/* Tagzinho page styles (docs/DESIGN.md). Colours, fonts, radii and spacing come from tokens.css only. */
*{box-sizing:border-box}
html{scrollbar-color:var(--rule) var(--ground)}
body{margin:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:var(--ground);color:var(--ink);font:17px/1.5 var(--text);caret-color:var(--sticker);-webkit-text-size-adjust:100%}
::selection{background:var(--sticker);color:var(--sticker-ink)}
.num{font-variant-numeric:tabular-nums lining-nums}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
a{color:inherit;text-underline-offset:4px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:var(--s4)}.skip:focus{left:var(--s5);background:var(--panel);padding:var(--s3) var(--s4);border-radius:var(--radius)}

.top{max-width:var(--max);margin:0 auto;padding:var(--s5) var(--s7);display:flex;align-items:center;justify-content:space-between}
.mark{font:800 30px/1 var(--display);text-transform:uppercase;text-decoration:none}
.mark span{background:var(--sticker);color:var(--sticker-ink);padding:2px var(--s3) 0;border-radius:var(--radius-roll);display:inline-block}
.top nav{display:flex;gap:var(--s6);align-items:center;color:var(--ink-2)}
.top .lang{font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--sticker)}

.calc{max-width:var(--max);margin:0 auto;padding:var(--s1) var(--s7) var(--s9);display:grid;grid-template-columns:7fr 5fr;gap:var(--s8);align-items:start}
h1{font:800 clamp(40px,5vw,64px)/.95 var(--display);text-transform:uppercase;margin:10px 0 var(--s4);max-width:14ch}
.lede{color:var(--ink-2);max-width:56ch;margin:0 0 var(--s2)}
.promise{color:var(--ink-2);font-size:15px;margin:0 0 26px}
.tray{background:var(--panel);border-radius:var(--radius);padding:var(--s2) var(--s6) var(--s6);margin-bottom:var(--s5)}
.tray h2{font:800 26px/1 var(--display);text-transform:uppercase;margin:var(--s5) 0 var(--s4)}
.row2{display:grid;grid-template-columns:2fr 1fr;gap:var(--s4);margin-top:var(--s5)}
.row3{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:var(--s4)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
label,.lbl{display:block;font-weight:700;font-size:15px;margin:0 0 var(--s2)}
.field{display:flex;align-items:center;min-height:46px;border:2px solid var(--rule);border-radius:var(--radius);background:var(--ground);padding:0 var(--s4)}
.field:focus-within{border-color:var(--sticker);outline:3px solid var(--focus);outline-offset:2px}
.field.invalid{border-color:var(--bad)}
.field i{font-style:normal;color:var(--ink-2);margin:0 var(--s2);white-space:nowrap}
.field input,.field select{all:unset;width:100%;min-width:0;font:700 17px var(--text);color:var(--ink);padding:10px 0}
.field select{cursor:pointer;background-color:var(--ground);color:var(--ink)}
.hint{color:var(--ink-2);font-size:14px;margin:var(--s2) 0 0}
.err{color:var(--bad);font-size:14px;font-weight:700;margin:var(--s2) 0 0}

ul.items{list-style:none;margin:0;padding:0}
ul.items li{display:grid;grid-template-columns:1.3fr .8fr .55fr .8fr .55fr .75fr auto;gap:var(--s3);align-items:end;padding:var(--s3) 0 var(--s4);border-bottom:1px dashed var(--rule)}
ul.items li .field{min-height:40px;padding:0 var(--s3)}
ul.items li .field input,ul.items li .field select{font-size:15px;padding:7px 0}
ul.items li label{font-size:13px;color:var(--ink-2);margin-bottom:2px}
ul.items .cost{font-weight:700;text-align:right;padding-bottom:9px;white-space:nowrap}
ul.items .rm{all:unset;cursor:pointer;color:var(--ink-2);font-size:14px;padding:9px 0 9px var(--s2);text-decoration:underline;text-underline-offset:3px}
ul.items .rm:hover{color:var(--bad)}
ul.items li .err{grid-column:1/-1;margin-top:0}
.total{display:flex;justify-content:space-between;align-items:baseline;padding-top:var(--s4);font-weight:700}
.total b{font:800 26px var(--display)}.total small{color:var(--ink-2);font-weight:400}
.add{margin-top:var(--s4);width:100%;min-height:44px;border:2px dashed var(--rule);border-radius:var(--radius);background:none;color:var(--ink);font:700 16px var(--text);cursor:pointer}
.add:hover{border-color:var(--sticker)}
.pack{margin-top:var(--s5);max-width:340px}

.chips{display:flex;flex-wrap:wrap;gap:var(--s3)}
.chip{min-height:44px;padding:0 var(--s5);border:2px solid var(--rule);border-radius:var(--radius);background:transparent;color:var(--ink);font:700 15px var(--text);cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.fees{grid-template-columns:1fr 1fr;max-width:460px}

.side{position:sticky;top:18px}
.sticker{position:relative;background:var(--sticker);color:var(--sticker-ink);border-radius:var(--radius);padding:var(--s6) 26px var(--s7);box-shadow:var(--lift)}
.slbl{font-weight:700;color:var(--sticker-ink-2)}
.price{font:800 108px/.9 var(--display);margin:var(--s3) 0 var(--s2);overflow-wrap:anywhere}
.price small{font-size:.48em;margin-right:6px}
.price.empty{color:var(--sticker-ink-2)}
.ssub{color:var(--sticker-ink-2);font-weight:700;margin:0 0 18px}
@media(prefers-reduced-motion:no-preference){.price.print{animation:print .6s var(--ease-print) both}@keyframes print{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}}
.save{display:block;width:100%;min-height:50px;border:0;border-radius:var(--radius);background:var(--sticker-ink);color:var(--sticker);font:800 22px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;cursor:pointer}
.save:active{transform:translateY(1px)}
.save:disabled{opacity:.55;cursor:not-allowed}
.roll{margin:18px 0 0;padding:0;list-style:none;display:flex;min-height:52px}
.roll li{position:relative;min-width:6px;padding:10px var(--s3) var(--s3);border-radius:var(--radius-roll);font-size:13px;line-height:1.2;overflow:hidden}
.roll li+li{margin-left:3px}
.roll li.own{background:var(--own);color:var(--sticker-ink)}
.roll li.cut{background:var(--cut);color:var(--sticker-ink)}
.roll li.keep{background:var(--keep);color:var(--ground)}
.roll b{display:block;font:800 18px var(--display)}
.roll .tiny b,.roll .tiny span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.legend{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s5);font-size:15px}
.legend li{display:flex;justify-content:space-between;gap:var(--s3);border-bottom:1px dashed var(--rule);padding:var(--s1) 0}
.legend .k{font-weight:700}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s5)}
.pair>div{background:var(--panel);border-radius:var(--radius);padding:var(--s4) 14px;font-size:15px}
.pair b{display:block;font:800 26px var(--display)}
.bad{color:var(--bad);font-weight:700;font-size:14px}
.gun{margin-top:var(--s5);background:var(--panel);border-radius:var(--radius);padding:var(--s4) 14px}
.gun input{width:100%;accent-color:var(--sticker)}
.gun p{margin:var(--s1) 0 0;color:var(--ink-2);font-size:14px}
.ghost{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;min-height:44px;padding:0 var(--s5);border:2px solid var(--ink);border-radius:var(--radius);background:transparent;color:var(--ink);font:700 16px var(--text);cursor:pointer}
.side .ghost{width:100%}
.link{all:unset;cursor:pointer;font-weight:700;text-decoration:underline;text-underline-offset:3px}

.lower{max-width:var(--max);margin:0 auto;padding:0 var(--s7) var(--s8)}
.lower h2{font:800 32px/1 var(--display);text-transform:uppercase;margin:0 0 var(--s4)}
.saved{list-style:none;margin:var(--s4) 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s4)}
.saved li{background:var(--panel);border-radius:var(--radius);padding:14px var(--s5);display:grid;gap:var(--s2)}
.saved .nm{font-weight:700}.saved .pr{font:800 28px var(--display)}
.saved .acts{display:flex;gap:var(--s5)}
.io{display:flex;gap:var(--s4);flex-wrap:wrap}
.file input{position:absolute;width:1px;height:1px;opacity:0}
.file:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.how p{max-width:60ch;color:var(--ink-2)}
.foot{max-width:var(--max);margin:0 auto;padding:var(--s7);border-top:1px dashed var(--rule);color:var(--ink-2);font-size:14px}
.peel{display:none}

@media(max-width:880px){
  .top,.calc,.lower,.foot{padding-left:var(--s5);padding-right:var(--s5)}
  .calc{grid-template-columns:1fr;gap:var(--s7)}
  .side{position:static}
  .grid4{grid-template-columns:1fr 1fr}
  .row3,.row2{grid-template-columns:1fr}
  ul.items li{grid-template-columns:1fr 1fr 1fr;row-gap:var(--s2)}
  ul.items li .name{grid-column:1/-1}
  .top nav a:not(.lang){display:none}
  .price{font-size:88px}
  body{padding-bottom:78px}
  .peel{display:flex;position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));align-items:center;gap:var(--s4);background:var(--sticker);color:var(--sticker-ink);border-radius:var(--radius);padding:10px var(--s5);box-shadow:var(--lift);z-index:10}
  .peel b{font:800 34px/1 var(--display);margin-right:auto}
  .peel span{font-weight:700;color:var(--sticker-ink-2)}
}
@media print{
  .top nav,.work,.gun,.save,.ghost,.lower,.foot,.peel,.skip{display:none!important}
  body{background:var(--paper);color:var(--print-ink)}.calc{display:block;padding:0}.side{position:static}
  .sticker{box-shadow:none;border:2px solid var(--print-ink)}
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Money paths (all off by default; content/monetise.json). Quiet, never beside the price. */
.ad{max-width:var(--max);margin:0 auto var(--s8);padding:0 var(--s7)}
.adl{display:block;font-size:13px;color:var(--ink-2);margin-bottom:var(--s2)}
#ad-slot{min-height:100px;background:var(--panel);border-radius:var(--radius)}
.consent{position:fixed;left:var(--s4);right:var(--s4);bottom:var(--s4);max-width:560px;margin:0 auto;background:var(--panel);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius);padding:var(--s5);z-index:20}
.consent p{margin:0 0 var(--s4)}.consent div{display:flex;gap:var(--s4)}.consent .ghost{flex:1;margin:0}
.aff ul{list-style:none;padding:0;margin:0 0 var(--s3);display:flex;flex-wrap:wrap;gap:var(--s4)}
.aff a{font-weight:700}
.pro{margin-top:var(--s5);background:var(--panel);border-radius:var(--radius);padding:var(--s4) 14px}
.pro h2{font:800 22px/1 var(--display);text-transform:uppercase;margin:var(--s2) 0}.pro p{margin:0 0 var(--s2);color:var(--ink-2);font-size:15px}
.sponsor{font-weight:700;color:var(--ink)}
@media(max-width:880px){.ad{padding:0 var(--s5)}.consent{bottom:96px}}
@media print{.ad,.consent,.aff,.pro,.sponsor{display:none!important}}
/* Craft pages: guide + FAQ + guide links (content/pages-<lang>.json). */
.guide p,.guide li{max-width:65ch}.guide ul{padding-left:1.2em}.guide li{margin:var(--s2) 0}
.guide h3{font:800 22px/1 var(--display);text-transform:uppercase;margin:var(--s7) 0 var(--s3)}
.guide details{border-bottom:1px dashed var(--rule);padding:var(--s3) 0;max-width:65ch}
.guide summary{font-weight:700;cursor:pointer}.guide details p{color:var(--ink-2);margin:var(--s2) 0 0}
.guides{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-bottom:var(--s4);color:var(--ink)}

/* Round 1 (web-design-guidelines): headings balance, long names wrap, anchors clear the top. */
h1,h2,h3{text-wrap:balance}
.slbl,.saved .nm,.legend span{overflow-wrap:anywhere}
#how,#products,#calc{scroll-margin-top:var(--s5)}
/* Round 1: compact ingredient rows. Labels show on the first row only (later rows keep them for screen readers). */
ul.items li:not(:first-child) label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
ul.items li:not(:first-child){padding-top:var(--s2)}
@media(max-width:880px){
  ul.items li{grid-template-columns:1fr 64px 1fr 64px;grid-template-areas:"name name name name" "a u s v" "p p cost rm";row-gap:var(--s2);column-gap:var(--s2)}
  ul.items li>div:nth-child(1){grid-area:name}ul.items li>div:nth-child(2){grid-area:a}ul.items li>div:nth-child(3){grid-area:u}
  ul.items li>div:nth-child(4){grid-area:s}ul.items li>div:nth-child(5){grid-area:v}ul.items li>div:nth-child(6){grid-area:p}
  ul.items li .cost{grid-area:cost;padding-bottom:9px}ul.items li .rm{grid-area:rm;justify-self:end}
  ul.items li .field{min-height:40px}
}
/* Landing page, guide cluster and account (2026-10-03). Same tokens; the orange stays on the sticker and the one main button. */
.go{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 var(--s6);border-radius:var(--radius);background:var(--sticker);color:var(--sticker-ink);font:800 22px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;box-shadow:var(--lift);border:0;cursor:pointer}
.go:active{transform:translateY(1px)}
.hero{max-width:var(--max);margin:0 auto;padding:var(--s7) var(--s7) var(--s9);display:grid;grid-template-columns:7fr 5fr;gap:var(--s8);align-items:center}
.hero h1{font-size:clamp(48px,7vw,96px);max-width:12ch}
.hero .lede{font-size:19px;margin-bottom:var(--s6)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;margin:0 0 var(--s4)}.hero-ctas .ghost{margin-top:0}
.demo{margin:0}.demo .sticker{transform:rotate(-2deg)}.demo .price{font-size:96px}
.roll i{display:block;min-width:6px;border-radius:var(--radius-roll)}.demo .roll{gap:3px;min-height:40px}
.roll .own{background:var(--own)}.roll .cut{background:var(--cut)}.roll .keep{background:var(--keep)}
.demo figcaption{margin-top:var(--s4)}
.steps ol{list-style:none;counter-reset:s;padding:0;margin:0 0 var(--s6);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.steps li{counter-increment:s;background:var(--panel);border-radius:var(--radius);padding:var(--s5) var(--s6)}
.steps li::before{content:counter(s);display:inline-block;font:800 40px/1 var(--display);color:var(--sticker-ink);background:var(--sticker);border-radius:var(--radius-roll);padding:4px 12px 0;margin-bottom:var(--s3)}
.steps b{display:block;font:800 24px/1.05 var(--display);text-transform:uppercase}.steps p{color:var(--ink-2);margin:var(--s2) 0 0}
.cluster{list-style:none;padding:0;margin:0 0 var(--s6);display:flex;flex-wrap:wrap;gap:var(--s3)}
.cluster a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s5);border:2px solid var(--rule);border-radius:var(--radius);font-weight:700;text-decoration:none}
.cluster a:hover{border-color:var(--ink)}
.cards{list-style:none;padding:0;margin:0 0 var(--s6);display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s4)}
.cards a{display:grid;gap:var(--s2);height:100%;background:var(--panel);border-radius:var(--radius);padding:var(--s5);text-decoration:none}
.cards b{font:800 22px/1.05 var(--display);text-transform:uppercase}.cards span{color:var(--ink-2);font-size:15px}
.cards a:hover b{text-decoration:underline;text-underline-offset:4px}
.crumbs{font-size:14px;color:var(--ink-2);margin:0 0 var(--s4)}.crumbs a{color:var(--ink-2)}
.prose{max-width:820px}
.prose h1{max-width:20ch}
.article h2{font:800 30px/1.05 var(--display);text-transform:uppercase;margin:var(--s8) 0 var(--s4)}
.article p,.article li{max-width:68ch}.article ul{padding-left:1.2em}.article li{margin:var(--s2) 0}
.byline{color:var(--ink-2);font-size:14px;margin:0 0 var(--s5)}
.answer{font-size:20px;font-weight:600;max-width:60ch;border-left:6px solid var(--sticker);padding-left:var(--s5)}
.article details{border-bottom:1px dashed var(--rule);padding:var(--s3) 0;max-width:68ch}
.article summary{font-weight:700;cursor:pointer}.article details p{color:var(--ink-2);margin:var(--s2) 0 0}
.cta{background:var(--panel);border-radius:var(--radius);padding:var(--s5) var(--s6) var(--s6);margin:var(--s7) 0}
.cta h2{margin:var(--s2) 0 var(--s3)!important;font-size:26px!important}.cta p{color:var(--ink-2);margin:0 0 var(--s4)}
.learn{padding-left:1.2em}.learn a{font-weight:700}
.acct{background:var(--panel);border-radius:var(--radius);padding:var(--s3) var(--s5);margin:0 0 var(--s4)}.acct a{font-weight:700}
.acct-box{background:var(--panel);border-radius:var(--radius);padding:var(--s5) var(--s6);margin:var(--s5) 0;max-width:520px}
.acct-form{margin-top:var(--s5)}.acct-form p{margin:0 0 var(--s3)}.acct-form .ghost{margin-top:var(--s4)}
.acct-actions{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}.acct-actions .ghost{margin-top:0}
.danger{color:var(--bad)}
@media(max-width:880px){
  .hero{grid-template-columns:1fr;padding:var(--s4) var(--s5) var(--s8);gap:var(--s7)}
  .steps ol{grid-template-columns:1fr}
  .demo .price{font-size:80px}
}
@media print{.hero-ctas,.cta,.crumbs{display:none!important}}
.article ul.cards,.article ul.cluster{padding-left:0}.article .cards li,.article .cluster li{margin:0;max-width:none}
/* Currency picker sits beside the product name (Ray 2026-10-03). */
.row2.first{grid-template-columns:2fr 1fr 1.4fr}.row3.two{grid-template-columns:1fr 1.6fr}
#currency{text-overflow:ellipsis}
@media(max-width:880px){.row2.first,.row3.two{grid-template-columns:1fr}}
.field select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Author box on guides, legal links and owner line in the footer, contact button (2026-10-03). */
.author{border-top:1px dashed var(--rule);margin-top:var(--s8);padding-top:var(--s5)}
.author h2{font-size:20px;margin:0 0 var(--s3)}
.foot .legal,.foot .social,.foot .owner{margin:var(--s3) 0}
.contact-card{margin:var(--s7) 0}