/* =====================================================================
   PORTFOLIO — self-built product detail pages (shared)
   Builds on case.css (linked first). Adds device mockups + build-specific
   blocks: tech chips, feature grid, decision list, screen gallery.
   ===================================================================== */

/* ---------- live / external link button in hero ---------- */
.cta-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin:clamp(1.5rem,3.5vw,2.1rem) 0 0; }
/* hero unified with the work-page (Telemedi case) hero — text-dominant grid + the device in a
   slim right column; identical eyebrow/title/lead styling to the work pages, only content differs. */
.hero-main{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  align-items:center; gap:clamp(36px,5vw,72px); }
.hero-text{ min-width:0; }
.chero .eyebrow{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--text-accent); margin:0 0 26px; }
.chero h1{ font-family:var(--font-serif); font-weight:500; font-size:clamp(2.4rem,4.6vw,4.1rem);
  line-height:1.0; letter-spacing:-0.018em; margin:0; color:var(--text-primary); text-wrap:pretty; }
.chero h1 em{ font-style:italic; color:var(--text-accent); }
.chero .lead{ margin:30px 0 0; font-family:var(--font-sans); font-weight:400; font-size:clamp(1.12rem,1.5vw,1.28rem);
  line-height:1.6; color:var(--text-muted); max-width:520px; text-wrap:pretty; }
.hero-logo{ width:clamp(100px,16vw,134px); height:auto; flex:none; border-radius:18px; }
.hero-main .phone{ width:100%; max-width:230px; min-width:0; justify-self:center; }
.hero-main .codeblock.hero-term{ width:100%; max-width:100%; min-width:0; justify-self:stretch; }
@media(max-width:700px){ .hero-main{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .hero-main .phone, .hero-main .codeblock.hero-term{ justify-self:start; }
  .codeblock{ max-width:100% !important; } }   /* every code panel stays within the viewport on mobile (beats the base 560px); its own overflow-x:auto scrolls the content */

/* ---------- two-column section: sticky label/heading left, body right (the main page's "How I work" pattern) ---------- */
.csec.split{ display:grid; grid-template-columns:0.5fr 1.5fr; column-gap:clamp(1.8rem,4vw,3.5rem); row-gap:0; align-items:start; }
.csec.split > h2{ grid-column:1; position:sticky; top:90px; margin:0; }
.csec.split > :not(h2){ grid-column:2; }
.csec.split :is(p, ul, .decisions){ max-width:60ch; }   /* readable line length; the wider column is filled by palette/chips/visuals (like the main page's body) */
@media(max-width:760px){ .csec.split{ display:block; } .csec.split > h2{ position:static; margin:0 0 1rem; } }

/* ---------- section rhythm: full-width dividers + generous spacing between build-page sections ---------- */
main.wrap > .csec{ border-top:1px solid var(--rule); padding-top:clamp(2.4rem,5.5vw,3.6rem); }
main.wrap > .csec, main.wrap > .devices{ margin-top:clamp(2.4rem,5.5vw,3.6rem); }   /* screens get the gap but NO divider — they belong with "What it does" */
main.wrap > .csec:first-child{ border-top:none; margin-top:0; padding-top:0; }
main.wrap > .outcome{ margin-top:clamp(2.8rem,6vw,4.2rem); margin-bottom:0; }   /* bottom spacing handled by .cback so the back-button sits evenly between card and footer */

/* ---------- credit row → full-bleed --cold-50 band, styled exactly like the work-page facts ---------- */
.chero .facts{
  background: var(--cold-50);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  gap: clamp(20px,3vw,40px); align-items: stretch;
  margin: clamp(2.4rem,5vw,3.4rem) calc(50% - 50vw) 0;
  /* re-pad so the cells line up with the page's content column */
  padding: clamp(24px,2.6vw,34px) calc(clamp(1.25rem,5vw,2rem) + max(0px, 50vw - 560px));
}
.chero .fact{ gap:0; }
.chero .fact .k{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--text-accent); margin-bottom:14px; }
.chero .fact .v{ font-family:var(--font-sans); font-weight:500; font-size:0.9375rem; line-height:1.4; color:var(--text-primary); }
html{ overflow-x: clip; }   /* contain the vw-based full-bleed band */

/* ---------- back-to-builds (top bar + bottom) as SECONDARY buttons (not text links) ---------- */
.cback{ display:flex; justify-content:center; padding:clamp(2.4rem,5vw,3.2rem) 0; }
.cback a{ display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  font-family:var(--font-sans); font-weight:600; color:var(--ink); padding:.7rem 1.15rem; font-size:.92rem;
  background:var(--surface); border:1px solid var(--border-subtle); border-radius:10px;
  transition:border-color .25s var(--ease), color .25s var(--ease); }
.cback a:hover{ border-color:var(--terracotta-300); color:var(--accent); }

/* ============================================================
   Case-style Outcome + bottom nav — unified with the work pages
   (sticky rail · serif title · icon markers · 3-part nav bar).
   Used on the build pages in place of the old .outcome / .cback.
   ============================================================ */
.bcase{ display:grid; grid-template-columns:clamp(110px,15vw,184px) minmax(0,1fr); gap:clamp(28px,5vw,72px);
  align-items:start; border-top:1px solid var(--rule); margin-top:clamp(2.4rem,5.5vw,3.6rem); padding-top:clamp(2.4rem,5.5vw,3.6rem); }
.bcase-rail{ position:sticky; top:104px; align-self:start; }
/* label matches the build pages' own serif-terracotta headings (NOT the work pages' number + mono eyebrow) */
.bcase-eyebrow{ font-family:var(--font-serif); font-weight:500; font-style:italic; font-size:clamp(1.4rem,2.5vw,1.9rem);
  color:var(--text-accent); line-height:1.2; }
.bcase-title{ font-family:var(--font-serif); font-weight:500; font-size:clamp(1.9rem,3.1vw,2.7rem);
  line-height:1.12; letter-spacing:-.012em; margin:0 0 40px; color:var(--text-primary); text-wrap:pretty; }
.bcase-title em{ font-style:italic; color:var(--text-accent); }
.bmarks{ display:flex; flex-direction:column; gap:clamp(26px,3.5vw,38px); margin-top:8px; }
/* icon vertically centers to the whole point (label + statement) — flex-start left
   it pinned to the top and looking stranded once a statement wrapped to two lines. */
.bmark{ display:flex; gap:20px; align-items:center; }
.bmark-ico{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px;
  border-radius:var(--radius-pill); background:var(--terracotta-50); color:var(--terracotta-600); }
.bmark-ico svg{ width:20px; height:20px; }
.bmark-body{ min-width:0; }
.bmark-label{ font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-subtle); margin-bottom:8px; }
.bmark-stmt{ font-family:var(--font-serif); font-weight:500; font-size:clamp(1.18rem,1.5vw,1.4rem);
  line-height:1.3; margin:0; color:var(--text-primary); max-width:640px; text-wrap:pretty; }
.bmark-stmt em{ font-style:italic; color:var(--text-accent); }

.bnav{ margin-top:clamp(56px,7vw,76px); padding-bottom:clamp(36px,4.5vw,48px); }
.bnav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:36px; border-top:1px solid var(--border-subtle); }
.bnav-mid{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-subtle); white-space:nowrap; }
.bnav a{ display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:var(--radius-pill);
  font-family:var(--font-sans); font-weight:600; font-size:14px; text-decoration:none; line-height:1;
  transition:border-color .15s,color .15s,background .15s,filter .15s; }
.bnav .nav-ghost{ background:transparent; color:var(--text-primary); border:1px solid var(--border-strong); }
.bnav .nav-ghost:hover{ border-color:var(--ink); }
.bnav .nav-next{ background:var(--terracotta-500); color:var(--text-on-accent); border:1px solid var(--terracotta-500); }
.bnav .nav-next:hover{ filter:brightness(1.05); }
@media(max-width:760px){ .bcase{ grid-template-columns:1fr; gap:1rem; }
  .bcase-rail{ position:static; margin-bottom:.2rem; } }
@media(max-width:560px){ .bnav-inner{ flex-wrap:wrap; gap:16px; }
  .bnav-mid{ order:3; flex-basis:100%; text-align:center; } .bnav a{ flex:1; justify-content:center; } }
.cback a .arr{ color:var(--accent); transition:transform .25s var(--ease); }
.cback a:hover .arr{ transform:translateX(-3px); }

/* ---------- footer credits (same line as the main page) ---------- */
footer{ margin-top:0; }   /* build pages: .cback already spaces the button; drop the 1rem so it sits symmetrically */
.foot-note{ font-size:.78rem; color:rgba(250,248,246,.82); }
.foot-link{ color:var(--text-on-accent); text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-sans); font-weight:600;
  font-size:.92rem; text-decoration:none; border-radius:12px; padding:.7rem 1.15rem; line-height:1;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn-primary{ background:var(--terracotta-500); color:var(--text-on-accent); border:1px solid var(--terracotta-500); }
.btn-primary:hover{ background:var(--terracotta-600); border-color:var(--terracotta-600); }
.btn-secondary{ background:var(--surface); color:var(--ink); border:1px solid var(--border-subtle); }
.btn-secondary:hover{ border-color:var(--terracotta-300); color:var(--accent); }
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }

/* ---------- device mockups ---------- */
.devices{ display:flex; gap:clamp(1rem,2.5vw,1.6rem) 0; justify-content:space-evenly; align-items:flex-start;
  flex-wrap:wrap; margin:clamp(2.2rem,6vw,3.4rem) 0; }   /* even gaps incl. both edges (column-gap 0 → space-evenly controls it) */
.device{ display:flex; flex-direction:column; align-items:center; gap:.85rem; }
.device .cap{ display:none; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }   /* screen captions hidden — screens stand on their own */

/* phone (HHH) */
.phone{ width:min(228px,30vw); background:#241E18; border-radius:30px; padding:8px;
  box-shadow:0 8px 22px rgba(31,25,21,.07); }
.phone .scr{ display:block; width:100%; border-radius:26px; }

/* laptop (Shovl) */
.laptop{ width:min(460px,90vw); }
.laptop .lid{ background:#241E18; border-radius:16px 16px 4px 4px; padding:11px 11px 12px; }
.laptop .scr{ display:block; width:100%; border-radius:5px; }
.laptop .base{ height:13px; margin:0 -22px; border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#cfc8c0,#b3aaa0); box-shadow:0 10px 20px rgba(31,25,21,.07); position:relative; }
.laptop .base::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:80px; height:5px; border-radius:0 0 6px 6px; background:#9c948b; }

/* clickable screens → enlarge in a lightbox */
.scr.zoom{ cursor:zoom-in; transition:filter .15s ease; }
.scr.zoom:hover{ filter:brightness(1.04); }
.lightbox{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,5vw,3.5rem); background:rgba(31,25,21,.6); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .26s ease, visibility .26s; cursor:zoom-out; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(1080px,100%); max-height:100%; border-radius:8px;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.55); transform:scale(.97); transition:transform .26s ease; }
.lightbox.open img{ transform:scale(1); }
@media(prefers-reduced-motion:reduce){ .lightbox, .lightbox img, .scr.zoom{ transition:none; } }

/* ---------- tech chips ---------- */
.tech{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 0; }
.tech span{ font-family:var(--font-mono); font-size:.7rem; color:var(--earth); background:var(--surface);
  border:1px solid var(--rule); border-radius:999px; padding:.36rem .72rem; }

/* ---------- feature grid ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.4rem 0 0; }
.feature{ background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:1.2rem 1.3rem; }
.feature .ficon{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; background:var(--terracotta-50); color:var(--accent); margin:0 0 .9rem; }
.feature .ficon svg{ width:21px; height:21px; display:block; }
/* cards without an icon keep the small accent rule (fallback until icons roll out everywhere) */
.feature:not(:has(.ficon)) h4::before{ content:""; display:block; width:26px; height:2.5px; border-radius:2px; background:var(--accent); margin:0 0 .75rem; }
.feature h4{ font-family:var(--serif); font-weight:500; font-size:1.08rem; margin:0 0 .4rem; line-height:1.2; }
.feature p{ font-size:.92rem; color:var(--earth); line-height:1.55; margin:0; max-width:none; }
@media(max-width:880px){ .feat-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .feat-grid{ grid-template-columns:1fr; } }

/* ---------- visual-style palette ---------- */
.palette{ display:flex; flex-wrap:wrap; gap:clamp(.8rem,2.5vw,1.4rem); margin:1.5rem 0 0; }
.palette span{ display:flex; flex-direction:column; gap:.55rem; align-items:flex-start;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.palette span::before{ content:""; width:clamp(60px,13vw,88px); height:46px; border-radius:10px; background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(31,25,21,.07); }
.type-note{ font-family:var(--font-mono) !important; font-size:.72rem !important; color:var(--muted) !important;
  letter-spacing:.02em; margin:1.3rem 0 0 !important; }

/* ---------- mini design-system / brand sample (How it looks) ---------- */
.brandcard{ border:1px solid var(--rule); border-radius:16px; background:var(--surface); overflow:hidden;
  margin:1.6rem 0 0; max-width:640px; box-shadow:0 6px 20px rgba(31,25,21,.05); }
.bc-head{ display:flex; align-items:center; gap:1.15rem; padding:1.25rem 1.5rem; border-bottom:1px solid var(--rule); }
.bc-mark{ flex:none; height:48px; display:flex; align-items:center; }   /* icon only — no circle/ring container, no background */
.bc-mark img{ height:100%; width:auto; display:block; }
.bc-id{ display:flex; flex-direction:column; gap:.32rem; }
.bc-id b{ font-family:'Sora',var(--font-sans); font-weight:700; font-size:1.18rem; line-height:1.05; letter-spacing:-.01em; color:var(--ink); }
.bc-id i{ font-family:'Figtree',var(--font-sans); font-style:normal; font-weight:600; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.bc-row{ display:flex; align-items:center; gap:1.2rem; padding:1.1rem 1.5rem; }
.bc-row + .bc-row{ border-top:1px solid var(--rule); }
.bc-lbl{ font-family:'Figtree',var(--font-sans); font-weight:600; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); width:62px; flex:none; }
.bc-sw{ display:flex; gap:1rem; flex-wrap:wrap; }
.bc-sw span{ display:flex; flex-direction:column; gap:.45rem; font-family:'Figtree',var(--font-sans); font-size:.6rem; line-height:1.3; }
.bc-sw span::before{ content:""; width:46px; height:46px; border-radius:10px; background:var(--c); box-shadow:inset 0 0 0 1px rgba(31,25,21,.12); }
.bc-sw b{ font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--earth); }
.bc-sw i{ font-style:normal; color:var(--muted); }
.bc-type{ display:flex; align-items:center; gap:1.25rem; }
.bc-num{ font-family:'Sora',var(--font-sans); font-weight:700; font-size:2.15rem; color:var(--ink); line-height:1; letter-spacing:-.01em; }
.bc-aa{ font-family:'Figtree',var(--font-sans); font-weight:500; font-size:1.9rem; color:var(--ink); line-height:1; }
.bc-tnote{ font-family:'Figtree',var(--font-sans); font-weight:500; font-size:.62rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); line-height:1.55; }
.bc-btns{ display:flex; gap:.65rem; align-items:center; }
.bc-btn{ font-family:'Figtree',var(--font-sans); font-weight:600; font-size:.85rem; padding:.58rem 1.05rem; border-radius:14px; line-height:1; }
.bc-btn.primary{ background:#627d23; color:#fff; border:1px solid #627d23; box-shadow:0 5px 12px rgba(98,125,35,.40); }
.bc-btn.ghost{ background:#f0f6e8; color:#546e0d; border:1px solid #cedfb4; }
.bc-els{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.bc-chip{ display:inline-flex; align-items:center; font-family:'Figtree',var(--font-sans); font-weight:600; font-size:.72rem;
  padding:.3rem .68rem; border-radius:999px; background:#f0f6e8; color:#546e0d; }
.bc-toggle{ width:34px; height:19px; border-radius:999px; background:#5E7C2E; position:relative; flex:none; }
.bc-toggle::after{ content:""; position:absolute; top:2px; left:17px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.18); }
.bc-field{ font-family:'Figtree',var(--font-sans); font-size:.74rem; color:#6c6154;
  padding:.42rem .72rem; border-radius:11px; border:1px solid #bfb6aa; background:#fefbf6; }
.bc-card{ width:46px; height:30px; border-radius:12px; background:#fefbf6; border:1px solid #f2eadb; box-shadow:0 4px 10px rgba(39,29,18,.09); flex:none; }

/* ---------- app design-system card (How it looks) — mirrors the real exported "Sand Olive" DS ---------- */
.dscard{ --ds-card:oklch(.99 .008 85); --ds-sunk:oklch(.94 .022 85); --ds-pale:oklch(.965 .02 125);
  --ds-line:oklch(.3 .04 85/.12); --ds-text:oklch(.24 .025 70); --ds-muted:oklch(.5 .025 75);
  --ds-heading:oklch(.38 .02 75); --ds-accent:oklch(.55 .12 125); --ds-accent-soft:oklch(.88 .06 125);
  --ds-rail:oklch(.9 .025 85); --ds-danger:oklch(.6 .18 25);
  max-width:none; margin:1.5rem 0 0; background:var(--ds-card); border:1px solid var(--ds-line);
  border-radius:20px; padding:clamp(1.5rem,3.2vw,2.1rem); box-shadow:0 18px 40px -22px oklch(.24 .02 70/.3);
  font-family:'Figtree',var(--font-sans); color:var(--ds-text); }
.ds-brand{ display:flex; align-items:center; gap:1.1rem; padding-bottom:1.3rem; }
.ds-logo{ width:62px; height:62px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--ds-pale); border:1px solid var(--ds-line); border-radius:16px; }
.ds-logo img{ width:40px; height:40px; object-fit:contain; }
.ds-id b{ font-family:'Sora',var(--font-sans); font-weight:600; font-size:1.18rem; letter-spacing:-.02em; color:var(--ds-heading); display:block; }
.ds-id .v{ font-family:'Sora',var(--font-sans); font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--ds-accent); display:block; margin:.32rem 0 .18rem; }
.ds-id .t{ font-size:.8rem; color:var(--ds-muted); display:block; }
.ds-sec{ padding:1.2rem 0; }
.ds-sec:last-child{ border-bottom:none; padding-bottom:0; }
.ds-head{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.ds-head span{ font-family:'Sora',var(--font-sans); font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--ds-heading); white-space:nowrap; }
.ds-head::after{ content:""; flex:1; height:1px; background:var(--ds-line); }
.ds-sw{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.ds-sw span{ display:block; min-width:0; }
.ds-sw span::before{ content:""; display:block; height:42px; border-radius:9px; border:1px solid var(--ds-line); background:var(--c); margin-bottom:.42rem; }
.ds-sw b{ display:block; font-size:.64rem; font-weight:600; color:var(--ds-heading); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-sw i{ display:block; font-style:normal; font-family:var(--font-mono); font-size:.54rem; color:var(--ds-muted); margin-top:.12rem; }
.ds-macros{ display:flex; flex-wrap:wrap; gap:.7rem 1.7rem; margin-top:1.2rem; }
.ds-macros .m{ display:inline-flex; align-items:center; gap:.48rem; font-size:.72rem; color:var(--ds-text); }
.ds-macros .mi{ display:inline-flex; flex:none; }
.ds-macros svg{ width:18px; height:18px; display:block; }
.ds-type{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.ds-tl{ font-family:'Sora',var(--font-sans); font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--ds-muted); display:block; margin-bottom:.4rem; }
.ds-disp{ font-family:'Sora',var(--font-sans); font-weight:600; font-size:1.5rem; letter-spacing:-.02em; color:var(--ds-heading); }
.ds-bd{ font-size:.95rem; line-height:1.5; color:var(--ds-text); }
.ds-scale{ display:flex; align-items:flex-end; gap:clamp(1.3rem,4vw,2.4rem); margin-top:1rem; }
.ds-scale span{ display:flex; flex-direction:column; align-items:center; gap:.34rem; }
.ds-scale b{ font-family:'Sora',var(--font-sans); font-weight:600; color:var(--ds-heading); line-height:1; }
.ds-scale i{ font-style:normal; font-size:.52rem; letter-spacing:.02em; color:var(--ds-muted); white-space:nowrap; }
.ds-surf{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.ds-surf span{ background:var(--ds-card); border:1px solid var(--ds-line); border-radius:14px; padding:.7rem; text-align:center; font-size:.56rem; color:var(--ds-muted); }
.ds-surf span i{ display:block; height:30px; background:var(--ds-sunk); margin-bottom:.5rem; }
.ds-surf .lift{ box-shadow:0 12px 26px -16px oklch(.24 .02 70/.35); }
.ds-comp{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
.ds-btn{ font-family:'Figtree',var(--font-sans); font-weight:600; font-size:.78rem; border:none; border-radius:13px; line-height:1; }
.ds-btn.pri{ background:var(--ds-accent); color:#fff; padding:.55rem 1rem; box-shadow:0 6px 12px -6px oklch(.55 .12 125/.6); }
.ds-btn.out{ background:var(--ds-pale); color:var(--ds-accent); padding:.5rem 1rem; border:1.5px solid oklch(.88 .03 125); }
.ds-btn.gho{ background:transparent; color:var(--ds-accent); padding:.55rem .4rem; }
.ds-chip{ background:var(--ds-pale); color:var(--ds-accent); font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; padding:.28rem .65rem; border-radius:999px; }
.ds-toggle{ width:38px; height:22px; background:var(--ds-accent); border-radius:999px; padding:2px; display:inline-flex; flex:none; }
.ds-toggle::after{ content:""; width:18px; height:18px; background:#fff; border-radius:50%; margin-left:auto; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.ds-rings{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(1.5rem,5vw,3.2rem); flex-wrap:wrap; margin:.3rem 0 1.9rem; }
.cbig{ display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.cring{ position:relative; width:200px; height:200px; overflow:visible; }
.cring svg{ width:200px; height:200px; display:block; overflow:visible; }
.cbig .cc{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.cbig .cn{ font-family:'Sora',var(--font-sans); font-weight:600; font-size:2.5rem; letter-spacing:-.02em; color:var(--ds-text); line-height:1; font-variant-numeric:tabular-nums; }
.cbig .crng{ font-size:.5rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--ds-muted); margin-top:.45rem; }
.cbig .covr{ font-size:.62rem; color:var(--ds-muted); margin-top:.32rem; }
.cbig .covr b{ font-weight:700; color:var(--ds-danger); }
.cbig .covr.under b{ color:var(--ds-heading); }
.cbig .cstate{ font-size:.55rem; font-weight:600; text-transform:uppercase; letter-spacing:.13em; color:var(--ds-muted); }
.ds-charts{ display:flex; align-items:flex-start; justify-content:center; gap:clamp(2rem,5vw,3.5rem); flex-wrap:wrap; }
.ds-mrings{ display:flex; gap:clamp(.9rem,2.5vw,1.5rem); margin-top:33px; }
@media(max-width:680px){ .ds-mrings{ margin-top:0; } }
.ds-mr{ display:flex; flex-direction:column; align-items:center; gap:.42rem; }
.ds-mr .ring{ position:relative; width:76px; height:76px; }
.ds-mr .ring svg{ width:76px; height:76px; display:block; }
.ds-mr .pc{ position:absolute; inset:0; display:grid; place-items:center; }
.ds-mr .pc b{ font-family:'Sora',var(--font-sans); font-weight:700; font-size:.98rem; color:var(--ds-text); }
.ds-mr .pc i{ font-style:normal; font-size:.58rem; color:var(--ds-muted); }
.ds-mr .nm{ display:inline-flex; align-items:center; gap:.3rem; font-size:.64rem; color:var(--ds-text); }
.ds-mr .nm svg{ width:12px; height:12px; flex:none; }
.ds-mr .ms{ font-size:.55rem; color:var(--ds-muted); }
.ds-week{ width:min(250px,100%); flex:none; }
.wk-head{ font-size:.5rem; text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:var(--ds-muted); margin-bottom:.5rem; }
.wbars2{ display:flex; align-items:flex-end; gap:6px; height:142px; position:relative; }
.wband{ position:absolute; left:0; right:0; top:32%; height:12.4%; background:var(--ds-accent); opacity:.07; z-index:0; }
.wbars2::before, .wbars2::after{ content:""; position:absolute; left:0; right:0; border-top:1px dashed var(--ds-rail); z-index:0; }
.wbars2::before{ top:32%; }
.wbars2::after{ top:44.4%; }
.wbars2 .bar{ flex:1; border-radius:3px 3px 0 0; background:var(--ds-accent-soft); position:relative; z-index:1; }
.wbars2 .bar.on{ background:var(--ds-accent); }
.wlabs{ display:flex; gap:7px; margin-top:.42rem; }
.wlabs span{ flex:1; text-align:center; font-size:.56rem; color:var(--ds-muted); }
.wavg{ font-size:.58rem; color:var(--ds-muted); margin-top:.55rem; }
.wavg b{ color:var(--ds-text); font-weight:700; }
@media(max-width:600px){ .dscard .ds-sw{ grid-template-columns:1fr 1fr; } .dscard .ds-type{ grid-template-columns:1fr; } }

/* ---------- Shovl variant (indigo / slate · Inter) — DRAFT mockup, reconcile with her DS summary ---------- */
.dscard.shovl{ --ds-card:#fff; --ds-sunk:#eff1f4; --ds-pale:#ebedfc; --ds-line:#e0e7ef;
  --ds-text:#0e1629; --ds-muted:#64748b; --ds-heading:#0e1629; --ds-accent:#3137e1; --ds-accent-soft:#c4c7f6;
  background:#f8f9fa; box-shadow:0 18px 40px -22px rgba(14,22,41,.2); }
.dscard.shovl, .dscard.shovl *{ font-family:'Inter',var(--font-sans); }
.dscard.shovl .ds-id .v{ letter-spacing:.18em; }
.dscard.shovl .ds-disp{ font-weight:700; }
.dscard.shovl .ds-logo{ background:transparent; border:none; overflow:hidden; border-radius:14px; }
.dscard.shovl .ds-logo img{ width:119%; height:119%; margin:-9.5%; display:block; }
.dscard.shovl .ds-btn{ border-radius:10px; }
.dscard.shovl .ds-btn.pri{ box-shadow:0 6px 14px -6px rgba(49,55,225,.5); }
.dscard.shovl .ds-btn.out{ background:var(--ds-sunk); border:none; color:var(--ds-heading); }
.dscard.shovl .ds-surf .lift{ box-shadow:0 10px 24px -14px rgba(14,22,41,.26); }
.sv-pill{ display:inline-flex; align-items:center; font-size:.72rem; font-weight:500; padding:.28rem .7rem; border-radius:999px; border:1px solid transparent; }
.sv-pill.applied{ color:#3c83f5; background:rgba(60,131,245,.1); border-color:rgba(60,131,245,.22); }
.sv-pill.interviewing{ color:#fabd23; background:rgba(250,189,35,.12); border-color:rgba(250,189,35,.28); }
.sv-pill.offer{ color:#16a149; background:rgba(22,161,73,.1); border-color:rgba(22,161,73,.22); }
.sv-pill.rejected{ color:#ee4343; background:rgba(238,67,67,.1); border-color:rgba(238,67,67,.22); }
.sv-banner{ display:flex; align-items:center; gap:.55rem; background:var(--ds-pale); border:1px solid #dadcfb; border-radius:12px; padding:.7rem .9rem; margin-bottom:.8rem; font-size:.74rem; color:var(--ds-text); }
.sv-banner svg{ width:17px; height:17px; color:var(--ds-accent); flex:none; }
.sv-banner b{ font-weight:600; }
.sv-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
.sv-stat{ display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--ds-line); border-radius:12px; padding:.72rem .8rem; }
.sv-stat .si{ width:38px; height:38px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; background:var(--ds-pale); color:var(--ds-accent); }
.sv-stat .si svg{ width:19px; height:19px; }
.sv-stat .st{ min-width:0; display:flex; flex-direction:column; }
.sv-stat .sl{ font-size:.5rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ds-muted); }
.sv-stat .sn{ font-weight:700; font-size:1.3rem; color:var(--ds-heading); line-height:1.15; }
.sv-stat .sn small{ font-size:.56rem; font-weight:500; color:var(--ds-muted); margin-left:.4rem; }
@media(max-width:600px){ .dscard.shovl .sv-stats{ grid-template-columns:1fr; } }

/* ---------- code / terminal panel (Starter Pack, no device) ---------- */
.codeblock{ background:#241E18; border-radius:16px; padding:clamp(1.3rem,3.5vw,2.1rem); max-width:560px;
  margin:0 auto; font-family:var(--font-mono); font-size:.8rem; line-height:1.8; color:#E7E0D8;
  box-shadow:0 10px 26px rgba(31,25,21,.08); overflow-x:auto; }
.codeblock.hero-term{ width:min(264px,48vw); max-width:none; margin:0; flex:none;
  font-size:.72rem; line-height:1.9; padding:1.3rem 1.45rem; box-shadow:0 8px 22px rgba(31,25,21,.08); }
.codeblock .bar{ display:flex; gap:.45rem; margin-bottom:1.1rem; }
.codeblock .bar i{ width:11px; height:11px; border-radius:50%; background:#4a423b; display:block; }
.codeblock pre{ margin:0; white-space:pre; font:inherit; }
.codeblock .dim{ color:#9b948b; }
.codeblock .acc{ color:#E0A07F; }
.codeblock .ok{ color:#9bbf8f; }
.codeblock .dir{ color:#F4EEE8; font-weight:600; }

/* ---------- decision list (numbered) ---------- */
.decisions{ list-style:none; margin:1.4rem 0 0; padding:0; counter-reset:dec; max-width:64ch; }
.decisions li{ position:relative; padding:0 0 1.3rem 1.85rem; counter-increment:dec; }
.decisions li:last-child{ padding-bottom:0; }
.decisions li::before{ content:"✓"; position:absolute; left:0; top:.22rem;
  font-size:.66rem; font-weight:700; color:var(--accent); background:var(--warm-100);
  border:1px solid var(--warm-200); border-radius:5px; width:1.2rem; height:1.2rem;
  display:flex; align-items:center; justify-content:center; }
.decisions li b{ color:var(--ink); font-weight:600; }
.decisions .dt{ display:block; font-family:var(--serif); font-size:1.08rem; color:var(--ink); margin:.1rem 0 .25rem; }
.decisions .dd{ font-size:.96rem; color:var(--earth); line-height:1.6; }