/* deGold — design tokens */
:root{
  /* surfaces */
  --paper: #F3EFE6;       /* bone/ivory */
  --paper-2: #EAE4D6;     /* secondary surface */
  --paper-3: #DED6C2;     /* dividers, subtle fills */
  --ink: #141210;         /* deep ink */
  --ink-2: #2B2722;
  --ink-3: #4A443C;
  --ink-4: #6B6458;
  --ink-5: #8A8374;
  --ink-6: #A89F8A;

  /* single accent — oxblood / rust */
  --ox: #7A1F14;          /* primary accent */
  --ox-2: #A8311F;        /* hover/live */
  --ox-ink: #3A0F07;      /* deep oxblood */
  --ember: #C94A1A;       /* data highlight — used very sparingly */

  /* semantic */
  --pos: #3B5A2A;         /* muted olive (positive) */
  --neg: #7A1F14;         /* oxblood doubles as negative */
  --neutral: #4A443C;

  /* dark-mode surfaces (inverted) */
  --dk-bg: #0F0D0B;
  --dk-bg-2: #17140F;
  --dk-bg-3: #221D16;
  --dk-line: #2F2A22;
  --dk-ink: #E8E1D2;
  --dk-ink-2: #C8BFAC;
  --dk-ink-3: #8A8374;
  --dk-ox: #D8533A;       /* oxblood lightens for dark bg */

  /* type */
  --font-sans: "Inter Tight", "Neue Haas Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* rhythm */
  --u: 8px;
  --gutter: 32px;
  --rule: 1px solid var(--ink);
  --rule-light: 1px solid var(--ink-4);
  --rule-hair: 1px solid var(--paper-3);
  --rule-dk: 1px solid var(--dk-line);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11","tnum";}
body{font-size:15px;line-height:1.5;letter-spacing:-0.005em;}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.mono{font-family:var(--font-mono);font-feature-settings:"tnum","zero";letter-spacing:0}
.ox{color:var(--ox)}
.dim{color:var(--ink-4)}
.dim2{color:var(--ink-5)}
.hair{border-bottom:var(--rule-hair)}
.line{border-bottom:var(--rule)}
.upper{text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:500;font-family:var(--font-mono)}
.num{font-family:var(--font-mono);font-feature-settings:"tnum"}

/* shell */
.wrap{max-width:1440px;margin:0 auto;padding:0 48px;position:relative}
.wrap-narrow{max-width:1200px;margin:0 auto;padding:0 48px}
section{border-top:var(--rule)}
.section-head{display:grid;grid-template-columns:120px 1fr auto;gap:32px;align-items:baseline;padding:28px 0 16px;border-bottom:var(--rule-hair)}
.section-head .num-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--ink-4);text-transform:uppercase}
.section-head h2{font-size:22px;font-weight:500;letter-spacing:-.02em}
.section-head .eyebrow{font-family:var(--font-mono);font-size:11px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.08em}
.section-body{padding:40px 0 80px}

/* contour bg (subtle topo — used on hero) */
.contour{background-image:
  radial-gradient(1200px 600px at 80% 20%, rgba(122,31,20,0.04), transparent 60%),
  repeating-radial-gradient(circle at 85% 15%, rgba(20,18,16,0.06) 0 1px, transparent 1px 38px);
}

/* crosshair corner ornament */
.crosshair{position:relative}
.crosshair::before,.crosshair::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--ink);pointer-events:none}
.crosshair::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.crosshair::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* scroll */
html{scroll-behavior:smooth}
::selection{background:var(--ink);color:var(--paper)}

/* ─── Mobile modal rules ─────────────────────────────────
   Applies to any full-screen scrim (position:fixed inset:0) on landing + app.
   The inner box gets sized to the viewport minus a small inset. */
@media (max-width: 768px){
  div[style*="position:fixed"][style*="z-index: 300"] > div,
  div[style*="position:fixed"][style*="z-index: 200"] > div,
  div[style*="position: fixed"][style*="z-index: 300"] > div,
  div[style*="position: fixed"][style*="z-index: 200"] > div{
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
  }
  /* OTP input grid: 6 boxes must fit inside the modal on 375px viewport. */
  input[id^="connect-otp-"]{
    width: 40px !important;
    height: 50px !important;
    font-size: 20px !important;
  }
}