/* ==========================================================================
   Samia Agency — site components. Loads after samia.css and uses only its
   tokens: drawn hero scenes, vertical glyphs, price tiles, spend bars, the
   SVG mock panels on /dashboard, the pay cards on /partners, work covers.
   Everything reads at 375px wide. Motion is transform/opacity only.
   ========================================================================== */

/* Hero scenes (inline SVG drawn in flat shapes) -------------------------- */
.scene { width: 100%; max-width: 560px; margin-inline: auto; overflow: visible; }
.scene text { font-family: var(--display); font-weight: 900; text-transform: uppercase; }
.hero-grid .art.open { transform: none; }
@media (max-width: 900px) { .hero-grid .art.open { max-width: 460px; } }
.hero-facts { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: "✦"; color: var(--red); line-height: 1; }
.caption .live-dot { width: 8px; height: 8px; }

/* Glyphs: small drawn icons in the tiles (64px, 2px ink) ------------------ */
.glyph { width: 64px; height: 64px; flex: none; }
.glyph svg { width: 100%; height: 100%; overflow: visible; }

/* Price summary tiles (home) ---------------------------------------------- */
.price .amt-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-block: 10px; border-block: var(--bw) solid var(--ink); }
.price .amt { font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); line-height: .95; letter-spacing: -.03em; color: var(--ink); font-variation-settings: "wdth" 78; }
.price .per { font-weight: 700; color: var(--ink-2); font-size: .95rem; }
.price .note { font-size: var(--fs-small); color: var(--muted); }
.price.featured { outline: 3px solid var(--ink); outline-offset: 4px; }
.price .ribbon { position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(-2deg); margin: 0; white-space: nowrap; background: var(--red); color: var(--paper); }

/* Spend split bars (home sample campaign) -------------------------------- */
.spend { display: grid; gap: 14px; }
.spend .line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: end; }
.spend .name { font-weight: 700; color: var(--ink); }
.spend .amt { font-family: var(--display); font-weight: 900; font-size: 1.25rem; color: var(--ink); font-variation-settings: "wdth" 80; }
.spend .track { grid-column: 1 / -1; height: 22px; border: var(--bw) solid var(--ink); border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.spend .track i { display: block; height: 100%; background: var(--blue); border-right: var(--bw) solid var(--ink); }
.spend .track i.red { background: var(--red); } .spend .track i.sun { background: var(--sun); } .spend .track i.green { background: var(--green); }
.spend .why { font-size: .9rem; color: var(--muted); grid-column: 1 / -1; margin: 0; }

/* The night band carries the paper mini dashboard: keep its text ink ---- */
.band.night .mini-dash { color: var(--ink-2); --muted: #6F6A7A; --text: var(--ink-2); --heading: var(--ink); }
.band.night .mini-dash .top { color: var(--ink); }
.night-points { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 14px; }
.night-points li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.night-points .n { width: 36px; height: 36px; border: var(--bw) solid var(--paper); border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 900; color: var(--paper); font-variation-settings: "wdth" 80; }
.night-points b { color: var(--paper); }

/* SVG mock panels (the client portal page) ------------------------------- */
.shot { background: var(--paper-2); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.shot.lg { box-shadow: var(--shadow-lg); }
.shot svg { width: 100%; height: auto; display: block; }
.shot text, .shot-phone text { font-family: var(--sans); font-weight: 600; fill: var(--ink-2); }
.shot .t-num, .shot-phone .t-num { font-family: var(--display); font-weight: 900; fill: var(--ink); letter-spacing: -.02em; font-variation-settings: "wdth" 80; }
.shot .t-lab, .shot-phone .t-lab { font-weight: 700; fill: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.shot .t-ink, .shot-phone .t-ink { fill: var(--ink); font-weight: 700; }
.shot .t-paper, .shot-phone .t-paper { fill: var(--paper); font-weight: 700; letter-spacing: .06em; }
.shot .t-green, .shot-phone .t-green { fill: #1E8A48; font-weight: 700; }
.shot .t-red, .shot-phone .t-red { fill: var(--red); font-weight: 700; }
.shot .t-blue, .shot-phone .t-blue { fill: var(--blue); font-weight: 700; }
.shot-phone { max-width: 340px; margin-inline: auto; width: 100%; }
.shot-phone svg { width: 100%; height: auto; display: block; overflow: visible; }
.shot-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.shot-row + .shot-row { margin-top: clamp(48px, 7vw, 96px); }
.shot-row.flip .copy { order: 2; }
@media (max-width: 900px) { .shot-row { grid-template-columns: minmax(0, 1fr); } .shot-row.flip .copy { order: 0; } }
.shot-cap { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: .82rem; font-weight: 700; color: var(--muted); }
.shot-cap::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); border: 1.5px solid var(--ink); flex: none; }

/* Sample client tiles: drawn initials ----------------------------------- */
.avatar-tile { width: 56px; height: 56px; border-radius: var(--r); border: var(--bw) solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 1.2rem; letter-spacing: -.02em; color: var(--ink); font-variation-settings: "wdth" 80; background: var(--paper-2); flex: none; }
.avatar-tile.peach { background: var(--peach); } .avatar-tile.sky { background: var(--sky); } .avatar-tile.lilac { background: var(--lilac); } .avatar-tile.rose { background: var(--rose); }

/* Partners: pay cards and the worked example ----------------------------- */
.pay .amt { font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); line-height: .95; color: var(--ink); letter-spacing: -.03em; font-variation-settings: "wdth" 78; }
.pay .per { font-weight: 700; color: var(--ink-2); }
.example { border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper-2); box-shadow: var(--shadow); overflow: hidden; }
.example .row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); padding: 14px 18px; border-bottom: 1.5px solid var(--line); align-items: baseline; }
.example .row:last-child { border-bottom: 0; }
.example .row.head { background: var(--sand); border-bottom: var(--bw) solid var(--ink); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink); }
.example .row b { color: var(--ink); }
.example .row .n { font-family: var(--display); font-weight: 900; font-size: 1.35rem; color: var(--ink); font-variation-settings: "wdth" 80; white-space: nowrap; }
.example .row small { display: block; color: var(--muted); font-size: .8rem; font-family: var(--sans); font-weight: 600; white-space: normal; }
@media (max-width: 560px) { .example .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .example .row > :first-child { grid-column: 1 / -1; } .example .row.head > :first-child { display: none; } }

/* Work covers: drawn SVG in the card art ---------------------------------- */
.work-card .cover-art.peach { background: var(--peach); } .work-card .cover-art.sky { background: var(--sky); } .work-card .cover-art.lilac { background: var(--lilac); } .work-card .cover-art.rose { background: var(--rose); } .work-card .cover-art.lemon { background: var(--lemon); }
.work-card .cover-art svg { width: 100%; height: 100%; }
.work-card .meta .btn { flex: none; }
.sample-flag { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--sun); border: 1.5px solid var(--ink); border-radius: 2px; padding: 4px 8px; }

/* Closing block: start a project beside the notes sign-up --------------- */
.closing { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .closing { grid-template-columns: minmax(0, 1fr); } }
.closing .panel h3 { font-size: 1.25rem; }
.closing .inline-form { max-width: none; }

/* Services: the "what we will not do" list -------------------------------- */
.never { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.never li { display: flex; gap: 12px; align-items: flex-start; }
.never li::before { content: "×"; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--rose); color: var(--ink); font-weight: 900; font-size: .95rem; line-height: 1; display: grid; place-items: center; margin-top: 2px; }

/* Steps strip (dashboard page: how a number gets to the page) ------------ */
.steps { counter-reset: st; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.steps > div { counter-increment: st; position: relative; padding-top: 44px; }
.steps > div::before { content: counter(st, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--display); font-weight: 900; font-size: 1.6rem; color: var(--red); line-height: 1; font-variation-settings: "wdth" 80; }
.steps h3 { font-size: 1.05rem; }
.steps p { font-size: var(--fs-small); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Keep a compound word on one line in a headline (home hero) ------------- */
.nowrap { white-space: nowrap; }

/* Row tile (work page): the foot link sits at the end of the row ---------- */
.tile.row > div.foot { flex: 0 0 auto; min-width: 0; margin-left: auto; margin-top: 0; padding-top: 0; align-self: center; }
@media (max-width: 600px) { .tile.row > div.foot { margin-left: 0; } }

/* Mock panels: the wide drawing on desktop, a phone-shaped redraw under 600px so the labels stay readable */
.shot .shot-narrow { display: none; }
@media (max-width: 600px) { .shot .shot-wide { display: none; } .shot .shot-narrow { display: block; } }

@media (prefers-reduced-motion: reduce) {
  .scene .float, .scene .spin-slow, .scene .twinkle { animation: none !important; }
}

/* Mini dashboard chart caption (home): the sample's weekly covers, with a key */
.mini-dash .chart-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; margin: 0 0 6px; font-size: .78rem; font-weight: 700; color: var(--ink); }
.mini-dash .chart-cap .keys { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .72rem; color: var(--ink-2); }
.mini-dash .chart-cap .keys i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 1.5px solid var(--ink); border-radius: 2px; vertical-align: -1px; }
.mini-dash .chart-cap .k-blue { background: var(--blue); }
.mini-dash .chart-cap .k-orange { background: var(--orange); }

/* Hero leads: avoid a one-word last line beside the drawn scenes --------- */
.hero .lead { text-wrap: pretty; }