/* =========================================================================
     Stickers page. Loads AFTER home.css and inherits every token and component
     from it (colors, type scale, .wrap/.btn/.kicker/.eyebrow/.sec-head/.plate,
     masthead, mobile menu, footer, reveal animation). Only page-specific
     components live here: the portrait product plate, the shape cards, and
     the quote form.
     ========================================================================= */

  /* ---- contrast: sections with a --paper-2 background sit ~0.3 above the
     light-mode floor, so accent teal on them lands at 4.17:1. Small text there
     uses --link (L 45%) instead, which clears 4.5. Dark mode is unaffected:
     --link is L 80% there and already high-contrast on the darker panel. ---- */
  .case .eyebrow,.quote .eyebrow{color:var(--link)}

  /* ---- hero: photo is portrait, so the split differs from the homepage ---- */
  .hero-stickers .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
  .hero-stickers .hero-head{max-width:15ch}

  /* ---- product plate: override the homepage's 1280/820 screenshot ratio ---- */
  .sheet .frame{padding:0}
  .sheet img{aspect-ratio:913/1100;object-position:center}
  .sheet figcaption{margin-top:var(--sm);font-family:var(--sans);font-size:.88rem;color:var(--ink-2);max-width:44ch}
  .sheet figcaption .lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:4px}

  /* ---- catalog: 2x2 on desktop, reuses .cap type scale ---- */
  .cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(24px,3.5vw,44px) clamp(28px,4vw,56px);border-top:1px solid var(--rule-strong)}
  .cat{padding-top:var(--lg)}
  .cat .n{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.08em}
  .cat h3{font-size:1.4rem;margin-top:var(--xs);letter-spacing:-.025em}
  .cat p{color:var(--ink-2);margin-top:var(--xs);font-size:1rem;max-width:40ch}

  /* ---- shape cards ---- */
  .shapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
  .shape{border:1px solid var(--rule-strong);background:var(--paper-2);padding:var(--lg);
    display:flex;flex-direction:column;gap:var(--sm)}
  .shape .glyph{width:100%;height:96px;display:flex;align-items:center;justify-content:center}
  .shape .glyph i{display:block;background:transparent;border:2px solid var(--accent)}
  .shape .glyph .sq{width:62px;height:62px}
  .shape .glyph .rect{width:92px;height:52px}
  .shape .glyph .circ{width:66px;height:66px;border-radius:50%;
    border-style:dashed;border-color:var(--ink-3)}
  .shape h3{font-size:1.2rem;letter-spacing:-.02em}
  /* --link (L 45%) not --accent (L 53%): accent teal on the paper-2 card
     background measures 4.17:1, under the 4.5 needed for small text. */
  .shape .easy{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--link)}
  .shape.other .easy{color:var(--ink-3)}
  .shape p{color:var(--ink-2);font-size:.96rem}
  .size-note{margin-top:clamp(28px,4vw,40px);padding-top:var(--lg);border-top:1px solid var(--rule);
    color:var(--ink-2);font-size:1.02rem;max-width:56ch}

  /* ---- quote form ---- */
  .quote{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .qgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);
    align-items:start}
  .qform{display:grid;gap:var(--md)}
  .qrow{display:grid;grid-template-columns:1fr 1fr;gap:var(--md)}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--ink)}
  .field .hint{font-family:var(--sans);font-weight:400;font-size:.82rem;color:var(--ink-3)}
  .field input,.field select,.field textarea{
    font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--paper);
    border:1.5px solid var(--rule-strong);border-radius:2px;padding:12px 13px;min-height:48px;
    width:100%;transition:border-color .18s}
  .field textarea{min-height:120px;resize:vertical;line-height:1.55}
  .field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-3)}
  .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
    outline:3px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
  .field select{appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                     linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px);
    background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
  .qform .submit{margin-top:var(--xs);justify-self:start}
  .qform .fallback{font-size:.9rem;color:var(--ink-2);margin-top:var(--xs)}
  .qform .fallback a{color:var(--link);font-weight:600}
  .qside .lead{font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,2.2vw,1.85rem);
    line-height:1.24;letter-spacing:-.03em;color:var(--ink)}
  .qside .lead em{font-style:normal;color:var(--accent)}
  .qside p{color:var(--ink-2);margin-top:var(--md);font-size:1.02rem;max-width:38ch}
  .qside .direct{margin-top:var(--xl);padding-top:var(--lg);border-top:1px solid var(--rule)}
  .qside .direct .lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-3)}
  .qside .direct a{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:.95rem;
    color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-strong);padding-bottom:2px}
  .qside .direct a:hover{color:var(--accent);border-color:var(--accent)}

  /* ---- back-to-site strip ---- */
  .backstrip{border-top:1px solid var(--rule);padding-block:var(--2xl)}
  .backstrip .row{display:flex;justify-content:space-between;align-items:center;gap:var(--lg);flex-wrap:wrap}
  .backstrip p{color:var(--ink-2);font-size:1.02rem;max-width:44ch}
  .backstrip .go{font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--link);
    text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:.4em}
  .backstrip .go:hover{text-decoration:underline}

  @media (max-width:900px){
    .hero-stickers .hero-grid{grid-template-columns:1fr}
    .qgrid{grid-template-columns:1fr}
    .shapes{grid-template-columns:1fr}
    .shape{flex-direction:row;align-items:flex-start;gap:var(--lg)}
    .shape .glyph{width:auto;height:auto;flex:0 0 96px;padding-top:4px}
    .shape .txt{display:flex;flex-direction:column;gap:var(--xs)}
  }
  @media (max-width:640px){
    .cat-grid{grid-template-columns:1fr;border-top:0}
    .cat{border-top:1px solid var(--rule);padding-top:var(--md)}
    .qrow{grid-template-columns:1fr}
  }