/* Yarrow Labs — static port of the "Website home page" design mockup.
   Values (colours, sizes, spacing) are taken from the mockup's inline styles. */

@font-face{font-family:"Outfit";font-weight:300;font-style:normal;font-display:swap;src:url("fonts/outfit-300.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/outfit-400.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/outfit-600.woff2") format("woff2")}

:root{
  --bg:#14241B; --bg-band:#1B2F23; --bg-card:#1D3427; --bg-icon:#24402F; --bg-foot:#0F1C15;
  --text:#F3F4E4; --accent:#E4E9B6; --sage:#A8C4A6; --line:#9DBB9F; --pale:#C9D8B8; --muted:#8FB095;
  --on-accent:#14241B; --border:var(--border); --border-soft:var(--border-soft);
  --tok-bg:#F3F4E4; --tok-fg:#1D3427; --tok-soft:#3F5F49; --tok-field:#fff; --tok-btn:#1D3427; --tok-btn-fg:#E4E9B6;
  --art-disc:#1D3427; --art-plant:#E4E9B6;
  color-scheme:dark;
}
/* light theme: explicit choice, or system preference when no choice has been made */
:root[data-theme="light"]{
  --bg:#F3F4E4; --bg-band:#E8EBCF; --bg-card:#FBFCF1; --bg-icon:#E4E9B6; --bg-foot:#DEE3C0;
  --text:#14241B; --accent:#1D3427; --sage:#3F5F49; --line:#5E8467; --pale:#2F4A38; --muted:#46644F;
  --on-accent:#F3F4E4; --border:rgba(29,52,39,.22); --border-soft:rgba(29,52,39,.16);
  --tok-bg:#DDE3B5; --tok-fg:#14241B; --tok-soft:#2F4A38; --tok-field:#FBFCF1; --tok-btn:#1D3427; --tok-btn-fg:#E4E9B6;
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    --bg:#F3F4E4; --bg-band:#E8EBCF; --bg-card:#FBFCF1; --bg-icon:#E4E9B6; --bg-foot:#DEE3C0;
    --text:#14241B; --accent:#1D3427; --sage:#3F5F49; --line:#5E8467; --pale:#2F4A38; --muted:#46644F;
    --on-accent:#F3F4E4; --border:rgba(29,52,39,.22); --border-soft:rgba(29,52,39,.16);
    --tok-bg:#DDE3B5; --tok-fg:#14241B; --tok-soft:#2F4A38; --tok-field:#FBFCF1; --tok-btn:#1D3427; --tok-btn-fg:#E4E9B6;
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Outfit",system-ui,sans-serif;font-weight:400}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3,p{margin:0}
.sprite{width:0;height:0;position:absolute}
.wrap{max-width:1200px;margin:0 auto}

/* header */
.site-header{padding:20px 24px}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.brand{display:flex;align-items:center;gap:12px;color:var(--accent);min-height:44px}
.brand svg{width:30px;height:40px;color:var(--accent)}
.brand-name{font-size:26px;line-height:1;letter-spacing:-.01em}
.brand-name b{font-weight:600}
.brand-name span{font-weight:300;color:var(--sage)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;font-size:17px;color:var(--pale)}
.nav a{padding:12px 2px}
.nav a.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--accent);color:var(--bg);font-weight:600}
.nav a.pill:hover{color:var(--bg);background:var(--text)}

/* hero */
.hero{padding:64px 24px 96px}
.hero .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.hero-copy{flex:1 1 480px;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.eyebrow{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.hero h1{font-size:clamp(40px,6vw,72px);line-height:1.04;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.hero p{max-width:540px;font-size:20px;line-height:1.55;color:var(--sage)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 28px;border-radius:999px;font-size:17px;font-weight:600}
.btn-solid{background:var(--accent);color:var(--on-accent)}
.btn-solid:hover{background:var(--text);color:var(--on-accent)}
.btn-ghost{border:1.5px solid var(--line);color:var(--accent)}
.hero-art{flex:1 1 300px;display:flex;justify-content:center}
.hero-art svg{width:100%;max-width:420px;height:auto}
.art-disc{fill:var(--art-disc)}
.art-plant{color:var(--art-plant)}

/* chain cards */
.paths{padding:88px 24px;background:var(--bg-band)}
.paths .wrap{display:flex;flex-direction:column;gap:48px}
.section-head{display:flex;flex-direction:column;gap:12px}
.section-head h2{font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:600;letter-spacing:-.015em}
.cards{display:flex;flex-wrap:wrap;gap:24px}
.card{flex:1 1 440px;padding:36px;border-radius:28px;background:var(--bg-card);border:1px solid var(--border);display:flex;flex-direction:column;gap:24px}
.card-head{display:flex;align-items:center;gap:16px}
.card-icon{width:56px;height:56px;border-radius:16px;background:var(--bg-icon);display:flex;align-items:center;justify-content:center}
.card-icon svg{width:28px;height:28px}
.icon{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:30px;font-weight:600;letter-spacing:-.01em}
.card-head p{margin-top:4px;font-size:17px;color:var(--sage)}
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;border-top:1px solid var(--border-soft);min-height:44px}
.row-text{display:flex;flex-direction:column;gap:4px}
.row-title{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;color:var(--text)}
.row-sub{font-size:16px;color:var(--sage)}
.row .arrow{width:24px;height:24px;flex:none}
.badge{padding:3px 10px;border-radius:999px;background:var(--accent);color:var(--bg);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}

/* tokens */
.tokens{padding:96px 24px;background:var(--tok-bg);color:var(--tok-fg)}
.tokens a:hover{color:var(--tok-soft)}
.tokens .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.tokens-copy{flex:1 1 440px;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.tokens .eyebrow{color:var(--tok-soft)}
.tokens h2{font-size:clamp(32px,4.4vw,52px);line-height:1.08;font-weight:600;letter-spacing:-.02em}
.tokens-copy p{max-width:520px;font-size:19px;line-height:1.55;color:var(--tok-soft)}
.notify{display:flex;flex-wrap:wrap;gap:12px;width:100%;max-width:520px}
.notify input{flex:1 1 240px;min-height:52px;padding:0 18px;border-radius:14px;border:1.5px solid var(--tok-fg);background:var(--tok-field);color:var(--tok-fg);font:400 17px "Outfit",sans-serif}
.notify button{min-height:52px;padding:0 28px;border:0;border-radius:14px;background:var(--tok-btn);color:var(--tok-btn-fg);font:600 17px "Outfit",sans-serif;cursor:pointer}
.notify input:disabled,.notify button:disabled{opacity:.55;cursor:not-allowed}
.notify-note{font-size:15px;color:var(--tok-soft)}
.coins{flex:1 1 320px;display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.coins svg{width:150px;height:150px}
.coin-forest{--outer:#1D3427;--inner:#24402F}
.coin-teal{--outer:#1B3A38;--inner:#234846}
.coin-olive{--outer:#2E3A1C;--inner:#3A4826}

/* roadmap */
.roadmap{padding:88px 24px;background:var(--bg)}
.roadmap .wrap{display:flex;flex-direction:column;gap:40px}
.road-grid{display:flex;flex-wrap:wrap;gap:24px}
.road{flex:1 1 300px;padding:28px;border-radius:24px;border:1px solid var(--border);background:var(--bg-card);display:flex;flex-direction:column;gap:12px;scroll-margin-top:24px}
.road h3{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:600}
.road p{font-size:17px;line-height:1.55;color:var(--sage)}

/* footer */
.site-footer{padding:72px 24px 40px;background:var(--bg-foot)}
.site-footer .wrap{display:flex;flex-direction:column;gap:48px}
.foot-cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.foot-brand{flex:1 1 280px;display:flex;flex-direction:column;gap:16px}
.foot-brand .brand-name{font-size:24px}
.foot-brand p{max-width:300px;font-size:16px;line-height:1.55;color:var(--sage)}
.foot-col{flex:1 1 140px;display:flex;flex-direction:column;gap:4px;scroll-margin-top:24px}
.foot-col h4{margin:0 0 8px;font-size:14px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.foot-col a{padding:8px 0;font-size:17px}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-top:28px;border-top:1px solid var(--border-soft);font-size:14px;line-height:1.5;color:var(--muted)}
.legal span:last-child{max-width:560px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* coin symbol parts (classes rather than inline styles, so a strict CSP works) */
.coin-outer{fill:var(--outer)}
.coin-inner{fill:var(--inner)}
.coin-plant{color:#E4E9B6}

/* theme toggle (needs JS; hidden otherwise) */
.theme-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1.5px solid var(--line);border-radius:999px;background:transparent;color:var(--accent);cursor:pointer}
.theme-toggle:hover{background:var(--bg-icon)}
.js .theme-toggle{display:inline-flex}
.theme-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i-moon{display:none}
:root[data-theme="light"] .i-sun{display:none}
:root[data-theme="light"] .i-moon{display:block}

/* smooth theme change: cross-fade between snapshots (View Transitions); unsupported browsers just switch */
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s;animation-timing-function:ease}