/* pages.css: the SEO pages' own parts (/sell, /tools, /for, /learn, /help,
   /compare, /resources and their hubs). Brand v3, 22 Oct 2026.

   Load order (partials/head.html): stakk-tokens-v3.css (values and the four
   grounds), stakk-ui.css (the shared parts and the site chrome: .wrap .sec
   .head .lede .btn .btn-soft .card .field .ilist .phero .faq .faq-i .last
   .foot .more .link .center .sr and the rest), then this file. Only parts the
   SEO pages have and the main site does not live here.

   Values are tokens (var(--sk-*)) or ground values (var(--g-*)) only. No
   colours typed in, no 500 or 600, spacing on the 4px scale.

   This file is also the class list. build.py fails a page that uses a class
   found in none of the three files, and any style attribute or <style> block.
   Tool JS may only toggle the hidden attribute and the is-* classes below; its
   hooks are ids and data- attributes.

   Grounds: templates write <section class="sec">, and build.py gives each one
   white or mint in turn after the green hero. Every part below reads --g-*,
   so it looks right on either. */

/* JS shows and hides with the hidden attribute: nothing here may undo it. */
[hidden]{display:none !important}

/* ---- Reading column: one h2, then the copy, at a length people can read ---- */
.read{max-width:calc(720px + 2 * var(--sk-gutter))}
:where(.read) > * + *{margin-top:var(--sk-sp-5)}
/* Section heads in the reading column are often full questions (up to ~70
   characters, kept whole for search). At the marketing h2 size they ran to
   3 lines on desktop and 4 on a phone, so here they sit one step down:
   2 lines desktop, 3 phone. Same size for every h2 in the column. */
.read h2{font-size:clamp(26px,1.1vw + 21px,36px);line-height:1.12}
.read .claim{margin-left:0}
.read .claim-msg{justify-content:flex-start}

/* ---- Prose: copy from data/*.json (p, ul, ol, li, strong, a only) ---- */
:where(.prose) > * + *{margin-top:var(--sk-sp-4)}
:where(.prose) ul,:where(.prose) ol{padding-left:var(--sk-sp-5)}
:where(.prose) li + li{margin-top:var(--sk-sp-2)}
.prose strong,.steps strong{font-weight:var(--sk-fw-bold)}
.prose a,.steps a{color:inherit;text-decoration:underline;text-decoration-thickness:var(--sk-ring);text-underline-offset:3px}

/* The short answer that opens glossary, ideas, compare and help pages */
.definition{font-size:var(--sk-fs-lede);line-height:var(--sk-lh-lede)}

/* Numbered steps (product pages, help articles) */
.steps{display:grid;gap:var(--sk-sp-3);padding-left:var(--sk-sp-5)}
.steps > li{padding-left:var(--sk-sp-1)}
.steps > li::marker{font-weight:var(--sk-fw-bold)}

/* Idea lists on /learn ideas pages: short lines, two columns from tablet up */
.idea-list li{margin:0;padding:var(--sk-sp-1) 0;break-inside:avoid}
@media (min-width:768px){.idea-list{columns:2;column-gap:var(--sk-sp-7)}}

/* ---- Page hero h1: 2 lines on desktop, 3 on a phone. The longest SEO h1s
        (51 characters) need a smaller size on narrow phones: shrink, never cut words. ---- */
.phero h1{font-size:min(var(--sk-fs-h1),8.5vw)}

/* ---- Breadcrumb: inside the green hero, above the h1 ---- */
.breadcrumb{margin-bottom:var(--sk-sp-5);font-size:var(--sk-fs-small);line-height:var(--sk-lh-snug);color:var(--g-fg-2)}
.breadcrumb__list{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sk-sp-1) var(--sk-sp-3)}
.breadcrumb__item{display:inline-flex;align-items:center;gap:var(--sk-sp-3)}
.breadcrumb__item + .breadcrumb__item::before{content:"";width:6px;height:6px;border-top:var(--sk-ring) solid currentColor;border-right:var(--sk-ring) solid currentColor;transform:rotate(45deg)}
.breadcrumb__link{color:inherit;text-decoration:none;transition:color var(--sk-dur-hover) var(--sk-ease)}
.breadcrumb__link:hover{color:var(--g-fg)}

/* ---- Card grids: related pages and hubs. The whole card is the link. ---- */
.card-grid{list-style:none;padding:0;display:grid;gap:var(--sk-sp-4);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card-grid > li{display:grid}
.card-grid .card{display:block;color:inherit;text-decoration:none}
.card-grid .card:active{transform:scale(var(--sk-press-scale))}
.card-grid .ico{display:block;width:var(--sk-icon-lg);height:var(--sk-icon-lg);margin-bottom:var(--sk-sp-3)}
.card__title{display:block;font-weight:var(--sk-fw-bold);letter-spacing:var(--sk-ls-snug);line-height:var(--sk-lh-snug)}
.card__text{display:block;margin-top:var(--sk-sp-1);color:var(--g-fg-2);line-height:var(--sk-lh-snug)}

/* ---- Link rows: help lists and blog post lists ---- */
.link-list{list-style:none;padding:0}
.link-list__item{border-top:1px solid var(--g-line)}
.link-list__item:last-child{border-bottom:1px solid var(--g-line)}
.link-list__link{display:flex;align-items:center;justify-content:space-between;gap:var(--sk-sp-4);min-height:var(--sk-ctl-h);padding:var(--sk-sp-3) 0;color:inherit;text-decoration:none;line-height:var(--sk-lh-snug)}
.link-list__link:hover span{text-decoration:underline;text-decoration-thickness:var(--sk-ring);text-underline-offset:3px}
.link-list__link .ico{color:var(--g-fg-2);transition:transform var(--sk-dur-hover) var(--sk-ease)}
.link-list__link:hover .ico{transform:translateX(calc(var(--sk-lift) * -1))}

/* ---- Product page demo: a store card, a checkout with a bump, an upsell.
        Drawn screens, so they are white cards on the mint band. ---- */
.demo__row{display:grid;gap:var(--sk-sp-5);align-items:start;max-width:360px;margin:0 auto}
@media (min-width:768px){.demo__row{max-width:1040px;grid-template-columns:repeat(3,minmax(0,1fr))}}
.demo-card__cover{position:relative;overflow:hidden;aspect-ratio:16/9;margin-bottom:var(--sk-sp-4);border-radius:var(--sk-r-control);background:var(--sk-mint-100)}
.demo-card__cover .slabs{left:-15%;top:-70%;width:130%;height:auto}
.demo-card__url{font-size:var(--sk-fs-small);color:var(--g-fg-2)}
.demo-card__title,.demo-upsell__title{font-size:var(--sk-fs-h3);font-weight:var(--sk-fw-bold);letter-spacing:var(--sk-ls-snug);line-height:var(--sk-lh-snug)}
.demo-card__title{margin-top:var(--sk-sp-1)}
.demo-card__price{margin-top:var(--sk-sp-2);font-weight:var(--sk-fw-bold);font-variant-numeric:tabular-nums}
.demo-checkout__row,.demo-checkout__total,.demo-upsell__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sk-sp-3);font-variant-numeric:tabular-nums}
.demo-checkout__row span + span,.demo-upsell__row span + span,.demo-checkout__bump span:last-child,.demo-checkout__total{font-weight:var(--sk-fw-bold)}
.demo-checkout__bump{display:grid;grid-template-columns:var(--sk-sp-5) 1fr auto;align-items:center;gap:var(--sk-sp-3);margin-top:var(--sk-sp-4);padding:var(--sk-sp-3);border-radius:var(--sk-r-control);background:var(--sk-mint-50);font-size:var(--sk-fs-small);line-height:var(--sk-lh-snug);font-variant-numeric:tabular-nums}
.demo-checkout__tick{display:grid;place-items:center;width:var(--sk-sp-5);height:var(--sk-sp-5);border-radius:var(--sk-r-check);background:var(--sk-ink);color:var(--sk-white)}
.demo-checkout__tick .ico{width:var(--sk-icon-sm);height:var(--sk-icon-sm);stroke-width:2.5}
.demo-checkout__total{margin-top:var(--sk-sp-4);padding-top:var(--sk-sp-3);border-top:1px solid var(--sk-line)}
.demo-upsell__row{margin-top:var(--sk-sp-4);padding:var(--sk-sp-3);border-radius:var(--sk-r-control);background:var(--sk-mint-50)}
.demo-btn{display:flex;align-items:center;justify-content:center;height:var(--sk-ctl-h);margin-top:var(--sk-sp-4);border-radius:var(--sk-r-control);background:var(--sk-ink);color:var(--sk-white)}

/* ---- Audience page example store: a drawn phone on the logo's slabs, notes beside it ---- */
.store{overflow:hidden}
.store__row{display:grid;gap:var(--sk-sp-7);align-items:center;max-width:960px;margin:0 auto}
@media (min-width:900px){.store__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sk-sp-8)}}
.store__pic{position:relative;display:grid;place-items:center;padding:var(--sk-sp-6) 0;isolation:isolate}
.store__pic .slabs{left:50%;top:50%;z-index:-1;width:560px;height:560px;transform:translate(-50%,-50%)}
.store-demo{width:100%;max-width:300px;padding:var(--sk-sp-7) var(--sk-sp-4) var(--sk-sp-6);border-radius:var(--sk-r-device);background:var(--sk-white);color:var(--sk-ink);box-shadow:var(--sk-shadow-float);text-align:center}
.store-demo__avatar{display:grid;place-items:center;width:68px;height:68px;margin:0 auto;border-radius:50%;background:var(--sk-ink);color:var(--sk-white);font-size:var(--sk-fs-h3);font-weight:var(--sk-fw-bold)}
.store-demo__name{margin-top:var(--sk-sp-3);font-weight:var(--sk-fw-bold);letter-spacing:var(--sk-ls-snug);line-height:var(--sk-lh-snug)}
.store-demo__url{font-size:var(--sk-fs-small);color:var(--sk-muted)}
.store-demo__bio{margin-top:var(--sk-sp-2);font-size:var(--sk-fs-small);line-height:var(--sk-lh-snug);color:var(--sk-muted)}
.store-demo__products{list-style:none;padding:0;display:grid;gap:var(--sk-sp-2);margin-top:var(--sk-sp-5);text-align:left}
.store-demo__product{display:flex;justify-content:space-between;align-items:center;gap:var(--sk-sp-3);padding:var(--sk-sp-3) var(--sk-sp-4);border-radius:var(--sk-r-control);background:var(--sk-mint-50);font-size:var(--sk-fs-small);line-height:var(--sk-lh-snug)}
.store-demo__product-price{flex:none;font-weight:var(--sk-fw-bold);font-variant-numeric:tabular-nums}

/* ---- Compare table: Stakk's column carries the card fill of the ground ---- */
.compare-table{width:100%;border-collapse:collapse;line-height:var(--sk-lh-snug)}
.compare-table__caption{caption-side:bottom;padding-top:var(--sk-sp-4);text-align:left;font-size:var(--sk-fs-small);color:var(--g-fg-2)}
.compare-table__row{border-bottom:1px solid var(--g-line)}
.compare-table__head,.compare-table__label,.compare-table__cell{padding:var(--sk-sp-3);text-align:left;vertical-align:top}
.compare-table__head{font-weight:var(--sk-fw-bold)}
.compare-table__label{font-weight:var(--sk-fw-regular);color:var(--g-fg-2)}
.compare-table__head--stakk,.compare-table__cell--stakk{background:var(--g-card)}
@media (max-width:599px){
  .compare-table{font-size:var(--sk-fs-small)}
  .compare-table__head,.compare-table__label,.compare-table__cell{padding:var(--sk-sp-2)}
}

/* ---- Help center: search in the hero, categories in one band ---- */
.help-search{max-width:480px;margin:var(--sk-sp-6) auto 0}
.help-search input{-webkit-appearance:none;appearance:none}
.help-search__empty{margin-bottom:var(--sk-sp-6);text-align:center;color:var(--g-fg-2)}
.help-cats{display:grid;gap:var(--sk-sp-7) var(--sk-sp-6)}
@media (min-width:768px){.help-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.help-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.help-cat{scroll-margin-top:var(--sk-sp-9)}
.help-cat h2{margin-bottom:var(--sk-sp-3);font-size:var(--sk-fs-h3);letter-spacing:var(--sk-ls-snug);line-height:var(--sk-lh-snug)}

/* ---- Free tools: the tool sits in one card; the vocabulary every tool uses ---- */
.tool{scroll-margin-top:var(--sk-sp-9)}
.tool__card{max-width:880px;margin:0 auto}
.tool__panel{display:grid;gap:var(--sk-sp-5)}
.tool__form{display:grid;gap:var(--sk-sp-4)}
.tool__row{display:grid;gap:var(--sk-sp-4);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.tool__field{display:grid;gap:var(--sk-sp-2);align-content:start;min-width:0}
.tool__label{font-size:var(--sk-fs-small);line-height:var(--sk-lh-snug);color:var(--g-fg)}
.tool__panel fieldset{min-width:0;margin:0;padding:0;border:0}
.tool__panel legend{margin-bottom:var(--sk-sp-3);padding:0}

/* Inputs look like the shared .field: 48px, 1.5px ring, 2px ink on focus */
.tool__input,.tool__select,.tool__textarea{width:100%;min-width:0;height:var(--sk-ctl-h);padding:0 var(--sk-sp-4);border:0;border-radius:var(--sk-r-control);background:var(--g-field);box-shadow:inset 0 0 0 var(--sk-ring) var(--g-field-ring);color:var(--sk-ink);font:inherit;outline:0;transition:box-shadow var(--sk-dur-hover) var(--sk-ease)}
.tool__input:focus,.tool__select:focus,.tool__textarea:focus{box-shadow:inset 0 0 0 var(--sk-focus) var(--sk-ink)}
.tool__input.is-error,.tool__textarea.is-error{box-shadow:inset 0 0 0 var(--sk-focus) var(--sk-error)}
.tool__textarea{height:auto;min-height:calc(var(--sk-ctl-h) * 2);padding:var(--sk-sp-3) var(--sk-sp-4);line-height:var(--sk-lh-body);resize:vertical}
.tool__select{-webkit-appearance:none;appearance:none;padding-right:var(--sk-sp-7);cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--g-fg-2) 50%),linear-gradient(135deg,var(--g-fg-2) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.tool__input[type="color"]{padding:var(--sk-sp-1);cursor:pointer}
.tool__input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.tool__input[type="color"]::-webkit-color-swatch{border:0;border-radius:var(--sk-r-small)}
.tool__input[type="color"]::-moz-color-swatch{border:0;border-radius:var(--sk-r-small)}
.tool__input[type="file"]{height:auto;padding:var(--sk-sp-2)}
.tool__input[type="file"]::file-selector-button{height:var(--sk-ctl-h-sm);margin-right:var(--sk-sp-3);padding:0 var(--sk-ctl-pad-sm);border:0;border-radius:var(--sk-r-control);background:var(--g-soft-bg);color:var(--g-fg);font:inherit;font-size:var(--sk-fs-small);cursor:pointer}
.tool__range{width:100%;height:36px;accent-color:var(--sk-ink);cursor:pointer}  /* 36px: the touch floor on phones and tablets */
.tool__check{display:inline-flex;align-items:center;gap:var(--sk-sp-2);margin:0 var(--sk-sp-4) var(--sk-sp-2) 0;cursor:pointer}
.tool__check input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--sk-ink)}
.tool__hint{font-size:var(--sk-fs-small);line-height:var(--sk-lh-snug);color:var(--g-fg-2)}
.tool__hint a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.tool__error{font-size:var(--sk-fs-small);color:var(--sk-error)}
.tool__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sk-sp-3)}
.tool__row > .tool__actions{align-self:end}
.tool__form [data-ch]{display:grid;gap:var(--sk-sp-3);padding:var(--sk-sp-4) 0;border-top:1px solid var(--g-line)}

/* Tabs: soft chips, the open one a darker fill and bold */
.tool__tabs{display:flex;flex-wrap:wrap;gap:var(--sk-sp-2)}
.tool__tab{height:var(--sk-ctl-h-sm);padding:0 var(--sk-ctl-pad-sm);border:0;border-radius:var(--sk-r-pill);background:var(--g-soft-bg);color:var(--g-fg);font:inherit;font-size:var(--sk-fs-small);cursor:pointer;transition:background-color var(--sk-dur-hover) var(--sk-ease),transform var(--sk-dur-press) var(--sk-ease)}
.tool__tab:hover,.tool__tab.is-active{background:var(--g-soft-hover)}
.tool__tab.is-active{font-weight:var(--sk-fw-bold)}
.tool__tab:active{transform:scale(var(--sk-press-scale))}

/* Output: under a hairline, the result big and bold */
.tool__output{display:grid;gap:var(--sk-sp-4);padding-top:var(--sk-sp-5);border-top:1px solid var(--g-line)}
.tool__result{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sk-sp-1) var(--sk-sp-2)}
.tool__result-value{font-size:var(--sk-fs-h2);font-weight:var(--sk-fw-bold);letter-spacing:var(--sk-ls-tight);line-height:var(--sk-lh-tight);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tool__result-label{color:var(--g-fg-2)}
.tool__list{list-style:none;padding:0}
.tool__list-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sk-sp-2) var(--sk-sp-3);padding:var(--sk-sp-3) 0;border-top:1px solid var(--g-line)}
.tool__list-item:last-child{border-bottom:1px solid var(--g-line)}
.tool__list-item .tool__result-value{font-size:inherit;letter-spacing:0;line-height:inherit}
.tool__list-item.is-error{color:var(--sk-error)}
.tool__meter{flex:1 1 120px;height:var(--sk-sp-2)}
.tool__copy{height:var(--sk-ctl-h-sm);padding:0 var(--sk-ctl-pad-sm);font-size:var(--sk-fs-small)}
.tool__copy.is-copied{font-weight:var(--sk-fw-bold)}
.is-busy{opacity:var(--sk-disabled);pointer-events:none}

/* Pictures the tools make: previews, canvases, frames, tiles, swatches */
.tool__preview{display:grid;justify-items:center;gap:var(--sk-sp-3);padding:var(--sk-sp-4);border-radius:var(--sk-r-control);background:var(--g-field)}
.tool__preview > p{justify-self:stretch}
.tool__canvas{display:block;max-width:100%;height:auto;border-radius:var(--sk-r-small)}
.tool__frame{display:block;width:100%;height:clamp(480px,75vh,880px);border:0;border-radius:var(--sk-r-control);background:var(--sk-white)}
.tool__grid{list-style:none;padding:0;display:grid;gap:var(--sk-sp-3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:480px){.tool__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tool__grid img{display:block;width:100%;height:auto;border-radius:var(--sk-r-small)}
.tool__tile{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sk-sp-2);align-content:start;min-width:0}
.tool__tile .tool__canvas{width:100%}
.tool__tile .btn,.tool__tile .tool__download{width:100%;height:var(--sk-ctl-h-sm);padding:0 var(--sk-sp-3);font-size:var(--sk-fs-small)}
.tool__swatches{list-style:none;padding:0;display:grid;gap:var(--sk-sp-3);grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.tool__swatch{display:grid;gap:var(--sk-sp-2);justify-items:center}
.tool__panel table{width:100%;border-collapse:collapse;font-size:var(--sk-fs-small);line-height:var(--sk-lh-snug)}
.tool__panel caption{padding-bottom:var(--sk-sp-2);text-align:left;font-weight:var(--sk-fw-bold)}
.tool__panel th,.tool__panel td{padding:var(--sk-sp-2) var(--sk-sp-3) var(--sk-sp-2) 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--g-line);overflow-wrap:anywhere}

/* The bridge: under every tool's result, one line and the claim button */
.tool__bridge{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sk-sp-3) var(--sk-sp-5);padding-top:var(--sk-sp-4);border-top:1px solid var(--g-line)}
.tool__bridge p{flex:1 1 280px}

/* States JS may toggle (with hidden): is-active, is-copied, is-error, is-busy.
   is-active is styled on .tool__tab, is-copied on .tool__copy, is-error on the
   inputs and list rows above. */