/* Fenrir public homepage. Set like a printed page: paper, ink, one vermilion
   accent, hairline rules and serif numerals. One card (the model), one
   illustrative console panel, no icons. */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2");
}
/* Light is the root palette: no stored choice, an explicit Light choice,
   disabled storage and pages without JavaScript all render on paper. */
:root {
  color-scheme: light;
  --bg: #f3efe7;
  --text: #1a1713;
  --text-2: #4d463b;
  --muted: #6d655a;
  --line: #d9d1c3;
  /* The strong rule that opens each block and frames the rate table. */
  --rule: #1a1713;
  --accent: #BC3D18;
  --accent-ink: #fff;
  --accent-strong: #a3330f;
  /* The promotional price. Green is outside the editorial palette, so it is
     kept deep enough to pass contrast on paper and lifted for ink below. */
  --price-new: #1f7a3d;
  /* A shade of the page's own paper, for the one illustrative console panel. */
  --panel: #ece6da;
  --selection-bg: #f0d6cc;
  --selection-fg: #1a1713;
  --veil-0: rgba(243, 239, 231, 0);
  --glow: rgba(232, 219, 201, .36);
  --glow-2: rgba(232, 219, 201, .42);
  --font: Manrope, ui-sans-serif, system-ui, sans-serif;
  /* Display roman comes from the reader's system: Didot on Apple devices,
     Palatino on Windows, the platform serif elsewhere. The italic is ours. */
  --serif: Didot, "Bodoni 72", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --italic: "Instrument Serif", Didot, Georgia, ui-serif, serif;
  --gutter: 40px;
}

/* An explicit Dark choice, remembered per browser by theme.js. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15130f;
  --text: #f1ece3;
  --text-2: #cdc5b7;
  --muted: #a9a093;
  --line: #3a342b;
  --rule: #cdc5b7;
  --accent: #E4572E;
  --accent-ink: #15130f;
  --accent-strong: #f06a42;
  --price-new: #4ade80;
  --panel: #1d1a15;
  --selection-bg: #5a2a1a;
  --selection-fg: #f7eee5;
  --veil-0: rgba(21, 19, 15, 0);
  --glow: rgba(112, 91, 63, .22);
  --glow-2: rgba(112, 91, 63, .26);
}
/* The self-hosted mark and contour are drawn for paper; lift them for ink. */
:root[data-theme="dark"] .brand img, :root[data-theme="dark"] .wolf, :root[data-theme="dark"] .mark-3d { filter: invert(1) hue-rotate(180deg); }

@media (prefers-color-scheme: dark) {
  /* System follows the device: only an explicit System choice, stored by
     theme.js, lets a dark device turn the page dark. */
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #15130f;
    --text: #f1ece3;
    --text-2: #cdc5b7;
    --muted: #a9a093;
    --line: #3a342b;
    --rule: #cdc5b7;
    --accent: #E4572E;
    --accent-ink: #15130f;
    --accent-strong: #f06a42;
    --price-new: #4ade80;
    --panel: #1d1a15;
    --selection-bg: #5a2a1a;
    --selection-fg: #f7eee5;
    --veil-0: rgba(21, 19, 15, 0);
    --glow: rgba(112, 91, 63, .22);
    --glow-2: rgba(112, 91, 63, .26);
  }
  :root[data-theme="system"] .brand img, :root[data-theme="system"] .wolf, :root[data-theme="system"] .mark-3d { filter: invert(1) hue-rotate(180deg); }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
/* Google Tag Manager's <noscript> iframe: invisible without an inline style,
   which the page CSP (style-src 'self') would drop. */
.gtm-noscript { display: none; visibility: hidden; }
::selection { color: var(--selection-fg); background: var(--selection-bg); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, dl, dd, figure { margin: 0; }
h1, h2 { overflow-wrap: break-word; text-wrap: balance; }
p { text-wrap: pretty; }
.container { width: min(1080px, calc(100% - 96px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 16px; padding: 12px 20px; background: var(--text); color: var(--bg); z-index: 100; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

/* Masthead: it follows the page, so a long page keeps its way in. */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 72px; display: flex; align-items: center; gap: 16px 40px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.brand span { font-family: var(--serif); font-size: 19px; letter-spacing: .3em; }
.desktop-nav { display: flex; gap: 32px; margin-left: 40px; }
.desktop-nav a { display: flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--muted); transition: color .2s; }
.desktop-nav a:hover, .site-footer nav a:hover, .legal a:hover { color: var(--text); }
.auth-actions { display: inline-flex; align-items: center; gap: 18px; margin-left: auto; }
.nav-signin { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--text-2); transition: color .2s; }
.nav-signin:hover { color: var(--text); }

/* Hero: the words first, centred and plain; the wolf below them, at full size. */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(56px, 7.5vw, 104px); }
.hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
h1 { max-width: 14em; font-family: var(--serif); font-size: clamp(44px, 6.3vw, 88px); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; }
h1 em { font-family: var(--italic); font-size: 1.06em; letter-spacing: -.01em; }
.hero-description { margin-top: 26px; max-width: 30em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--text-2); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 1px solid transparent; font-size: 15px; font-weight: 600; transition: background .2s, border-color .2s, color .2s; }
.button-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.button-secondary { border-color: var(--line); color: var(--text); }
.button-secondary:hover { border-color: var(--rule); }
.button-small { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* The artwork: a wide band under the copy that dissolves into the paper at
   both ends. The 3D stage draws in the same box; the drawing stays until its
   first frame, and for good where WebGL is unavailable. */
.hero-art { position: relative; width: min(100%, 1180px); height: clamp(320px, 48vw, 660px); margin: clamp(20px, 2.6vw, 36px) auto 0; z-index: 0;
           -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 92%, transparent);
           mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 92%, transparent); }
.wolf-layer { display: block; position: absolute; inset: 0; transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--sy, 0px)), 0); transition: transform .7s ease-out, opacity 1.4s ease; }
.wolf { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; }
.mark-stage { position: absolute; inset: 0; opacity: 0; pointer-events: auto; cursor: grab; touch-action: pan-y; transition: opacity 1.4s ease;
              /* The drawing's own dissolve: the neck fades into the paper. */
              -webkit-mask-image: linear-gradient(to bottom, #000 57%, rgba(0, 0, 0, .79) 73%, transparent 86%);
              mask-image: linear-gradient(to bottom, #000 57%, rgba(0, 0, 0, .79) 73%, transparent 86%); }
.mark-stage:active { cursor: grabbing; }
.mark-3d { display: block; width: 100%; height: 100%; }
.hero[data-mark3d="on"] .mark-stage { opacity: 1; }
.hero[data-mark3d="on"] .wolf-layer { opacity: 0; }
.atmosphere { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky { position: absolute; inset: 18% -20% -20%; background: radial-gradient(ellipse at 50% 62%, var(--glow), transparent 58%); animation: sky-drift 28s ease-in-out infinite alternate; }
.sky-two { background: radial-gradient(ellipse at 0% 85%, var(--glow-2), transparent 43%); animation-delay: -14s; }
.hero-bottom { display: flex; justify-content: flex-end; padding-block: 4px 20px; }
.motion-toggle { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 13px; white-space: nowrap; transition: border-color .2s, color .2s; }
.motion-toggle:hover { border-color: var(--rule); color: var(--text); }
.motion-toggle:disabled { cursor: default; }

/* Sections: one column, centred on the page, with room to breathe. */
.section { padding-block: 0 104px; }
.hero + .section { padding-top: 4px; }
h2 { max-width: 15em; margin-bottom: 32px; font-family: var(--serif); font-size: clamp(34px, 3.6vw, 50px); font-weight: 400; line-height: 1.08; letter-spacing: -.015em; }
h3 { font-size: 18px; font-weight: 650; line-height: 1.4; letter-spacing: -.01em; }
.section-lede { max-width: 38em; margin-top: -12px; margin-bottom: 36px; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.footnote { max-width: 52em; margin-top: 26px; font-size: 14px; line-height: 1.65; color: var(--muted); }

/* The figures: three to a row, one hairline each, label under the number.
   Each label is the term and comes first in the source; the description right
   after it is the figure, drawn above it. */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
/* Each figure keeps its size while it fits its column and shrinks when it
   does not, on one line and in full: the column is a size container, and
   landing.js sets --chars, the figure's length in digit widths (thin
   punctuation counts half; .6em is a Didot digit plus a margin), and on the
   band --fit-row, the longest figure's. Every figure shares one size.
   Without the script --fit-row is 0 and --chars 1, which leaves short figures
   as drawn; a browser without container units keeps the fixed size. */
.figures div { display: flex; flex-direction: column; min-width: 0; padding-top: 20px; border-top: 1px solid var(--rule); container-type: inline-size; }
.figures dt + dd { order: -1; font-family: var(--serif); font-size: clamp(52px, 5vw, 72px); font-weight: 400; line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums; white-space: nowrap; }
@supports (container-type: inline-size) {
  .figures dt + dd { font-size: min(clamp(52px, 5vw, 72px), 100cqi / (max(var(--chars, 1), var(--fit-row, 0)) * .6)); }
}
.figures dt { margin-top: 12px; max-width: 14em; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
/* The band is its own measure: it opens the page after the artwork. */
.numbers { padding-bottom: 88px; }
.works-with { max-width: 46em; margin-top: 36px; font-size: 16px; line-height: 1.7; color: var(--text-2); }

/* Build with it: four plain blocks, title and one line each. */
.build-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; }
.build-item { padding-top: 20px; border-top: 1px solid var(--rule); }
.build-item p { max-width: 34em; margin-top: 8px; font-size: 16px; line-height: 1.7; color: var(--text-2); }

/* The model card: the one thing we serve today, as one wide row - name,
   prices, and the way to the whole table. */
.model-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 48px; padding: 24px 28px; border: 1px solid var(--line); }
.model-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.model-name { font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.2; }
.new-tag { flex-shrink: 0; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--accent); }
.model-by { margin-top: 2px; font-size: 14px; color: var(--muted); }
.model-prices { display: flex; gap: 52px; }
.model-prices dt { font-size: 13px; color: var(--muted); }
.model-prices dd { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.model-prices s { font-size: 13px; color: var(--muted); text-decoration-thickness: 1px; }
.model-unit { margin-top: 4px; font-size: 12px; color: var(--muted); }
.model-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line); text-underline-offset: 6px; }
.model-link:hover { text-decoration-color: currentColor; }
.price { font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--price-new); }
.price-cur { margin-right: .12em; font-family: var(--font); font-size: .4em; font-weight: 700; letter-spacing: 0; vertical-align: .8em; }
/* The same two prices in rupiah, one line under the dollars. landing.js fills
   it from /api/public/prices; without an answer it stays hidden. */
.model-prices dd.model-idr { margin-top: 4px; font-size: 13px; font-weight: 650; color: var(--text-2); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

/* Usage and billing: four blocks beside one small console panel, drawn from
   the page's own colours. Nothing on it is a screenshot or real customer data;
   the caption says so. */
.spend-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 56px; align-items: start; }
.spend-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 28px; }
.spend-item { padding-top: 20px; border-top: 1px solid var(--rule); }
.spend-item p { max-width: 26em; margin-top: 8px; font-size: 16px; line-height: 1.7; color: var(--text-2); }
.usage { max-width: 380px; padding: 22px 22px 18px; border: 1px solid var(--line); background: var(--panel); }
.usage-title { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.usage-chart { display: flex; align-items: flex-end; gap: 7px; height: 76px; margin-top: 18px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.usage-bar { flex: 1; min-width: 0; background: var(--accent); opacity: .28; }
.usage-bar:nth-child(1) { height: 42%; }
.usage-bar:nth-child(2) { height: 58%; }
.usage-bar:nth-child(3) { height: 34%; }
.usage-bar:nth-child(4) { height: 74%; }
.usage-bar:nth-child(5) { height: 52%; }
.usage-bar:nth-child(6) { height: 88%; }
.usage-bar:nth-child(7) { height: 62%; opacity: 1; }
.usage-totals { margin-top: 16px; }
.usage-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 5px; }
.usage-totals dt { font-size: 13px; color: var(--muted); }
.usage-totals dd { font-size: 14px; font-weight: 650; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.usage-caption { margin-top: 12px; font-size: 12px; color: var(--muted); }

/* Three short promises: one line each, under a hairline. */
.strip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.feature { padding-top: 20px; border-top: 1px solid var(--rule); }
.feature h2 { margin-bottom: 10px; font-family: var(--font); font-size: 17px; font-weight: 650; line-height: 1.4; letter-spacing: -.01em; }
.feature p { max-width: 30em; font-size: 16px; line-height: 1.7; color: var(--text-2); }

/* How it works: three numbered steps, the numeral in serif. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); margin: 0; padding: 0; list-style: none; }
.steps li { padding-top: 20px; border-top: 1px solid var(--rule); }
.step-number { display: block; font-family: var(--serif); font-size: 44px; line-height: .95; color: var(--accent); }
.steps h3 { margin-top: 18px; }
.steps p { margin-top: 8px; max-width: 30em; font-size: 16px; line-height: 1.7; color: var(--text-2); }

/* Rates: the price is the loudest thing in the section. The rate it replaces
   reads in full ink, struck in the same colour, so the two never read as a
   range. */
.rates { position: relative; width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.rates thead th { padding: 0 0 12px; border-bottom: 1px solid var(--rule); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: right; }
.rates thead th:first-child { text-align: left; }
.rates tbody th, .rates td { padding-block: 22px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rates tbody tr:last-child > * { border-bottom-color: var(--rule); }
.rates tbody th { font-family: var(--serif); font-size: 27px; font-weight: 400; line-height: 1.2; text-align: left; }
.was { padding-left: 24px; text-align: right; white-space: nowrap; }
.was s { font-size: 18px; font-weight: 500; color: var(--text-2); text-decoration-thickness: 1px; }
.off { margin-left: 8px; font-size: 14px; font-weight: 700; color: var(--accent); }
.now { padding-left: 36px; text-align: right; white-space: nowrap; }
.price-num { display: block; font-family: var(--serif); font-size: clamp(38px, 4vw, 54px); font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--price-new); }
.price-unit { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
/* Rupiah under each dollar price, filled in by landing.js: the promo rate in
   ink under the promo rate, the rate it replaces struck under the struck one,
   and one line of notice under the table. All hidden without an answer. */
.was-pair { display: inline-flex; flex-direction: column; align-items: flex-end; }
.was .idr-was { margin-top: 6px; font-size: 15px; }
.price-idr { display: block; margin-top: 8px; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: var(--text); }
.idr-note { margin-top: 20px; }
.idr-note:not([hidden]) + .footnote { margin-top: 6px; }

/* Questions: plain rows, the answer in the page's own voice. */
.faq-list { border-top: 1px solid var(--rule); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 70px; padding-block: 16px; list-style: none; font-family: var(--serif); font-size: clamp(19px, 2vw, 23px); line-height: 1.35; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { flex-shrink: 0; font: 400 24px/1 var(--font); color: var(--accent); transition: transform .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 46em; padding: 0 48px 26px 0; font-size: 16px; line-height: 1.7; color: var(--text-2); }
.faq-list details p a { color: var(--text); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* The last call: one heading, one button, one line for people who already
   have an account. */
.cta-inner { display: flex; flex-direction: column; align-items: center; padding-top: 56px; border-top: 1px solid var(--rule); text-align: center; }
.cta-inner h2 { margin-bottom: 0; }
.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30px; }
.cta-signin { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--muted); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cta-signin:hover { color: var(--text); }

/* Colophon */
.site-footer { border-top: 1px solid var(--rule); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; column-gap: var(--gutter); row-gap: 24px; align-items: start; padding-block: 30px 40px; }
.footer-brand .brand { gap: 10px; }
.footer-brand .brand span { font-size: 16px; }
.footer-brand p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; column-gap: 24px; font-size: 14px; color: var(--muted); }
.site-footer nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
/* Theme: Light, Dark or System (the default). The component is wired by
   theme.js, which is loaded before this stylesheet so there is no flash. */
.theme-switch { display: inline-flex; margin-top: 4px; border: 1px solid var(--line); }
.theme-switch button { min-height: 36px; padding: 0 12px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; transition: background .2s, color .2s; }
.theme-switch button:last-child { border-right: 0; }
.theme-switch button:hover { color: var(--text); }
.theme-switch button.on { background: var(--text); color: var(--bg); }
.legal { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.legal a { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer-contact { margin-top: 6px; font-size: 14px; color: var(--muted); }
.footer-contact a { color: var(--text-2); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer-contact a:hover { color: var(--text); }
.footer-contact a.footer-ig { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; text-decoration-line: none; }
.footer-contact a.footer-ig span { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ig-glyph { flex-shrink: 0; }

@keyframes sky-drift { from { transform: translate3d(-2%, 0, 0); } to { transform: translate3d(3%, 2%, 0); } }
html[data-motion="paused"] .sky, html[data-scene="inactive"] .sky { animation-play-state: paused; }
html[data-motion="paused"] .wolf-layer { transform: none; transition: none; }

@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .container { width: calc(100% - 64px); }
  .spend-grid { column-gap: 40px; }
}
@media (max-width: 899px) {
  .figures { column-gap: 28px; }
  .spend-grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .spend-list { column-gap: 36px; }
  .model-card { grid-template-columns: minmax(0, 1fr); row-gap: 18px; column-gap: 0; }
  .model-link { justify-self: start; }
  .strip-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); padding-block: 20px 4px; }
  .step-number { font-size: 56px; }
  .steps h3 { margin-top: 2px; }
  .section { padding-bottom: 88px; }
  .section-lede { margin-top: -8px; margin-bottom: 28px; }
  .footer-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .desktop-nav { display: none; }
  .auth-actions { margin-left: auto; }
}
@media (max-width: 600px) {
  :root { --gutter: 24px; }
  .container { width: calc(100% - 40px); }
  .header-inner { min-height: 64px; gap: 12px 20px; }
  .brand img { width: 26px; height: 26px; }
  .brand span { font-size: 16px; letter-spacing: .26em; }
  h1 { font-size: clamp(40px, 11.5vw, 56px); }
  .hero { padding-top: 44px; }
  .hero-description { margin-top: 22px; font-size: 17px; }
  .hero-actions { margin-top: 28px; }
  .hero-actions .button { min-height: 50px; padding: 0 20px; }
  .button-small { min-height: 38px; padding: 0 12px; font-size: 13px; }
  .hero-art { height: clamp(300px, 78vw, 380px); margin-top: 36px; }
  .section { padding-bottom: 72px; }
  h2 { margin-bottom: 26px; font-size: clamp(30px, 8.4vw, 40px); }
  .section-lede { font-size: 17px; }
  .figures { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .figures dt + dd { font-size: clamp(40px, 12.4vw, 52px); }
  .figures dt { font-size: 13px; }
  .works-with { margin-top: 28px; font-size: 15px; }
  .build-grid { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .spend-list { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .spend-grid { row-gap: 30px; }
  .usage { padding: 18px 18px 15px; }
  .model-card { padding: 22px 20px 16px; }
  .model-name { font-size: 20px; }
  .model-prices { flex-wrap: wrap; gap: 12px 32px; }
  .price { font-size: 22px; }
  .rates, .rates tbody { display: block; }
  .rates thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rates tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 12px; padding-block: 18px; border-bottom: 1px solid var(--line); }
  .rates tbody tr:first-child { border-top: 1px solid var(--rule); }
  .rates tbody tr:last-child { border-bottom-color: var(--rule); }
  .rates tbody th, .rates td { padding: 0; border: 0; }
  .rates tbody th { grid-column: 1 / -1; font-size: 23px; }
  .was { padding-left: 0; text-align: left; white-space: normal; }
  .off { display: block; margin: 4px 0 0; }
  .now { padding-left: 0; }
  .price-num { font-size: 38px; }
  .was-pair { align-items: flex-start; }
  .price-idr { margin-top: 6px; font-size: 22px; }
  .faq-list summary { min-height: 64px; font-size: 19px; }
  .faq-list details p { padding-right: 0; }
  .cta-inner { padding-top: 44px; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  @supports (container-type: inline-size) {
    .figures dt + dd { font-size: min(clamp(40px, 12.4vw, 52px), 100cqi / (max(var(--chars, 1), var(--fit-row, 0)) * .6)); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .wolf-layer { transform: none !important; }
}