/* Base reset that the Claude Artifact viewer wrapped around the page (kept so rendering matches exactly) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* ===== Resilient Roots page styles (unchanged from the published artifact) ===== */
:root{
  --forest:#2F4A3A; --forest-deep:#22372B; --terracotta:#B0603F; --sage:#9AAA8C; --taupe:#B9AB98; --cream:#F4EEE3; --gold:#A8894A;
  --bg:#F6F1E8; --surface:#EDE5D7; --paper:#FBF8F2; --ink:#1F2A23; --muted:#5B6559; --line:#D6CBB8;
  --accent:var(--terracotta); --head:var(--forest);
  --hero-bg:#22372B; --hero-ink:#F4EEE3; --hero-muted:#C9D1C2;
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Lato", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#161E19; --surface:#1E2922; --paper:#212C25; --ink:#ECE6DA; --muted:#A9B3A5; --line:#34443A;
    --accent:#D98764; --head:#C9D8BE;
    --hero-bg:#101713; --hero-ink:#F1EBDF; --hero-muted:#AEB9A9;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#161E19; --surface:#1E2922; --paper:#212C25; --ink:#ECE6DA; --muted:#A9B3A5; --line:#34443A;
  --accent:#D98764; --head:#C9D8BE;
  --hero-bg:#101713; --hero-ink:#F1EBDF; --hero-muted:#AEB9A9;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; margin:0}
img{max-width:100%; display:block; height:auto}
.wrap{max-width:1120px; margin:0 auto; padding-inline:24px}
h1,h2,h3{font-family:var(--serif); color:var(--head); text-wrap:balance; line-height:1.15; margin:0}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:600}
h3{font-size:1.3rem; font-weight:600}
p{margin:0}
.eyebrow{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500}
.lede{font-size:1.15rem; color:var(--muted); max-width:62ch}
.prose{max-width:64ch; display:grid; gap:1em}
section{padding-block:88px; border-top:1px solid var(--line)}
.sec-head{display:grid; gap:14px; margin-bottom:40px; max-width:760px}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* HERO */
.hero{background:var(--hero-bg); color:var(--hero-ink); padding-block:72px 80px; border:0}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero h1{color:var(--hero-ink); font-size:clamp(2.8rem,6.4vw,5rem); font-weight:600; letter-spacing:-.01em}
.hero h1 em{font-style:italic; color:#E0A283; font-weight:500}
.hero .tag{font-size:1.25rem; color:var(--hero-muted); margin-top:18px; max-width:34ch}
.hero .eyebrow{color:#E0A283}
.hero-img{position:relative}
.hero-img img{border-radius:4px; aspect-ratio:1/1; object-fit:cover; width:100%}
.label{position:absolute; left:-28px; bottom:-28px; background:#FBF8F2; color:#1F2A23; font-family:var(--mono); font-size:.72rem; line-height:1.5; padding:14px 16px 12px; width:min(290px,80%); box-shadow:0 10px 30px rgba(0,0,0,.35); border-top:6px solid var(--terracotta); transform:rotate(-2deg)}
.label b{display:block; font-weight:500; letter-spacing:.12em; color:#8A4E35; margin-bottom:4px}
.label .row{border-top:1px dashed #BFB4A2; padding-top:6px; margin-top:6px}
.meta{display:grid; grid-template-columns:repeat(4,auto); gap:28px; margin-top:40px; padding-top:24px; border-top:1px solid rgba(244,238,227,.18)}
.meta dt{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--hero-muted)}
.meta dd{margin:4px 0 0; font-size:.95rem}

/* WHO */
.who{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.recipients{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:28px; border-top:1px solid var(--line)}
.recipients div{padding:14px 0; border-bottom:1px solid var(--line); font-weight:700; color:var(--head); font-size:.98rem}
.recipients div span{display:block; font-weight:400; color:var(--muted); font-size:.85rem; font-family:var(--mono)}
.who img{border-radius:4px}

/* STATEMENT */
.statement{font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.35; color:var(--head); max-width:30ch; font-style:italic; font-weight:500}
.cols3{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:48px}
.cols3 > div{display:grid; gap:10px; align-content:start; padding-top:18px; border-top:2px solid var(--head)}
.cols3 p{color:var(--muted); font-size:.98rem}
.kpi{margin-top:40px; background:var(--surface); padding:26px 28px; display:flex; flex-wrap:wrap; gap:18px 40px; align-items:baseline}
.kpi strong{font-family:var(--serif); font-size:2.6rem; color:var(--accent); line-height:1}
.kpi p{max-width:58ch; color:var(--ink)}

/* NAMING */
.funnel{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:8px; border:1px solid var(--line); background:var(--paper)}
.funnel > div{padding:24px; border-right:1px solid var(--line); display:grid; gap:12px; align-content:start}
.funnel > div:last-child{border-right:0; background:var(--surface)}
.funnel .n{font-family:var(--serif); font-size:2.4rem; color:var(--accent); line-height:1}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips span{font-size:.8rem; padding:3px 9px; border:1px solid var(--line); border-radius:99px; color:var(--muted)}
.chips.keep span{color:var(--head); border-color:var(--sage)}
.final-name{font-family:var(--serif); font-size:1.9rem; color:var(--head)}
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px}
.quotes blockquote{margin:0; font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--head); padding-left:16px; border-left:2px solid var(--accent)}

/* LOGO */
.logo-explore{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.logo-explore figure{margin:0}
.logo-explore img{aspect-ratio:1; object-fit:cover; border-radius:3px}
figcaption{font-family:var(--mono); font-size:.72rem; color:var(--muted); margin-top:8px; line-height:1.4}
.logo-final{display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:24px; margin-top:40px; align-items:center}
.logo-final img{border-radius:3px}
.logo-final .note{display:grid; gap:12px}
.logo-final .note p{color:var(--muted)}

/* IDENTITY */
.swatches{display:grid; grid-template-columns:repeat(6,1fr); gap:0; border-radius:4px; overflow:hidden}
.sw{padding:84px 14px 14px; font-family:var(--mono); font-size:.72rem; line-height:1.45}
.sw b{display:block; font-family:var(--sans); font-size:.9rem; font-weight:700}
.type-spec{display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-top:28px}
.type-spec > div{background:var(--paper); border:1px solid var(--line); padding:22px; display:grid; gap:6px}
.type-spec .big{font-size:2rem; color:var(--head); line-height:1.1}

/* KITS */
.kits{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.kit{background:var(--paper); border:1px solid var(--line); display:flex; flex-direction:column}
.kit img{aspect-ratio:1; object-fit:cover; width:100%}
.slip{padding:16px 18px 18px; display:grid; gap:8px}
.slip .sku{font-family:var(--mono); font-size:.68rem; color:var(--accent); letter-spacing:.1em}
.slip h3{font-size:1.15rem}
.slip ul{list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:.76rem; color:var(--muted); display:grid; gap:2px}
.slip ul li::before{content:"☐ "; color:var(--sage)}
.slip .for{font-size:.86rem; border-top:1px dashed var(--line); padding-top:8px; color:var(--ink)}
.slip .for i{font-style:normal; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--muted); margin-right:6px}

/* CHANNELS */
.ig{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.ig figure{margin:0}
.ig img{aspect-ratio:1; object-fit:cover; border-radius:3px}
.ig .profile{background:var(--surface); padding:18px; display:grid; gap:10px; align-content:center; border-radius:3px}
.ig .profile img{width:72px; height:72px; border-radius:50%}
.ig .profile p{font-size:.85rem; color:var(--muted)}
.bill{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px}
.bill img{border-radius:3px}
.chan-block{margin-top:64px}
.chan-block > .sec-head{margin-bottom:24px}
.store{display:grid; grid-template-columns:2fr 1fr; gap:20px}
.store img{border-radius:3px; width:100%; height:100%; object-fit:cover}
.store .stack{display:grid; gap:20px}
.phases{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px}
.phases > div{border-top:2px solid var(--head); padding-top:14px; display:grid; gap:8px}
.phases ul{margin:0; padding-left:18px; color:var(--muted); font-size:.95rem}

/* EVOLUTION */
.evo{display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:stretch}
.evo > div{background:var(--paper); border:1px solid var(--line); padding:26px; display:grid; gap:12px; align-content:start}
.evo > div.after{background:var(--surface); border-color:var(--sage)}
.evo .arrow{align-self:center; font-family:var(--serif); font-size:2rem; color:var(--accent); background:none; border:0; padding:0}
.evo p{color:var(--muted)}

/* AI PROCESS */
.ai{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line)}
.ai > div{padding:22px 22px 22px 0; display:grid; gap:8px; align-content:start}
.ai > div + div{padding-left:22px; border-left:1px solid var(--line)}
.ai .who-did{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase}
.ai .who-did.ai-t{color:var(--accent)} .ai .who-did.me{color:var(--head)}
.ai p{font-size:.94rem; color:var(--muted)}

/* INSIGHTS / FOOT */
.insights{display:grid; gap:36px; max-width:880px}
.insights blockquote{margin:0; font-family:var(--serif); font-size:clamp(1.35rem,2.6vw,1.9rem); line-height:1.35; color:var(--head)}
.insights cite{display:block; font-family:var(--mono); font-style:normal; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:10px}
footer{background:var(--hero-bg); color:var(--hero-muted); padding-block:48px; font-size:.9rem}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px}
footer strong{color:var(--hero-ink); font-family:var(--serif); font-size:1.2rem; font-weight:600}

@media (max-width:880px){
  .hero-grid,.who,.logo-final,.store,.evo,.bill,.phases{grid-template-columns:1fr}
  .evo .arrow{transform:rotate(90deg); justify-self:center}
  .cols3,.quotes,.type-spec,.funnel{grid-template-columns:1fr}
  .funnel > div{border-right:0; border-bottom:1px solid var(--line)}
  .kits{grid-template-columns:1fr 1fr}
  .ig{grid-template-columns:repeat(2,1fr)}
  .logo-explore{grid-template-columns:repeat(3,1fr)}
  .swatches{grid-template-columns:repeat(3,1fr)}
  .ai{grid-template-columns:1fr 1fr}
  .ai > div{padding:18px 0!important; border-left:0!important; border-bottom:1px solid var(--line)}
  .meta{grid-template-columns:1fr 1fr}
  .label{left:12px; bottom:-20px}
  section{padding-block:64px}
}
@media (max-width:520px){
  body{font-size:16px}
  .wrap{padding-inline:18px}
  .kits,.ai,.recipients{grid-template-columns:1fr}
  .logo-explore{grid-template-columns:repeat(2,1fr)}
  .swatches{grid-template-columns:repeat(2,1fr)}
}