/* Iconsmith legal pages — hand-built for this app: clay tiles on a plum kiln-night canvas */
:root{
  --kiln:#120F17; --slab:#241F2E; --slab-hi:#2E2839;
  --coral:#FF7A66; --coral-deep:#E35A48; --mint:#5CD6B0;
  --bone:#F5F0EB; --ash:#B8B3C2; --seam:rgba(245,240,235,.08);
  --squircle:28% / 28%;
}
*{box-sizing:border-box}
html{background:var(--kiln);color:var(--bone)}
body{margin:0;font:16px/1.65 ui-rounded,"SF Pro Rounded",-apple-system,"Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(900px 500px at 85% -10%,rgba(255,122,102,.16),transparent 60%),
    radial-gradient(700px 400px at -10% 30%,rgba(92,214,176,.10),transparent 60%),
    var(--kiln);
  min-height:100vh}
a{color:var(--mint);text-underline-offset:3px}
a:hover{color:var(--coral)}
.bench{max-width:1080px;margin:0 auto;padding:28px 22px 80px;display:grid;grid-template-columns:230px 1fr;gap:38px}
@media (max-width:820px){.bench{grid-template-columns:1fr;gap:18px}}

/* masthead: a little wall of clay icons */
.mast{grid-column:1/-1;display:flex;align-items:center;gap:26px;padding:22px 0 26px;border-bottom:1px dashed var(--seam)}
.tray{display:grid;grid-template-columns:repeat(4,34px);gap:9px;flex:none}
.tray i{width:34px;height:34px;border-radius:var(--squircle);display:block;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.22),inset 0 4px 6px rgba(255,255,255,.28),0 6px 12px rgba(0,0,0,.35)}
.tray i:nth-child(1){background:#FF7A66}.tray i:nth-child(2){background:#F7B79A}
.tray i:nth-child(3){background:#5CD6B0}.tray i:nth-child(4){background:#A99BE0}
.tray i:nth-child(5){background:#F4D58D}.tray i:nth-child(6){background:#E35A48}
.tray i:nth-child(7){background:#8FE3CB}.tray i:nth-child(8){background:#FFB1A6;transform:rotate(-8deg) translateY(-3px)}
.mast h1{margin:0;font-size:clamp(28px,4.4vw,42px);line-height:1.1;letter-spacing:-.02em}
.mast h1 b{color:var(--coral)}
.mast p{margin:6px 0 0;color:var(--ash)}
.stamp{display:inline-block;margin-top:10px;padding:3px 12px;border-radius:999px;background:var(--slab);color:var(--mint);font-size:13px;border:1px solid var(--seam)}

/* side rail: section slots like an export manifest */
.rail{position:sticky;top:18px;align-self:start}
@media (max-width:820px){.rail{position:static}}
.rail nav{background:var(--slab);border-radius:22px;padding:14px;border:1px solid var(--seam)}
.rail h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin:4px 6px 10px}
.rail ol{list-style:none;margin:0;padding:0;counter-reset:slot}
.rail li{counter-increment:slot}
.rail li a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:12px;color:var(--bone);text-decoration:none;font-size:14px}
.rail li a::before{content:counter(slot);flex:none;width:24px;height:24px;border-radius:var(--squircle);background:var(--slab-hi);color:var(--coral);font-size:12px;font-weight:700;display:grid;place-items:center}
.rail li a:hover{background:var(--slab-hi)}
.swap{display:flex;gap:6px;margin-top:14px}
.swap a{flex:1;text-align:center;padding:8px 6px;border-radius:12px;background:var(--slab);border:1px solid var(--seam);color:var(--ash);text-decoration:none;font-size:13px}
.swap a[aria-current]{background:var(--coral);color:#2A1210;font-weight:700;border-color:transparent}

/* content tiles */
main{min-width:0}
.tile{background:linear-gradient(180deg,var(--slab-hi),var(--slab));border-radius:26px;padding:22px 24px;margin:0 0 18px;border:1px solid var(--seam);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 30px rgba(0,0,0,.25)}
.tile h2{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:20px}
.tile h2 .glyph{width:30px;height:30px;border-radius:var(--squircle);flex:none;background:var(--coral);box-shadow:inset 0 -4px 0 rgba(0,0,0,.2)}
.tile h2 .glyph.m{background:var(--mint)}.tile h2 .glyph.l{background:#A99BE0}.tile h2 .glyph.s{background:#F4D58D}
.tile h3{margin:16px 0 6px;font-size:16px;color:var(--coral)}
.tile p,.tile li{color:#E4DED8}
.tile ul{padding-left:20px}
.lede{font-size:17px;color:var(--bone);background:rgba(92,214,176,.08);border-left:4px solid var(--mint);padding:14px 18px;border-radius:0 16px 16px 0;margin:0 0 18px}
table.flow{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:14.5px}
table.flow th{text-align:left;color:var(--ash);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:0 10px}
table.flow td{background:rgba(18,15,23,.55);padding:10px;vertical-align:top}
table.flow td:first-child{border-radius:12px 0 0 12px;font-weight:600;color:var(--bone)}
table.flow td:last-child{border-radius:0 12px 12px 0}
.pill{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:700}
.pill.dev{background:rgba(92,214,176,.16);color:var(--mint)}
.pill.out{background:rgba(255,122,102,.18);color:var(--coral)}
details{background:rgba(18,15,23,.55);border-radius:16px;padding:12px 16px;margin:10px 0}
summary{cursor:pointer;font-weight:600}
.mail{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:16px;background:var(--coral);color:#2A1210;font-weight:700;text-decoration:none}
.mail:hover{background:var(--coral-deep);color:#fff}
footer{grid-column:1/-1;color:var(--ash);font-size:13px;border-top:1px dashed var(--seam);padding-top:16px;display:flex;flex-wrap:wrap;gap:8px 18px}
footer a{color:var(--ash)}