/* Hallmark · shape: Stat-Led · genre: modern-minimal · theme: Dose (deal 3/3, seed statlab-aplikasi-statistik-grafik-99f3·acfe8744·2026-10-31·r0) · job: sign up · draw: b99ed4
 * hero: Banner · nav: banner over a retracting bar · footer: mast · imagery: the product (real screenshots) · signature: the data-path diagram, nothing crossing to the server · dose: white, accent swapped to StatLab blue
 * axes: light/grotesk-sans/chromatic-green · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, pricing table swapped for the security section (product is free; trust is the job) */
/* waive 10b, F8: scroll-linked reveals, tray growth and nav settle asked for by the user (motion like studio.ruangide.org); visible by default, off under reduced motion */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-display: swap; src: url("fonts/schibsted-700.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400 500; font-display: swap; src: url("fonts/instrument-sans.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("fonts/dmmono-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url("fonts/dmmono-500.woff2") format("woff2"); }

.mono { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-rule), 0 3px 0 var(--color-rule); transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-rule); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }
.btn--primary { background: linear-gradient(var(--color-accent), var(--color-accent-deep)); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--glint) 35%, transparent), 0 0 0 1px var(--color-accent-deep), 0 3px 0 var(--color-accent-deep); }
.btn--primary:hover { background: var(--color-accent-deep); }
.btn--primary:active { box-shadow: 0 0 0 1px var(--color-accent-deep); }
.btn--primary svg { background: var(--glint); border-radius: 4px; padding: var(--space-3xs); box-sizing: content-box; }
.btn--sm { min-height: 40px; padding: 0 var(--space-md); }
.btn--onink:focus-visible { outline-color: var(--color-accent-soft); }

/* Nav: a banner that settles into a bar as the page scrolls */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; }
.nav__row { display: flex; align-items: center; gap: var(--space-xl); min-height: 72px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); font: 700 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; }
.wordmark img { border-radius: 7px; }
.wordmark:focus-visible, .nav__links a:focus-visible, .foot a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.nav__links { display: flex; gap: var(--space-lg); margin-left: auto; font-size: var(--text-sm); }
.nav__links a { color: var(--color-ink-2); text-decoration: none; }
.nav__links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
@media (max-width: 48rem) { .nav__links { display: none; } .nav__row > .btn { margin-left: auto; } }

/* Hero */
.hero { position: relative; padding-block: var(--space-2xl) var(--section-gap-s); background:
  radial-gradient(60% 50% at 80% 0%, color-mix(in oklab, var(--p-fri) 55%, transparent), transparent 70%),
  radial-gradient(40% 40% at 0% 30%, color-mix(in oklab, var(--light) 90%, transparent), transparent 70%); }
.hero__head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.hero h1 { max-width: 13ch; }
.hero__side { display: grid; gap: var(--space-lg); justify-items: start; padding-bottom: var(--space-xs); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__note { font-size: var(--text-sm); color: var(--color-muted); }
.tray { margin: var(--space-2xl) 0 0; padding: var(--space-sm); border-radius: calc(var(--radius-card) + 10px); background: linear-gradient(color-mix(in oklab, var(--glint) 50%, transparent), transparent 22%), color-mix(in oklab, var(--p-fri) 62%, transparent); box-shadow: inset 0 1.5px 0 var(--glint), var(--shadow-lift); transform-origin: 50% 0; }
.tray img { width: 100%; border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--color-rule); }
@media (max-width: 60rem) { .hero__head { grid-template-columns: minmax(0, 1fr); } }

/* Figures as sample labels */
.labels { padding-block: 0 var(--section-gap-s); }
.labels__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.label { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-lg); border-radius: var(--radius-input); background: var(--glint); box-shadow: var(--shadow-card); }
.label__num { font: 500 var(--text-2xl)/1 var(--font-outlier); color: var(--color-accent-deep); font-variant-numeric: tabular-nums; }
.label > span:last-child { color: var(--color-ink-2); font-size: var(--text-sm); }
@media (max-width: 60rem) { .labels__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Steps as plastic bands */
.steps { padding-block: var(--section-gap-s); }
.steps h2 { margin-bottom: var(--space-xl); }
.steps__list { list-style: none; margin-block: 0; display: grid; gap: var(--space-lg); }
.band { --t: var(--p-thu); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--gap-columns); align-items: center; padding: clamp(20px, 3vw, 48px); border-radius: var(--radius-card); background: linear-gradient(color-mix(in oklab, var(--glint) 32%, transparent), transparent 18%), color-mix(in oklab, var(--t) 62%, transparent); box-shadow: inset 0 1.5px 0 var(--glint), inset 0 -24px 36px -28px color-mix(in oklab, var(--t) 45%, var(--color-ink)); }
.band__text { display: grid; gap: var(--space-sm); }
.band__n { font: 700 var(--text-display-s)/1 var(--font-display); color: color-mix(in oklab, var(--t) 50%, var(--color-ink)); }
.band img { border-radius: var(--radius-input); box-shadow: var(--shadow-lift); }
@media (max-width: 60rem) { .band { grid-template-columns: minmax(0, 1fr); } }

/* Security: the one ink band */
.safe { padding-block: var(--section-gap); background: var(--color-ink); color: var(--color-paper); }
.safe__head { display: grid; gap: var(--space-md); max-width: 46rem; }
.safe .lead { color: color-mix(in oklab, var(--color-paper) 78%, transparent); }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: stretch; margin-block: var(--space-2xl); }
.flow__box { position: relative; padding: var(--space-xl) var(--space-lg) var(--space-lg); border: 1.5px dashed color-mix(in oklab, var(--color-accent-soft) 70%, transparent); border-radius: calc(var(--radius-card) + 6px); }
.flow__tag { position: absolute; top: -0.8em; left: var(--space-lg); padding: 0 var(--space-xs); background: var(--color-ink); font-size: var(--text-sm); color: var(--color-accent-soft); }
.flow__lane { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; }
.flow__cell { display: grid; gap: var(--space-2xs); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--t); color: var(--color-ink); box-shadow: inset 0 1.5px 0 var(--glint); }
.flow__cell .mono { font-size: var(--text-lg); font-weight: 500; }
.flow__cell small, .flow__server small { font-size: var(--text-sm); }
.flow__wire { position: relative; height: 2px; background: color-mix(in oklab, var(--color-accent-soft) 45%, transparent); overflow: hidden; }
.flow__wire i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-soft); animation: travel 1.8s var(--ease-in-out) infinite; }
.flow__server { position: relative; display: grid; align-content: center; gap: var(--space-2xs); min-width: 13rem; padding: var(--space-xl) var(--space-lg) var(--space-lg); border: 1.5px solid color-mix(in oklab, var(--color-paper) 22%, transparent); border-radius: calc(var(--radius-card) + 6px); color: color-mix(in oklab, var(--color-paper) 70%, transparent); }
.flow__server .flow__tag { color: color-mix(in oklab, var(--color-paper) 70%, transparent); }
.flow__zero { font-size: var(--text-2xl); color: var(--color-paper); }
@keyframes travel { from { transform: translateX(-10px); } to { transform: translateX(60px); } }
@media (max-width: 60rem) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow__lane { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 32px auto 32px auto; }
  .flow__wire { width: 2px; height: auto; justify-self: center; align-self: stretch; }
  .flow__wire i { left: -3px; top: 0; animation-name: travel-down; }
}
@keyframes travel-down { from { transform: translateY(-10px); } to { transform: translateY(36px); } }
.safe__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.safe__facts li { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-md); border-top: 1px solid color-mix(in oklab, var(--color-paper) 22%, transparent); }
.safe__facts p { color: color-mix(in oklab, var(--color-paper) 78%, transparent); }
@media (max-width: 60rem) { .safe__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .safe__facts { grid-template-columns: minmax(0, 1fr); } }

/* Questions as rows */
.faq { padding-block: var(--section-gap); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap-columns); }
.faq__rows { border-top: 1px solid var(--color-rule); }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq summary { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) 0; font: 500 var(--text-lg)/1.3 var(--font-body); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-outlier); color: var(--color-accent); transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-accent-deep); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.faq details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }
@media (max-width: 60rem) { .faq__grid { grid-template-columns: minmax(0, 1fr); } }

/* Close and footer */
.close { padding-block: var(--section-gap-s); background: var(--color-paper-3); }
.close__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.foot { padding-block: var(--space-2xl) var(--space-xl); }
.foot__mast { font: 700 clamp(4rem, 14vw, 12rem)/0.85 var(--font-display); letter-spacing: -0.05em; color: var(--color-paper-3); }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.foot nav { display: flex; gap: var(--space-lg); }
.foot a:hover { color: var(--color-ink); }

.toast { position: fixed; left: 50%; bottom: var(--space-lg); z-index: var(--z-toast); max-width: min(32rem, calc(100% - 32px)); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); box-shadow: var(--shadow-lift); transform: translateX(-50%); }

/* Motion: everything is visible by default; browsers with scroll timelines get the scroll-linked version */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero__side { animation: rise var(--dur-long) var(--ease-out) both; }
  .hero__side { animation-delay: 120ms; }
  @supports (animation-timeline: view()) {
    [data-grow] { animation: grow linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .nav { animation: settle linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  }
}
@media (prefers-reduced-motion: reduce) { .flow__wire i { animation: none; left: 45%; } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: perspective(1400px) rotateX(10deg) scale(0.92); } to { transform: none; } }
@keyframes settle { to { border-bottom-color: var(--color-rule); } }
.linkbtn { padding: 0; border: 0; background: none; color: var(--color-accent-deep); font: inherit; text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--color-ink); }
.linkbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }