/* ArcComplete — base: reset, typography, layout, section themes, light, reveals */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent, var(--arc-bright)); outline-offset: 4px; box-shadow: 0 0 0 6px var(--accent-soft); }
.btn:focus-visible, .nav__link:focus-visible, .chip:focus-visible { outline-offset: 2px; }
.card:focus-within { border-color: var(--accent-soft); }
::selection { background: rgba(0, 116, 252, 0.35); color: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 200; padding: 10px 14px; background: var(--fg); color: var(--bg); border-radius: var(--r-sm); transform: translateY(-200%); transition: transform var(--micro) var(--ease-out); }
.skip-link:focus { transform: none; }

/* film grain — one fixed layer, barely there */
.grain {
  position: fixed; inset: -50%; z-index: 80; pointer-events: none;
  width: 200%; height: 200%;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
}

/* layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.content { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.measure-wide { max-width: var(--measure-wide); }
main { position: relative; z-index: 1; }

section.band, .band { position: relative; background: var(--s-bg); color: var(--s-fg); padding-block: var(--section-y); overflow: clip; }
.band--tight { padding-block: var(--section-y-sm); }
.band--flush-top { padding-top: 0; }
.band--flush-bottom { padding-bottom: 0; }
.band > .container, .band > .content { position: relative; z-index: 1; }

/* seams — sections of a different tone sit on each other like sheets of paper: rounded top edge,
   a hairline highlight on warm sheets, and a soft shadow cast on whatever lies beneath */
main > .band:not(.theme-warm) + .theme-warm, main > .theme-warm + .band:not(.theme-warm) {
  border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl);
  margin-top: calc(-1 * var(--r-xl));
}
main > .band:not(.theme-warm) + .theme-warm { z-index: 2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 -24px 60px rgba(0, 0, 0, 0.35); }
main > .theme-warm + .band:not(.theme-warm) { z-index: 3; box-shadow: 0 -24px 60px rgba(11, 12, 15, 0.28); }
/* paper — a barely visible fibre texture on warm sheets (multiplied, so it never lifts the ground) */
.theme-warm::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.44 0 0 0 0 0.40 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 320px 320px; mix-blend-mode: multiply; opacity: 0.9;
}

/* light: large, soft, blurred, low alpha — never a decoration on a surface */
.glow-field {
  position: absolute; pointer-events: none; z-index: 0;
  width: var(--gw, 70vw); aspect-ratio: 1; border-radius: 50%;
  left: var(--gx, 50%); top: var(--gy, 50%); transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side, var(--accent-glow) 0%, var(--accent-soft) 34%, transparent 100%);
  opacity: var(--go, 0.55);
  transition: opacity 900ms var(--ease-out), background 900ms var(--ease-out);
}
.accent-line { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, var(--accent), transparent 70%); transform-origin: left; transform: scaleX(0); transition: transform 1200ms var(--ease-out); opacity: 0.85; }
.accent-line.is-in { transform: scaleX(1); }

/* typography */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ""; width: 20px; height: 1px; background: currentColor; opacity: 0.7; }
.eyebrow--plain::before { display: none; }
.eyebrow--muted { color: var(--s-fg-3); }

.t-hero { font-size: var(--t-hero); font-weight: 500; line-height: 1.0; letter-spacing: var(--track-display); text-wrap: balance; }
.t-editorial { font-size: var(--t-editorial); font-weight: 500; line-height: 1.02; letter-spacing: var(--track-display); text-wrap: balance; }
.t-statement { font-size: var(--t-statement); font-weight: 500; line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; }
.t-section { font-size: var(--t-section); font-weight: 500; line-height: 1.08; letter-spacing: var(--track-tight); text-wrap: balance; }
.t-title { font-size: var(--t-title); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.t-lead { font-size: var(--t-lead); line-height: 1.5; color: var(--s-fg-2); text-wrap: pretty; }
.t-body { font-size: var(--t-body); color: var(--s-fg-2); text-wrap: pretty; }
.t-small { font-size: var(--t-small); color: var(--s-fg-3); }
.t-muted { color: var(--s-fg-2); }
.t-faint { color: var(--s-fg-3); }
.t-accent { color: var(--accent); }
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.serif-i { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--stack, 20px); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, 12px); align-items: center; }
.divider { height: 1px; background: var(--s-line); border: 0; margin: 0; }

/* reveals — one soft rise per element, no bouncing */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }
.reveal[data-delay="4"] { transition-delay: 360ms; }
.reveal[data-delay="5"] { transition-delay: 450ms; }

/* arc svg defaults */
.arc-svg { overflow: visible; }
.arc-svg path, .arc-svg circle { fill: none; stroke-linecap: butt; }
.arc-svg .arc-core { stroke: var(--arc-core); stroke-width: 1.25; }
.arc-svg .arc-glow { stroke: var(--accent); stroke-width: 6; opacity: 0.24; filter: blur(4px); }
.arc-svg .arc-halo { stroke: var(--accent); stroke-width: 26; opacity: 0.05; }
.arc-svg .arc-faint { stroke: var(--s-line-strong); stroke-width: 1; }

/* status */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); color: var(--s-fg-2); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s-fg-3); }
.status--live::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.status--tint { color: var(--accent); }
.status--tint::before { background: var(--accent); }

/* app icon — an uploaded product icon in a rounded square, or the inline arc glyph until one exists */
.app-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 26%; background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft); flex: none; overflow: hidden; }
.app-icon svg { width: 22px; height: 22px; }
.app-icon img, .disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-icon:has(img) { background: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.app-icon--sm { width: 32px; height: 32px; border-radius: 28%; }
.app-icon--sm svg { width: 17px; height: 17px; }
.disc--img { background: none; border-radius: 26%; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
.theme-warm .app-icon:not(:has(img)) { box-shadow: inset 0 0 0 1px var(--accent-soft), 0 1px 0 rgba(255, 255, 255, 0.6); }

/* screenshots — a real screen fills its frame; until one is uploaded the frame shows a labelled slot */
.screen-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.screen-slot, .photo-slot { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; padding: 20px; border-radius: inherit; color: var(--fg-3); font-size: 13px; background: linear-gradient(180deg, #10131B, #0C0E14); }
.screen-slot::before, .photo-slot::before { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(245, 244, 239, 0.22); border-radius: inherit; }
.screen-slot span, .photo-slot span { font-weight: 500; color: var(--fg-2); }
.screen-slot small, .photo-slot small { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); }

/* product icon (inline svg, 1.6px strokes, arc grammar) */
.picon { width: 24px; height: 24px; color: var(--accent); flex: none; }
.picon svg { width: 100%; height: 100%; }
.disc { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft), 0 0 24px var(--accent-soft); flex: none; }
.disc svg { width: 22px; height: 22px; }
.disc--sm { width: 34px; height: 34px; }
.disc--sm svg { width: 18px; height: 18px; }

/* explore cursor label (vision §28) */
.cursor-label { position: fixed; z-index: 150; left: 0; top: 0; pointer-events: none; padding: 8px 12px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0; transform: translate(-50%, -50%) scale(0.9); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); will-change: left, top; }
.cursor-label.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* cursor spotlight (idea 9): a soft pool of light that follows a fine pointer over dark surfaces
   and reveals a faint dot grid beneath it. Off over warm sheets, off for touch, off under reduced motion. */
.spotlight {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  transition: opacity 600ms var(--ease-out);
  background-image: radial-gradient(circle, rgba(245, 244, 239, 0.32) 1px, transparent 1.6px);
  background-size: 28px 28px; background-position: 14px 14px;
  -webkit-mask-image: radial-gradient(340px circle at var(--sx, -1000px) var(--sy, -1000px), #000, transparent 72%);
  mask-image: radial-gradient(340px circle at var(--sx, -1000px) var(--sy, -1000px), #000, transparent 72%);
}
.spotlight::before { content: ""; position: absolute; inset: 0; background: radial-gradient(560px circle at var(--sx, -1000px) var(--sy, -1000px), rgba(0, 116, 252, 0.13), rgba(123, 97, 255, 0.05) 40%, transparent 65%); }
.spotlight.is-on { opacity: 1; }

/* section index (idea 14): a hairline rail in the left margin on wide screens; difference-blended so it
   reads on both the dark ground and the warm sheets */
.index { position: fixed; left: 22px; top: 50%; z-index: 40; transform: translateY(-50%); display: none; mix-blend-mode: difference; color: #fff; opacity: 0; transition: opacity 500ms var(--ease-out); }
.index.is-on { opacity: 1; }
.index ol { display: flex; flex-direction: column; gap: 14px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.25); }
.index a { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; opacity: 0.45; transition: opacity 300ms var(--ease-out); }
.index a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-left: -16.5px; transform: scale(0); transition: transform 300ms var(--ease-out); }
.index a em { font-style: normal; text-transform: uppercase; opacity: 0; transform: translateX(-4px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.index a.is-current { opacity: 1; }
.index a.is-current::before { transform: none; }
.index:hover a em { opacity: 1; transform: none; }
@media (min-width: 1400px) and (pointer: fine) { .index { display: block; } }

/* intro (idea 16): once per session the Arc draws and the name settles, then hands over to the page.
   html.intro-on is set by an inline script before first paint so the hero waits underneath. */
.intro { display: none; }
html.intro-on .intro { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--void); animation: intro-out 380ms var(--ease-out) 1000ms both; }
html.intro-on .intro__lockup { display: flex; align-items: center; gap: 18px; }
html.intro-on .intro__arc { width: 56px; height: 56px; }
html.intro-on .intro__arc path { stroke-dasharray: 214; stroke-dashoffset: 214; animation: intro-trace 640ms var(--ease-out) 80ms both; }
html.intro-on .intro__arc .arc-core { stroke: var(--arc); stroke-width: 7; }
html.intro-on .intro__arc .arc-glow { stroke: var(--arc); stroke-width: 14; opacity: 0.3; filter: blur(5px); }
html.intro-on .intro__word { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; color: var(--fg); animation: intro-word 520ms var(--ease-out) 420ms both; }
html.intro-on .boot { display: none; }
html.intro-on .hero__eyebrow, html.intro-on .hero__title, html.intro-on .hero__lead, html.intro-on .hero__cta, html.intro-on .hero__scroll, html.intro-on .hero__glow, html.intro-on .hero__floor,
html.intro-on .page-hero__eyebrow, html.intro-on .page-hero__title, html.intro-on .page-hero__lead, html.intro-on .page-hero__actions { animation-play-state: paused; }
@keyframes intro-trace { to { stroke-dashoffset: 0; } }
@keyframes intro-word { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

/* debug grid (idea 18): ?grid in the URL or Alt+G — 12 columns inside the container and an 8px baseline */
.debug-grid { position: fixed; inset: 0; z-index: 500; pointer-events: none; display: none; background-image: repeating-linear-gradient(transparent 0 7px, rgba(255, 0, 90, 0.10) 7px 8px); }
.debug-grid.is-on { display: block; }
.debug-grid__cols { height: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.debug-grid__cols i { background: rgba(255, 0, 90, 0.07); box-shadow: inset 1px 0 0 rgba(255, 0, 90, 0.35), inset -1px 0 0 rgba(255, 0, 90, 0.35); }

/* first paint: a tiny arc traces once at the top (never a spinner) */
.boot { position: fixed; top: 14px; left: 50%; z-index: 210; width: 18px; height: 18px; margin-left: -9px; pointer-events: none; animation: boot-out 400ms var(--ease-out) 900ms both; }
.boot circle { fill: none; stroke: var(--arc); stroke-width: 2; stroke-dasharray: 50; stroke-dashoffset: 50; transform: rotate(-90deg); transform-origin: 50% 50%; animation: boot-trace 700ms var(--ease-out) 80ms both; }
@keyframes boot-trace { to { stroke-dashoffset: 12; } }
@keyframes boot-out { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .accent-line { transform: none; transition: none; }
  .boot, .spotlight, .intro { display: none !important; }
  .index { opacity: 1; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}