/* Layout: full-bleed colour bands in the app palette (paper hero → deep → coral → paper → sage → deep icon band → paper → deep pricing),
     joined by three-strand "thread" bars. Live-site type (Fraunces + Inter); Space Grotesk only for the studio wordmark. Single light look. */
  :root{
    --paper:#F5F2ED; --cream:#F4F6F1; --mist:#EDF1EA; --mist-2:#E1E8DD; --white:#FFFFFF;
    --ink:#202822; --ink-soft:#4B564C; --sage:#4F6E68; --deep:#33453F; --deeper:#26342F;
    --coral:#C97456; --coral-ink:#2A1A13; --coral-soft:#F0A386;
    --s-red:#C0522B; --s-gold:#D9A232; --s-olive:#7C8B3A; --s-blue:#3A5F8F;
    --line:rgba(32,40,34,0.12);
    --display:'Fraunces',Georgia,serif; --body:'Inter',system-ui,-apple-system,sans-serif; --studio:'Space Grotesk','Inter',system-ui,sans-serif;
    color-scheme:light;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
  @media(max-width:520px){.wrap{padding-inline:18px}}
  .sr{position:absolute;left:-9999px}
  a{color:inherit}
  button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

  /* ---------- header: studio lockup › app lockup ---------- */
  header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(245,242,237,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
  .lockups{display:flex;align-items:center;gap:18px;min-width:0}
  .studio{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink)}
  .studio svg{width:46px;height:54px;flex:none}
  .studio .word{display:block;font:700 27px/1 var(--studio);letter-spacing:-0.025em;white-space:nowrap}
  .studio .word span{display:inline-block}
  .studio .tag{display:block;width:max-content;font:600 9.5px/1 var(--studio);letter-spacing:.34em;margin-top:6px;color:var(--ink)}
  .studio .motto{display:block;font-size:10.5px;line-height:1;color:var(--ink-soft);margin-top:5px}
  .lc-l{color:var(--s-red)}.lc-a{color:var(--s-gold)}.lc-c{color:var(--s-olive)}.lc-e{color:var(--s-blue)}
  /* studio logo animation: replays the 3-second slide-in from the brand kit */
  .studio.play svg{animation:mk .6s ease both}
  .studio.play .w-line{animation:fadein .45s ease .45s both}
  .studio.play .lc-l{animation:slidein .4s cubic-bezier(.2,.8,.3,1) .95s both}
  .studio.play .lc-a{animation:slidein .4s cubic-bezier(.2,.8,.3,1) 1.15s both}
  .studio.play .lc-c{animation:slidein .4s cubic-bezier(.2,.8,.3,1) 1.35s both}
  .studio.play .lc-e{animation:slidein .4s cubic-bezier(.2,.8,.3,1) 1.55s both}
  .studio.play .tag{animation:tagin .6s ease 2s both}
  .studio.play .motto{animation:fadein .5s ease 2.45s both}
  @keyframes mk{from{opacity:.25;transform:scale(.92)}to{opacity:1;transform:none}}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  @keyframes slidein{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
  @keyframes tagin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
  .rule{width:1px;height:40px;background:var(--line);flex:none}
  .app-chip{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:12px 999px 999px 12px;padding:5px 14px 5px 5px;white-space:nowrap}
  .app-chip svg{width:28px;height:28px;border-radius:7px;flex:none}
  .app-chip .nm{font:600 14px/1 var(--display)}
  .app-chip .pl{font-size:11.5px;color:var(--ink-soft)}
  .app-chip:hover{border-color:var(--sage)}
  nav{display:flex;align-items:center;gap:22px;white-space:nowrap}
  nav a{font-size:14px;color:var(--ink-soft);text-decoration:none}
  nav a:hover{color:var(--deep)}
  nav .pill{background:var(--deep);color:var(--cream);padding:9px 16px;border-radius:999px;font-weight:500}
  nav .pill:hover{background:var(--sage);color:var(--cream)}
  @media(max-width:860px){nav a:not(.pill){display:none}}
  
  @media(max-width:520px){.studio .word{font-size:22px}.studio svg{width:36px;height:42px}.studio .tag{font-size:8px}.studio .motto{font-size:9.5px}.app-chip .pl{display:none}.rule{height:30px}.lockups{gap:11px}.studio{gap:10px}}
  @media(max-width:360px){.app-chip .nm{display:none}.app-chip{padding:5px;border-radius:12px}}
  @media(max-width:600px){nav{display:none}}

  /* ---------- hero ---------- */
  .hero{position:relative;background:radial-gradient(120% 70% at 50% 100%, var(--mist-2) 0%, var(--paper) 60%);padding-block:44px 0;text-align:center;overflow:hidden}
  /* eyebrow: three questions strung on one thread, knots between */
  .asks{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:0;font:600 clamp(14px,1.4vw,16px)/1 var(--body);letter-spacing:.01em;color:var(--deep)}
  .asks .q{padding:6px 2px}
  .asks .tie{position:relative;display:inline-block;width:46px;height:14px;margin-inline:10px}
  .asks .tie::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px;background:var(--sage);opacity:.55}
  .asks .tie::after{content:"";position:absolute;left:50%;top:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;box-sizing:border-box;border:3px solid var(--sage);background:var(--paper)}
  @media(max-width:420px){.asks .tie{width:26px;margin-inline:6px}}
  h1{font-family:var(--display);font-weight:500;font-size:clamp(38px,5.8vw,74px);line-height:1.02;letter-spacing:-0.025em;margin:20px auto 0;max-width:18ch;text-wrap:balance}
  h1 em{font-style:italic;color:var(--coral)}
  .hero .sub{margin:22px auto 0;font-size:clamp(16px,1.6vw,19px);color:var(--ink-soft);max-width:52ch}
  .hero .sub strong{color:var(--ink)}
  form{margin:28px auto 0;display:flex;gap:10px;max-width:460px;flex-wrap:wrap;justify-content:center}
  input[type=email]{flex:1;min-width:210px;padding:14px 18px;border-radius:999px;border:1px solid var(--line);background:var(--white);font:15px var(--body);color:var(--ink);outline:none}
  button{padding:14px 24px;border-radius:999px;border:none;background:var(--coral);color:var(--white);font:600 15px var(--body);cursor:pointer;transition:transform .15s ease,background .15s ease}
  button:hover{background:#B5654A;transform:translateY(-1px)}
  .note{margin-top:12px;font-size:13px;color:var(--ink-soft)}

  /* stage: animated phone in front, App Store screens orbiting behind */
  .stage-wide{position:relative;height:clamp(600px,60vw,700px);margin-top:30px;--cw:210px}
  @media(max-width:760px){.stage-wide{--cw:150px;height:580px}}
  .fan{position:absolute;left:50%;top:70px;width:0;height:0}
  @media(max-width:760px){.fan{top:60px}}
  .fan .scr{position:absolute;width:var(--cw);aspect-ratio:540/1173;left:calc(var(--cw) / -2);top:0;border-radius:calc(var(--cw) * .09);overflow:hidden;box-shadow:0 30px 50px -24px rgba(32,40,34,.55);transform-origin:50% 120%;
    transform:translateX(var(--x)) translateY(var(--y)) rotate(var(--r)) scale(var(--s));opacity:var(--o);z-index:var(--z);
    transition:transform 1.1s cubic-bezier(.6,0,.25,1),opacity .9s ease}
  .fan .scr img{display:block;width:100%;height:100%;object-fit:cover}
  .stage-wide::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(transparent,var(--mist-2));pointer-events:none;z-index:3}
  .front{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:20}
  .glow{position:absolute;left:50%;top:50%;width:520px;height:520px;max-width:120vw;transform:translate(-50%,-55%);border-radius:50%;background:radial-gradient(circle, rgba(201,116,86,.28), rgba(201,116,86,0) 65%);z-index:1;pointer-events:none}

  .phone{position:relative;width:292px;aspect-ratio:272/560;border-radius:50px;background:#1b221e;padding:10px;box-shadow:0 50px 80px -30px rgba(32,40,34,.6),0 0 0 1px rgba(255,255,255,.06) inset}
  @media(max-width:760px){.phone{width:236px;border-radius:42px;padding:8px}}
  .screen{position:relative;width:100%;height:100%;border-radius:41px;overflow:hidden;background:var(--paper)}
  @media(max-width:760px){.screen{border-radius:34px}}
  .island{position:absolute;top:3.6%;left:50%;transform:translateX(-50%);width:30%;height:4%;border-radius:12px;background:#111;z-index:20}
  /* inner phone UI is laid out in a fixed 254px coordinate space and scaled */
  .ui{position:absolute;left:0;top:0;width:254px;height:523px;transform-origin:0 0}
  .stage{position:absolute;inset:0;animation:stage 10s infinite}
  @keyframes stage{0%{opacity:0}3%{opacity:1}92%{opacity:1}97%,100%{opacity:0}}
  .app{position:absolute;inset:0;padding:48px 14px 0}
  .app .top{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink)}
  .app .top svg{width:14px;height:14px;border-radius:4px}
  .app h4{font-family:var(--display);font-weight:600;font-size:21px;color:var(--ink);margin-top:8px}
  .list{margin-top:12px;display:flex;flex-direction:column}
  .slot{height:0;animation:slot 10s infinite}
  @keyframes slot{0%,15%{height:0}22%,100%{height:72px}}
  .card{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:9px 11px;display:flex;gap:9px;align-items:center;font-size:12px;color:var(--ink);margin-bottom:8px;text-align:left}
  .card .meta{font-size:10px;color:var(--ink-soft)}
  .card .bullet{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none;margin-inline:4px}
  .old{animation:old 10s infinite}
  @keyframes old{0%,38%{opacity:1;transform:none}44%,100%{opacity:0;transform:translateY(16px)}}
  .newcard{height:62px;padding-left:68px;padding-right:8px;opacity:0;animation:newcard 10s infinite}
  @keyframes newcard{0%,23%{opacity:0;transform:scale(.96)}26%{opacity:1;transform:scale(1.04)}29%,100%{opacity:1;transform:scale(1)}}
  .newcard .t{min-width:0;white-space:nowrap}
  .bd{margin-left:auto;font-size:10px;font-weight:600;color:var(--cream);background:var(--deep);border-radius:999px;padding:5px 9px;white-space:nowrap;animation:bd 10s infinite}
  @keyframes bd{0%,36%{transform:scale(1);background:var(--deep)}38%{transform:scale(.88);background:var(--coral)}41%,100%{transform:scale(1);background:var(--deep)}}
  .inputbar{position:absolute;left:12px;right:12px;bottom:22px;display:flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:8px 9px 8px 13px;font-size:11.5px;color:var(--ink-soft);text-align:left}
  .inputbar .ph{flex:1}
  .iconbtn{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--mist-2);flex:none}
  .iconbtn svg{width:14px;height:14px}
  .cam{animation:cam 10s infinite}
  @keyframes cam{0%,2%{transform:scale(1);background:var(--mist-2)}4%{transform:scale(.8);background:var(--coral)}7%,100%{transform:scale(1);background:var(--mist-2)}}
  .vf{position:absolute;inset:0;background:#0f1411;z-index:5;animation:vf 10s infinite}
  @keyframes vf{0%,6%{opacity:0}8%,14%{opacity:1}17%,100%{opacity:0}}
  .vf .shutter{position:absolute;left:50%;bottom:28px;width:54px;height:54px;margin-left:-27px;border-radius:50%;border:4px solid #fff;background:rgba(255,255,255,.25);animation:shutter 10s infinite}
  @keyframes shutter{0%,11%{transform:scale(1)}12.5%{transform:scale(.82)}14%,100%{transform:scale(1)}}
  .corner{position:absolute;width:20px;height:20px;border:0 solid rgba(255,255,255,.85)}
  .c1{top:66px;left:20px;border-top-width:2px;border-left-width:2px}.c2{top:66px;right:20px;border-top-width:2px;border-right-width:2px}
  .c3{bottom:104px;left:20px;border-bottom-width:2px;border-left-width:2px}.c4{bottom:104px;right:20px;border-bottom-width:2px;border-right-width:2px}
  .flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:15;pointer-events:none;animation:flash 10s infinite}
  @keyframes flash{0%,12.6%{opacity:0}13.2%{opacity:.95}17%,100%{opacity:0}}
  .shot{position:absolute;z-index:10;object-fit:cover;animation:shot 10s infinite}
  @keyframes shot{
    0%,6%{left:0;top:52px;width:254px;height:66%;border-radius:0;opacity:0}
    8%,15%{left:0;top:52px;width:254px;height:66%;border-radius:0;opacity:1}
    23%,100%{left:25px;top:126px;width:48px;height:48px;border-radius:10px;opacity:1}
  }
  .steps{position:absolute;left:14px;right:14px;top:196px;z-index:4;text-align:left}
  .thread{position:absolute;left:24px;top:-8px;width:3px;height:0;border-radius:3px;background:var(--coral);animation:thread 10s infinite}
  @keyframes thread{0%,43%{height:0}60%,100%{height:150px}}
  .step{position:relative;display:flex;align-items:center;gap:11px;height:44px;padding-left:14px;font-size:12.5px;color:var(--ink);opacity:0}
  .knot{width:21px;height:21px;border-radius:50%;background:var(--paper);border:3px solid var(--sage);flex:none;position:relative;z-index:2}
  .step:nth-child(2){animation:st1 10s infinite}.step:nth-child(3){animation:st2 10s infinite}.step:nth-child(4){animation:st3 10s infinite}
  @keyframes st1{0%,46%{opacity:0;transform:translateX(-8px)}49%,100%{opacity:1;transform:none}}
  @keyframes st2{0%,51%{opacity:0;transform:translateX(-8px)}54%,100%{opacity:1;transform:none}}
  @keyframes st3{0%,56%{opacity:0;transform:translateX(-8px)}59%,100%{opacity:1;transform:none}}
  .loopdone{position:absolute;left:50%;top:368px;margin-left:-29px;width:58px;height:58px;opacity:0;animation:loopin 10s infinite;z-index:4;border-radius:14px;overflow:hidden}
  @keyframes loopin{0%,62%{opacity:0;transform:scale(.5) rotate(-12deg)}66%{opacity:1;transform:scale(1.12) rotate(3deg)}70%,100%{opacity:1;transform:scale(1) rotate(0)}}
  .caps{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);z-index:30;height:50px;width:1px}
  .cap{position:absolute;left:50%;top:0;white-space:nowrap;font:900 21px/1 var(--body);letter-spacing:-0.01em;color:var(--cream);background:var(--deep);border-radius:14px;padding:14px 20px;opacity:0;transform:translateX(-50%) scale(.2);box-shadow:0 14px 30px -12px rgba(32,40,34,.6)}
  .cap em{font-style:normal;color:var(--coral-soft)}
  .cap1{animation:cap1 10s infinite}.cap2{animation:cap2 10s infinite}.cap3{animation:cap3 10s infinite}
  @keyframes cap1{0%,5%{opacity:0;transform:translateX(-50%) scale(.2)}8%{opacity:1;transform:translateX(-50%) scale(1.14)}10%,22%{opacity:1;transform:translateX(-50%) scale(1)}25%,100%{opacity:0;transform:translateX(-50%) scale(.9)}}
  @keyframes cap2{0%,24%{opacity:0;transform:translateX(-50%) scale(.2)}27%{opacity:1;transform:translateX(-50%) scale(1.14)}29%,40%{opacity:1;transform:translateX(-50%) scale(1)}43%,100%{opacity:0;transform:translateX(-50%) scale(.9)}}
  @keyframes cap3{0%,44%{opacity:0;transform:translateX(-50%) scale(.2)}47%{opacity:1;transform:translateX(-50%) scale(1.14)}49%,90%{opacity:1;transform:translateX(-50%) scale(1)}94%,100%{opacity:0;transform:translateX(-50%) scale(.9)}}

  /* ---------- thread bars between bands ---------- */
  .threads{display:grid;gap:5px;padding-block:0;background:var(--paper)}
  .threads i{display:block;height:10px}
  .threads i:nth-child(1){background:var(--coral)}
  .threads i:nth-child(2){background:var(--sage)}
  .threads i:nth-child(3){background:var(--deep)}
  .threads.flip i:nth-child(1){background:var(--deep)}.threads.flip i:nth-child(3){background:var(--coral)}

  /* ---------- bands ---------- */
  .band{padding-block:clamp(64px,9vw,120px)}
  .kicker{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px}
  .kicker svg{width:22px;height:22px;border-radius:6px}
  h2{font-family:var(--display);font-weight:500;font-size:clamp(34px,5.4vw,68px);line-height:1.04;letter-spacing:-0.02em;text-wrap:balance}
  .lead{font-size:clamp(16px,1.5vw,19px);max-width:56ch;margin-top:18px}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
  .split > *{min-width:0}
  @media(max-width:860px){.split{grid-template-columns:1fr}}

  .b-deep{background:var(--deep);color:var(--cream)}
  .b-deep .kicker{color:var(--coral-soft)}
  .b-deep .lead,.b-deep p{color:rgba(244,246,241,.78)}
  .steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
  @media(max-width:960px){.steps4{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.steps4{grid-template-columns:1fr}}
  .stepcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:26px 24px;display:flex;flex-direction:column;gap:10px;transition:transform .3s ease,background .3s ease}
  .stepcard:hover{transform:translateY(-4px);background:rgba(255,255,255,.09)}
  .stepcard .n{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-soft)}
  .stepcard .n svg{width:56px;height:56px;flex:none}
  .lp-base{stroke:rgba(244,246,241,.22)}
  .lp-fill{stroke-dasharray:1 2;stroke-dashoffset:calc(1 - var(--f))}
  .stepcard.lit .lp-fill{animation:lpfill 1.6s cubic-bezier(.45,0,.25,1) .25s both}
  @keyframes lpfill{from{stroke-dashoffset:1}to{stroke-dashoffset:calc(1 - var(--f))}}
  .stepcard h3{font-family:var(--display);font-weight:500;font-size:25px;line-height:1.15;color:var(--cream)}
  .stepcard p{font-size:15px}
  .stepcard .aside{font-size:12.5px;font-style:italic;color:rgba(244,246,241,.6)}

  .b-coral{background:var(--coral);color:var(--coral-ink)}
  .b-coral .kicker{color:var(--cream)}
  .b-coral h2{color:var(--white)}
  .b-coral .lead{color:var(--coral-ink)}
  .snap-art{position:relative;max-width:440px;margin-inline:auto;width:100%}
  .snap-art .ph{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:28px;transform:rotate(-3deg);box-shadow:0 40px 70px -30px rgba(42,26,19,.7);border:8px solid var(--white)}
  .snap-art .chip{position:absolute;left:-14px;bottom:44px;background:var(--white);border-radius:16px;padding:12px 16px;font-size:14px;font-weight:600;display:flex;gap:10px;align-items:center;box-shadow:0 18px 34px -16px rgba(42,26,19,.6);color:var(--ink)}
  .snap-art .chip svg{width:30px;height:30px;border-radius:8px}
  .snap-art .chip small{display:block;font-weight:400;font-size:11.5px;color:var(--ink-soft)}
  .seal{position:absolute;right:-22px;top:-30px;width:136px;height:136px;filter:drop-shadow(0 16px 22px rgba(42,26,19,.45))}
  .seal svg{width:100%;height:100%;overflow:visible}
  .seal .spin{transform-origin:68px 68px;animation:spin 14s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .seal .ripple{transform-origin:68px 68px;animation:ripple 3s ease-out infinite}
  @keyframes ripple{0%,40%{transform:scale(1);opacity:0}45%{opacity:.9}90%,100%{transform:scale(1.9);opacity:0}}
  .seal .btn{transform-origin:68px 68px;animation:press 3s ease infinite}
  @keyframes press{0%,40%{transform:scale(1)}44%{transform:scale(.84)}50%,100%{transform:scale(1)}}
  .seal .flashdot{animation:fdot 3s ease infinite}
  @keyframes fdot{0%,42%{opacity:0}45%{opacity:1}60%,100%{opacity:0}}
  @media(max-width:520px){.snap-art .chip{left:6px}.seal{right:-4px;width:112px;height:112px}}

  .b-paper{background:var(--paper)}
  .b-paper .kicker{color:var(--coral)}
  .b-paper .lead{color:var(--ink-soft)}
  .cal-box{position:relative;background:var(--white);border:1px solid var(--line);border-radius:28px;padding:22px 22px 26px;box-shadow:0 40px 70px -40px rgba(32,40,34,.45);max-width:520px;width:100%;margin-inline:auto;overflow:hidden}
  .cal-box{min-height:540px}
  .cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}
  .cal-head b{font:600 24px var(--display);display:inline-block;transition:transform .9s cubic-bezier(.55,0,.8,.2),opacity .8s ease}
  .count{display:inline-block;background:var(--coral);color:var(--white);font:800 13px/1 var(--body);padding:9px 13px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(201,116,86,.8)}
  .cal-box.go .count{animation:countfall 1.6s both}
  @keyframes countfall{
    0%{transform:none}
    10%{transform:scale(1.3) rotate(-7deg)}
    18%{transform:scale(1.3) rotate(7deg)}
    26%{transform:scale(1.28) rotate(-6deg)}
    34%{transform:scale(1.25) rotate(4deg)}
    42%{transform:scale(1.2) rotate(0);opacity:1;animation-timing-function:cubic-bezier(.55,0,.8,.2)}
    100%{transform:translate(-40px,520px) rotate(38deg) scale(1);opacity:0}}
  .cal-box.go .cal-head b{transform:translate(-20px,500px) rotate(-22deg);opacity:0;transition-delay:.75s}
  .dow{transition:transform .8s cubic-bezier(.55,0,.8,.2),opacity .7s ease}
  .cal-box.go .dow{transform:translateY(480px) rotate(var(--r));opacity:0;transition-delay:calc((var(--d) + 900) * 1ms)}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .dow{font-size:10.5px;color:var(--ink-soft);text-align:center;letter-spacing:.06em}
  .cell{aspect-ratio:1/1.08;border-radius:8px;background:var(--mist);display:flex;flex-direction:column;gap:3px;padding:4px;transition:transform .8s cubic-bezier(.55,0,.8,.2),opacity .7s ease}
  .ev{height:6px;border-radius:3px;background:var(--sage);opacity:.6}
  .ev.c{background:var(--coral);opacity:.8}
  .ev.d{background:var(--deep);opacity:.55}
  .cal-box.go .cell{transform:translateY(460px) rotate(var(--r));opacity:0;transition-delay:calc((var(--d) + 1100) * 1ms)}
  .cal-box.snap *{transition:none!important;animation:none!important}
  .cal-box.fadein .cal-head,.cal-box.fadein .cal-grid{animation:fin .7s ease both}
  @keyframes fin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .cal-after{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;pointer-events:none;text-align:center;padding:20px}
  .cal-box.go .cal-after{opacity:1;transition:opacity .3s ease 2.7s}
  .was{position:relative;font:600 22px var(--body);color:var(--ink-soft);opacity:0}
  .was::after{content:"";position:absolute;left:-6%;top:52%;height:4px;width:0;border-radius:3px;background:var(--coral);transform:rotate(-4deg)}
  .cal-box.go .was{animation:wasin .4s ease 2.75s both}
  .cal-box.go .was::after{animation:strike .45s cubic-bezier(.6,0,.3,1) 3.2s both}
  @keyframes wasin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes strike{to{width:112%}}
  .one{font:500 clamp(34px,4.4vw,48px)/1.05 var(--display);color:var(--ink);letter-spacing:-0.02em;opacity:0;position:relative;z-index:2}
  .one em{color:var(--coral);font-style:italic}
  .cal-box.go .one{animation:onepop .75s cubic-bezier(.2,1.6,.4,1) 3.65s both}
  @keyframes onepop{0%{opacity:0;transform:scale(.25) rotate(-6deg)}60%{opacity:1;transform:scale(1.14) rotate(2deg)}100%{opacity:1;transform:none}}
  .burst{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1}
  .burst b{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--coral);opacity:0;transform:rotate(var(--a)) translateX(0)}
  .burst b:nth-child(3n){background:var(--sage)}.burst b:nth-child(4n){background:var(--deep);width:8px;height:8px}
  .cal-box.go .burst b{animation:spark .9s cubic-bezier(.15,.8,.3,1) 3.72s forwards}
  @keyframes spark{0%{opacity:1;transform:rotate(var(--a)) translateX(10px) scale(1.2)}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--dist)) scale(.4)}}
  .cal-after svg.t{width:80%;height:auto;overflow:visible;margin-top:10px}
  .tline{stroke-dasharray:1;stroke-dashoffset:1}
  .cal-box.go .tline{animation:tdraw 1.1s ease 4.3s both}
  @keyframes tdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  .tknot{opacity:0;transform-box:fill-box;transform-origin:center}
  .cal-box.go .tknot{animation:knotin .6s cubic-bezier(.3,1.8,.5,1) 4.9s both}
  @keyframes knotin{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
  .next{font-size:15.5px;color:var(--ink-soft);opacity:0}
  .mini{width:76px;height:76px;margin-top:14px;border-radius:17px;overflow:hidden;opacity:0;box-shadow:0 16px 30px -14px rgba(32,40,34,.6)}
  .mini svg{display:block;width:100%;height:100%}
  .mini .d{stroke-dasharray:1;stroke-dashoffset:1}
  .cal-box.go .mini{animation:minin .5s cubic-bezier(.3,1.5,.5,1) 5.8s both}
  @keyframes minin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
  .cal-box.go .mini .d1{animation:tdraw 1.2s cubic-bezier(.45,0,.25,1) 6.15s both}
  .cal-box.go .mini .d2{animation:tdraw 1.2s cubic-bezier(.45,0,.25,1) 6.5s both}
  .cal-box.go .mini .d3{animation:tdraw .45s ease-out 7.5s both}
  .cal-box.go .next{animation:wasin .5s ease 5.2s both}

  .b-sage{background:var(--sage);color:var(--cream)}
  .b-sage .kicker{color:var(--cream);opacity:.85}
  .grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
  @media(max-width:900px){.grid6{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.grid6{grid-template-columns:1fr}}
  .pcard{background:var(--cream);color:var(--ink);border-radius:20px;padding:24px 24px 26px;display:flex;flex-direction:column;gap:8px}
  .pcard .ic{width:40px;height:40px;border-radius:12px;background:var(--mist-2);display:grid;place-items:center}
  .pcard .ic svg{width:22px;height:22px}
  .pcard h3{font:500 21px/1.2 var(--display)}
  .pcard p{font-size:14.5px;color:var(--ink-soft)}

  .b-icon{background:var(--deeper);color:var(--cream);text-align:center;position:relative;overflow:hidden}
  .b-icon .rings{position:absolute;left:50%;top:50%;width:900px;height:900px;transform:translate(-50%,-50%);pointer-events:none;opacity:.35}
  .bigicon{width:clamp(180px,24vw,260px);aspect-ratio:1;margin:0 auto 34px;border-radius:22.4%;overflow:hidden;box-shadow:0 50px 90px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);position:relative;z-index:1}
  .bigicon svg{display:block;width:100%;height:100%}
  .draw{stroke-dasharray:1;stroke-dashoffset:0;animation:draw 9s cubic-bezier(.45,0,.25,1) infinite}
  .draw.l2{animation-name:draw2}.draw.lL{animation-name:drawL}
  @keyframes draw{0%,8%{stroke-dashoffset:0;opacity:1}11%{opacity:0;stroke-dashoffset:0}12%{opacity:0;stroke-dashoffset:1}13%{opacity:1;stroke-dashoffset:1}40%,100%{stroke-dashoffset:0;opacity:1}}
  @keyframes draw2{0%,8%{stroke-dashoffset:0;opacity:1}11%{opacity:0;stroke-dashoffset:0}12%{opacity:0;stroke-dashoffset:1}22%{opacity:1;stroke-dashoffset:1}52%,100%{stroke-dashoffset:0;opacity:1}}
  @keyframes drawL{0%,8%{stroke-dashoffset:0;opacity:1}11%{opacity:0;stroke-dashoffset:0}12%,52%{opacity:0;stroke-dashoffset:1}53%{opacity:1;stroke-dashoffset:1}64%,100%{stroke-dashoffset:0;opacity:1}}
  .b-icon h2{position:relative;z-index:1;color:var(--cream)}
  .b-icon .lead{position:relative;z-index:1;margin-inline:auto;color:rgba(244,246,241,.78)}
  .today{position:relative;z-index:1;display:inline-flex;gap:10px;margin-top:30px;flex-wrap:wrap;justify-content:center}
  .today span{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:9px 16px;font-size:14px}
  .today span i{width:12px;height:12px;border-radius:50%;background:var(--coral)}

  .faq{margin-top:36px;max-width:820px;display:flex;flex-direction:column;gap:12px}
  details{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:20px 24px}
  summary{cursor:pointer;font:500 20px/1.3 var(--display);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--mist-2);color:var(--deep);display:grid;place-items:center;font:600 18px var(--body);transition:transform .25s ease}
  details[open] summary::after{transform:rotate(45deg);background:var(--coral);color:var(--white)}
  details p{margin-top:12px;font-size:15.5px;color:var(--ink-soft);max-width:64ch}

  .price-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
  @media(max-width:860px){.price-wrap{grid-template-columns:1fr}}
  .plans{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:460px){.plans{grid-template-columns:1fr}}
  .plan{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:26px}
  .plan.best{background:var(--cream);color:var(--ink);border-color:transparent}
  .plan .p{font:500 46px/1 var(--display);font-variant-numeric:tabular-nums}
  .plan .p span{font:400 14px var(--body);opacity:.75;margin-left:4px}
  .plan .lbl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;opacity:.75}
  .plan.best .lbl{color:var(--coral);opacity:1}
  .plan small{display:block;margin-top:10px;font-size:13px;opacity:.75}
  .ticks{list-style:none;margin-top:22px;display:grid;gap:8px;font-size:15px;color:rgba(244,246,241,.85)}
  .ticks li{display:flex;gap:10px;align-items:center}
  .ticks li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}

  /* ---------- footer with studio logo ---------- */
  footer{background:var(--cream);border-top:1px solid var(--line);padding-block:56px 40px}
  .foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px;align-items:start}
  @media(max-width:760px){.foot{grid-template-columns:1fr}}
  .studio-big{display:flex;align-items:center;gap:18px}
  .studio-big svg{width:84px;height:98px;flex:none}
  .studio-big .word{font:700 40px/1 var(--studio);letter-spacing:-0.03em}
  .studio-big .tag{font:600 11px/1 var(--studio);letter-spacing:.34em;margin-top:9px}
  .studio-big .motto{font-size:14px;color:var(--ink-soft);margin-top:8px}
  .made{font-size:14px;color:var(--ink-soft);margin-top:18px;max-width:40ch}
  .fcol h4{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
  .fcol a,.fcol span{display:block;font-size:14.5px;color:var(--ink);text-decoration:none;padding-block:3px}
  .fcol a:hover{color:var(--coral)}
  .app-row{display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .app-row svg{width:46px;height:46px;border-radius:11px;flex:none}
  .app-row b{font:600 18px var(--display);display:block}
  .app-row small{font-size:12.5px;color:var(--ink-soft)}
  .legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--ink-soft)}

  /* scroll reveal: applied by script only to content below the first screen */
  .pre{opacity:0;transform:translateY(22px)}
  .shown{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}

  @media (prefers-reduced-motion: reduce){
    .studio *,.stage,.slot,.old,.newcard,.bd,.cam,.vf,.shutter,.flash,.shot,.thread,.step,.loopdone,.cap,.draw,.lp-fill,.seal *,.count,.was,.was::after,.one,.burst *,.tline,.tknot,.next,.mini,.mini .d{animation:none!important}
    .mini{opacity:1}.mini .d{stroke-dashoffset:0}
    .seal .flashdot,.seal .ripple{opacity:0}.was,.one,.next,.tknot{opacity:1}.was::after{width:112%}.tline{stroke-dashoffset:0}
    .vf,.flash,.old{opacity:0}.slot{height:72px}.newcard,.step,.loopdone{opacity:1}
    .shot{left:25px;top:126px;width:48px;height:48px;border-radius:10px}.thread{height:150px}
    .cap3{opacity:1;transform:translateX(-50%)}
    .pre{opacity:1;transform:none}
    .cell,.cal-after,.tline,.tknot{transition:none!important}
  }

  /* ---------- inner pages: support, privacy, terms ---------- */
  nav a.on{color:var(--deep);font-weight:600}
  .page-hero{position:relative;overflow:hidden;background:var(--deep);color:var(--cream);padding-block:clamp(56px,8vw,104px)}
  .page-hero .rings{position:absolute;right:-180px;top:50%;width:620px;height:620px;transform:translateY(-50%);opacity:.35;pointer-events:none}
  @media(max-width:700px){.page-hero .rings{right:-320px}}
  .page-hero .kicker{color:var(--coral-soft);position:relative}
  .page-hero h1{position:relative;margin:0;text-align:left;max-width:16ch;font-size:clamp(40px,6.4vw,76px);color:var(--cream)}
  .page-hero .meta{position:relative;margin-top:18px;font-size:15.5px;color:rgba(244,246,241,.75);max-width:60ch}
  .doc-band{background:var(--paper);padding-block:clamp(48px,7vw,88px)}
  .doc-wrap{max-width:840px;margin-inline:auto;display:flex;flex-direction:column;gap:20px}
  .doc-card{background:var(--white);border:1px solid var(--line);border-radius:26px;padding:clamp(24px,4.5vw,52px);box-shadow:0 30px 60px -44px rgba(32,40,34,.45)}
  .doc-card h2{display:flex;align-items:center;gap:12px;font:500 clamp(20px,2.2vw,24px)/1.25 var(--display);color:var(--deep);margin-top:36px;margin-bottom:10px;text-wrap:balance}
  .doc-card h2::before{content:"";flex:none;width:13px;height:13px;border-radius:50%;border:3px solid var(--sage);background:var(--paper)}
  .doc-card h2:first-child{margin-top:0}
  .doc-card h2.emphasis{color:var(--coral)}
  .doc-card h2.emphasis::before{border-color:var(--coral)}
  .doc-card p{font-size:16px;line-height:1.65;color:var(--ink);margin-top:10px;max-width:68ch}
  .doc-card strong{color:var(--ink)}
  .doc-card a{color:var(--deep);text-decoration-color:var(--coral);text-underline-offset:3px}
  .doc-card address{font-style:normal;font-size:16px;line-height:1.65;margin-top:10px}
  .toc ol{list-style:none;margin:12px 0 0;padding-left:0;columns:2;column-gap:32px;font-size:15.5px;line-height:1.9}
  @media(max-width:640px){.toc ol{columns:1}}
  .toc a{text-decoration:none}
  .toc a:hover{text-decoration:underline}
  .doc-card[id]{scroll-margin-top:96px}
  .table-wrap{margin-top:14px;overflow-x:auto}
  .doc-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
  .doc-table th{text-align:left;font-weight:600;color:var(--deep);padding:10px 12px;border-bottom:2px solid var(--line)}
  .doc-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)}
  @media(max-width:640px){.doc-table thead{display:none}.doc-table tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}.doc-table td{display:block;border:0;padding:3px 0}.doc-table td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}}
  .note-line{font-size:14px;color:var(--ink-soft);font-style:italic;max-width:68ch;padding-inline:8px}
  .contact-card{position:relative;overflow:hidden;background:var(--coral);color:var(--white);border-radius:26px;padding:clamp(26px,4.5vw,52px);display:grid;gap:10px}
  .contact-card .lbl{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
  .contact-card h2{font:500 clamp(26px,3.4vw,36px)/1.15 var(--display);color:var(--white)}
  .contact-card .email{font:600 clamp(22px,3vw,32px)/1.2 var(--display);color:var(--white);text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:6px;word-break:break-word}
  .contact-card p{font-size:16px;color:var(--coral-ink);max-width:56ch}
  .contact-card svg.knot{position:absolute;right:-30px;bottom:-40px;width:200px;height:200px;opacity:.22}