/* IAMIN — the public front door at iamin.store.
 *
 * External by necessity, not preference: this host sends `style-src 'self'`,
 * so an inline <style> block is dropped without a word and the page renders
 * unstyled. That failure is invisible to curl.
 *
 * No webfonts — `default-src 'self'` blocks a CDN, and a system stack is
 * faster on the phones this is written for.
 */

:root {
    --ink:        #f4f2ef;
    --ink-dim:    #a9a5a0;
    --ink-faint:  #78746f;
    --bg:         #0c0b0f;
    --bg-raise:   #141319;
    --bg-alt:     #100f15;
    --line:       #262430;
    --accent:     #c9a227;   /* the mall's brass, from the existing mark */
    --accent-ink: #1a1508;
    --radius:     14px;
    --measure:    68ch;
    --pad:        clamp(1.25rem, 5vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 clamp(1rem, 0.97rem + 0.18vw, 1.0625rem)/1.65
          system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5em; font-weight: 650; }
h1 { font-size: clamp(2.4rem, 1.7rem + 3.4vw, 4.5rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.65rem, 1.3rem + 1.5vw, 2.5rem); }
h3 { font-size: 1.0625rem; letter-spacing: -0.01em; }
p  { margin: 0 0 1rem; }
em { font-style: normal; color: var(--accent); }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: var(--accent-ink);
    padding: 0.75rem 1rem; border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ── header ─────────────────────────────────────────────────────────── */

.bar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0.85rem var(--pad);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.brand {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-weight: 700; letter-spacing: 0.02em; text-decoration: none; flex: none;
}
.bar nav { display: flex; gap: 1.5rem; margin-left: auto; font-size: 0.9375rem; }
.bar nav a { color: var(--ink-dim); text-decoration: none; }
.bar nav a:hover { color: var(--ink); }
@media (max-width: 800px) {
    .bar nav { display: none; }
    .bar .btn-sm { margin-left: auto; }
}

/* ── buttons ────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.8rem 1.4rem; border-radius: 999px;
    font-weight: 600; font-size: 0.9375rem; text-decoration: none;
    border: 1px solid transparent; transition: transform .12s ease, background .12s ease;
    min-height: 44px;   /* thumb-sized, per the phones this is read on */
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 0.5rem 1rem; min-height: 38px; font-size: 0.875rem; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.btn-ghost, .btn-sm { border-color: var(--line); color: var(--ink); background: var(--bg-raise); }
.btn-ghost:hover, .btn-sm:hover { border-color: var(--ink-faint); }

/* ── hero ───────────────────────────────────────────────────────────── */

.hero {
    display: grid; gap: clamp(2rem, 4vw, 3.5rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: clamp(2.5rem, 6vw, 5.5rem) var(--pad) clamp(2rem, 4vw, 3.5rem);
    max-width: 1400px; margin-inline: auto;
}
@media (min-width: 1000px) { .hero { grid-template-columns: 0.85fr 1.15fr; } }

.eyebrow {
    text-transform: uppercase; letter-spacing: 0.14em;
    font-size: 0.75rem; font-weight: 600; color: var(--accent); margin-bottom: 1rem;
}
.lede { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: var(--ink-dim); max-width: 48ch; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }
.note { margin-top: 1rem; font-size: 0.875rem; color: var(--ink-faint); }

.hero-shot { margin: 0; }
.hero-shot img {
    width: 100%; border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.9);
}

/* ── bands ──────────────────────────────────────────────────────────── */

.band { padding: clamp(3rem, 7vw, 6rem) var(--pad); max-width: 1200px; margin-inline: auto; }

/* A full-bleed background needs the CONTENT constrained, not the section. Doing
 * that with `.band-alt > * { margin-inline: auto }` centred every child
 * independently — so any child narrower than 1200px (a .sub capped at 68ch for
 * readability, the .fineprint) was horizontally centred and sat visibly indented
 * from the heading above it. A single centred grid column constrains the content
 * once and leaves every child left-aligned inside it. */
.band-alt {
    background: var(--bg-alt);
    max-width: none;
    border-block: 1px solid var(--line);
    display: grid;
    grid-template-columns: minmax(0, 1200px);
    justify-content: center;
}
.band-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.sub { color: var(--ink-dim); max-width: var(--measure); font-size: 1.0625rem; margin-bottom: 2.5rem; }

.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

/* Column counts are CAPPED rather than left to auto-fit, because the item counts
 * do not divide by whatever auto-fit happens to choose. `auto-fit` gave the
 * six-card grid FOUR columns at 1440px — two rows, and a wide empty cell sitting
 * in the border colour that reads as a rendering bug. Six divides by 1, 2 and 3;
 * four divides by 1 and 2. So those are the only counts allowed. */
.grid-2, .grid-3 { grid-template-columns: 1fr; }
@media (min-width: 620px)  { .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid article { background: var(--bg-raise); padding: 1.5rem; }
.grid article p { color: var(--ink-dim); margin: 0; font-size: 0.9375rem; }
.grid article h3 { color: var(--ink); }

.split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.split p { color: var(--ink-dim); max-width: var(--measure); }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.facts li { background: var(--bg-raise); padding: 0.9rem 1.15rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: baseline; }
.facts strong { font-weight: 600; }
.facts span { color: var(--ink-faint); font-size: 0.875rem; margin-left: auto; }

.steps { list-style: none; counter-reset: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.steps li { position: relative; padding-top: 2.75rem; }
.steps .n {
    position: absolute; top: 0; left: 0;
    width: 2rem; height: 2rem; border-radius: 999px;
    display: grid; place-items: center;
    background: var(--accent); color: var(--accent-ink);
    font-weight: 700; font-size: 0.9375rem;
}
.steps p { color: var(--ink-dim); font-size: 0.9375rem; margin: 0; }

.band-cta { text-align: center; }
.band-cta .sub { margin-inline: auto; }
.band-cta .actions { justify-content: center; }

.fineprint { margin-top: 2rem; color: var(--ink-faint); font-size: 0.9375rem; max-width: var(--measure); }

/* A real address on the page is a legitimacy signal a reviewer looks for. */
.addr { font-style: normal; color: var(--ink-faint); font-size: 0.9375rem; margin-top: 1.5rem; }
.foot-addr { margin-top: 0; line-height: 1.55; }

/* ── footer ─────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); padding: clamp(2rem, 5vw, 3.5rem) var(--pad); background: var(--bg-alt); }
.foot-grid { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: start; justify-content: space-between; max-width: 1200px; margin-inline: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.9375rem; }
.foot nav a { color: var(--ink-dim); text-decoration: none; }
.foot nav a:hover { color: var(--ink); }
.muted { color: var(--ink-faint); font-size: 0.9375rem; margin: 0.6rem 0 0; }
.legal { max-width: 1200px; margin: 2rem auto 0; color: var(--ink-faint); font-size: 0.8125rem; line-height: 1.6; }

/* ── the legal pages ────────────────────────────────────────────────── */

.doc { max-width: 78ch; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad); }
.doc h1 { font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem); margin-bottom: 0.35em; }
.doc .stamp { color: var(--ink-faint); font-size: 0.875rem; margin-bottom: 2.5rem; }
.doc h2 { font-size: 1.3rem; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.doc h3 { margin-top: 1.75rem; color: var(--ink); }
.doc p, .doc li { color: var(--ink-dim); }
.doc ul { padding-left: 1.15rem; }
.doc li { margin-bottom: 0.5rem; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc .back { display: inline-block; margin-bottom: 2rem; color: var(--ink-dim); font-size: 0.9375rem; text-decoration: none; }
.doc .back:hover { color: var(--ink); }