/* pepsecanell.com v4 (2026-11-10): shared by index.html and apps.html.
   Keak palette only (BRAIN/rules/brand.md): cream, chocolate, dusty rose, plus the card tones. Muted text is a
   chocolate tint, never a new hue. Rose is a fill (pills, dots, markers), never text on cream.
   Fonts: Fraunces (headings) + Inter (body), self-hosted, Latin WOFF2. No libraries, no third-party requests
   except the Substack embed on the home page.
   The one Keak orb: a fixed canvas (.orb-live) moved only with transforms by js/home.js between its places
   ([data-orb] slots). Static page (JS off, reduced motion): the still in the hero slot. */

@font-face{font-family:"Fraunces";src:url(/fonts/Fraunces-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/Inter-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/Inter-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#F5EDD8; --ink:#2C1508; --muted:#6B4F3E; --faint:#8A6F5C;
  --card:#EDE4CC; --card-2:#E6DBC0; --sand:#DECFB0;
  --line:rgba(44,21,8,.10); --line-2:rgba(44,21,8,.18); --line-3:rgba(44,21,8,.28);
  --rose:#D4A49A; --rose-2:#C68B7E; --rose-deep:#B98479;
  --glow:rgba(212,164,154,.40); --rose-soft:rgba(212,164,154,.22);
  /* the chocolate band (free apps) */
  --band:#2C1508; --band-ink:#F5EDD8; --band-muted:#CDBB9C; --band-line:rgba(245,237,216,.14); --band-card:#F5EDD8; --band-card-ink:#2C1508;
  --nav-bg:rgba(245,237,216,.72);
  --bezel:#1E140D; --bezel-rim:rgba(245,237,216,.14);
  --shadow:0 1px 2px rgba(44,21,8,.05),0 12px 32px -16px rgba(44,21,8,.24);
  --shadow-hi:0 2px 4px rgba(44,21,8,.06),0 28px 56px -24px rgba(44,21,8,.38);
  --shadow-lg:0 2px 6px rgba(44,21,8,.06),0 48px 90px -40px rgba(44,21,8,.5);
  --orb-shadow:drop-shadow(0 22px 28px rgba(44,21,8,.22));
  --grain:.05;
  --r:26px; --r-lg:40px;
  --out:cubic-bezier(.16,1,.3,1);
  --io:cubic-bezier(.65,0,.35,1);
  --gut:clamp(20px,4.4vw,56px);
  --max:1200px;
  --sec:clamp(84px,9vw,112px);
  --nav-h:72px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#2C1508; --ink:#F5EDD8; --muted:#D2C1A3; --faint:#AE9780;
    --card:#3B2112; --card-2:#452814; --sand:#4E2F19;
    --line:rgba(245,237,216,.10); --line-2:rgba(245,237,216,.18); --line-3:rgba(245,237,216,.28);
    --glow:rgba(212,164,154,.18); --rose-soft:rgba(212,164,154,.16);
    --band:#3B2112; --band-ink:#F5EDD8; --band-muted:#D2C1A3; --band-line:rgba(245,237,216,.14); --band-card:#F5EDD8; --band-card-ink:#2C1508;
    --nav-bg:rgba(44,21,8,.72);
    --bezel:#120B06; --bezel-rim:rgba(245,237,216,.12);
    --shadow:0 1px 2px rgba(0,0,0,.24),0 12px 32px -16px rgba(0,0,0,.6);
    --shadow-hi:0 2px 4px rgba(0,0,0,.26),0 28px 56px -24px rgba(0,0,0,.72);
    --shadow-lg:0 2px 6px rgba(0,0,0,.26),0 48px 90px -40px rgba(0,0,0,.82);
    --orb-shadow:drop-shadow(0 22px 30px rgba(0,0,0,.5));
    --grain:.07;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern","liga","calt";overflow-x:hidden;overflow-x:clip}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
svg{display:block}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--rose);color:#2C1508}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:4px;border-radius:12px}
.btn:focus-visible,.plat:focus-visible,.news:focus-visible,.pill:focus-visible,.store:focus-visible{outline-offset:3px;border-radius:999px}
.proj:focus-within{box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-hi)}
.skip{position:absolute;left:12px;top:-60px;padding:10px 16px;background:var(--ink);color:var(--bg);border-radius:10px;text-decoration:none;font-weight:600;z-index:80}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ambient light + paper grain */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none}
.ambient::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 640px at 84% 4%,var(--glow),transparent 70%),radial-gradient(720px 560px at -4% 62%,rgba(222,207,176,.38),transparent 70%)}
@media (prefers-color-scheme: dark){.ambient::before{background:radial-gradient(900px 640px at 84% 4%,var(--glow),transparent 70%),radial-gradient(720px 560px at -4% 62%,rgba(212,164,154,.07),transparent 70%)}}
.ambient::after{content:"";position:absolute;inset:0;opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .08 0 0 0 0 .03 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------------------------------------------------------------- type */
.display{font:600 clamp(46px,7.4vw,104px)/.94 "Fraunces",Georgia,serif;letter-spacing:-.035em;text-wrap:balance}
.h2{font:600 clamp(36px,5vw,66px)/1 "Fraunces",Georgia,serif;letter-spacing:-.03em;text-wrap:balance}
.h3{font:600 clamp(24px,2.3vw,30px)/1.12 "Fraunces",Georgia,serif;letter-spacing:-.015em}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:600 12.5px/1 "Inter",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rose-2);box-shadow:0 0 0 4px var(--glow)}
.eyebrow b{display:inline-flex;align-items:center;gap:12px;font-weight:600;color:var(--ink);font-feature-settings:"tnum"}
.eyebrow b::after{content:"";width:28px;height:1px;background:var(--line-3)}
.eyebrow:has(b)::before{display:none}
.lede{font-size:clamp(18px,1.55vw,21px);line-height:1.55;color:var(--muted);max-width:36em;text-wrap:pretty}
.muted{color:var(--muted)}
.sec{padding:var(--sec) 0 0}
.sec-head{display:flex;flex-direction:column;gap:20px;max-width:760px;margin-bottom:clamp(36px,5vw,60px)}
.sec-head.row{max-width:none;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sec-head.row > div{display:flex;flex-direction:column;gap:20px;max-width:760px}

/* ---------------------------------------------------------------- buttons + links */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 10px 0 24px;border-radius:999px;
  background:var(--ink);color:var(--bg);font:600 16px/1 "Inter",system-ui,sans-serif;text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,var(--shadow);transition:transform .35s var(--out),box-shadow .35s var(--out),background-color .3s}
.btn .arw{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--rose);color:#2C1508;transition:transform .35s var(--out),background-color .3s}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,var(--shadow-hi)}
.btn:hover .arw{transform:translateX(3px)}
.btn.out:hover .arw{transform:translate(2px,-2px)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.1s}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn.ghost .arw{background:var(--card)}
.btn.ghost:hover{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line-3)}
.btn.light{background:var(--band-ink);color:var(--band)}
.btn.light-ghost{background:transparent;color:var(--band-ink);box-shadow:inset 0 0 0 1.5px var(--band-line)}
.btn.light-ghost .arw{background:rgba(245,237,216,.1);color:var(--band-ink)}
.btn.light-ghost:hover{background:rgba(245,237,216,.06)}
.link{display:inline-flex;align-items:center;gap:7px;font-weight:600;text-decoration:none;background:linear-gradient(var(--rose),var(--rose)) 0 100%/0 2px no-repeat;padding-bottom:3px;transition:background-size .45s var(--out)}
.link:hover{background-size:100% 2px}
.link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--out)}
.link:hover svg{transform:translate(2px,-2px)}
.link.r:hover svg{transform:translateX(3px)}
.pill{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 14px 0 12px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:600 13px/1 "Inter",system-ui,sans-serif;color:var(--ink);white-space:nowrap}
.pill i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--rose-2);box-shadow:0 0 0 3.5px var(--glow)}
.motion .pill.live i{animation:pulse 2.4s var(--io) infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(212,164,154,0)}}
.store{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line-2);font-weight:600;font-size:14px;text-decoration:none;transition:background-color .3s,box-shadow .3s}
.store:hover{background:var(--line);box-shadow:inset 0 0 0 1.5px var(--line-3)}
.store svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- nav */
.nav{position:fixed;left:0;right:0;top:0;z-index:50}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--nav-bg);-webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);
  border-bottom:1px solid var(--line);opacity:0;transition:opacity .4s}
.nav.solid::before{opacity:1}
.nav-in{display:flex;align-items:center;gap:8px;height:var(--nav-h);transition:height .4s var(--out)}
.nav.solid .nav-in{height:62px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;border-radius:12px}
.brand img{width:34px;height:34px;border-radius:10px;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.brand span{font:600 19px/1 "Fraunces",Georgia,serif;letter-spacing:-.01em}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{position:relative;display:block;padding:10px 14px;border-radius:999px;font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;transition:color .25s,background-color .25s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);background:var(--line)}
.nav-links a .new{position:absolute;top:6px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--rose-2)}
.nav-cta{margin-left:10px;height:42px;padding:0 8px 0 18px;font-size:14.5px;gap:10px}
.nav-cta .arw{width:28px;height:28px}
.nav-cta svg{width:14px;height:14px}
.menu{display:none;position:relative}
.menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu summary i,.menu summary i::before,.menu summary i::after{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--out),background-color .2s}
.menu summary i{position:relative}
.menu summary i::before,.menu summary i::after{content:"";position:absolute;left:0}
.menu summary i::before{top:-6px}.menu summary i::after{top:6px}
.menu[open] summary i{background:transparent}
.menu[open] summary i::before{transform:translateY(6px) rotate(45deg)}
.menu[open] summary i::after{transform:translateY(-6px) rotate(-45deg)}
.menu-sheet{position:absolute;right:0;top:54px;width:min(300px,calc(100vw - 32px));padding:10px;border-radius:22px;background:var(--bg);box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line)}
.menu-sheet a{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;font-weight:600;text-decoration:none}
.menu-sheet a:hover{background:var(--card)}
.menu-sheet a em{font-style:normal;font-size:12px;color:var(--muted);font-weight:600}
@media (max-width:860px){.nav-links,.nav-cta{display:none}.menu{display:block}}

/* ---------------------------------------------------------------- the orb (one, always) */
.orb-slot{position:relative;pointer-events:none}
.orb-still{position:absolute;left:50%;top:50%;width:100%;height:100%;max-width:none;transform:translate(-50%,-50%);filter:var(--orb-shadow)}
/* once the live orb has drawn its first frame the still is hidden in the same frame: a hard switch, never two */
.motion.orb-on .orb-still{visibility:hidden}
.orb-live{position:fixed;left:0;top:0;width:100px;height:100px;z-index:45;pointer-events:none;will-change:transform;visibility:hidden;transform:translate3d(-300px,-300px,0) scale(.01);transition:none!important}
.motion.orb-on .orb-live{visibility:visible}
.orb-live canvas{position:absolute;left:50%;top:50%;width:260%;height:260%;transform:translate(-50%,-50%)}
.orb-live .orb-img{position:absolute;left:50%;top:50%;width:100%;max-width:none;height:auto;transform:translate(-50%,-50%);filter:var(--orb-shadow)}
.chip{transition:none!important}

/* ---------------------------------------------------------------- hero */
.hero{padding:clamp(118px,15vh,160px) 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(40px,6vw,96px);align-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.news{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 6px 0 6px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);
  font-size:14.5px;font-weight:600;text-decoration:none;transition:background-color .3s,box-shadow .3s}
.news b{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.news svg{width:15px;height:15px;margin-right:6px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--out)}
.news:hover{box-shadow:inset 0 0 0 1px var(--line-3)}
.news:hover svg{transform:translateX(3px)}
.display em{font-style:normal;position:relative;white-space:nowrap}
.display em::after{content:"";position:absolute;left:-.04em;right:-.06em;bottom:.1em;height:.28em;border-radius:.1em;background:var(--rose);z-index:-1;transform-origin:left;opacity:.9}
.motion .display em::after{transform:scaleX(0);transition:transform .9s var(--out) .75s}
.motion .display.in em::after{transform:none}
.hero .lede{max-width:30em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.mail-line{font-size:15px;color:var(--muted)}
.mail-line a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--rose);text-decoration-thickness:2px;text-underline-offset:4px}

.hero-art{position:relative;justify-self:end;width:min(100%,440px)}
.portrait{position:relative;z-index:1;border-radius:32px;overflow:hidden;aspect-ratio:4/5;background:var(--card-2);box-shadow:var(--shadow-lg),0 0 0 1px var(--line);transform:rotate(1.5deg)}
.portrait img{width:100%;height:100%;object-fit:cover}
.plate{position:absolute;inset:0;border-radius:32px;background:linear-gradient(160deg,var(--rose),var(--rose-2));transform:translate(20px,20px) rotate(4deg);z-index:0}
.motion .portrait,.motion .plate{transition:transform 1.2s var(--out)}
.hero-art .tag{position:absolute;z-index:3;right:-14px;top:30px;display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:16px;background:var(--bg);box-shadow:var(--shadow-hi),inset 0 0 0 1px var(--line);font-size:14px;font-weight:600}
.hero-art .tag i{width:8px;height:8px;border-radius:50%;background:var(--rose-2);box-shadow:0 0 0 4px var(--glow)}
/* the orb's first place: big, in front of the photo's lower-left corner, never over the face */
.hero-orb{position:absolute;z-index:2;left:0;bottom:0;width:clamp(170px,17vw,250px);aspect-ratio:1;transform:translate(-52%,34%)}

/* index row under the hero */
.quick{margin-top:clamp(52px,7vw,80px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2)}
.quick a{display:flex;flex-direction:column;gap:6px;padding:22px 22px 4px 0;text-decoration:none;position:relative}
.quick a + a{padding-left:22px;border-left:1px solid var(--line)}
.quick b{font:600 12px/1 "Inter",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.quick span{font:600 20px/1.25 "Fraunces",Georgia,serif;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.quick svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--out)}
.quick a:hover svg{transform:translateX(4px)}
.quick a::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--out)}
.quick a + a::after{left:22px}
.quick a:hover::after{transform:none}

/* ---------------------------------------------------------------- free apps band */
.band-wrap{position:relative}
.band-wrap [data-orb="apps"]{position:absolute;z-index:3;right:0;top:0;width:clamp(68px,7vw,96px);aspect-ratio:1;transform:translate(34%,-36%)}
.band{position:relative;border-radius:var(--r-lg);background:var(--band);color:var(--band-ink);padding:clamp(36px,5.5vw,80px);overflow:hidden;isolation:isolate;box-shadow:var(--shadow-lg)}
.band::before{content:"";position:absolute;right:-12%;top:-30%;width:70%;height:120%;z-index:-1;background:radial-gradient(closest-side,rgba(212,164,154,.30),transparent)}
.band::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;box-shadow:inset 0 1px 0 rgba(245,237,216,.08)}
@media (prefers-color-scheme: dark){.band{box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--band-line)}}
.band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,5vw,72px);align-items:center}
.band .eyebrow{color:var(--band-muted)}
.band .eyebrow b{color:var(--band-ink)}
.band .eyebrow b::after{background:var(--band-line)}
.band .lede{color:var(--band-muted)}
.band-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.rules{display:grid;gap:0;width:100%;border-top:1px solid var(--band-line)}
.rules li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:15px 0;border-bottom:1px solid var(--band-line);font-size:16px;line-height:1.5;color:var(--band-ink)}
.rules li span{color:var(--band-muted)}
.rules svg{width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--rose);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the coming-soon app card (cream on chocolate). ONE PLACE TO SWAP: see the comment above it in the HTML. */
.app-card{position:relative;border-radius:30px;background:var(--band-card);color:var(--band-card-ink);padding:14px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(44,21,8,.06)}
.app-card .shot{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#E9DFC6,#DCCDAE);aspect-ratio:16/10}
.app-card .body{padding:22px 14px 12px;display:flex;flex-direction:column;gap:14px}
.app-card .top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.app-card .kind{font:600 12.5px/1 "Inter",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6B4F3E}
.app-card .pill{background:#2C1508;color:#F5EDD8;box-shadow:none}
.app-card h3{font:600 clamp(26px,2.5vw,32px)/1.08 "Fraunces",Georgia,serif;letter-spacing:-.02em}
.app-card p{color:#6B4F3E;font-size:16px}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.feats li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:#EDE4CC;font-size:14.5px;line-height:1.4;font-weight:600}
.feats svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:#2C1508;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app-card .acts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding-top:4px}
.app-card .link{color:#2C1508}
.app-card .note{font-size:13.5px;color:#6B4F3E}

/* drawn "recorder" illustration: a screen, a face-cam bubble, a rec dot, a zoom frame, a voice line.
   Drawn in our palette (not a screenshot), so it never claims a real UI. */
.rec{position:absolute;inset:9% 8% 13%;border-radius:12px;background:#F5EDD8;box-shadow:0 22px 40px -22px rgba(44,21,8,.55),0 0 0 1px rgba(44,21,8,.08);overflow:hidden}
.rec .bar{position:absolute;left:0;right:0;top:0;height:9%;background:#EDE4CC;display:flex;align-items:center;gap:5px;padding:0 3.5%}
.rec .bar i{width:7px;height:7px;border-radius:50%;background:rgba(44,21,8,.18)}
.rec .lines{position:absolute;left:7%;top:20%;width:52%;display:grid;gap:7px}
.rec .lines b{display:block;height:8px;border-radius:4px;background:rgba(44,21,8,.12)}
.rec .lines b:nth-child(1){width:70%;height:13px;background:rgba(44,21,8,.75)}
.rec .lines b:nth-child(2){width:96%}.rec .lines b:nth-child(3){width:84%}.rec .lines b:nth-child(4){width:60%}
.rec .zoom{position:absolute;left:5%;top:16%;width:58%;height:42%;border-radius:8px;box-shadow:0 0 0 2px #C68B7E}
.motion .rec .zoom{animation:zoomframe 6s var(--io) infinite}
@keyframes zoomframe{0%,18%{left:5%;top:16%;width:58%;height:42%}40%,62%{left:9%;top:19%;width:30%;height:12%}84%,100%{left:5%;top:16%;width:58%;height:42%}}
.rec .cam{position:absolute;right:6%;bottom:9%;width:25%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%,#D9B9A6 0 22%,transparent 23%),radial-gradient(ellipse at 50% 100%,#8E6A57 0 46%,transparent 47%),linear-gradient(160deg,#E7D6BE,#CDB89A);box-shadow:0 10px 24px -8px rgba(44,21,8,.5),0 0 0 3px #F5EDD8}
.rec .tele{position:absolute;left:7%;bottom:9%;width:52%;display:flex;gap:5px;flex-wrap:wrap}
.rec .tele b{height:7px;border-radius:4px;background:rgba(44,21,8,.12)}
.rec .tele b.on{background:#C68B7E}
.rec-hud{position:absolute;left:50%;bottom:4.5%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:7px 12px 7px 9px;border-radius:999px;background:#2C1508;color:#F5EDD8;font:600 12px/1 "Inter",system-ui,sans-serif;box-shadow:0 10px 20px -10px rgba(0,0,0,.6);white-space:nowrap}
.rec-hud .dot{width:10px;height:10px;border-radius:50%;background:#D4A49A}
.motion .rec-hud .dot{animation:blink 1.6s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.25}}
.rec-hud .wave{display:flex;align-items:center;gap:2px;height:12px}
.rec-hud .wave i{width:2px;border-radius:1px;background:#D4A49A;height:40%}
.motion .rec-hud .wave i{animation:wave 1.1s var(--io) infinite alternate}
.rec-hud .wave i:nth-child(2){animation-delay:-.2s;height:80%}.rec-hud .wave i:nth-child(3){animation-delay:-.5s;height:60%}.rec-hud .wave i:nth-child(4){animation-delay:-.8s;height:100%}.rec-hud .wave i:nth-child(5){animation-delay:-.35s;height:50%}
@keyframes wave{from{transform:scaleY(.35)}to{transform:scaleY(1)}}

/* ---------------------------------------------------------------- built (bento) */
.built-wrap{position:relative}
/* the counter + orb dock: motion only. A row at the top of the section (counter, then the orb's place).
   Wide screens with room in the margin (>= 1360px): the dock moves into the right page gutter and sticks at
   38vh while the grid scrolls by, the orb above the counter. js/home.js reads the computed sticky top. */
.built-meta{display:none;position:relative;z-index:6;height:0;justify-content:flex-end;align-items:flex-start}
.motion .built-meta{display:flex}
.count{display:flex;align-items:baseline;gap:6px;height:44px;padding:0 16px;border-radius:999px;background:var(--bg);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);font:600 13px/1 "Inter",system-ui,sans-serif;font-feature-settings:"tnum";color:var(--muted);transform:translateY(-6px)}
.count .now{display:block;height:28px;overflow:hidden;font:600 28px/28px "Fraunces",Georgia,serif;letter-spacing:-.02em;color:var(--ink);align-self:center}
.count .now span{display:block;transition:transform .6s var(--out)}
.built-meta .orb-slot{width:72px;aspect-ratio:1;margin-left:14px;transform:translateY(-20px)}
@media (min-width:1360px){
  .pin .built-meta{position:sticky;top:38vh;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;width:64px;margin-left:auto;margin-right:calc(-1 * ((100vw - var(--max)) / 2 + 32px - (100vw - var(--max)) / 4))}
  .pin .built-meta .orb-slot{width:64px;margin:0;transform:none}
  .pin .count{order:2;flex-direction:column;align-items:center;gap:2px;height:auto;padding:8px 0 0;background:none;box-shadow:none;transform:none;font-size:11.5px;letter-spacing:.08em}
  .pin .count .now{height:26px;font-size:26px;line-height:26px}
}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.proj{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:box-shadow .45s var(--out),transform .45s var(--out)}
.proj::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
@media (prefers-color-scheme: dark){.proj::after{box-shadow:inset 0 1px 0 rgba(245,237,216,.06)}}
.proj:hover{box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-hi);transform:translateY(-4px)}
.proj.w4{grid-column:span 4}.proj.w3{grid-column:span 3}.proj.w2{grid-column:span 2}
.proj .stage{position:relative;display:flex;justify-content:center;align-items:flex-start;height:320px;padding:36px 24px 0;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,var(--card-2),transparent 70%)}
.proj .stage::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.proj .stage.lap{align-items:center;padding:24px 32px}
.proj .body{display:flex;flex-direction:column;gap:12px;padding:24px 26px 26px}
.proj .head{display:flex;align-items:center;gap:13px}
.proj .head img{width:46px;height:46px;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.proj h3{font:600 23px/1.1 "Fraunces",Georgia,serif;letter-spacing:-.015em}
.proj .where{display:block;margin-top:4px;font-size:13.5px;color:var(--muted);font-weight:600}
.proj p{font-size:15.5px;line-height:1.55;color:var(--muted)}
.proj .acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:auto;padding-top:6px}
.proj .acts .link{font-size:14.5px}
.proj .pill{height:30px;font-size:12.5px;background:var(--bg)}

/* device mocks (real screenshots inside) */
.phone{position:relative;flex:none;width:190px;padding:7px;border-radius:36px;background:var(--bezel);box-shadow:var(--shadow-hi),inset 0 0 0 1px var(--bezel-rim);transition:transform .7s var(--out)}
.phone img,.phone .screen{width:100%;height:auto;aspect-ratio:480/1043;border-radius:29px;object-fit:cover}
.proj:hover .phone{transform:translateY(-10px)}
.laptop{position:relative;width:100%;max-width:400px;transition:transform .7s var(--out)}
.proj:hover .laptop{transform:translateY(-6px)}
.lid{position:relative;padding:2.4% 2.4% 3.2%;border-radius:16px 16px 6px 6px;background:var(--bezel);box-shadow:var(--shadow-hi),inset 0 0 0 1px var(--bezel-rim)}
.lid img{width:100%;height:auto;aspect-ratio:16/10;border-radius:4px;object-fit:cover}
.base{position:relative;height:13px;margin:0 -7%;border-radius:2px 2px 14px 14px/2px 2px 10px 10px;background:linear-gradient(#D9CDB4,#B6A68A);box-shadow:0 18px 26px -14px rgba(44,21,8,.45)}
@media (prefers-color-scheme: dark){.base{background:linear-gradient(#6A5442,#3E2C1E)}}
.base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:5px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:rgba(44,21,8,.2)}
.duo .lid{margin-right:10%}
.duo .base{margin-right:3%}
.duo .mini{position:absolute;right:0;bottom:-6%;width:24%;padding:1.2%;border-radius:17%/7.9%;background:var(--bezel);box-shadow:var(--shadow-hi),inset 0 0 0 1px var(--bezel-rim)}
.duo .mini img{width:100%;aspect-ratio:480/1043;border-radius:14%/6.5%;object-fit:cover}
/* Plainphone has no screenshots yet: its home screen is drawn (black widgets, apps as text by category) */
.phone .screen{position:relative;overflow:hidden;background:#000}
.bh-in{position:absolute;inset:0;container-type:size;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;font-weight:500}
.bh-c{height:100%;padding:0 9cqw 0 11.5cqw;display:flex;flex-direction:column;gap:10.5cqw}
.bh-bar{display:flex;align-items:center;justify-content:space-between;height:13.5cqw;margin:0 -3cqw 6cqw -3.5cqw;padding-top:1.5cqw;font-size:4.3cqw;font-weight:600;line-height:1}
.bh-bat{display:block;width:6.4cqw;height:3cqw;border-radius:.9cqw;box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.45);position:relative}
.bh-bat::before{content:"";position:absolute;left:.6cqw;top:.6cqw;bottom:.6cqw;width:65%;border-radius:.45cqw;background:#fff}
.bh-w{display:flex;flex-direction:column;gap:1.3cqw;font-size:5.6cqw;line-height:1.2}
.bh-w b{font-size:3.1cqw;font-weight:600;letter-spacing:.38cqw;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:.4cqw;line-height:1}
.bh-w.lg{gap:2cqw;font-size:7.1cqw}
.bh-w.lg b{margin-bottom:1.1cqw}

/* ---------------------------------------------------------------- videos */
.vid-meta{display:flex;align-items:center;gap:22px}
.vid-meta .orb-slot{display:none;width:84px;aspect-ratio:1;margin:-10px 0}
.pin .vid-meta .orb-slot{display:block}
.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.vid a{display:flex;flex-direction:column;gap:14px;text-decoration:none}
.vid .thumb{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:var(--card-2);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);transition:box-shadow .45s var(--out),transform .45s var(--out)}
.vid a:hover .thumb{box-shadow:var(--shadow-hi),inset 0 0 0 1px var(--line);transform:translateY(-3px)}
.vid .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--out)}
.vid a:hover .thumb img{transform:scale(1.04)}
.vid .play{position:absolute;left:14px;bottom:14px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(245,237,216,.94);color:#2C1508;box-shadow:0 8px 20px -8px rgba(0,0,0,.5);transition:transform .4s var(--out),background-color .3s}
.vid .play svg{width:17px;height:17px;margin-left:2px;fill:currentColor}
.vid a:hover .play{transform:scale(1.1);background:#F5EDD8}
.vid .t{font:600 19px/1.28 "Fraunces",Georgia,serif;letter-spacing:-.01em;text-wrap:pretty}
.vid .d{font-size:13.5px;font-weight:600;color:var(--muted)}

/* ---------------------------------------------------------------- where I post */
.follow-in{display:flex;flex-direction:column}
.orbit{display:none}
.plats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.plat{position:relative;display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;transition:background-color .3s,box-shadow .3s,transform .35s var(--out)}
.plat:hover{background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow);transform:translateY(-2px)}
.plat .ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .3s}
.plat:hover .ico{background:var(--rose-soft)}
.plat .ico svg{width:19px;height:19px;fill:var(--ink)}
.plat .n{display:block;font-weight:600;font-size:15.5px;line-height:1.2}
.plat .h{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plat > span:last-child{min-width:0}
.plats li{min-width:0}
.news .sm{display:none}
/* motion, phones: a small orbit above the buttons; the orb sits in the middle and the marks turn around it */
.motion .orbit{display:block;position:relative;height:clamp(280px,78vw,360px);margin:6px 0 10px}
.orbit .orb-slot{position:absolute;left:50%;top:50%;width:clamp(100px,28vw,136px);aspect-ratio:1;transform:translate(-50%,-50%)}
.chips{position:absolute;inset:0;pointer-events:none}
.chip{position:absolute;left:0;top:0;width:56px;height:56px;margin:0;will-change:transform;transform:scale(0);border-radius:16px;background:var(--bg);box-shadow:var(--shadow-hi),inset 0 0 0 1px var(--line);display:grid;place-items:center}
.chip svg{width:25px;height:25px;fill:var(--ink)}
/* wide screens (html.pin): the section pins; the marks orbit the orb to the right of the heading, then land */
.pin .follow{height:150vh;padding-top:0}
.pin .follow-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex}
.pin .follow-in{height:100%;padding-top:clamp(84px,12vh,132px);padding-bottom:clamp(28px,5vh,56px)}
.pin .follow .sec-head{margin-bottom:0}
.pin .follow .sec-head>*{width:fit-content}
.pin .follow .h2{max-width:9ch}
.pin .follow .lede{max-width:21em}
.pin .orbit{position:absolute;inset:0;height:auto;margin:0;z-index:2}
.pin .orbit .orb-slot{left:var(--ox,70%);top:var(--oy,40%);width:clamp(140px,min(14vw,22vh),210px)}
.pin .plats{margin-top:auto;width:100%;position:relative;z-index:1}
.pin .plats li:not(.landed) .ico{background:var(--rose-soft);box-shadow:none}
.pin .plats li:not(.landed) .ico svg{visibility:hidden}
@media (max-height:720px){.pin .follow-in{padding-top:72px}.pin .follow .sec-head{gap:12px}}

/* ---------------------------------------------------------------- free stuff + letter */
.free-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:start}
.free-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.free-list{width:100%;border-top:1px solid var(--line-2)}
.free-list li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:17px 0;border-bottom:1px solid var(--line)}
.free-list b{font:600 12px/1.9 "Inter",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.letter-wrap{position:relative}
.letter-wrap [data-orb="free"]{position:absolute;right:0;top:0;width:clamp(68px,7vw,96px);aspect-ratio:1;transform:translate(36%,-42%);z-index:3}
.letter{position:relative;border-radius:var(--r);background:#F5EDD8;padding:18px 18px 16px;box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(44,21,8,.1);color:#2C1508}
.letter::before{content:"";position:absolute;left:18px;right:18px;top:0;height:6px;border-radius:0 0 6px 6px;background:repeating-linear-gradient(90deg,#C68B7E 0 18px,transparent 18px 26px,#2C1508 26px 44px,transparent 44px 52px)}
.letter iframe{display:block;width:100%;height:320px;border:0;border-radius:14px;background:#F5EDD8}
.letter .alt{display:block;margin-top:10px;text-align:center;font-size:13.5px;color:#6B4F3E}
.letter .alt a{font-weight:600;color:#2C1508}
.letter-note{margin-top:16px;font-size:14.5px;color:var(--muted)}

/* ---------------------------------------------------------------- contact (the ending) + footer */
.contact{margin-top:clamp(72px,9vw,104px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
.contact .h2{max-width:14em}
.contact .lede{max-width:30em}
.end-orb{display:none;width:clamp(130px,14vw,180px);aspect-ratio:1;margin-bottom:clamp(4px,1.5vw,16px)}
.motion .end-orb{display:block}
.mailbtn{font:600 clamp(22px,3.4vw,40px)/1.1 "Fraunces",Georgia,serif;letter-spacing:-.02em;text-decoration:none;padding:6px 4px;background:linear-gradient(var(--rose),var(--rose)) 0 92%/100% .26em no-repeat;transition:background-size .5s var(--out)}
.mailbtn:hover{background-size:100% .9em}
footer{margin-top:clamp(64px,8vw,96px);border-top:1px solid var(--line)}
.foot{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:40px;font-size:14px;color:var(--muted)}
.foot .tagline{flex-basis:100%;font:600 clamp(22px,2.4vw,30px)/1.15 "Fraunces",Georgia,serif;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot a{text-decoration:none;font-weight:600;color:var(--ink)}
.foot a:hover{text-decoration:underline;text-decoration-color:var(--rose);text-decoration-thickness:2px;text-underline-offset:4px}
.foot .small{flex-basis:100%;font-size:13px}

/* ---------------------------------------------------------------- apps page */
.apps-hero{padding:clamp(130px,17vh,190px) 0 0}
.apps-hero .display{max-width:12em}
.apps-hero .lede{margin-top:24px}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.principle{padding:26px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:10px;transition:box-shadow .45s var(--out),transform .45s var(--out)}
.principle:hover{box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-hi);transform:translateY(-3px)}
.principle b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font:600 15px/1 "Fraunces",Georgia,serif}
.principle h3{font:600 21px/1.2 "Fraunces",Georgia,serif}
.principle p{font-size:15.5px;color:var(--muted)}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.slot{min-height:150px;border-radius:var(--r);border:1.5px dashed var(--line-2);display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted);font-weight:600;font-size:15px}

/* ---------------------------------------------------------------- reveals: an edge wipes them open, never a fade.
   Content never waits on JS: html.motion is set by the head script and removed after 2.5 s if home.js never reports in. */
.motion .rv{clip-path:inset(0 0 100% 0);transform:translateY(22px);transition:clip-path .9s var(--out),transform .9s var(--out);transition-delay:var(--d,0ms)}
.motion .rv.in{clip-path:inset(0 0 -40px 0);transform:none}
.motion .rv-x{clip-path:inset(0 100% 0 0);transform:none}
.motion .rv-x.in{clip-path:inset(0 -40px 0 0)}
.motion .rv.done{clip-path:none;transform:none;transition:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .w > span{display:inline-block}
.motion .split .w > span{transform:translateY(108%);transition:transform 1s var(--out);transition-delay:calc(var(--i) * 55ms + var(--d,0ms))}
.motion .split.in .w > span{transform:none}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .plats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pin .plats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .proj.w4,.proj.w3{grid-column:span 6}
  .proj.w2{grid-column:span 3}
}
@media (max-width:900px){
  .hero{padding-top:clamp(104px,13vh,140px)}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-art{order:-1;justify-self:end;width:min(54%,250px);margin:0 4px 10px 0}
  .hero-art .tag{right:auto;left:-14px;top:14px}
  .hero-orb{width:clamp(110px,30vw,150px);transform:translate(-62%,30%)}
  .hero-copy{gap:22px}
  .band-grid,.free-grid{grid-template-columns:1fr}
  .quick{grid-template-columns:1fr 1fr}
  .quick a:nth-child(3){padding-left:0;border-left:0}
  .quick a:nth-child(3)::after{left:0}
  .quick a:nth-child(n+3){border-top:1px solid var(--line)}
  .vids{grid-template-columns:1fr 1fr}
  .vid:nth-child(3){display:none}
  .principles,.slots{grid-template-columns:1fr}
  .built-meta{height:auto;justify-content:flex-start;margin-bottom:18px}
  .count{transform:none}
  .built-meta .orb-slot{width:60px;transform:none;margin-left:6px}
  .letter-wrap [data-orb="free"]{transform:translate(22%,-40%)}
}
@media (max-width:680px){
  body{font-size:16px}
  :root{--sec:clamp(76px,16vw,100px)}
  .proj.w2{grid-column:span 6}
  .proj .stage{height:290px}
  .proj .stage.lap{height:auto;padding:28px 22px}
  .plats{grid-template-columns:1fr 1fr;gap:10px}
  .plat{padding:12px;gap:10px}
  .plat .ico{width:34px;height:34px;border-radius:10px}
  .plat .ico svg{width:17px;height:17px}
  .plat .n{font-size:14.5px}
  .plat .h{font-size:12px}
  .vids{grid-template-columns:1fr}
  .vid:nth-child(3){display:block}
  .feats{grid-template-columns:1fr}
  .free-list li{grid-template-columns:1fr;gap:4px}
  .hero-art .tag{right:-6px;top:18px}
  .band{border-radius:30px;padding:30px 20px}
  .band-wrap [data-orb="apps"]{width:64px;transform:translate(-26%,-34%)}
  .app-card{padding:10px}
  .app-card .body{padding:18px 8px 8px}
  .btn{height:52px}
  .quick span{font-size:17px}
  .chip{width:48px;height:48px;border-radius:14px}
  .chip svg{width:21px;height:21px}
  .foot .tagline{font-size:22px}
}
@media (max-width:480px){.news .lg{display:none}.news .sm{display:inline}}
@media (max-width:380px){.plats{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important}}

/* recorder card: real footage instead of the drawn mockup (2026-11-11) */
.app-card .shot.sample{margin:0;aspect-ratio:16/9;background:#E9DFC6}
.app-card .shot.sample video{display:block;width:100%;height:100%;object-fit:cover}
.sample-tag{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:7px 12px 7px 10px;border-radius:999px;background:rgba(44,21,8,.86);color:#F5EDD8;font:600 12px/1.2 "Inter",system-ui,sans-serif;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sample-tag .dot{flex:none;width:8px;height:8px;border-radius:50%;background:#D4A49A}
.sample-tag .sm{display:none}
@media (max-width:600px){.sample-tag{left:8px;bottom:8px;padding:6px 10px 6px 8px;font-size:11.5px}.sample-tag .lg{display:none}.sample-tag .sm{display:inline}}

/* Recorded is out (2026-11-11): download row, install note */
.app-card .sub{margin-top:-6px;font-weight:600;color:#2C1508;font-size:17px}
.feats li.wide{grid-column:1/-1}
.get{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding-top:4px}
.get-meta{font:600 13.5px/1.3 "Inter",system-ui,sans-serif;color:#6B4F3E}
.app-card .install{font-size:14px;color:#6B4F3E}
.app-card .install summary{cursor:pointer;font-weight:600;color:#2C1508;width:max-content;border-radius:8px}
.app-card .install summary:focus-visible{outline:2.5px solid #2C1508;outline-offset:3px}
.app-card .install p{margin-top:6px;font-size:14px}
.app-card .btn{background:#2C1508;color:#F5EDD8}
.app-card .btn .arw{background:#D4A49A;color:#2C1508}