/* =========================================================================
   Automate Naija - the "Canvas" homepage template (canvas.html)

   The page is laid out like an automation canvas: dot-grid zones hold
   "nodes" joined by wires. A member's path is a workflow, the week's builds
   are a board, graded work is an execution log.

   Themes follow assets/site.js: dark when <html> has no data-theme, light
   when it has data-theme="light". canvas.html opens in light for a first
   visit (data-default-theme="light"); the toggle and a saved choice win.
   ========================================================================= */

/* ---- Fonts, self-hosted (SIL Open Font License, see fonts/LICENSE-*) ---- */
@font-face{font-family:'Bricolage Grotesque';font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+20A0-20C0;}
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+20A0-20C0;}
@font-face{font-family:'Instrument Sans';font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Instrument Sans';font-weight:500;font-display:swap;src:url(fonts/instrument-sans-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Instrument Sans';font-weight:600;font-display:swap;src:url(fonts/instrument-sans-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Instrument Sans';font-weight:700;font-display:swap;src:url(fonts/instrument-sans-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Instrument Sans';font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+20A0-20C0;}
@font-face{font-family:'Instrument Sans';font-weight:600;font-display:swap;src:url(fonts/instrument-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+20A0-20C0;}
@font-face{font-family:'Instrument Sans';font-weight:700;font-display:swap;src:url(fonts/instrument-sans-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+20A0-20C0;}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-display:swap;src:url(fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+20A0-20C0;}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-display:swap;src:url(fonts/jetbrains-mono-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+20A0-20C0;}

/* ---- Tokens: dark on the bare root, light under data-theme="light" ---- */
:root{
  --canvas:#0C0F0D; --dot:rgba(255,255,255,.08); --surface:#151A16; --surface-2:#1A201B; --sunk:#101411;
  --ink:#EFF3EE; --ink-2:#C2CAC3; --muted:#8C968E; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --accent:#FF7424; --accent-ink:#FF8A47; --accent-soft:rgba(255,116,36,.13);
  --ok:#4ADE80; --ok-soft:rgba(74,222,128,.12); --sticky:#3B3313; --sticky-ink:#FFE7A0;
  --n8n:#EA4B71; --make:#7B2FF7; --zapier:#FF4F00; --brand-green:#17C964; --whatsapp:#1F9D55;
  --shadow-node:0 1px 0 rgba(0,0,0,.4),0 10px 24px -8px rgba(0,0,0,.6);
  --shadow-tile:0 14px 28px -14px rgba(0,0,0,.8);
  --bg-icon:.08;
  --display:'Bricolage Grotesque','Arial Narrow',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
html[data-theme="light"]{
  --canvas:#FFFFFF; --dot:rgba(0,0,0,.11); --surface:#FFFFFF; --surface-2:#F8F8F8; --sunk:#F3F3F4;
  --ink:#111111; --ink-2:#3D3D42; --muted:#6B6B72; --line:rgba(0,0,0,.09); --line-2:rgba(0,0,0,.16);
  --accent:#E35A00; --accent-ink:#B44600; --accent-soft:rgba(227,90,0,.10);
  --ok:#15803D; --ok-soft:rgba(21,128,61,.12); --sticky:#FFE7A0; --sticky-ink:#4A3A00;
  --brand-green:#0B8C45;
  --shadow-node:0 1px 0 rgba(0,0,0,.04),0 6px 18px -6px rgba(0,0,0,.16);
  --shadow-tile:0 12px 26px -12px rgba(0,0,0,.28),0 2px 4px rgba(0,0,0,.04);
  --bg-icon:.06;
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;}
[hidden]{display:none!important;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{background:var(--canvas);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px;}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));}
.dots{background-image:radial-gradient(var(--dot) 1.1px,transparent 1.5px);background-size:22px 22px;}
.kicker{font:700 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);}
h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;text-wrap:balance;}
h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1;font-weight:800;}
.lead{font-size:1.08rem;color:var(--ink-2);max-width:56ch;}
svg.i{width:18px;height:18px;flex-shrink:0;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 22px;border-radius:12px;font:600 1rem/1 var(--body);border:1px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s;}
.btn-run{background:var(--accent);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 24px -10px var(--accent);}
.btn-run .play{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.2);display:grid;place-items:center;}
.btn-run .play svg{width:13px;height:13px;}
.btn-run:hover{transform:translateY(-1px);}
.btn-ghost{background:var(--surface);border-color:var(--line-2);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink-2);}
.btn-wa{background:var(--whatsapp);color:#fff;}

/* ---- nav ---- */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--canvas) 84%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;gap:28px;height:68px;}
.brand{display:inline-flex;align-items:baseline;font:700 1.08rem/1 var(--body);letter-spacing:-.02em;white-space:nowrap;}
.brand img{height:2.5rem;width:auto;}
.brand .logo-on-light{display:none;}
html[data-theme="light"] .brand .logo-on-dark{display:none;}
html[data-theme="light"] .brand .logo-on-light{display:block;}
.nav-links{display:flex;gap:24px;margin-left:12px;font-size:.92rem;font-weight:500;color:var(--ink-2);}
.nav-links a:hover{color:var(--ink);}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.nav-right .btn{height:40px;padding:0 16px;font-size:.9rem;border-radius:10px;}
.nav-login{font-weight:600;font-size:.92rem;}
.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);display:grid;place-items:center;color:var(--ink-2);cursor:pointer;}
.icon-btn svg{width:18px;height:18px;}
/* The toggle shows where it would take you. */
#themeToggle .t-sun{display:block;} #themeToggle .t-moon{display:none;}
html[data-theme="light"] #themeToggle .t-sun{display:none;} html[data-theme="light"] #themeToggle .t-moon{display:block;}
#menuBtn{display:none;}
.mobile-menu{display:none;flex-direction:column;padding:6px 20px 18px;border-top:1px solid var(--line);background:var(--canvas);}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:12px 0;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--line);}
.mobile-menu .btn{margin-top:14px;border-bottom:0;color:var(--ink);}

/* ---- hero ---- */
.hero{position:relative;isolation:isolate;padding:64px 0 56px;border-bottom:1px solid var(--line);overflow:hidden;}
.live-chip{display:inline-flex;align-items:center;gap:10px;padding:7px 12px 7px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);font:700 .72rem/1 var(--mono);letter-spacing:.08em;color:var(--ink-2);box-shadow:var(--shadow-node);text-transform:uppercase;}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft);flex-shrink:0;}
.hero h1{font-size:clamp(2.9rem,6.1vw,5.7rem);line-height:.92;font-weight:800;letter-spacing:-.05em;margin:22px 0 4px;}
.hero h1 .u{position:relative;white-space:nowrap;color:var(--accent);}
.hero h1 .u svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.32em;overflow:visible;}
.hero-top{display:grid;grid-template-columns:1.45fr .8fr;gap:48px;align-items:end;}
.hero-side{display:flex;flex-direction:column;gap:22px;padding-bottom:12px;}
.hero-side .lead{font-size:1.15rem;}
.ctas{display:flex;flex-wrap:wrap;gap:12px;}

/* ---- the workflow ---- */
.flow{position:relative;list-style:none;padding:26px 0 64px;margin:52px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:104px;}
@media (min-width:1380px){.flow{margin-left:-72px;margin-right:-72px;}}
.flow svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.wire{fill:none;stroke:var(--accent);stroke-width:2;opacity:.35;}
.wire-run{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:4 10;stroke-linecap:round;animation:flow 1.2s linear infinite;opacity:.9;}
@keyframes flow{to{stroke-dashoffset:-14;}}
.wlabel{position:absolute;transform:translate(-50%,-50%);font:700 .6rem/1 var(--mono);color:var(--accent-ink);background:var(--canvas);padding:4px 7px;border-radius:6px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);white-space:nowrap;}
.node{position:relative;background:var(--surface);border:1.5px solid var(--line-2);border-radius:16px;padding:16px;box-shadow:var(--shadow-node);display:flex;flex-direction:column;gap:12px;min-height:150px;}
.flow .node.lo{margin-top:50px;}
.node.trigger{border-radius:40px 16px 16px 40px;padding-left:20px;}
.node .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#fff;background:var(--c,var(--accent));flex-shrink:0;}
.node .ic svg{width:21px;height:21px;}
.node .ic.ink{background:var(--ink);color:var(--canvas);}
.node .type{font:700 .62rem/1 var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;}
.node b{display:block;font:700 1.02rem/1.25 var(--body);letter-spacing:-.01em;margin-top:5px;}
.node small{display:block;font-size:.84rem;color:var(--ink-2);line-height:1.4;margin-top:3px;}
.node .live{color:var(--accent-ink);font-weight:600;}
.port{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2);transform:translateY(-50%);}
.port.in{left:-7px;} .port.out{right:-7px;border-color:var(--accent);background:var(--accent);}
.ok{position:absolute;top:-10px;right:-10px;width:24px;height:24px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 3px var(--canvas);}
.ok svg{width:13px;height:13px;stroke-width:3;}
.sticky{position:absolute;left:0;bottom:-10px;z-index:3;width:260px;background:var(--sticky);color:var(--sticky-ink);padding:12px 14px;border-radius:4px;font-size:.84rem;line-height:1.45;transform:rotate(-1.6deg);box-shadow:0 8px 18px -10px rgba(0,0,0,.35);}
.runbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;font:500 .8rem/1.4 var(--mono);color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;width:fit-content;max-width:100%;}
.runbar .okpill{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:700;}
.runbar .okpill svg{width:14px;height:14px;stroke-width:3;}

/* ---- background: floating tool tiles and faint automation icons ---- */
.floaters,.bgi{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden;}
.tile{position:absolute;display:grid;place-items:center;border-radius:28%;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-tile);animation:bob var(--d,7s) ease-in-out var(--delay,0s) infinite alternate;}
.tile svg{width:52%;height:52%;}
.tile.far{opacity:.55;filter:saturate(.8);}
.tile.phone{display:none;}
@keyframes bob{from{transform:translateY(-5px) rotate(var(--r,0deg));}to{transform:translateY(6px) rotate(calc(var(--r,0deg) * -0.4));}}
.bgi svg{position:absolute;color:var(--ink);opacity:var(--bg-icon);stroke-width:1.4;}
@media (max-width:1359px){.tile.edge{display:none;}}

/* ---- sections ---- */
section{position:relative;isolation:isolate;padding:96px 0;border-bottom:1px solid var(--line);}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:40px;}
.sec-head > div{display:flex;flex-direction:column;gap:14px;max-width:760px;}

/* this week */
.countdown{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-node);}
.countdown .t{font:700 1.6rem/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.countdown .t em{font-style:normal;color:var(--muted);font-size:.9rem;margin:0 2px 0 1px;}
.countdown span{font-size:.8rem;color:var(--muted);line-height:1.3;}
.starter{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;background:var(--sticky);color:var(--sticky-ink);border-radius:6px;padding:20px 24px;margin-bottom:22px;transform:rotate(-.4deg);box-shadow:0 10px 22px -14px rgba(0,0,0,.4);}
.starter .tag{font:700 .68rem/1 var(--mono);letter-spacing:.1em;background:var(--sticky-ink);color:var(--sticky);padding:7px 9px;border-radius:5px;white-space:nowrap;}
.starter b{display:block;font:700 1.25rem/1.25 var(--display);letter-spacing:-.02em;}
.starter small{font-size:.86rem;opacity:.85;}
.starter .go{font-weight:700;white-space:nowrap;display:inline-flex;gap:8px;align-items:center;}
.lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.lane{background:var(--sunk);border:1px solid var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:10px;}
.lane-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 8px 4px;}
.lane-h b{font:700 1.05rem/1 var(--display);letter-spacing:-.01em;}
.lane-h span{font:500 .74rem/1 var(--mono);color:var(--muted);text-align:right;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow-node);transition:border-color .15s,transform .15s;}
a.card:hover{border-color:var(--accent);transform:translateY(-1px);}
.card .row1{display:flex;align-items:center;gap:8px;}
.tool{display:inline-flex;align-items:center;gap:6px;font:700 .68rem/1 var(--mono);letter-spacing:.04em;color:var(--ink-2);}
.tool i{width:18px;height:18px;border-radius:5px;background:var(--tc);display:grid;place-items:center;color:#fff;font:800 .62rem/1 var(--body);font-style:normal;}
.card .feat{margin-left:auto;font:700 .6rem/1 var(--mono);letter-spacing:.08em;color:var(--accent-ink);background:var(--accent-soft);padding:4px 6px;border-radius:5px;}
.card h3{font:600 1rem/1.3 var(--body);letter-spacing:-.005em;}
.card p{font-size:.84rem;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card .row2{display:flex;justify-content:space-between;align-items:center;gap:10px;font:500 .72rem/1 var(--mono);color:var(--muted);padding-top:8px;border-top:1px dashed var(--line-2);}
.card .row2 .lock{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.card .row2 svg{width:12px;height:12px;}
.week-empty{background:var(--surface);border:1px dashed var(--line-2);border-radius:18px;padding:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;color:var(--ink-2);}

/* executions */
.summary{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--line-2);border-radius:18px;margin-bottom:22px;overflow:hidden;}
.summary div{padding:20px 22px;border-right:1px solid var(--line);}
.summary div:last-child{border-right:0;}
.summary b{display:block;font:700 2.3rem/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
.summary span{font:700 .66rem/1 var(--mono);letter-spacing:.1em;color:var(--muted);text-transform:uppercase;}
.exec-grid{display:grid;grid-template-columns:2fr 1fr;gap:22px;align-items:start;}
.panel{background:var(--surface);border:1px solid var(--line-2);border-radius:18px;overflow:hidden;}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);font:700 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);}
.panel-h a{color:var(--accent-ink);letter-spacing:.02em;text-transform:none;font:600 .8rem/1 var(--body);white-space:nowrap;}
.log{width:100%;border-collapse:collapse;font-size:.88rem;}
.log th{text-align:left;font:700 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);}
.log td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;}
.log tr:last-child td{border-bottom:0;}
.log tbody tr:hover td{background:var(--surface-2);}
.st{display:inline-flex;align-items:center;gap:6px;font:700 .68rem/1 var(--mono);color:var(--ok);background:var(--ok-soft);padding:5px 8px;border-radius:6px;}
.st svg{width:12px;height:12px;stroke-width:3;}
.who{display:flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap;}
a.who:hover{color:var(--accent-ink);}
.av{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:top;background:var(--sunk);border:1px solid var(--line);display:grid;place-items:center;font:700 .62rem/1 var(--mono);color:var(--accent-ink);flex-shrink:0;}
.wf a{color:var(--ink-2);}
.wf a:hover{color:var(--accent-ink);}
.wf small{display:block;font:500 .7rem/1.4 var(--mono);color:var(--muted);margin-top:2px;}
.score{display:flex;align-items:center;gap:8px;font:700 .8rem/1 var(--mono);font-variant-numeric:tabular-nums;}
.score i{width:54px;height:6px;border-radius:3px;background:var(--sunk);overflow:hidden;display:block;}
.score i::after{content:"";display:block;height:100%;width:var(--s);background:var(--ok);border-radius:3px;}
.when{font:500 .74rem/1 var(--mono);color:var(--muted);white-space:nowrap;}
.side{display:flex;flex-direction:column;gap:22px;}
.rows{list-style:none;padding:6px 0;}
.rows li{display:grid;grid-template-columns:28px 30px 1fr auto;gap:10px;align-items:center;padding:8px 18px;font-size:.9rem;}
.rows .rk{font:700 .74rem/1 var(--mono);color:var(--muted);}
.rows .v{font:700 .78rem/1 var(--mono);color:var(--accent-ink);white-space:nowrap;}
.rows a:hover{color:var(--accent-ink);}
.rows .empty{display:block;padding:10px 0;color:var(--muted);font-size:.86rem;grid-column:1/-1;}
.tabs{display:flex;gap:4px;}
.tabs button{font:600 .72rem/1 var(--body);letter-spacing:0;text-transform:none;padding:6px 9px;border-radius:7px;color:var(--muted);background:none;border:0;cursor:pointer;}
.tabs button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink);}
.seats{display:flex;gap:4px;}
.seats i{width:9px;height:9px;border-radius:3px;background:var(--sunk);border:1px solid var(--line-2);}
.seats i.on{background:var(--accent);border-color:var(--accent);}
.panel-f{padding:12px 18px;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted);}

/* credential */
.cred-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.cred-wrap:has(> .cred[hidden]){grid-template-columns:minmax(0,760px);}
.cred{position:relative;background:var(--surface);border:1px solid var(--line-2);border-radius:24px;padding:26px;display:grid;grid-template-columns:200px 1fr;gap:26px;box-shadow:0 30px 70px -30px rgba(0,0,0,.35);overflow:hidden;}
.cred::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:repeating-linear-gradient(90deg,var(--accent) 0 18px,var(--brand-green) 18px 36px);}
.cred .photo{aspect-ratio:3/4;border-radius:16px;background:radial-gradient(circle at 50% 85%,rgba(227,90,0,.55),transparent 62%),#151a16;position:relative;overflow:hidden;display:grid;place-items:center;font:800 3rem/1 var(--display);color:#cc5500;}
.cred .photo img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:94%;width:auto;max-width:none;}
.cred .photo img.full{inset:0;transform:none;width:100%;height:100%;object-fit:cover;}
.cred .k{font:700 .64rem/1 var(--mono);letter-spacing:.14em;color:var(--muted);}
.cred h3{font:800 2rem/1 var(--display);letter-spacing:-.03em;margin:10px 0 8px;}
.cred .t{font-size:.98rem;color:var(--ink-2);line-height:1.4;}
.cred dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:20px;}
.cred dt{font:700 .6rem/1 var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;}
.cred dd{margin:4px 0 0;font:700 .95rem/1.2 var(--mono);}
.cred .view{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:600;font-size:.9rem;color:var(--accent-ink);}
.cred .view svg{width:15px;height:15px;}
.stamp{position:absolute;right:22px;bottom:22px;display:inline-flex;align-items:center;gap:6px;font:700 .72rem/1 var(--mono);letter-spacing:.08em;color:var(--ok);border:2px solid var(--ok);border-radius:8px;padding:7px 9px;transform:rotate(4deg);}
.stamp svg{width:14px;height:14px;}
.points{display:flex;flex-direction:column;gap:22px;margin-top:28px;}
.points > div{display:grid;grid-template-columns:40px 1fr;gap:14px;}
.points .n{width:40px;height:40px;border-radius:10px;background:var(--surface);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--accent-ink);}
.points b{display:block;font-weight:600;}
.points p{color:var(--muted);font-size:.92rem;}

/* pricing */
.tracks{display:grid;grid-template-columns:1fr 1.25fr;gap:22px;align-items:stretch;}
.track{background:var(--surface);border:1.5px solid var(--line-2);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:18px;position:relative;box-shadow:var(--shadow-node);}
.track.feat{border-color:var(--accent);}
.track .hd{display:flex;align-items:center;gap:12px;}
.track .hd .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;}
.track .hd b{font:800 1.5rem/1 var(--display);letter-spacing:-.02em;}
.track .hd span{display:block;font:500 .76rem/1.3 var(--mono);color:var(--muted);margin-top:4px;}
.price{display:flex;align-items:baseline;gap:6px 10px;flex-wrap:wrap;}
.price b{font:800 3.4rem/1 var(--display);letter-spacing:-.04em;}
.price s{color:var(--muted);font:500 1.1rem/1 var(--mono);}
.price span{color:var(--muted);font-size:.92rem;}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--sunk);padding:6px;border-radius:14px;border:0;}
.tiers legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.tiers label{border-radius:10px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:3px;border:1px solid transparent;position:relative;}
.tiers input{position:absolute;opacity:0;pointer-events:none;}
.tiers label:has(input:checked){background:var(--surface);border-color:var(--line-2);box-shadow:var(--shadow-node);}
.tiers label:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px;}
.tiers b{font-weight:700;font-size:.92rem;}
.tiers span{font:500 .72rem/1.3 var(--mono);color:var(--muted);}
.tiers em{font-style:normal;font:700 .82rem/1 var(--mono);color:var(--accent-ink);}
.tiers em s{color:var(--muted);font-weight:500;}
.checks{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.95rem;color:var(--ink-2);}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:8px;}
.checks svg{color:var(--ok);width:18px;height:18px;margin-top:3px;}
.track .btn{margin-top:auto;}
.track .hint{font-size:.78rem;color:var(--muted);text-align:center;margin-top:-6px;}
.ribbon{position:absolute;top:-12px;right:22px;font:700 .64rem/1 var(--mono);letter-spacing:.1em;background:var(--accent);color:#fff;padding:7px 10px;border-radius:7px;}
.addon{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1.5px dashed var(--line-2);border-radius:18px;padding:16px 20px;font-size:.95rem;color:var(--ink-2);}
.addon b{color:var(--ink);}
.addon a{margin-left:auto;font-weight:700;color:var(--accent-ink);}

/* tutors */
.people{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.person{display:flex;flex-direction:column;gap:6px;}
.person .ph{aspect-ratio:4/5;border-radius:18px;background:linear-gradient(160deg,var(--sunk),var(--surface));border:1px solid var(--line-2);display:grid;place-items:center;font:800 2.4rem/1 var(--display);color:var(--muted);position:relative;overflow:hidden;margin-bottom:8px;}
.person .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;}
.person b{font:700 1.02rem/1.2 var(--body);}
.person span{font-size:.84rem;color:var(--muted);line-height:1.35;}
.socials{display:flex;gap:8px;margin-top:6px;}
.socials a{width:30px;height:30px;border-radius:8px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-2);}
.socials a:hover{color:var(--accent-ink);border-color:var(--accent);}
.socials svg{width:14px;height:14px;}

/* community */
.comm{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.comm-copy{display:flex;flex-direction:column;gap:18px;}
.shot{background:var(--surface);border:1px solid var(--line-2);border-radius:22px;padding:10px;box-shadow:var(--shadow-node);}
.shot img{width:100%;max-height:420px;object-fit:cover;object-position:top;border-radius:14px;}
.chat{display:flex;flex-direction:column;gap:10px;padding:8px;}
.msg{max-width:84%;padding:10px 13px;border-radius:14px;font-size:.9rem;line-height:1.45;background:var(--surface-2);border:1px solid var(--line);}
.msg small{display:block;font:700 .66rem/1 var(--mono);color:var(--accent-ink);margin-bottom:4px;}
.msg.me{align-self:flex-end;background:var(--ok-soft);border-color:transparent;}
.msg code{font:500 .8rem/1 var(--mono);background:var(--sunk);padding:2px 5px;border-radius:4px;}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;}
.faq-copy{display:flex;flex-direction:column;gap:16px;}
.faq details{border-bottom:1px solid var(--line-2);padding:18px 0;}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;font:600 1.08rem/1.35 var(--body);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font:500 1.4rem/1 var(--mono);color:var(--accent-ink);}
.faq details[open] summary::after{content:"–";}
.faq details p{margin-top:10px;color:var(--ink-2);max-width:62ch;}
.faq .ask{align-self:flex-start;}

/* final */
.final{padding:110px 0;text-align:center;border-bottom:0;}
.final h2{font-size:clamp(2.6rem,6vw,5rem);margin-top:14px;}
.final .node{display:inline-flex;flex-direction:row;align-items:center;gap:18px;min-height:0;padding:18px 22px;border-radius:999px 22px 22px 999px;text-align:left;margin-top:30px;border-color:var(--accent);box-shadow:0 24px 50px -24px var(--accent);}
.final .node .go{width:22px;height:22px;color:var(--accent-ink);}

/* footer */
footer{background:var(--surface);border-top:1px solid var(--line);padding:56px 0 32px;font-size:.9rem;color:var(--ink-2);}
.fg{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;}
.fg h3{font:700 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.fg a{display:block;padding:4px 0;}
.fg a:hover{color:var(--accent-ink);}
.fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font:500 .74rem/1 var(--mono);color:var(--muted);}
.fine a:hover{color:var(--ink);}

/* June, in this template's colours (behaviour: assets/june.js) */
.june-launcher{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 6px;border:0;border-radius:999px;background:var(--ink);color:var(--canvas);font-weight:600;font-size:.9rem;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);cursor:pointer;}
.june-launcher .jv{width:36px;height:36px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#fff;font:800 .95rem/1 var(--display);}
.june-launcher.hide{display:none;}
.june-panel{position:fixed;right:20px;bottom:20px;z-index:61;width:min(380px,calc(100vw - 40px));height:min(560px,calc(100vh - 120px));display:none;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.45);overflow:hidden;}
.june-panel.open{display:flex;}
.june-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);}
.june-avatar{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:800 1rem/1 var(--display);}
.june-head-info{flex:1;min-width:0;}
.june-head-info b{display:block;font-size:.95rem;}
.june-head-info span{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--muted);}
.june-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;}
.june-close{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;display:grid;place-items:center;}
.june-close:hover{color:var(--ink);background:var(--sunk);}
.june-close svg{width:18px;height:18px;}
.june-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;}
.june-msg{max-width:84%;font-size:.88rem;line-height:1.55;padding:10px 13px;border-radius:13px;white-space:pre-line;}
.june-msg.bot{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);border-bottom-left-radius:4px;}
.june-msg.user{align-self:flex-end;background:var(--accent);color:#fff;font-weight:600;border-bottom-right-radius:4px;}
.june-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:13px;}
.june-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:juneBlink 1.1s infinite;}
.june-typing span:nth-child(2){animation-delay:.15s;} .june-typing span:nth-child(3){animation-delay:.3s;}
@keyframes juneBlink{0%,60%,100%{opacity:.3;}30%{opacity:1;}}
.june-suggest{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;}
.june-chip{background:var(--canvas);border:1px solid var(--line-2);border-radius:999px;padding:6px 11px;font-size:.78rem;color:var(--ink-2);cursor:pointer;}
.june-chip:hover{border-color:var(--accent);color:var(--accent-ink);}
.june-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);}
.june-input-row input{flex:1;min-width:0;background:var(--canvas);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;color:var(--ink);font:inherit;font-size:.9rem;}
.june-input-row input:focus{outline:none;border-color:var(--accent);}
.june-send{width:42px;border:0;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;}
.june-send svg{width:17px;height:17px;}

/* ---- phones and small tablets ---- */
@media (max-width:880px){
  .nav-links,.nav-login{display:none;}
  #menuBtn{display:grid;}
  .nav{gap:12px;}
  .hero{padding:84px 0 40px;}
  .tile:not(.phone){display:none;}
  .tile.phone{display:grid;}
  .bgi{display:none;}
  .hero-top{grid-template-columns:1fr;gap:22px;}
  .hero h1{margin:18px 0 6px;}
  .flow{grid-template-columns:1fr;gap:34px;margin-top:36px;padding:10px 14px 24px 0;}
  .flow .node.lo{margin-top:0;}
  .node{min-height:0;flex-direction:row;align-items:center;}
  .node.trigger{border-radius:34px 16px 16px 34px;}
  .port.in{left:50%;top:-7px;transform:translateX(-50%);}
  .port.out{right:auto;left:50%;top:auto;bottom:-7px;transform:translateX(-50%);}
  .sticky{position:relative;bottom:auto;width:auto;margin-top:6px;}
  section{padding:64px 0;}
  .lanes,.exec-grid,.cred-wrap,.tracks,.comm,.faq{grid-template-columns:1fr;}
  .starter{grid-template-columns:1fr;gap:12px;}
  .summary{grid-template-columns:1fr 1fr;}
  .summary div:nth-child(2){border-right:0;}
  .summary div:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .log thead{display:none;}
  .log tr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:14px 16px;border-bottom:1px solid var(--line);}
  .log td{padding:0;border:0;}
  .log td.c-st,.log td.c-when{display:none;}
  .log td.c-wf{grid-column:1/-1;}
  .cred{grid-template-columns:1fr;}
  .cred .photo{aspect-ratio:4/3;}
  .people{grid-template-columns:repeat(2,1fr);}
  .fg{grid-template-columns:1fr 1fr;}
  .tiers{grid-template-columns:1fr;}
  .june-launcher{right:14px;bottom:14px;}
  .june-panel{right:10px;left:10px;bottom:10px;width:auto;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .wire-run,.tile,.june-typing span{animation:none;}
  .tile{transform:rotate(var(--r,0deg));}
}

/* Empty anchors so older links like index.html#arena land on the matching section. */
.anchor{display:block;height:0;position:relative;top:-72px;}