/* Fox in the Comp: shared styles. Generic dark editor-panel look (no logos) in After Effects' own greys, with AE blue for the
   editor chrome. Type and the one accent follow the social cards: condensed heavy headlines, mono labels, fox orange for
   the headline accent and every Buy/CTA button, so a visitor from a profile lands on the same brand. */
:root{
  --app:#1e1e1e; --panel:#232323; --panel-2:#2b2b2b; --panel-3:#333333;
  --line:#3a3a3a; --line-2:#2e2e2e;
  --text:#f2f2f2; --text-2:#a8a8a8; --text-3:#8a8a8a;
  --blue:#2d8ceb; --blue-hi:#5aa6f2; --blue-btn:#1f72cf; --blue-btn-hi:#1a66bd; --violet:#9999ff; --violet-hi:#b8b8ff;
  --key:#e6e6e6; --white:#ffffff;
  --fox:#f26b2a; --fox-btn:#c2470f; --fox-btn-hi:#a93d0c;
  --ok:#5fb85f; --warn:#9999ff; --bad:#e5484d;
  --display:'Archivo',system-ui,sans-serif;
  --sans:'Instrument Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:1180px; --gut:16px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--app); color:var(--text); font:400 16px/1.55 var(--sans); min-height:100dvh; overflow-x:clip}
/* Dark, but not flat black. Soft coloured glows behind everything, vignetted to the edges.
   Fixed layer, so it reads the same at 390 and 1280 and never scrolls. Panels stay opaque, so text contrast is unchanged. */
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70vmax 55vmax at -5% -10%, rgba(45,140,235,.22), transparent 62%),
    radial-gradient(60vmax 50vmax at 105% 25%, rgba(153,153,255,.19), transparent 62%),
    radial-gradient(55vmax 45vmax at 10% 105%, rgba(32,201,180,.13), transparent 60%),
    radial-gradient(50vmax 42vmax at 100% 105%, rgba(214,92,255,.12), transparent 60%),
    radial-gradient(130% 100% at 50% 35%, transparent 50%, rgba(0,0,0,.42) 100%)}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.mono{font-family:var(--mono)}
.eyebrow{font:500 12.5px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); margin:0}
.skip{position:absolute; left:-999px; top:8px; background:var(--text); color:var(--app); padding:10px 14px; border-radius:4px; z-index:10}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--blue-hi); outline-offset:2px}

/* ---------- panel chrome ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden}
.panel-tab{display:flex; align-items:center; gap:10px; min-height:34px; padding:0 12px; background:var(--panel-2); border-bottom:1px solid var(--line); font:500 12px/1 var(--mono); color:var(--text-2); letter-spacing:.04em}
.panel-tab .tab{display:inline-flex; align-items:center; gap:8px; padding:10px 0; border-bottom:2px solid var(--blue); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.panel-tab .tab::before{content:""; width:8px; height:8px; border-radius:2px; background:var(--blue); flex:none}
.panel-tab .meta{margin-left:auto; color:var(--text-3); white-space:nowrap}
.panel-tab .menu{margin-left:auto; color:var(--text-3); letter-spacing:.15em}

/* ---------- top bar ---------- */
header.bar{background:var(--panel); border-bottom:1px solid var(--line)}
header.bar .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 12px; min-height:58px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font:800 20px/1 var(--display); font-stretch:75%; text-transform:uppercase; letter-spacing:.01em; min-width:0; min-height:58px}
.brand img{width:36px; height:36px; border-radius:50%; border:1px solid var(--line); flex:none}
.brand span{white-space:nowrap}
nav.site{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; width:100%; padding:0 0 10px}
nav.site a{display:flex; align-items:center; justify-content:center; min-height:42px; font:500 12.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); text-decoration:none; border:1px solid var(--line); background:var(--panel-2); border-radius:4px; white-space:nowrap}
nav.site a:hover{color:var(--text); border-color:var(--violet)}
nav.site a[aria-current=page]{color:var(--white); background:var(--blue-btn); border-color:var(--blue)}

/* ---------- type ---------- */
.hero{padding:30px 0 8px}
h1.big{font:800 2.7rem/.96 var(--display); font-stretch:75%; letter-spacing:-.01em; text-transform:uppercase; margin:16px 0 0; text-wrap:balance}
h1.big em, h2 em{font-style:normal; color:var(--fox)}
.hero .eyebrow{display:flex; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.sub{font-size:17.5px; color:var(--text-2); margin:16px 0 0; max-width:36em}
.sub strong{color:var(--text); font-weight:600}
section.block{padding:48px 0 0}
section.block h2{font:800 2.2rem/1.0 var(--display); font-stretch:75%; letter-spacing:-.01em; margin:10px 0 0; text-wrap:balance; max-width:22em}
section.block .lede{color:var(--text-2); font-size:17px; margin:12px 0 0; max-width:38em}
.prose p{color:var(--text-2); font-size:17px; margin:14px 0 0; max-width:38em}
.prose p strong{color:var(--text); font-weight:600}
.prose p.eyebrow{color:var(--text-2); font-size:12.5px; margin:0}

/* in-text links: grow the hit area without moving the line */
.lede a,.sub a,.prose a,.fine a{color:var(--blue-hi); text-underline-offset:3px; padding:12px 0; margin:-12px 0}

/* ---------- comp viewer ---------- */
.comp .viewer{position:relative; aspect-ratio:4/3.1; background:conic-gradient(#363636 25%, #2c2c2c 0 50%, #363636 0 75%, #2c2c2c 0) 0 0/22px 22px}
.comp .frame{position:absolute; inset:9% 12% 13%; border:1px dashed rgba(242,242,242,.18)}
.comp .frame::before,.comp .frame::after{content:""; position:absolute; width:14px; height:14px; border-color:var(--violet); border-style:solid}
.comp .frame::before{left:-1px; top:-1px; border-width:2px 0 0 2px}
.comp .frame::after{right:-1px; bottom:-1px; border-width:0 2px 2px 0}
.comp .fox{position:absolute; left:50%; bottom:13%; transform:translateX(-50%); height:80%; width:auto; max-width:76%; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.comp .readout,.comp .zoom{position:absolute; bottom:8px; font:500 11px/1 var(--mono); color:var(--text-3)}
.comp .readout{left:10px} .comp .zoom{right:10px}
.prompt{display:flex; gap:8px; align-items:flex-start; font:500 13px/1.45 var(--mono); color:var(--text); background:var(--app); border-bottom:1px solid var(--line); border-left:3px solid var(--blue); padding:10px 12px}
.prompt b{color:var(--violet); font-weight:500; flex:none}
.mini{position:relative; padding:10px 12px 14px; background:var(--panel); border-top:1px solid var(--line)}
.ruler{position:relative; height:16px; font:500 10px/1 var(--mono); color:var(--text-3)}
.ruler span{position:absolute; top:0; transform:translateX(-50%)}
.ruler span:first-child{transform:none}
.ticks{height:6px; margin-top:2px; background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 10%)}
.lane{position:relative; height:22px; margin-top:8px; border-radius:3px; background:var(--panel-3)}
.lane .seg{position:absolute; top:4px; bottom:4px; border-radius:2px; background:linear-gradient(var(--blue),var(--blue-btn))}
.kf{position:absolute; top:50%; width:10px; height:10px; background:var(--key); transform:translate(-50%,-50%) rotate(45deg); border:1px solid var(--app)}
.playhead{position:absolute; top:4px; bottom:6px; width:2px; background:var(--blue); left:62%}
.playhead::before{content:""; position:absolute; top:-2px; left:50%; width:12px; height:10px; transform:translateX(-50%); background:var(--blue); clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}

.hero-grid{display:flex; flex-direction:column; gap:16px; margin-top:24px}
.hero-grid .hero-side{order:-1; display:flex; flex-direction:column; gap:16px}
.hero-side .feed{margin-top:0}

/* ---------- signup (effect-controls panel) ---------- */
.signup .body{padding:18px 16px}
.signup h2,.signup h3{font:800 1.75rem/1.05 var(--display); font-stretch:75%; letter-spacing:-.005em; margin:0}
.signup p{margin:8px 0 0; color:var(--text-2); font-size:16px}
.signup form{display:flex; flex-direction:column; gap:10px; margin-top:16px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.signup input[type=email]{font:400 16px/1.2 var(--sans); color:var(--text); background:var(--app); border:1px solid var(--line); border-radius:4px; padding:12px 14px; min-height:48px; width:100%}
.signup input[type=email]::placeholder{color:var(--text-3)}
.signup input[type=email]:focus{outline:2px solid var(--blue); outline-offset:1px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 16px/1.1 var(--sans); color:var(--white); background:var(--fox-btn); border:0; border-radius:4px; min-height:48px; padding:0 20px; cursor:pointer; text-decoration:none; text-align:center}
.btn:hover{background:var(--fox-btn-hi)}
.btn.ghost{background:var(--panel-2); color:var(--text); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--fox)}
.btn[disabled],.btn[aria-disabled=true]{background:var(--panel-3); color:var(--text-2); border:1px dashed var(--line); cursor:not-allowed}
.fine{font-size:13.5px !important; color:var(--text-3) !important; margin-top:12px !important}
.notice{margin-top:14px; padding:12px 14px; border:1px solid var(--warn); border-left-width:3px; border-radius:4px; background:rgba(153,153,255,.07); font-size:15px; color:var(--text)}
.notice[hidden]{display:none}
.notice a{color:var(--blue-hi)}

/* ---------- receipt (timeline layers) ---------- */
.timeline{margin-top:20px}
.layers{list-style:none; margin:0; padding:0}
.layers li{display:grid; grid-template-columns:30px minmax(0,1fr); gap:2px 10px; padding:13px 12px; border-bottom:1px solid var(--line-2); align-items:start}
.layers li:last-child{border-bottom:0}
.layers li:nth-child(odd){background:rgba(255,255,255,.012)}
.layers .n{font:500 12px/1.9 var(--mono); color:var(--text-3)}
.layers .txt{min-width:0}
.layers .name{display:flex; align-items:center; gap:8px; font:700 20px/1.25 var(--display); font-stretch:85%}
.layers .name::before{content:""; width:10px; height:10px; border-radius:2px; background:var(--lc,var(--violet)); flex:none}
.layers .q{display:block; color:var(--text-2); font-size:16px; margin-top:3px}
.layers .track{display:none}
.layers li:nth-child(1){--lc:#2d8ceb} .layers li:nth-child(2){--lc:#4c86f0} .layers li:nth-child(3){--lc:#6a80f6}
.layers li:nth-child(4){--lc:#8288fb} .layers li:nth-child(5){--lc:#9999ff} .layers li:nth-child(6){--lc:#b8b8ff}
.tl-head{display:none}

/* ---------- cards grid ---------- */
.grid{display:grid; grid-template-columns:1fr; gap:14px; margin-top:20px}
.card .body{padding:18px 16px 18px; display:flex; flex-direction:column; gap:8px; height:100%}
.card h3{font:800 1.55rem/1.05 var(--display); font-stretch:75%; letter-spacing:-.005em; margin:0}
.card p{margin:0; color:var(--text-2)}
.card .tagline{font:500 12px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fox)}
.card .status{align-self:flex-start; font:500 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--warn); border:1px dashed var(--warn); border-radius:3px; padding:6px 8px}
.card .cta{margin-top:auto; padding-top:8px}
.card ul{margin:2px 0 0; padding-left:18px; color:var(--text-2)}
.card ul li{margin:4px 0}

/* ---------- the person row ---------- */
.how{list-style:none; margin:0; padding:0}
.how li{display:grid; grid-template-columns:1fr; gap:4px; padding:14px 16px; border-bottom:1px solid var(--line-2)}
.how li:last-child{border-bottom:0}
.how .role{font:500 12px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-3)}
.how .line{font-size:17px}
.how li.human{background:rgba(45,140,235,.10)}
.how li.human .role{color:var(--blue-hi)}
.how li.human .line{font:700 20px/1.3 var(--display); font-stretch:85%}

/* ---------- socials ---------- */
.socials{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px}
.social{display:flex; flex-direction:column; gap:4px; padding:14px; border:1px solid var(--line); border-radius:6px; background:var(--panel)}
.social .net{font:700 18px/1.2 var(--display); font-stretch:85%}
.social .handle{font:500 13px/1.3 var(--mono); color:var(--text-2); overflow-wrap:anywhere}
.social .when{font:500 11.5px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--warn); margin-top:4px}

/* ---------- side-by-side with a fox ---------- */
.split{display:grid; grid-template-columns:1fr; gap:20px; align-items:center}
.split .pose{width:100%; height:auto; max-width:220px; margin:0 auto; filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}

/* ---------- pdf preview ---------- */
.pdf-thumb{display:block; max-width:420px; width:100%; margin:0 auto; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--white)}
.pdf-thumb img{width:100%; height:auto}

/* ---------- footer ---------- */
footer{margin-top:64px; background:var(--panel); border-top:1px solid var(--line)}
.render{height:4px; background:var(--panel-3)} .render i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--blue-btn),var(--blue) 55%,var(--fox))}
footer .wrap{display:grid; grid-template-columns:1fr; gap:10px; padding-top:20px; padding-bottom:30px}
footer p{margin:0; font:400 13px/1.6 var(--mono); color:var(--text-3); letter-spacing:.03em}
footer a{text-decoration:none; color:var(--text-2); display:inline-flex; align-items:center; min-height:44px; min-width:44px}
footer a:hover{color:var(--text)}
footer .links{display:flex; flex-wrap:wrap; gap:0 18px}

/* ---------- shop: products + buy ---------- */
nav.site a[href="/shop/"]::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--fox); margin-right:7px; flex:none}
.product .body{gap:10px}
.product .top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.badge{font:500 14px/1 var(--mono); color:var(--fox); background:var(--app); border:1px solid var(--line); border-radius:3px; padding:8px 10px; flex:none}
.price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:2px}
.price b{font:800 2rem/1 var(--display); font-stretch:75%}
.price span{font:500 12px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3)}
.btn.buy{width:100%; min-height:52px; padding:8px 18px; font-size:17px}
.btn.buy.soon{background:var(--app); color:var(--fox); border:1px solid var(--fox-btn)}
.btn.buy.soon:hover{background:var(--panel-2); border-color:var(--fox)}
.btn.buy .soon-tag{font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); border:1px solid var(--line); border-radius:3px; padding:5px 6px; margin-left:4px}
.product .more{font-size:15px; color:var(--blue-hi); text-underline-offset:3px; display:inline-flex; align-items:center; min-height:40px}
.feature .body{gap:12px}
.feature .pose{width:100%; height:auto; max-width:150px; margin:18px auto 0; filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.feature ul:not(.chips){margin:4px 0 0; padding-left:18px; color:var(--text-2)}
.feature ul li{margin:4px 0}
.shelf-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--line); margin-top:8px}
.signup select{font:400 16px/1.2 var(--sans); color:var(--text); background:var(--app); border:1px solid var(--line); border-radius:4px; padding:12px 14px; min-height:48px; width:100%}
.signup label.field{display:block; font:500 12px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-top:16px}
.signup label.field + select{margin-top:6px}
.flash{animation:none}
@media (prefers-reduced-motion:no-preference){ .flash{animation:flash 1.2s ease-out 1} }
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(242,107,42,.0)} 25%{box-shadow:0 0 0 3px rgba(242,107,42,.75)} 100%{box-shadow:0 0 0 0 rgba(242,107,42,0)}}

/* ---------- a lit backdrop behind every fox, so his dark ear tips separate from the dark page ---------- */
.pose,.comp .fox,.links-hero .avatar{background:radial-gradient(ellipse 40% 30% at 50% 32%, rgba(90,166,242,.42), rgba(153,153,255,.16) 60%, rgba(153,153,255,0) 100%);
  filter:drop-shadow(0 0 12px rgba(110,170,255,.55)) drop-shadow(0 10px 18px rgba(0,0,0,.45)) !important}
.brand img{background:#2a3a52}

/* ---------- icons + visual blocks (for animators: less text, more icons) ---------- */
.ic{width:24px; height:24px; flex:none}
.btn .ic{width:20px; height:20px}
.more .ic{width:18px; height:18px; margin-left:6px}
.btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
section.block.tight{padding-top:28px}
.h3{font:800 2rem/1 var(--display) !important; font-stretch:75% !important; margin:0 !important}
.sig-head{display:flex; align-items:center; gap:12px}
.sig-head .ic{width:30px; height:30px; color:var(--fox)}
.signup .row{display:flex; flex-direction:column; gap:10px}
.grid.tools{grid-template-columns:1fr}
#notify form{flex-direction:column !important}
.buy-row{margin-top:16px}
.art{display:grid; place-items:center; width:64px; height:64px; border-radius:6px; color:var(--fox);
  background:conic-gradient(#2b2b2b 25%, #262626 0 50%, #2b2b2b 0 75%, #262626 0) 0 0/12px 12px; border:1px solid var(--line)}
.art .ic{width:34px; height:34px}
.product .art{margin-bottom:4px}
.top .art{margin:0}
.tile .body{align-items:flex-start}
.tile.human{border-color:var(--blue)} .tile.human .art{color:var(--blue-hi)}
.chips{list-style:none; margin:20px 0 0; padding:0 !important; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.chips li{display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:16px; border:1px solid var(--line); border-radius:6px; background:var(--panel); font:700 18px/1.15 var(--display); font-stretch:85%}
.chips li .ic{width:30px; height:30px; color:var(--fox)}
.chips.mini{grid-template-columns:repeat(2,minmax(0,1fr)); margin:6px 0 4px; gap:8px}
.chips.mini li{flex-direction:row; align-items:center; gap:10px; padding:10px 12px; font-size:16px; background:var(--app)}
.chips.mini li .ic{width:22px; height:22px}
.feed{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px}
.feed img{width:100%; height:auto; border-radius:6px; border:1px solid var(--line)}
.shelf-h h2{margin:0 !important}
.shelf-h .tagline{font:500 12px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--violet)}
.shelf-h .more{min-height:44px; white-space:nowrap}
.fine.center{text-align:center}
.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.four .card .body{padding:16px 14px}
.grid.four .card h3{font-size:1.3rem}
.link-item.wide{margin-top:18px}
.link-item .li-k .ic{width:22px; height:22px}
.link-item .li-k{display:grid; place-items:center; min-width:48px; min-height:48px; padding:0}
.link-item:not(:has(.li-sub)){grid-template-areas:"k t"}
.social{display:grid !important; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"i n" "i w"; align-items:center; gap:2px 12px !important}
.social > svg{grid-area:i}
.social .brand-mark{width:22px; height:22px; color:var(--text)}
.social .net{grid-area:n; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.social .when{grid-area:w; margin-top:0 !important}
.eyebrow .ic{width:16px; height:16px; vertical-align:-3px}

/* ---------- /links (link-in-bio) ---------- */
.links-page{max-width:560px}
.links-hero{display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 0 8px}
.links-hero .avatar{width:132px; height:auto; filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.links-hero h1{font:800 2.6rem/.95 var(--display); font-stretch:75%; text-transform:uppercase; letter-spacing:-.005em; margin:14px 0 0}
.links-hero .handle{font:500 14px/1.4 var(--mono); color:var(--text-2); margin:8px 0 0}
.links-hero .sub{margin:12px auto 0; font-size:17px}
.link-list{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.link-item{display:grid; grid-template-columns:auto 1fr; grid-template-areas:"k t" "k s"; gap:2px 14px; align-items:center; padding:14px 16px; min-height:64px; border:1px solid var(--line); border-radius:6px; background:var(--panel); text-decoration:none}
.link-item:hover{border-color:var(--fox)}
.link-item .li-k{grid-area:k; font:500 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fox); border:1px solid var(--line); background:var(--app); border-radius:3px; padding:7px 8px; min-width:58px; text-align:center}
.link-item .li-title{grid-area:t; font:800 1.3rem/1.1 var(--display); font-stretch:80%}
.link-item .li-sub{grid-area:s; font-size:14.5px; color:var(--text-2)}
.link-item.primary{background:var(--fox-btn); border-color:var(--fox-btn)}
.link-item.primary:hover{background:var(--fox-btn-hi)}
.link-item.primary .li-k{color:var(--white); background:rgba(0,0,0,.25); border-color:rgba(255,255,255,.25)}
.link-item.primary .li-sub{color:rgba(255,255,255,.88)}
.link-item.off{border-style:dashed; background:var(--app)}
.link-item.off .li-title{color:var(--text-2)}
.links-page .socials{margin-top:22px}
a.social{text-decoration:none} a.social:hover{border-color:var(--fox)}
.social .when.live{color:var(--fox)}

@media (min-width:600px) and (max-width:859px){ .grid.tools{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- desktop ---------- */
@media (min-width:860px){
  :root{--gut:32px}
  header.bar .wrap{flex-wrap:nowrap}
  nav.site{display:flex; width:auto; padding:0; gap:8px}
  nav.site a{padding:0 14px; min-height:40px}
  .hero{padding:60px 0 8px}
  h1.big{font-size:5rem}
  .sub{font-size:19px}
  .hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:28px; align-items:start; margin-top:40px}
  .hero-grid .hero-side{order:0}
  .signup .body{padding:26px}
  .signup form{flex-direction:row}
  .signup input[type=email]{flex:1}
  section.block{padding:84px 0 0}
  section.block h2{font-size:3.3rem}
  .layers li{grid-template-columns:40px minmax(0,1fr) minmax(0,.9fr); gap:0 16px; padding:15px 16px; align-items:center}
  .layers .track{display:block; position:relative; height:24px; border-radius:3px; background:var(--panel-3)}
  .layers .track .seg{position:absolute; top:5px; bottom:5px; border-radius:2px; background:var(--lc); opacity:.85}
  .layers .track .kf{width:11px; height:11px}
  .tl-head{display:grid; grid-template-columns:40px minmax(0,1fr) minmax(0,.9fr); gap:0 16px; padding:8px 16px; border-bottom:1px solid var(--line); font:500 11px/1 var(--mono); color:var(--text-3); letter-spacing:.06em}
  .tl-head .tl-ruler{position:relative; height:12px}
  .tl-head .tl-ruler span{position:absolute; top:0; transform:translateX(-50%)}
  .tl-head .tl-ruler span:first-child{transform:none}
  .tl-head .tl-ruler span:last-child{transform:translateX(-100%)}
  .grid.three{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
  .grid.two{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
  .card .body{padding:24px}
  .how li{grid-template-columns:200px 1fr; gap:16px; align-items:baseline; padding:16px 20px}
  .socials{grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
  .split{grid-template-columns:minmax(0,1fr) 260px; gap:48px}
  .split.left{grid-template-columns:260px minmax(0,1fr)}
  .split .pose{max-width:260px}
  footer .wrap{grid-template-columns:1fr auto; align-items:center}
  .feature{display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:center}
  .feature .pose{max-width:260px; margin:0 auto; padding:20px}
  .links-page .socials{grid-template-columns:repeat(2,minmax(0,1fr))}
  .links-hero h1{font-size:3.2rem}
  .chips.six{grid-template-columns:repeat(6,minmax(0,1fr))}
  .grid.four{grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
  .grid.tools{grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
  .grid.tools .card .body{padding:20px}
  .signup .row{flex-direction:row} .signup .row input{flex:1}
  #notify{max-width:720px; margin:0 auto}
}
@media (prefers-reduced-motion:no-preference){
  .btn,nav.site a{transition:background .15s ease,border-color .15s ease,color .15s ease}
}

/* ---------- shop v2 (10/5): covers, flagship, bundle, tiers, request form ---------- */
.product .cover{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-bottom:1px solid var(--line)}
.packs .top{align-items:center}
.packs .top h3{font-size:1.45rem}
.bundle{margin-top:14px}
.bundle .body{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px 14px; align-items:center; padding:16px}
.bundle .art{width:52px; height:52px}
.bundle .bt{display:flex; flex-direction:column; gap:2px; min-width:0}
.bundle .bt b{font:800 1.4rem/1.05 var(--display); font-stretch:80%}
.bundle .bt span{font:500 12px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-3)}
.bundle .btn.buy{grid-column:1/-1}
.perks{list-style:none; margin:4px 0 8px; padding:0; display:grid; gap:10px}
.perks li{display:flex; gap:10px; align-items:center; font-size:16px; color:var(--text)}
.perks .ic{color:var(--fox); width:20px; height:20px}
.tier.pro{border-color:var(--fox)}
.tier .btn.buy{margin-top:auto}
.signup textarea{font:400 16px/1.45 var(--sans); color:var(--text); background:var(--app); border:1px solid var(--line); border-radius:4px; padding:12px 14px; width:100%; min-height:112px; resize:vertical}
.signup textarea::placeholder{color:var(--text-3)}
.signup textarea:focus{outline:2px solid var(--blue); outline-offset:1px}
.signup label.field + textarea{margin-top:6px}
#request form{flex-direction:column !important}
.stack-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px}
.stack-grid li{list-style:none; display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--line); border-left:3px solid var(--lc,var(--blue)); border-radius:6px; background:var(--panel)}
.stack-grid b{font:800 1.15rem/1.05 var(--display); font-stretch:82%}
.stack-grid span{font:500 11.5px/1.35 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--text-3)}
.stack-grid{padding:0}
@media (min-width:860px){
  .flag{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:stretch}
  .flag .cover{border-bottom:0; border-right:1px solid var(--line); height:100%}
  .flag .body{justify-content:center; padding:32px}
  .bundle .body{grid-template-columns:auto minmax(0,1fr) auto 280px; padding:18px 24px}
  .bundle .btn.buy{grid-column:auto}
  #request{max-width:720px; margin:0 auto}
  .stack-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
}
.cover-wide{width:100%; max-width:760px; height:auto; border-radius:6px; border:1px solid var(--line); margin:4px auto 18px}
.tier .body > *, .product .body > *{flex-shrink:0}
.tier .body{height:auto; min-height:100%}
.tier .top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}

/* ---------- help / start here pages (10/5): icon steps, few words ---------- */
.help-hero{display:flex; flex-direction:column; gap:14px; align-items:flex-start; margin-top:8px}
.help-hero .pose{width:150px; height:auto; margin:0}
.help-hero h1.big{margin-top:0}
.steps{list-style:none; margin:0; padding:4px 0}
.steps li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:start; padding:13px 16px; border-bottom:1px solid var(--line-2)}
.steps li:last-child{border-bottom:0}
.steps .si{display:grid; place-items:center; width:44px; height:44px; border-radius:6px; color:var(--fox); border:1px solid var(--line);
  background:conic-gradient(#2b2b2b 25%, #262626 0 50%, #2b2b2b 0 75%, #262626 0) 0 0/10px 10px}
.steps .si .ic{width:24px; height:24px}
.steps .st{display:flex; flex-direction:column; gap:3px; min-width:0}
.steps .st b{font:700 19px/1.2 var(--display); font-stretch:85%}
.steps .st span{color:var(--text-2); font-size:15px}
.help-page code{font:500 .88em/1.3 var(--mono); color:var(--text); background:var(--app); border:1px solid var(--line); border-radius:3px; padding:1px 5px; overflow-wrap:anywhere}
.help-box{padding:18px 16px; display:flex; flex-direction:column; gap:12px}
.help-box p{margin:0; color:var(--text-2)}
.help-box .btn{align-self:flex-start; max-width:100%; overflow-wrap:anywhere; font-size:15px}
.help-page .link-list{margin-top:18px}
.help-page .grid.two{margin-top:0}
@media (min-width:860px){
  .help-hero{flex-direction:row; align-items:center; gap:32px}
  .help-hero .pose{width:210px}
  .help-page .link-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
}