/* Pano site. Palette: MD paper (the app's own light theme). Gambarino + Onest. */
/* Fonts are self-hosted: the Google Fonts / Fontshare stylesheets blocked the first paint. Onest is variable (400–600). */
@font-face{font-family:'Onest';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/onest-latin-3db826ed.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/onest-latin-ext-3e2cb988.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Gambarino';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gambarino-400.woff2) format('woff2')}
:root{
  --paper:#F4EFE6;          /* page ground, MD paper */
  --paper-2:#ECE5D8;        /* one tone step down */
  --paper-3:#E3DACA;
  --shiro:#FBF9F4;          /* photo border / note white */
  --kraft:#CDB592;
  --kraft-deep:#A88E69;
  --kraft-ink:#3B2F20;
  --sumi:#2B2824;           /* ink */
  --sumi-soft:#5E584F;      /* secondary text, 6.3:1 on paper */
  --ai:#2F4A73;             /* indigo: selection, focus, primary action */
  --ai-hover:#253C5E;
  --ai-wash:rgba(47,74,115,.10);
  --shu:#C2452D;            /* seal red: primary action and the search ring */
  --shu-hover:#A63A25;
  --kaki:#E8A27C; --yuzu:#F2D98B; --matcha:#B8C79A; --sora:#B3CCDD; --sakura:#EEC9C4; --fuji:#C9BEDD;

  --f-display:"Gambarino",Georgia,serif;
  --f-body:"Onest",system-ui,sans-serif;

  --s-display:clamp(2.6rem,5.2vw,5.6rem);
  --s-band:clamp(1.9rem,3.6vw,3.6rem);
  --s-h2:clamp(2.2rem,4.4vw,4.4rem);
  --s-body:1.125rem;
  --s-small:.9375rem;

  --gutter:clamp(16px,3vw,40px);
  --gap-section:clamp(120px,16vw,220px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-micro:120ms; --t-panel:220ms;
  --washi-shadow:0 1px 1px rgba(0,0,0,.06),0 8px 16px -10px rgba(0,0,0,.25);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:hidden;overflow-x:clip;margin:0;background:var(--paper);color:var(--sumi);font:400 var(--s-body)/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
/* no page-in fade: content painted at opacity 0 never counts as LCP, so phones reported no LCP at all */
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--ai-wash);color:var(--sumi)}
:focus-visible{outline:2px solid var(--ai);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--sumi);color:var(--paper);padding:10px 14px}
.skip:focus{left:8px}
main:focus{outline:none}

/* type */
.h-display{font:400 var(--s-display)/.95 var(--f-display);letter-spacing:-.025em;margin:0}
.h-band{font:400 var(--s-band)/1.02 var(--f-display);letter-spacing:-.02em;margin:0;max-width:16ch}
.h2{font:400 var(--s-h2)/1 var(--f-display);letter-spacing:-.02em;margin:0;max-width:18ch}
.body{font-size:var(--s-body);line-height:1.55;max-width:52ch;margin:0}
.lede{font-size:1.1875rem;line-height:1.5;max-width:36ch;margin:22px 0 0}
.statement{font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.35;max-width:34ch;margin:28px 0 0}

/* buttons: square corners, one fill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--shu);color:var(--shiro);text-decoration:none;font:500 1rem/1 var(--f-body);padding:16px 24px;border-radius:2px;transition:background var(--t-micro) var(--ease),transform var(--t-micro) var(--ease)}
.btn:hover{background:var(--shu-hover)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-small{padding:11px 16px;font-size:.9375rem}
.btn-ink{background:var(--sumi);color:var(--paper)}
.btn-ink:hover{background:#000}
.btn-wide{width:100%}
.link{font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--kraft-deep);transition:text-decoration-color var(--t-micro) var(--ease)}
.link:hover{text-decoration-color:var(--sumi)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px}
@media (pointer:coarse){.btn,.link{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;gap:32px;padding:14px var(--gutter);background:var(--paper)}
.wordmark{display:flex;align-items:center;gap:8px;text-decoration:none;font:400 1.6rem/1 var(--f-display);letter-spacing:-.01em}
.wordmark img{width:30px;height:30px;border-radius:7px;box-shadow:0 0 0 1px rgba(43,40,36,.12)}
.nav nav{display:flex;gap:26px;margin-left:auto}
.nav nav a{text-decoration:none;font-size:.9375rem;color:var(--sumi);opacity:.82;transition:opacity var(--t-micro)}
.nav nav a:hover{opacity:1}
@media (max-width:860px){.nav nav{display:none}.nav .btn-small{margin-left:auto}}

/* ===== HERO: board camera ===== */
.hero{position:relative;height:620vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}
.viewport{position:absolute;inset:0;overflow:hidden;background-color:var(--paper);background-image:radial-gradient(rgba(43,40,36,.13) 1px,transparent 1.2px);background-size:24px 24px}
.world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.world .board-img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none;
  /* the capture has its own paper; fade its edges into the page paper */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.world .dim{position:absolute;background:var(--paper);opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.world .dim.on{opacity:.72}
.world .ring{pointer-events:none}
.world .ring path{fill:none;stroke:var(--shu);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round}

/* washi tape colors, flat */
.tape{display:block;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 18' preserveAspectRatio='none'%3E%3Cpath d='M2 1 L4 3 L1 6 L3 9 L1 12 L3 15 L2 17 L62 17 L60 15 L63 12 L61 9 L63 6 L61 3 L62 1 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 18' preserveAspectRatio='none'%3E%3Cpath d='M2 1 L4 3 L1 6 L3 9 L1 12 L3 15 L2 17 L62 17 L60 15 L63 12 L61 9 L63 6 L61 3 L62 1 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.t-kaki{background:var(--kaki)}.t-yuzu{background:var(--yuzu)}.t-matcha{background:var(--matcha)}.t-sora{background:var(--sora)}.t-sakura{background:var(--sakura)}.t-fuji{background:var(--fuji)}

/* captions over the board: dark ink on paper, paper scrim behind */
.bands{position:absolute;inset:0;pointer-events:none}
.band{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);width:min(700px,42vw);opacity:0;visibility:hidden;--k:0}
.band.on{visibility:visible}
.band .btn,.band .link{pointer-events:auto}
.band::before{content:"";position:absolute;inset:-22% -40% -22% -30%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 62% 58% at 42% 50%,rgba(244,239,230,.96) 0%,rgba(244,239,230,.88) 52%,rgba(244,239,230,0) 78%);opacity:calc(.35 + .65*var(--k))}
.band.b1{top:54%}
.band.b1 .h-display{max-width:none}
.band .w{display:inline-block;white-space:nowrap}
.band .c{display:inline-block}
.band.b1 .lede,.band.b1 .row{opacity:var(--ks,1);transform:translateY(calc((1 - var(--ks,1))*14px))}
.band.b5 .lede,.band.b5 .row{opacity:var(--ks,0);transform:translateY(calc((1 - var(--ks,0))*14px))}

/* entrance: words drop onto the paper like refs landing */
.band [data-split] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-22px)) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* b2: the mess, characters scattered */
.band.b2 [data-split] .w{opacity:1;transform:none}
.band.b2 [data-split] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* b3: tidy, words slide into a line */
.band.b3 [data-split] .w{transform:translateX(calc((1 - var(--kc))*28px))}

.search-pill{position:absolute;left:50%;top:max(88px,11vh);transform:translate(-50%,-10px);display:flex;align-items:center;gap:10px;width:min(460px,86vw);padding:12px 16px;background:rgba(250,247,240,.9);border:1px solid rgba(43,40,36,.14);border-radius:12px;box-shadow:0 12px 40px -12px rgba(43,40,36,.28);font:500 17px/1 var(--f-body);color:var(--sumi);opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.search-pill.on{opacity:1;transform:translate(-50%,0)}
.search-pill svg{width:20px;height:20px;color:var(--sumi-soft);flex:none}
.search-pill .caret{width:2px;height:20px;background:var(--ai);animation:blink 1s steps(2) infinite}
.search-pill .hits{margin-left:auto;font-size:14px;color:var(--sumi-soft);white-space:nowrap}
@keyframes blink{to{opacity:0}}

.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.875rem;color:var(--sumi-soft);transition:opacity .4s var(--ease)}
.cue i{width:1.5px;height:34px;background:var(--sumi-soft);transform-origin:top;animation:cue 2.2s var(--ease-io) infinite}
.cue.gone{opacity:0}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ===== PILLARS ===== */

/* the app window mockup (data-ui: the product's own look) */
.mock{position:relative;width:100%;max-width:980px;justify-self:center}
.mock-win{position:relative;aspect-ratio:16/10;background:var(--paper);border-radius:10px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(43,40,36,.45),0 0 0 1px rgba(43,40,36,.08)}
.shot-win{background:var(--paper-3)}
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.scene.on{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.shot-cap{margin:16px 2px 0;font-size:var(--s-small);color:var(--sumi-soft)}

/* ===== TRY ===== */
.try{padding:var(--gap-section) var(--gutter) 60px}
.try-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.try-board{position:relative;height:min(78vh,720px);min-height:520px;background-color:var(--paper);background-image:radial-gradient(rgba(43,40,36,.13) 1px,transparent 1.2px);background-size:24px 24px;border-radius:12px;overflow:hidden;touch-action:none;box-shadow:inset 0 0 0 1px rgba(43,40,36,.08)}
.t-card{position:absolute;background:var(--shiro);padding:6px;box-shadow:var(--washi-shadow);cursor:grab;user-select:none;-webkit-user-select:none;transition:box-shadow var(--t-micro) var(--ease)}
.t-card:hover{box-shadow:0 1px 1px rgba(0,0,0,.06),0 14px 26px -12px rgba(0,0,0,.32)}
.t-card.drag{cursor:grabbing;box-shadow:0 2px 2px rgba(0,0,0,.06),0 26px 40px -16px rgba(0,0,0,.38);z-index:20}
.t-card.picked{outline:1.5px solid var(--ai);outline-offset:3px}
.t-card img{width:100%;height:auto;pointer-events:none}
.t-card .tape{position:absolute;left:50%;top:-9px;width:64px;height:18px;margin-left:-32px;opacity:.85}
.t-card.landed .tape{animation:tapeLand .14s var(--ease) .06s both}
.t-card.landed{animation:cardLand .18s var(--ease) both}
@keyframes cardLand{from{scale:.98}to{scale:1}}
@keyframes tapeLand{from{opacity:0;transform:scale(1.15)}to{opacity:.85;transform:scale(1)}}
.swatches{position:absolute;display:flex;gap:8px;z-index:15}
.sw{width:64px;height:44px;border-radius:3px;box-shadow:var(--washi-shadow);border:none;padding:0;cursor:pointer;position:relative;opacity:0;transform:translateY(-10px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.swatches.in .sw{opacity:1;transform:none}
.sw span{position:absolute;left:50%;top:50px;transform:translateX(-50%);font:500 11px/1 var(--f-body);color:var(--sumi);white-space:nowrap;font-variant-numeric:tabular-nums}
.sw:hover{transform:translateY(-2px)}
.try-hint{position:absolute;left:18px;bottom:16px;font-size:.9375rem;color:var(--sumi-soft);pointer-events:none}
.try-toast{min-height:1.5em;margin:16px 0 0;color:var(--sumi-soft);font-size:.9375rem}

/* ===== FOLDERS ===== */
.folders{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,80px);align-items:center;padding:var(--gap-section) var(--gutter);background:var(--paper-2)}
.folders-copy .body{margin-top:28px}
.folders-shot{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -36px rgba(43,40,36,.5),0 0 0 1px rgba(43,40,36,.08);opacity:0;transform:translateX(-12px);filter:blur(4px);transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease)}
.folders-shot.in{opacity:1;transform:none;filter:none}
.folders-shot img{width:100%;height:auto}

/* ===== NIGHT: dark band, the app at full width ===== */
.night{background:#1E1D1B;color:#ECE7DE;padding:var(--gap-section) var(--gutter)}
.night-inner{max-width:1320px;margin:0 auto}
.night-copy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.night .body{color:#BDB6AA}
.night-shot{margin:56px 0 0;border-radius:14px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(240,235,225,.08)}
.night-shot img{width:100%;height:auto}

/* Mac: real macOS screenshots */
.mac{padding:var(--gap-section) var(--gutter);max-width:1320px;margin:0 auto}
.mac-copy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.mac figure{margin:0}
.mac img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 40px 90px -44px rgba(43,40,36,.55),0 0 0 1px rgba(43,40,36,.08)}
.mac-desk{margin-top:56px!important}
.mac-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,32px);margin-top:clamp(16px,2.5vw,32px)}
.mac figcaption{margin-top:12px;font-size:.9rem;color:var(--sumi-soft)}
@media (max-width:760px){.mac-copy,.mac-pair{grid-template-columns:1fr}.mac-desk{margin-top:32px!important}}

/* ===== INDEX ===== */
.index{padding:var(--gap-section) var(--gutter)}
.index-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);margin-top:64px}
.index h3{font:400 1.6rem/1.1 var(--f-display);margin:0 0 18px}
.index ul{list-style:none;margin:0;padding:0}
.index li{padding:9px 0;font-size:1rem;line-height:1.4}
.index li+li{box-shadow:0 -1px 0 var(--paper-3)}
kbd{font:600 .8125rem/1 var(--f-body);background:var(--kraft);color:var(--kraft-ink);padding:3px 6px;border-radius:4px}

/* ===== CREATORS: a kraft field ===== */
.creators{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,5vw,80px);align-items:center;padding:var(--gap-section) var(--gutter);background:var(--kraft);color:var(--kraft-ink)}
.creators .h-display{font-size:clamp(3rem,7vw,7rem);max-width:9ch}
.creators .statement{color:var(--kraft-ink)}
.steps{list-style:none;counter-reset:s;margin:40px 0 40px;padding:0;display:grid;gap:14px;max-width:46ch}
.steps li{font-size:1.0625rem}
.steps b{font-weight:600}
.creators-phones{position:relative;height:560px}
.phone{position:absolute;width:230px;aspect-ratio:9/19;background:var(--sumi);border-radius:30px;padding:10px;box-shadow:0 30px 60px -30px rgba(59,47,32,.7)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:22px}
.phone .views{position:absolute;left:22px;right:22px;bottom:26px;background:rgba(43,40,36,.78);color:var(--paper);font:500 13px/1.2 var(--f-body);padding:9px 12px;border-radius:8px}
.phone.p1{left:6%;top:30px;transform:rotate(-5deg)}
.phone.p2{right:4%;top:90px;transform:rotate(4deg)}

/* ===== PRICING ===== */
.pricing{padding:var(--gap-section) var(--gutter);display:grid;justify-items:center;gap:64px;background:var(--paper)}
.pricing .h2{font-size:var(--s-band);text-align:center;max-width:22ch;margin:0}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);width:min(1040px,100%);align-items:start}
.plan-name{font:400 1.6rem/1.1 var(--f-display);margin:0}
.price .was s{text-decoration-thickness:1.5px}
.price-tag{position:relative;width:100%;background:var(--shiro);padding:56px 44px 40px;box-shadow:0 1px 1px rgba(0,0,0,.05),0 30px 60px -36px rgba(43,40,36,.45);transform:rotate(-1deg)}
.price-tag .tape{position:absolute;left:50%;top:-11px;width:110px;height:24px;margin-left:-55px;opacity:.85}
.price{display:flex;align-items:baseline;gap:18px;margin:26px 0 8px}
.price .now{font:400 clamp(5rem,10vw,7.5rem)/.9 var(--f-display);letter-spacing:-.03em}
.price .was{font-size:1.0625rem;color:var(--sumi-soft)}
.ticks{list-style:none;padding:0;margin:26px 0 32px;display:grid;gap:10px}
.ticks li{padding-left:28px;position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;border-left:2px solid var(--ai);border-bottom:2px solid var(--ai);transform:rotate(-45deg)}
.fine{font-size:.875rem;color:var(--sumi-soft);margin:14px 0 0;text-align:center}

/* ===== FAQ ===== */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,80px);padding:var(--gap-section) var(--gutter);background:var(--paper-2)}
.faq-list details{background:var(--paper);margin-bottom:8px;border-radius:3px;transition:background var(--t-micro)}
.faq-list summary{list-style:none;cursor:pointer;padding:22px 56px 22px 24px;font:500 1.1875rem/1.3 var(--f-body);position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";position:absolute;right:24px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:2px solid var(--sumi);border-bottom:2px solid var(--sumi);transform:rotate(45deg);transition:transform var(--t-panel) var(--ease)}
.faq-list details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq-list details p{margin:0;padding:0 24px 24px;max-width:60ch}
.faq-list summary:hover{color:var(--ai)}

/* ===== FOOTER ===== */
.foot{padding:120px var(--gutter) 32px;background:var(--paper);overflow:hidden}
.foot-word{font:400 clamp(9rem,31vw,30rem)/.78 var(--f-display);letter-spacing:-.045em;margin:60px 0 40px;color:var(--sumi)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;font-size:.9375rem;color:var(--sumi-soft)}
.credits summary{cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.credits p{max-width:62ch}
.credits ul{columns:2;column-gap:32px;font-size:.8125rem;padding:0;list-style:none;max-width:900px}
.credits li{break-inside:avoid;padding:3px 0}

.hero.static{height:auto}
.hero.static .stage{position:relative}
.hero.static .cue{display:none}

/* entrances */
.rise{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.in{opacity:1;transform:none}

/* ===== responsive ===== */
@media (max-width:980px){
  .try-head,.folders,.faq,.creators{grid-template-columns:1fr}
  .index-cols{grid-template-columns:1fr 1fr}
  .creators-phones{height:460px}
}
@media (max-width:720px){
  .hero{height:560vh}
  .band{left:var(--gutter);right:var(--gutter);width:auto;top:auto;bottom:auto;transform:none;top:calc(64px + 3vh)}
  .band.b1{top:calc(64px + 3vh)}
  .band::before{inset:-30% -20% -40% -20%;background:radial-gradient(ellipse 80% 70% at 40% 45%,rgba(244,239,230,.97) 0%,rgba(244,239,230,.9) 55%,rgba(244,239,230,0) 80%)}
  .h-band{max-width:none}
  .search-pill{top:auto;bottom:90px}
  .index-cols{grid-template-columns:1fr}
  .night-copy{grid-template-columns:1fr}
  .price-tag{padding:48px 24px 32px}
  .creators-phones{height:420px}.phone{width:180px}
  .credits ul{columns:1}
}
@media (max-height:560px) and (min-width:721px){.cue{display:none}}

/* reduced motion: final states, no travel */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rise{opacity:1;transform:none}
  .folders-shot{opacity:1;transform:none;filter:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ===== FILM: the one-minute tour, with chapters ===== */
.btn .play-ico{width:18px;height:18px;margin-left:-4px}
.btn-meta{font-weight:400;opacity:.8}
.film{padding:var(--gap-section) var(--gutter) calc(var(--gap-section)*.7);background:var(--paper)}
.film-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;max-width:1320px;margin:0 auto 48px}
.film-frame{position:relative;max-width:1320px;margin:0 auto;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--paper-3);box-shadow:0 50px 100px -50px rgba(43,40,36,.55),0 0 0 1px rgba(43,40,36,.08)}
.film-frame video{display:block;width:100%;height:100%;object-fit:cover;background:var(--paper-3)}
.film-play{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border:0;border-radius:50%;background:var(--shu);color:var(--shiro);display:grid;place-items:center;cursor:pointer;box-shadow:0 20px 40px -16px rgba(43,40,36,.6);transition:transform var(--t-panel) var(--ease),background var(--t-micro) var(--ease),opacity var(--t-panel) var(--ease)}
.film-play svg{width:40px;height:40px;margin-left:6px}
.film-play:hover{background:var(--shu-hover);transform:scale(1.05)}
.film-frame.playing .film-play{opacity:0;pointer-events:none;transform:scale(.9)}
.chapters{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1320px;margin:26px auto 0;padding:0}
.chapters button{display:inline-flex;align-items:baseline;gap:10px;border:1px solid var(--paper-3);background:var(--shiro);color:var(--sumi);font:500 .9375rem/1 var(--f-body);padding:12px 16px;border-radius:999px;cursor:pointer;transition:background var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease)}
.chapters button:hover{border-color:var(--kraft-deep)}
.chapters .ch-t{font-variant-numeric:tabular-nums;color:var(--sumi-soft);font-weight:400}
.chapters button.on{background:var(--ai);border-color:var(--ai);color:var(--shiro)}
.chapters button.on .ch-t{color:var(--shiro);opacity:.8}

/* ===== WAYS: every way in ===== */
.ways{padding:var(--gap-section) var(--gutter);background:var(--paper)}
.ways-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:64px}
.ways-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.ways-grid li{background:var(--shiro);padding:30px 28px 32px;border-radius:4px;box-shadow:var(--washi-shadow)}
.ways-grid svg{width:34px;height:34px;fill:none;stroke:var(--ai);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ways-grid h3{font:400 1.6rem/1.1 var(--f-display);margin:22px 0 10px}
.ways-grid p{margin:0;font-size:1rem;line-height:1.5;color:var(--sumi-soft)}

/* ===== SEARCH: live filter demo ===== */
.search{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,80px);align-items:center;padding:var(--gap-section) var(--gutter);background:var(--paper-2)}
.search-copy .body{margin-top:28px}
.search-facts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px;max-width:46ch}
.search-facts li{padding-left:28px;position:relative}
.search-facts li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;border-left:2px solid var(--ai);border-bottom:2px solid var(--ai);transform:rotate(-45deg)}
.search-facts q{quotes:"“" "”"}
.search-demo{background-color:var(--paper);background-image:radial-gradient(rgba(43,40,36,.13) 1px,transparent 1.2px);background-size:24px 24px;border-radius:12px;padding:clamp(28px,5vw,64px) clamp(20px,4vw,48px);box-shadow:inset 0 0 0 1px rgba(43,40,36,.08);min-height:420px;display:flex;flex-direction:column;justify-content:center}
.sd-pill{display:flex;align-items:center;gap:12px;padding:16px 20px;background:rgba(250,247,240,.95);border:1px solid rgba(43,40,36,.14);border-radius:12px;box-shadow:0 12px 40px -12px rgba(43,40,36,.28);font:500 1.25rem/1 var(--f-body);min-height:60px}
.sd-pill svg{width:22px;height:22px;color:var(--sumi-soft);flex:none}
.sd-pill .caret{width:2px;height:24px;background:var(--ai);animation:blink 1s steps(2) infinite}
.sd-label{margin:26px 0 12px;font-size:var(--s-small);color:var(--sumi-soft);min-height:1.5em}
.sd-chips{display:flex;flex-wrap:wrap;gap:10px;min-height:44px}
.sd-chip{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;background:var(--ai);color:var(--shiro);font:500 1rem/1 var(--f-body);animation:chipin .32s var(--ease) both}
.sd-chip.text{background:var(--shiro);color:var(--sumi);box-shadow:inset 0 0 0 1px var(--paper-3)}
@keyframes chipin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sd-try{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:40px;font-size:var(--s-small);color:var(--sumi-soft)}
.sd-try button{border:1px solid var(--paper-3);background:var(--shiro);color:var(--sumi);font:500 .9375rem/1 var(--f-body);padding:10px 14px;border-radius:999px;cursor:pointer;transition:border-color var(--t-micro) var(--ease)}
.sd-try button:hover,.sd-try button.on{border-color:var(--ai)}
@media (pointer:coarse){.sd-try button,.chapters button{min-height:44px}}

/* ===== ROLES ===== */
.roles{padding:var(--gap-section) var(--gutter);background:var(--paper)}
.roles-grid{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.roles-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--shiro);padding:6px;box-shadow:var(--washi-shadow)}
.roles-grid li:nth-child(odd) img{transform:rotate(-.8deg)}
.roles-grid li:nth-child(even) img{transform:rotate(.7deg)}
.roles-grid h3{font:400 1.6rem/1.1 var(--f-display);margin:24px 0 8px}
.roles-grid p{margin:0;font-size:1rem;color:var(--sumi-soft);max-width:36ch}

/* ===== NUMBERS ===== */
.numbers{padding:72px var(--gutter);background:var(--sumi);color:var(--paper)}
.numbers ul{list-style:none;margin:0 auto;padding:0;max-width:1320px;display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.numbers b{display:block;font:400 clamp(2.4rem,4vw,3.6rem)/1 var(--f-display);letter-spacing:-.02em}
.numbers span{display:block;margin-top:12px;font-size:.9375rem;line-height:1.4;color:var(--paper-3);max-width:20ch}

.foot-cta{margin-top:0}

@media (max-width:980px){
  .film-head,.ways-head,.search{grid-template-columns:1fr}
  .ways-grid,.roles-grid{grid-template-columns:1fr 1fr}
  .numbers ul{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .ways-grid,.roles-grid{grid-template-columns:1fr}
  .numbers ul{grid-template-columns:1fr 1fr}
  .film-play{width:76px;height:76px;margin:-38px 0 0 -38px}
  .film-play svg{width:30px;height:30px}
  .chapters{justify-content:flex-start}
}

/* ===== REDESIGN (branch redesign/impeccable-critique): all overrides live here; delete this block to revert the CSS ===== */
:root{
  --wash-sora:#DDE7EC; --wash-matcha:#E4E9D8; --wash-sakura:#F4E3DF; --wash-yuzu:#F6EECE;
  --s-display:clamp(2.8rem,5.8vw,6.6rem);
}
/* 1. hero: shorter scroll, same camera */
.hero{height:320vh}
@media (max-width:720px){.hero{height:340vh}}

/* 2. sections: real ground changes, washi tints instead of five near-identical creams */
.search{background:var(--wash-sora)}
.folders{background:var(--wash-matcha)}
.faq{background:var(--wash-sakura)}
.faq-list details{background:var(--shiro)}
.search-demo{background-color:var(--shiro)}

/* 3. colour roles: red = buy/watch, indigo = focus and ticks only, ink = selected state */
.sd-chip{background:var(--sumi)}
.chapters button.on{background:var(--sumi);border-color:var(--sumi)}
.sd-try button:hover,.sd-try button.on,.chapters button:hover{border-color:var(--sumi)}

/* 4. type: smaller section heads for supporting sections, bigger for the product, calmer creator head */
.ways .h2,.index .h2,.roles .h2,.faq .h2{font-size:var(--s-band);max-width:24ch}
.creators .h-display{font-size:clamp(2.6rem,5.4vw,5.2rem);max-width:14ch;text-wrap:balance}
.creators .statement{max-width:40ch}

/* 5. components in the board's own language: washi on cards, printed-photo phones, square pills, a hanko on the price */
.ways-grid li{position:relative;padding-top:42px;border-radius:2px}
.ways-grid li::before{content:"";position:absolute;left:50%;top:-9px;width:72px;height:18px;margin-left:-36px;opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 18' preserveAspectRatio='none'%3E%3Cpath d='M2 1 L4 3 L1 6 L3 9 L1 12 L3 15 L2 17 L62 17 L60 15 L63 12 L61 9 L63 6 L61 3 L62 1 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 18' preserveAspectRatio='none'%3E%3Cpath d='M2 1 L4 3 L1 6 L3 9 L1 12 L3 15 L2 17 L62 17 L60 15 L63 12 L61 9 L63 6 L61 3 L62 1 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.ways-grid li:nth-child(1)::before{background:var(--kaki)}.ways-grid li:nth-child(2)::before{background:var(--yuzu)}
.ways-grid li:nth-child(3)::before{background:var(--matcha)}.ways-grid li:nth-child(4)::before{background:var(--sora)}
.ways-grid li:nth-child(5)::before{background:var(--sakura)}.ways-grid li:nth-child(6)::before{background:var(--fuji)}
.ways-grid li:nth-child(odd){transform:rotate(-.6deg)}.ways-grid li:nth-child(even){transform:rotate(.5deg)}
.ways-grid svg{stroke:var(--sumi)}
.chapters button,.sd-chip,.sd-try button{border-radius:2px}
.phone{background:var(--shiro);border-radius:3px;padding:10px 10px 44px;width:240px;aspect-ratio:auto}
.phone img{aspect-ratio:9/16;height:auto;border-radius:0}
.phone .views{left:10px;right:10px;bottom:10px;background:none;color:var(--kraft-ink);font:500 14px/1.2 var(--f-body);padding:0}
.phone::before{content:"";position:absolute;left:50%;top:-9px;width:72px;height:18px;margin-left:-36px;background:var(--yuzu);opacity:.9}
.phone.p2::before{background:var(--sakura)}
.plan-trial{transform:rotate(.6deg)}
.plan-buy::after{content:"one\Atime";white-space:pre;position:absolute;right:26px;top:34px;width:64px;height:64px;border-radius:50%;border:2px solid var(--shu);color:var(--shu);display:grid;place-items:center;text-align:center;font:600 12px/1.15 var(--f-body);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-12deg);opacity:.85}
.numbers li{border-top:2px solid var(--shu);padding-top:18px}
.sheet{position:relative;background:var(--shiro);padding:44px 26px 30px;border-radius:2px;box-shadow:var(--washi-shadow)}
.sheet:nth-child(odd){transform:rotate(-.5deg)}.sheet:nth-child(even){transform:rotate(.6deg)}
.sheet .tape{position:absolute;left:50%;top:-9px;width:72px;height:18px;margin-left:-36px;opacity:.9}
.index .tags{display:flex;flex-wrap:wrap;gap:8px}
.index .tags li{padding:6px 12px;border-radius:2px;background:var(--paper);font-size:.9375rem;line-height:1.3}
.index .tags li+li{box-shadow:none}
.browser{background:var(--wash-yuzu)}
.browser .ways-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.browser .ways-grid{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.plans{grid-template-columns:1fr;max-width:540px}}
@media (max-width:720px){.browser .ways-grid{grid-template-columns:1fr}.phone{width:190px}.plan-buy::after{display:none}}

/* Haber listesi formu (altbilgi) */
.news{max-width:560px;margin:72px 0 0}
.news label{display:block;margin-bottom:12px}
.news label b{display:block;font:400 1.75rem/1.1 var(--f-display);color:var(--sumi);margin-bottom:6px}
.news label span{font-size:.9375rem;color:var(--sumi-soft)}
.news-row{display:flex;gap:10px;flex-wrap:wrap}
.news-row input[type=email]{flex:1 1 220px;min-width:0;padding:14px 14px;border:1px solid var(--paper-3);border-radius:2px;background:var(--shiro);color:var(--sumi);font:inherit;font-size:1rem}
.news-row input[type=email]:focus{outline:2px solid var(--ai);outline-offset:1px;border-color:transparent}
.news-row .btn{flex:0 0 auto;border:0;cursor:pointer}
.news-row .btn:disabled{opacity:.6;cursor:default}
.news-status{min-height:1.4em;margin:10px 0 0;font-size:.9375rem;color:var(--sumi-soft)}
.hp{position:absolute;left:-9999px}

/* Mac: kısa gerçekler + doğrudan indirme */
.mac-facts{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,24px)}
.mac-facts li{padding:18px 20px;background:var(--shiro);border-radius:2px;box-shadow:var(--washi-shadow)}
.mac-facts b{display:block;font:400 1.5rem/1.1 var(--f-display);color:var(--sumi);margin-bottom:6px}
.mac-facts span{font-size:.9375rem;color:var(--sumi-soft)}
.mac-dl{margin-top:28px}
@media (max-width:760px){.mac-facts{grid-template-columns:1fr 1fr}}

/* ---- hero: maskot kartı, teklif satırı ---- */
.maki-card{--mc:clamp(120px,24vh,224px);position:relative;width:var(--mc);height:var(--mc);margin:0 0 clamp(14px,2.4vh,26px);pointer-events:none}
.maki-card video{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--mc)*.17);background:#fefaf2;box-shadow:0 0 0 1px rgba(43,40,36,.14),0 14px 30px -14px rgba(59,47,32,.45)}
.maki-card .chip{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--shiro);color:var(--sumi);font:500 .78rem/1 var(--f-body);white-space:nowrap;box-shadow:0 1px 0 rgba(0,0,0,.04),0 6px 14px -8px rgba(59,47,32,.45);animation:chip-float 5s var(--ease) infinite}
.maki-card .chip-a{left:calc(100% - 18px);top:12%}
.maki-card .chip-a i{width:8px;height:8px;border-radius:50%;background:#3c6e47}
.maki-card .chip-b{left:calc(100% - 34px);bottom:8%;animation-delay:-2.5s;color:var(--sumi-soft)}
@keyframes chip-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.offer{margin:16px 0 0;font-size:.875rem;color:var(--sumi-soft);opacity:var(--ks,1)}
@media (prefers-reduced-motion:reduce){.maki-card .chip{animation:none}}
@media (max-width:720px){.maki-card{--mc:clamp(104px,17vh,150px);margin-bottom:14px}}

/* ---- özellikler: uygulamadan dört döngü ---- */
.moves{padding:var(--gap-section) var(--gutter);background:var(--paper-2)}
.moves-head{max-width:640px;margin:0 auto 40px;text-align:center}
.moves-head .h2{margin-bottom:16px}
.moves-head .body{color:var(--sumi-soft)}
.moves-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,36px);max-width:1180px;margin:0 auto}
.move{margin:0}
.move video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;background:var(--paper);box-shadow:0 0 0 1px rgba(43,40,36,.1),0 14px 30px -18px rgba(59,47,32,.5)}
.move figcaption{padding:16px 4px 0}
.move h3{font:400 1.7rem/1 var(--f-display);margin:0}
.move p{margin:8px 0 0;max-width:46ch;color:var(--sumi-soft)}
.moves-keep{max-width:1180px;margin:36px auto 0;text-align:center;color:var(--sumi-soft)}
.moves-keep b{color:var(--sumi);font-weight:500}
@media (max-width:760px){.moves-grid{grid-template-columns:1fr}}
.move-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:center}
.move-wide figcaption{padding:0}
.move-wide p{font-size:1.0625rem}
@media (max-width:760px){.move-wide{grid-template-columns:1fr}.move-wide figcaption{padding:16px 4px 0}}

/* ---- eklenti mağazaları ---- */
.stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:36px auto 0;max-width:1180px}
.store{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:10px;background:var(--shiro);color:var(--sumi);text-decoration:none;box-shadow:0 0 0 1px rgba(43,40,36,.12);transition:box-shadow var(--t-micro) var(--ease)}
.store svg{width:26px;height:26px;flex:none}
.store span{display:grid;gap:3px}
.store b{font-weight:500;font-size:.95rem}
.store small{font-size:.78rem;color:var(--sumi-soft)}
.store[href]:hover{box-shadow:0 0 0 2px var(--sumi)}
.store[aria-disabled]{cursor:default}
.store[aria-disabled] svg{filter:grayscale(.35);opacity:.8}
.stores-note{max-width:640px;margin:16px auto 0;text-align:center;font-size:.9rem;color:var(--sumi-soft)}
.index-more{text-align:center;margin:32px 0 0;color:var(--sumi-soft)}

/* brand logos: Pinterest (browser section) and Apple (Mac section), simple-icons, CC0 */
.ways-grid svg.logo{fill:var(--pin,#E60023);stroke:none;width:34px;height:34px}
.head-logo{display:inline-block;width:.8em;height:.8em;margin:0 .28em 0 0;vertical-align:-.06em;fill:var(--sumi)}
.head-logo.logo-pin{fill:#E60023}
.btn-logo{width:18px;height:18px;margin:-2px 0 -2px -2px;fill:currentColor;flex:none}
.pricing-sub{text-align:center;margin:-46px auto 0;max-width:46ch}

/* Comparison table (home) */
.vs { max-width: 980px; margin: 0 auto; padding: var(--gap-section) var(--gutter); }
.vs .body { max-width: 62ch; }
.vs-scroll { overflow-x: auto; margin: 1.4em 0 .8em; }
.vs table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--s-small); }
.vs th, .vs td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--paper-3); }
.vs thead th { font-weight: 600; }
.vs tbody th { font-weight: 600; white-space: nowrap; }
.vs td:nth-child(2) { background: rgba(0,0,0,.03); }
.vs .h2 { margin-bottom: .5em; }