styles.css

/* ============================================================
   Storage Cost Calculator, in the huggingface.co design language
   Source Sans 3 (Hub UI) · IBM Plex Mono (repo names / figures)
   Flat gray surfaces · hairline borders · #FFD21E as accent · dark by default
   ============================================================ */

/* ---------- fonts (self-hosted, SIL OFL: see fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --paper:        #FFFFFF;
  --paper-2:      #F9FAFB;   /* gray-50: subtle section fill */
  --card:         #FFFFFF;
  --ink:          #111827;   /* gray-900 */
  --ink-soft:     #4B5563;   /* gray-600 */
  --ink-faint:    #6B7280;   /* gray-500: small print, holds 4.8:1 on white */
  --line:         #E5E7EB;   /* gray-200 */
  --line-soft:    #F3F4F6;   /* gray-100 */
  --on-ink:       #FFFFFF;   /* text on an ink-filled (selected) chip */

  --hf:           #FFD21E;   /* Hugging Face yellow */
  --hf-deep:      #FF9D00;   /* HF orange (gradient / hover) */
  --hf-text:      #B45309;   /* amber-700: hf-deep is too light for text on white */
  --hf-wash:      rgba(255, 210, 30, .20);   /* active pricing row */

  --save:         #047857;   /* emerald-700: 600 missed AA for small text on the tinted note */
  --save-bg:      #ECFDF5;   /* emerald-50 */
  --pill-save-bg: #DCFCE7;   /* green-100, as on hf.co pricing "% off" pills */
  --pill-save-ink:#15803D;   /* green-700 */

  --cost:         #DC2626;   /* red-600 */

  --tag-bg:       rgba(96, 165, 250, .10);   /* blue-400/10: hf.co section tag */
  --tag-ink:      #2563EB;   /* blue-600 */
  --check-bg:     #DBEAFE;   /* blue-100 */
  --check-ink:    #2563EB;

  --focus:        #3B82F6;   /* blue-500 focus ring, as on the Hub */

  /* hf.co landing buttons: primary is ink-filled, secondary is gray,
     both ringed with a 3px page-coloured gap and a 1px outline */
  --btn-bg:       #000000;
  --btn-ink:      #FFFFFF;
  --btn-ring:     #9CA3AF;
  --btn2-bg:      #E5E7EB;
  --btn2-ink:     #111827;
  --btn2-ring:    #D1D5DB;

  --shadow-sm:    0 1px 2px rgba(17,24,39,.05);
  --shadow-float: 0 2px 12px rgba(0,0,0,.08);

  --radius:       12px;
  --radius-sm:    8px;

  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ui:   "Source Sans 3", "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --display: var(--ui);
}

/* hf.co dark mode: gray-950 canvas, gray-900 panels, gray-800 borders.
   Accents move to the Tailwind 400 shades so they hold AA on dark panels. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:        #0B0F19;
  --paper-2:      #0D131F;   /* recessed fill inside panels */
  --card:         #111827;   /* gray-900 */
  --ink:          #E5E7EB;   /* gray-200 */
  --ink-soft:     #9CA3AF;   /* gray-400 */
  --ink-faint:    #7C8491;   /* gray-500 lifted to 4.7:1 on --card */
  --line:         #1F2937;   /* gray-800 */
  --line-soft:    #1A2230;
  --on-ink:       #111827;

  --hf-text:      #FBBF24;   /* amber-400 */
  --hf-wash:      rgba(255, 210, 30, .16);   /* .08 read as grey-brown on the dark card */

  --save:         #34D399;   /* emerald-400 */
  --save-bg:      rgba(16, 185, 129, .10);
  --pill-save-bg: rgba(20, 83, 45, .50);    /* green-900/50 */
  --pill-save-ink:#4ADE80;                  /* green-400 */

  --cost:         #F87171;   /* red-400 */

  --tag-bg:       rgba(37, 99, 235, .12);
  --tag-ink:      #3B82F6;   /* blue-500 */
  --check-bg:     rgba(30, 58, 138, .50);   /* blue-900/50 */
  --check-ink:    #60A5FA;   /* blue-400 */

  --focus:        #60A5FA;

  --btn-bg:       #FFFFFF;
  --btn-ink:      #000000;
  --btn-ring:     #6B7280;   /* gray-500 */
  --btn2-bg:      #1F2937;   /* gray-800 */
  --btn2-ink:     #E5E7EB;
  --btn2-ring:    #374151;   /* gray-700 */

  --shadow-sm:    0 1px 2px rgba(0,0,0,.40);
  --shadow-float: 0 2px 12px rgba(0,0,0,.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ui);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* one visible focus ring for every keyboard-reachable control */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px;
}

.wrap {
  position: relative; z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px) clamp(18px, 4vw, 40px) 56px;
}

/* ---------- theme toggle ---------- */
/* theme toggle: sits in the page corner, outside .wrap */
#theme-toggle {
  position: absolute; top: 16px; left: 16px; z-index: 10;
  width: 40px; height: 40px; border-radius: 50%; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-float); cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
#theme-toggle:active { transform: scale(.92); }
#theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 50%; }
#theme-toggle .icon-wrapper { display: grid; place-items: center; width: 20px; height: 20px; }
#theme-toggle .icon { grid-area: 1 / 1; }
/* opacity follows data-theme so the right icon shows before theme.js runs */
#theme-toggle .icon--moon { opacity: 0; }
:root[data-theme="dark"] #theme-toggle .icon--sun { opacity: 0; }
:root[data-theme="dark"] #theme-toggle .icon--moon { opacity: 1; }
#theme-toggle .icon-wrapper.animated .icon { transition: opacity .35s ease; }
#theme-toggle .icon-wrapper.spin-cw  { animation: spin-cw .5s cubic-bezier(.4,0,.2,1); }
#theme-toggle .icon-wrapper.spin-ccw { animation: spin-ccw .5s cubic-bezier(.4,0,.2,1); }
@keyframes spin-cw  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  #theme-toggle .icon-wrapper.spin-cw, #theme-toggle .icon-wrapper.spin-ccw { animation: none; }
}

/* ---------- trust line (hf.co/storage wording) ---------- */
.trust {
  font-size: 15px; color: var(--ink-soft); text-align: center;
  padding-bottom: 12px; line-height: 40px; /* centres on the corner toggle */
}
.trust b { color: var(--ink); font-weight: 600; }
/* once the page narrows, the centred line runs under the corner theme toggle;
   symmetric padding clears it without un-centring the line */
@media (max-width: 860px) {
  .trust { padding-inline: 48px; line-height: 1.4; padding-top: 10px; }
}

/* ---------- headline ---------- */
.lede { margin: 4px 0 28px; }
.lede h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.025em;
  white-space: nowrap;
}
/* light: the HF highlighter band behind the phrase */
.lede h1 em, .cta h2 em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 60%, var(--hf) 60%, var(--hf) 92%, transparent 92%);
  padding: 0 2px;
}
/* dark: the phrase itself takes the yellow-to-orange brand gradient, the way
   hf.co/storage sets "Storage Buckets" in its blue gradient */
:root[data-theme="dark"] .lede h1 em, :root[data-theme="dark"] .cta h2 em {
  background: linear-gradient(90deg, var(--hf) 10%, var(--hf-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--hf);
  padding: 0;
}

/* ---------- main grid ---------- */
.console {
  display: grid;
  grid-template-columns: 0.86fr 1.05fr;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---------- inputs ---------- */
.inputs {
  padding: clamp(20px, 2.6vw, 30px);
  border-right: 1px solid var(--line);
}
.panel-label {
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink); line-height: 1.2; margin-bottom: 20px;
}

.field { margin-bottom: 24px; }
.field:last-child { margin-bottom: 0; }
.field .top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 2px;
}
.field .lbl { font-size: 15px; font-weight: 600; color: var(--ink); }
.field .val { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.field .val .unit { color: var(--ink-faint); font-size: 12px; margin-left: 1px; }
.field .hint { font-size: 13px; color: var(--ink-faint); margin-top: 7px; line-height: 1.45; }
.field .hint b { color: var(--ink-soft); font-weight: 600; }

/* range slider (the filled part is painted by app.js) */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: var(--line); margin: 12px 0 2px;
  cursor: pointer;
}
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm); cursor: grab; transition: transform .12s ease;
}
input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
input[type="range"]::-moz-range-thumb {
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--ink); box-shadow: var(--shadow-sm); cursor: grab;
}
/* keyboard focus rings the thumb rather than the whole track */
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--focus); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--focus); }

/* segmented control */
.seg {
  display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper-2); padding: 2px; gap: 2px;
}
.seg button {
  font-family: var(--ui); font-size: 14px; font-weight: 600;
  color: var(--ink-soft); background: transparent; border: 0;
  padding: 4px 13px; border-radius: 6px; cursor: pointer; transition: all .15s ease;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-sm); }

/* provider tabs */
.providers { display: flex; gap: 7px; flex-wrap: wrap; }
.providers button {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ui); font-size: 14px; font-weight: 600;
  color: var(--ink-soft); background: var(--card); border: 1px solid var(--line);
  padding: 6px 13px; border-radius: var(--radius-sm); cursor: pointer; transition: all .15s ease;
}
.providers button:hover { border-color: var(--ink-faint); color: var(--ink); }
.providers button[aria-pressed="true"] {
  background: var(--ink); color: var(--on-ink); border-color: var(--ink);
}
.plogo { width: 16px; height: 16px; display: block; flex: none; }

.row-split { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

/* ---------- volume pricing table ---------- */
.field.vp { margin-top: 26px; }
.vp-table {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; margin-top: 10px; background: var(--card);
}
.vp-row {
  display: grid; grid-template-columns: 1fr 64px 64px;
  padding: 6px 12px; font-size: 14px; align-items: baseline;
  border-bottom: 1px solid var(--line);
}
.vp-row:last-child { border-bottom: 0; }
.vp-vol { color: var(--ink-soft); }
.vp-rate {
  font-family: var(--mono); font-size: 13.5px; text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums; color: var(--ink-faint);
}
.vp-rate.act { color: var(--ink); }
.vp-head { background: var(--paper-2); padding: 6px 12px; }
.vp-head .vp-vol, .vp-head .vp-rate {
  font-family: var(--ui); font-size: 13px; color: var(--ink-faint); font-weight: 600;
}
.vp-head .vp-rate.act { color: var(--ink); }
/* the bracket your slider position lands in */
.vp-row.on { background: var(--hf-wash); box-shadow: inset 3px 0 0 var(--hf); }
.vp-row.on .vp-vol { color: var(--ink); font-weight: 700; }
.vp-row.on .vp-rate.act { font-weight: 600; }
:root[data-theme="dark"] .vp-row.on .vp-rate.act { color: var(--hf); }

/* ---------- results ---------- */
.results { padding: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; }

/* savings card: neutral, like the hf.co pricing cards; only the figure is green */
.headline {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 20px; margin-bottom: 20px;
}
.headline .cap {
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
  line-height: 1.3; margin-bottom: 6px;
}
.headline .figure {
  font-family: var(--ui); font-weight: 800;
  font-size: clamp(42px, 6.3vw, 60px); line-height: 1; color: var(--save);
  letter-spacing: -.025em; font-variant-numeric: tabular-nums lining-nums;
}
.headline .figure .per { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--ink-faint); margin-left: 2px; }
/* the "% lower" line reads as a hf.co discount pill */
.headline .sub {
  display: inline-block; margin-top: 14px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--pill-save-ink); background: var(--pill-save-bg);
  border-radius: 999px; padding: 2px 10px;
}
.headline .sub b { font-weight: 700; }

/* two-column ledger with a continuous divider */
.ledger { display: grid; grid-template-columns: 1fr auto 34px auto; align-items: stretch; }
.ledger > div { display: flex; align-items: center; justify-content: flex-end; }
.ledger .lc { padding: 11px 0; border-bottom: 1px solid var(--line); }
.ledger .rlabel { justify-content: flex-start; font-size: 15px; color: var(--ink-soft); white-space: nowrap; }
.ledger .rlabel .permo { color: var(--ink-faint); margin-left: 3px; font-size: 13px; }
.ledger .hfcol, .ledger .ccol {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums; color: var(--ink); min-width: 76px;
}
.ledger .ccol { color: var(--cost); min-width: 84px; }
.ledger .zero { color: var(--save); }
.ledger .total.rlabel { color: var(--ink); font-weight: 700; }
.ledger .total.hfcol { color: var(--ink); }
.ledger .lc.total { border-bottom: 0; }

/* header row */
.ledger .lh {
  padding: 0 0 8px; border-bottom: 1px solid var(--line); align-items: flex-end;
  font-family: var(--ui); font-size: 14px; color: var(--ink); font-weight: 600;
  white-space: nowrap;
}

/* the vertical divider column (continuous line, horizontal rules break around it) */
.ledger .dv { justify-content: center; padding: 0; }
.ledger .lc.dv { border-bottom: 0; }
.ledger .lc.dv::before { content: ""; width: 1px; align-self: stretch; background: var(--line); }

/* competitor column header: name row + tier chip stacked */
.comp-name-row { display: inline-flex; align-items: center; }
.ledger .lh.ccol { flex-direction: column; align-items: flex-end; justify-content: flex-end; }
.tier-chip {
  font-family: var(--ui); font-size: 12px; font-weight: 400;
  color: var(--ink-faint); margin-top: 1px; text-align: right;
  white-space: normal;
  /* allowed to wrap: on phones the ledger has less room than a one-line chip needs,
     and a nowrap chip spilled left over the HF Buckets header */
}

/* ledger + face-off logos (HF logo in markup, cloud logo set by app.js) */
.blogo { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: 6px; flex: none; }

.effective {
  margin-top: 18px; padding: 14px 16px 16px; border-radius: var(--radius);
  background: var(--paper-2); border: 1px solid var(--line);
}
.effective .elabel { font-size: 15px; font-weight: 600; color: var(--ink-soft); line-height: 1.3; }
.faceoff {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px;
  align-items: end; margin-top: 10px;
}
.fo-name {
  display: flex; align-items: center;
  font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: 1px; white-space: nowrap;
}
.fo-side.bad .fo-name { justify-content: flex-end; }
.fo-side.bad .fo-rate { text-align: right; }
.fo-num {
  font-weight: 800; font-size: clamp(24px, 3.2vw, 30px); line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums;
}
.fo-side.good .fo-num { color: var(--save); }
.fo-side.bad .fo-num { color: var(--cost); }
.fo-unit { font-size: 13px; color: var(--ink-faint); margin-left: 4px; }
.fo-vs { font-size: 14px; color: var(--ink-faint); padding-bottom: 16px; }
/* proportional underline bars: widths set by app.js, scaled to the pricier rate */
.fo-bar { height: 5px; border-radius: 999px; background: var(--line); margin-top: 8px; overflow: hidden; }
.fo-bar span { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.fo-bar.good span { background: var(--save); }
.fo-bar.bad span { background: var(--cost); margin-left: auto; } /* fills from the right, mirroring its side */
/* a rate past the top of the scale fades out on its open end, rather than
   sitting at a full track and reading as "exactly the maximum" */
.fo-bar.good span.clipped {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
}
.fo-bar.bad span.clipped {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px);
  mask-image: linear-gradient(90deg, transparent, #000 18px);
}

/* sources and assumptions */
.math { margin-top: 16px; }
.math summary {
  font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 0;
}
.math summary:hover { color: var(--ink); }
.math summary::-webkit-details-marker { display: none; }
.math summary .chev { transition: transform .2s ease; color: var(--ink-faint); flex: none; }
.math[open] summary .chev { transform: rotate(90deg); }
.math .body {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.6;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-top: 8px; background: var(--paper-2);
}
.math .body b { color: var(--ink); font-weight: 600; }
.math .body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-faint); text-underline-offset: 2px; }
.math .body a:hover { text-decoration-color: var(--ink); }
.math .body .mrow { margin-bottom: 8px; }
.math .body .src { font-size: 12.5px; color: var(--ink-faint); margin-top: 10px; }

/* ---------- storage section: tag, title, checklist + Xet evidence ---------- */
.why {
  margin-top: 56px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.tag {
  display: inline-block; margin-bottom: 14px;
  font-size: 15px; font-weight: 600; line-height: 1.5;
  color: var(--tag-ink); background: var(--tag-bg);
  border-radius: 999px; padding: 3px 14px;
}
.why h2 {
  font-size: clamp(28px, 3.4vw, 36px); font-weight: 700; line-height: 1.15;
  letter-spacing: -.01em; margin-bottom: 12px;
}
.why-lede { font-size: 17px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 20px; max-width: 520px; }
.checks { list-style: none; display: grid; gap: 12px; }
.checks li { display: flex; align-items: flex-start; gap: 12px; }
.checks p { font-size: 16px; color: var(--ink-soft); line-height: 1.5; }
.checks b { color: var(--ink); font-weight: 600; }
.checks code { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.check {
  flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--check-bg); color: var(--check-ink);
}

/* sourced Xet numbers: a plain card, set apart from the pitch as evidence */
.win-note {
  padding: 18px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  align-self: center;
}
.win-hd { font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.win-note p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; }
.win-note b { color: var(--ink); font-weight: 600; }
.win-note code { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.win-note .win-excl { font-size: 14px; color: var(--ink-faint); margin-top: 6px; }
.win-src {
  font-size: 13px; color: var(--ink-faint); line-height: 1.6;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.win-src a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--ink-faint); text-underline-offset: 2px; }
.win-src a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ---------- security grid: hairline cells, like hf.co/storage ---------- */
.security { margin-top: 56px; }
.security h2 {
  font-size: clamp(22px, 2.6vw, 26px); font-weight: 700; line-height: 1.2;
  letter-spacing: -.01em; margin-bottom: 18px;
}
.sec-grid {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.sec-grid li {
  background: var(--card); padding: 16px 18px;
  display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; row-gap: 2px; align-items: start; align-content: start;
}
.sec-grid svg { grid-row: span 2; color: var(--check-ink); margin-top: 1px; }
.sec-grid b { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.sec-grid span { font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 760px) { .sec-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .sec-grid { grid-template-columns: 1fr; } }

/* ---------- closing ---------- */
.cta {
  margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line);
  text-align: center;
}
.cta h2 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -.025em; line-height: 1.08;
  margin-bottom: 12px; text-wrap: balance;
}
.cta > p { font-size: 18px; color: var(--ink-soft); line-height: 1.5; max-width: 560px; margin: 0 auto; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-size: 17px; font-weight: 500; line-height: 28px;
  text-decoration: none; white-space: nowrap;
  padding: 10px 24px; border-radius: 999px;
  background: var(--btn2-bg); color: var(--btn2-ink);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--btn2-ring);
  transition: filter .15s ease, box-shadow .15s ease;
}
.btn.primary {
  background: var(--btn-bg); color: var(--btn-ink);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--btn-ring);
}
.btn:hover { filter: brightness(.94); }
:root[data-theme="dark"] .btn:not(.primary):hover { filter: brightness(1.2); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--focus); border-radius: 999px; }

/* plain-text address for anyone avoiding the mailto */
.cta .cta-alt { font-size: 14px; color: var(--ink-faint); margin-top: 24px; }
.email-copy {
  font-family: var(--ui); font-size: 14px; color: var(--ink-soft);
  background: none; border: 0; padding: 0; cursor: copy;
  text-decoration: underline; text-decoration-color: var(--ink-faint); text-underline-offset: 2px;
  transition: color .15s ease;
}
.email-copy:hover { color: var(--ink); text-decoration-color: var(--ink); }
.email-copy.copied { color: var(--save); text-decoration-color: transparent; font-weight: 600; }

/* footer */
.foot {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-faint);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
/* HF's official SOC 2 / GDPR marks (same files as hf.co/enterprise), kept small */
.foot .badges { display: inline-flex; gap: 10px; }
.foot .badges img { display: block; width: 44px; height: 44px; border-radius: 50%; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .lede h1 { white-space: normal; }
}
@media (max-width: 760px) {
  .console { grid-template-columns: 1fr; }
  .inputs { border-right: 0; border-bottom: 1px solid var(--line); }
  .why { grid-template-columns: 1fr; margin-top: 44px; }
  .cta { margin-top: 48px; padding-top: 44px; }
}

/* ---------- phones ---------- */
@media (max-width: 480px) {
  /* face-off: tighten the gap so both rates stay on one row */
  .faceoff { gap: 10px; }
  .fo-num { font-size: 22px; }
  .cta-actions { flex-direction: column; align-items: stretch; padding-inline: 4px; }
}

/* ---------- touch devices: larger, comfier hit targets ---------- */
@media (pointer: coarse) {
  input[type="range"] { height: 8px; margin: 14px 0 2px; }
  input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; }
  input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }

  .seg button { padding: 9px 16px; }
  .providers button { padding: 10px 14px; }

  .math summary { padding: 9px 0; }
}