@font-face{font-family:"Satoshi";src:url("/nota/fonts/satoshi-regular.woff2") format("woff2");font-weight:400;font-display:swap}
  @font-face{font-family:"Satoshi";src:url("/nota/fonts/satoshi-medium.woff2") format("woff2");font-weight:500;font-display:swap}
  @font-face{font-family:"Satoshi";src:url("/nota/fonts/satoshi-bold.woff2") format("woff2");font-weight:700;font-display:swap}
  @font-face{font-family:"Satoshi";src:url("/nota/fonts/satoshi-black.woff2") format("woff2");font-weight:900;font-display:swap}
  :root{
    --paper:#fbfbf9;--paper2:#f4f4f1;--ink:#111110;--muted:#5b5b56;--faint:#8f8f88;
    --line:rgba(17,17,16,.13);--line2:rgba(17,17,16,.07);--accent:#0e6b45;
    --hair:color-mix(in srgb, var(--ink) 10%, transparent);
    --sh:0 1px 2px rgba(17,17,16,.04), 0 30px 60px -40px rgba(17,17,16,.35);
    --sh-hover:0 1px 2px rgba(17,17,16,.05), 0 42px 76px -42px rgba(17,17,16,.45);
    --mono:ui-monospace,SFMono-Regular,Menlo,monospace;--ease:cubic-bezier(.16,1,.3,1)
  }
  *{box-sizing:border-box}
  html{overflow-x:clip}
  @media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
  html,body{margin:0}
  body{background:var(--paper);color:var(--ink);font-family:"Satoshi",ui-sans-serif,system-ui,sans-serif;font-size:1.0625rem;line-height:1.65;font-weight:400;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  h1,h2,h3{text-wrap:balance}
  p{text-wrap:pretty}
  a{color:inherit}
  ::selection{background:var(--accent);color:#fff}
  .wrap{width:min(1180px,calc(100% - 2.4rem));margin-inline:auto}
  section[id]{scroll-margin-top:5.5rem}
  .rise{opacity:0;transform:translateY(22px) scale(.992);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
  .rise.in{opacity:1;transform:none}
  .rise.stagger{opacity:1;transform:none}
  .rise.stagger>*{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .rise.stagger.in>*{opacity:1;transform:none}
  .rise.stagger.in>*:nth-child(1){transition-delay:0ms}
  .rise.stagger.in>*:nth-child(2){transition-delay:70ms}
  .rise.stagger.in>*:nth-child(3){transition-delay:140ms}
  .rise.stagger.in>*:nth-child(4){transition-delay:210ms}
  .rise.stagger.in>*:nth-child(5){transition-delay:280ms}
  .rise.stagger.in>*:nth-child(6){transition-delay:350ms}

  header{position:fixed;top:1rem;left:0;right:0;z-index:60;display:flex;justify-content:center;padding-inline:1.25rem;pointer-events:none}
  .bar{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;width:min(1180px,100%);padding:.45rem .45rem .45rem 1.05rem;border-radius:999px;background:color-mix(in srgb,var(--paper) 80%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 0 rgba(255,255,255,.6),0 24px 50px -32px rgba(17,17,16,.4);view-transition-name:navpill}
  @view-transition{navigation:auto}
  main{padding-top:4.5rem}
  .brand{display:flex;align-items:center;gap:.55rem;font-weight:700;letter-spacing:-.03em;font-size:1.08rem;text-decoration:none}
  .logo{width:20px;height:20px;border-radius:5px;background:var(--ink)}
  nav{display:none;gap:1.8rem}
  @media(min-width:940px){nav{display:flex}}
  nav a{font-size:.9rem;font-weight:500;text-decoration:none;color:var(--muted);transition:color .2s}
  nav a:hover{color:var(--ink)}
  nav a{position:relative}
  nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;border-radius:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
  nav a:hover::after{transform:scaleX(1)}
  .btn{display:inline-flex;align-items:center;gap:.55rem;border-radius:999px;padding:.72rem 1.15rem;font-size:.92rem;font-weight:600;text-decoration:none;border:0;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .2s,color .2s;will-change:transform}
  .btn.ember{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 86%,#fff),var(--accent));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 26px -14px color-mix(in srgb,var(--accent) 85%,transparent)}
  .btn.ember:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 18px 34px -16px color-mix(in srgb,var(--accent) 95%,transparent)}
  .btn.ember:active{transform:translateY(0) scale(.985)}
  .btn.line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair),0 1px 2px rgba(17,17,16,.04)}
  .btn.line:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 32%,var(--hair)),0 16px 30px -22px rgba(17,17,16,.45)}
  .btn.line:active{transform:translateY(0) scale(.985)}

  .hero{padding-block:clamp(3.2rem,7vw,5.6rem) 0;text-align:center}
  .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
  .hero h1{font-size:clamp(2.6rem,6.4vw,4.8rem);font-weight:700;letter-spacing:-.032em;line-height:1;margin:1.1rem auto 0;max-width:13em}
  .hero .two{margin:1.3rem auto 0;max-width:34rem;font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:500;line-height:1.35;letter-spacing:-.01em}
  .hero .sup{margin:1rem auto 0;max-width:40rem;color:var(--muted);font-size:1.02rem}
  .hero .act{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
  .hero .hint{display:inline-block;margin-top:1rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-decoration:none;transition:color .2s}
  .hero .hint:hover{color:var(--ink)}

  /* Proof strip: one real client, a slim band under the hero -- not a section. */
  .proof{padding-block:.4rem 0}
  .proof-in{display:flex;align-items:center;gap:.9rem;padding:.6rem .7rem;border-radius:14px;background:#fff;text-decoration:none;color:inherit;box-shadow:inset 0 0 0 1px var(--hair),var(--sh);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .proof-in:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,var(--hair)),var(--sh-hover)}
  .proof-in img{width:64px;height:40px;border-radius:9px;object-fit:cover;object-position:top center;flex:none;background:var(--paper2)}
  .proof-in span{font-size:.92rem;color:var(--muted);min-width:0}
  .proof-in b{color:var(--ink);font-weight:600}
  .proof-go{margin-left:auto;color:var(--accent);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

  /* #1: pull the editor demo closer on a phone so its top can reach the first screen. */
  @media(max-width:640px){.hero{padding-block:2.2rem 0}.stage{margin-top:1.4rem}.hero .hint{margin-top:.7rem}.proof-in img{width:52px;height:34px}.proof-in span{font-size:.86rem;line-height:1.35}.proof-go{display:none}}

  .stage{position:relative;width:min(1180px,100%);margin:clamp(2.2rem,5vw,3.4rem) auto 0;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 40px 90px -60px rgba(17,17,16,.4);overflow:clip;text-align:left}

  .ebar{display:flex;align-items:center;gap:.45rem;padding:.5rem .7rem;border-bottom:1px solid var(--line2);background:var(--paper2);font-size:.78rem;color:var(--muted);overflow-x:auto;scrollbar-width:none}
  .ebar::-webkit-scrollbar{display:none}
  .ebar .crumb{display:inline-flex;align-items:center;min-height:26px;text-decoration:none;color:var(--muted);font-weight:500;white-space:nowrap}
  .ebar .livedot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:.35rem;flex:none}
  .ebar .livet{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
  .etog{border:0;background:#fff;border-radius:999px;padding:.22rem .62rem;font:inherit;font-size:.72rem;cursor:pointer;color:var(--muted);white-space:nowrap;box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .25s var(--ease),color .2s,background-color .2s}
  .etog.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .etools{display:flex;gap:.32rem}
  .etbtn{border:0;background:#fff;border-radius:8px;padding:.26rem .6rem;font:inherit;font-size:.74rem;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .25s var(--ease),background-color .2s}
  .etbtn:hover{background:var(--paper2)}
  .etbtn[aria-expanded="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .ebar .undo{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
  .espacer{margin-left:auto}
  .esoft{font-size:.74rem;color:var(--faint);white-space:nowrap}
  @media(max-width:640px){.esoft{display:none}}

  .stage-body{display:flex;align-items:stretch}
  .pop{position:absolute;top:3rem;left:.7rem;z-index:20;width:min(340px,calc(100% - 1.4rem));background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px -30px rgba(17,17,16,.5);padding:.7rem}
  .pop[hidden]{display:none}
  .pop-h{margin:.1rem .2rem .55rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .pop-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
  .pop-grid button{border:1px solid var(--line);background:transparent;border-radius:8px;padding:.5rem .6rem;font:inherit;font-size:.82rem;text-align:left;cursor:pointer}
  .pop-grid button:hover{background:var(--paper2)}
  .pop-list{display:flex;flex-direction:column;max-height:240px;overflow:auto}
  .chg{display:flex;align-items:center;gap:.5rem;padding:.44rem .2rem;border-bottom:1px solid var(--line2);font-size:.8rem}
  .chg:last-child{border-bottom:0}
  .chg .k{font-size:.8rem;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chg .t{margin-left:auto;color:var(--faint);font-size:.72rem;white-space:nowrap}
  .chg button{border:1px solid var(--line);background:transparent;border-radius:6px;padding:.15rem .45rem;font:inherit;font-size:.72rem;cursor:pointer;color:var(--ink)}
  .chg button:hover{background:var(--paper2)}
  .chg .none{border:0;color:var(--faint);font-size:.8rem;padding:.3rem .2rem}

  /* The Style panel: docked so the page stays visible while you change it. */
  .panel{width:min(360px,44%);border-left:1px solid var(--line);background:#fff;max-height:min(74vh,660px);overflow:auto;padding:.85rem .85rem 1rem;flex:none}
  .panel[hidden]{display:none}
  @media(max-width:880px){.stage-body{flex-direction:column}.panel{width:100%;border-left:0;border-top:1px solid var(--line);max-height:none}}
  .sp-group{display:flex;flex-direction:column;gap:.45rem;padding:.7rem 0;border-top:1px solid var(--line2)}
  .sp-group:first-of-type{border-top:0;padding-top:.1rem}
  .sp-lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.35rem}
  .sw{display:flex;flex-direction:column;gap:.3rem;border:1px solid var(--line);border-radius:8px;padding:.35rem;cursor:pointer;background:transparent;text-align:left}
  .sw:hover{background:var(--paper2)}
  .sw.on{outline:2px solid var(--ink);outline-offset:1px}
  .sw .bars{display:flex;height:16px;border-radius:4px;overflow:hidden;border:1px solid var(--line2)}
  .sw .bars i{flex:1}
  .sw span{font-size:.66rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .seg{display:flex;flex-wrap:wrap;gap:.3rem}
  .seg button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:.3rem .72rem;font:inherit;font-size:.76rem;cursor:pointer}
  .seg button:hover{background:var(--paper2)}
  .seg button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .shapegrid{display:flex;flex-wrap:wrap;gap:.4rem}
  .shapegrid button{border:1px solid var(--line);background:transparent;border-radius:8px;padding:.4rem .3rem .35rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;cursor:pointer;width:68px}
  .shapegrid button:hover{background:var(--paper2)}
  .shapegrid button.on{outline:2px solid var(--ink);outline-offset:1px}
  .shapegrid .box{width:28px;height:28px;background:var(--ink);opacity:.88}
  .shapegrid span{font-size:.64rem;color:var(--muted)}
  .tintrow{display:flex;align-items:center;gap:.6rem}
  .tintrow input{flex:1;accent-color:var(--accent)}
  .tintrow b{font-family:var(--mono);font-size:.68rem;color:var(--muted);min-width:2.4rem;text-align:right}
  .photos{display:flex;gap:.45rem;flex-wrap:wrap}
  .photos button{width:80px;border:1px solid var(--line);border-radius:8px;padding:0;overflow:hidden;cursor:pointer;background:transparent;text-align:left}
  .photos button:hover{background:var(--paper2)}
  .photos button.on{outline:2px solid var(--ink);outline-offset:1px}
  .photos .im{height:46px}
  .photos span{display:block;font-size:.62rem;color:var(--muted);padding:.22rem .3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .page{--p-bg:#fdfcf9;--p-ink:#1a1613;--p-acc:#b4553a;--p-head:Georgia,"Times New Roman",serif;--p-weight:400;--p-track:-.03em;--p-btnr:9999px;--p-shape:12px;--p-clip:none;
    flex:1;min-width:0;background:var(--p-bg);color:var(--p-ink);padding:clamp(1rem,2.4vw,1.6rem) clamp(1rem,3vw,2rem);transition:background-color .5s var(--ease),color .5s var(--ease)}

  /* Section chrome: the real tools (reorder, hide, surface, delete), on hover. */
  .sec{position:relative;border-radius:10px;margin-inline:-.5rem;padding-inline:.5rem;transition:background-color .4s,color .4s}
  .sec[data-variant="linen"]{background:color-mix(in srgb,var(--p-ink) 6%,var(--p-bg))}
  .sec[data-variant="wash"]{background:transparent}
  .sec[data-variant="dark"]{--p-bg:#16130f;--p-ink:#f2ece3;background:var(--p-bg);color:var(--p-ink)}
  .sec.sec-hidden{opacity:.4}
  .sc{position:absolute;top:.05rem;right:.05rem;z-index:6;display:none;align-items:center;gap:.15rem;background:#fff;border:1px solid var(--line);border-radius:8px;padding:.12rem .2rem;box-shadow:0 10px 24px -16px rgba(0,0,0,.5)}
  .sec:hover>.sc{display:flex}
  .sc button,.sc .grip{border:0;background:transparent;font:inherit;font-size:.72rem;color:var(--ink);cursor:pointer;border-radius:5px;padding:.1rem .32rem;line-height:1.5}
  .sc button:hover{background:var(--paper2)}
  .sc .grip{cursor:grab;color:var(--faint);letter-spacing:-.12em;padding:.1rem .25rem}
  .sc [data-remove]:hover{background:#fdecec;color:#b3261e}
  .sc [data-surface]{font-family:var(--mono);font-size:.64rem;letter-spacing:.02em;color:var(--muted)}
  .stage.viewing .sc{display:none!important}
  .stage.viewing .sec{pointer-events:none}

  .page .pnav{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;font-size:.8rem;color:color-mix(in srgb,var(--p-ink) 62%,var(--p-bg));padding-bottom:1.2rem;border-bottom:1px solid color-mix(in srgb,var(--p-ink) 14%,transparent)}
  .page .pnav b{color:var(--p-ink);font-weight:700;margin-right:auto}
  .page .phero{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1rem,3vw,2rem);align-items:center;padding-block:clamp(1.4rem,4vw,2.4rem)}
  @media(max-width:700px){.page .phero{grid-template-columns:1fr}}
  .page .pey{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--p-acc)}
  .page .ph{font-family:var(--p-head);font-size:clamp(1.7rem,4.2vw,3rem);font-weight:var(--p-weight,400);letter-spacing:var(--p-track,-.03em);line-height:1.04;margin:.6rem 0 0;transition:font-weight .4s var(--ease)}
  .page .ps{margin-top:.85rem;color:color-mix(in srgb,var(--p-ink) 66%,var(--p-bg));font-size:1rem;max-width:32rem}
  .page .pbtn{display:inline-flex;margin-top:1.2rem;background:var(--p-acc);color:#fff;border-radius:var(--p-btnr,9999px);padding:.6rem 1.15rem;font-size:.88rem;font-weight:600;transition:border-radius .4s var(--ease),background-color .5s var(--ease)}
  .page .pcard{aspect-ratio:4/3;border-radius:var(--p-shape,12px);clip-path:var(--p-clip,none);background:#241a12 url("/images/cinder-hearth-700.webp") center/cover no-repeat;transition:border-radius .4s var(--ease),background .5s var(--ease);position:relative;overflow:hidden}
  .page .pcard::after{content:"the room";position:absolute;left:.6rem;bottom:.5rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
  .page .pmenu,.page .psec{margin-top:.6rem;border-top:1px solid color-mix(in srgb,var(--p-ink) 14%,transparent);padding-top:1rem}
  .page .pmenu h4,.page .psec h4{font-family:var(--p-head);font-weight:var(--p-weight,700);font-size:1.05rem;margin:0 0 .6rem}
  .page .psec h4{margin:.35rem 0 .35rem}
  .page .pmrow{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;color:color-mix(in srgb,var(--p-ink) 66%,var(--p-bg));padding:.28rem 0}
  .page .psec p{color:color-mix(in srgb,var(--p-ink) 66%,var(--p-bg));font-size:.95rem;margin:0;max-width:34rem}

  .ed{position:relative;outline:1px dashed transparent;outline-offset:3px;border-radius:4px;cursor:text;transition:outline-color .2s,background-color .2s}
  .ed::before{content:"edit";position:absolute;top:-1.4rem;left:-3px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:4px;padding:.1rem .35rem;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
  .page:hover .ed:hover,.see-page:hover .ed:hover,.cx-preview:hover .ed:hover,.lens-page:hover .ed:hover{outline-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
  .page:hover .ed:hover::before,.see-page:hover .ed:hover::before,.cx-preview:hover .ed:hover::before,.lens-page:hover .ed:hover::before{opacity:1}
  .ed:focus{outline:1px solid var(--accent);outline-offset:3px;background:color-mix(in srgb,var(--accent) 8%,transparent)}
  .ed:focus::before{opacity:1}
  .stage.viewing .ed{cursor:default;pointer-events:none}
  .stage.viewing .ed::before{display:none}
  .stage.viewing .page:hover .ed:hover{outline-color:transparent;background:transparent}

  .statement{padding-block:clamp(4rem,10vw,8rem);text-align:center}
  .statement h2{font-size:clamp(2rem,5vw,3.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.02;max-width:14em;margin-inline:auto}
  .statement p{margin:1.2rem auto 0;max-width:38rem;color:var(--muted);font-size:1.1rem}
  .flow{display:flex;gap:.6rem 1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem;font-family:var(--mono);font-size:.82rem;color:var(--muted)}
  .flow b{color:var(--ink);display:flex;gap:1rem;align-items:center}
  .flow b::after{content:"\2192";color:var(--faint)}
  .flow b:last-child::after{content:""}

  .see{padding-block:clamp(4rem,10vw,8rem)}
  .see h2,.see h1{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .see .sup{margin:1.1rem 0 0;max-width:44rem;color:var(--muted);font-size:1.06rem}
  .see-stage{position:relative;margin-top:2.2rem;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 40px 90px -60px rgba(17,17,16,.4);overflow:clip}
  .see-page{display:grid;grid-template-columns:1.1fr 1fr}
  @media(max-width:820px){.see-page{grid-template-columns:1fr}}
  .see-page .blk{position:relative;padding:clamp(1.1rem,2.6vw,1.8rem);border-bottom:1px solid var(--line2);transition:outline-color .2s}
  .see-page .blk:hover{outline:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:-6px;border-radius:8px}
  .see-page .blk-media{padding:0;border-bottom:0;grid-row:1 / span 2}
  @media(max-width:820px){.see-page .blk-media{grid-row:auto;border-bottom:1px solid var(--line2)}}
  .photo{position:relative;min-height:360px;height:100%;background:#241a12 url("/images/cinder-fire-700.webp") center/cover no-repeat;display:flex;align-items:flex-end;transition:opacity .3s}
  .photo.is-hidden{opacity:.3}
  .photo .media-note{position:absolute;left:.75rem;bottom:.7rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9)}
  .media-cluster{position:absolute;top:.6rem;right:.6rem;z-index:8;display:none;gap:.15rem;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:9px;padding:.2rem;box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
  .photo:hover .media-cluster,.photo:focus-within .media-cluster{display:flex}
  .media-cluster button{border:0;background:transparent;font:inherit;font-size:.74rem;font-weight:500;color:var(--ink);border-radius:6px;padding:.3rem .6rem;cursor:pointer}
  .media-cluster button:hover{background:var(--paper2)}
  .media-cluster button[aria-pressed="true"]{background:var(--ink);color:#fff}
  .tip{position:absolute;z-index:31;transform:translate(-50%,-100%);background:var(--ink);color:#fff;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:.18rem .42rem;border-radius:5px;pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap}
  .tip.on{opacity:1}
  .chooser,.altpop{position:absolute;z-index:30;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 24px 50px -30px rgba(0,0,0,.6);padding:.5rem}
  .chooser[hidden],.altpop[hidden]{display:none}
  .chooser{display:flex;gap:.4rem}
  .chooser button{width:64px;border:1px solid var(--line);border-radius:8px;padding:0;overflow:hidden;cursor:pointer;background:transparent}
  .chooser .im{height:44px;display:block}
  .chooser button:hover{outline:2px solid var(--accent);outline-offset:1px}
  .altpop{width:230px;display:flex;flex-direction:column;gap:.4rem}
  .altpop input{width:100%;border:0;border-radius:9px;padding:.5rem .6rem;font:inherit;font-size:.82rem;box-shadow:inset 0 0 0 1px var(--hair)}
  .altpop input:focus{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 50%,transparent);outline:0}
  .seat{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
  .sh{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.4rem,3vw,2rem);font-weight:700;letter-spacing:-.025em;line-height:1.08;margin:.5rem 0 0;display:block}
  .sp{margin-top:.7rem;color:var(--muted);font-size:1rem;max-width:32rem}
  .stab{font-weight:700;font-size:1rem;margin-bottom:.5rem}
  .srow{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;color:var(--muted);padding:.25rem 0}
  .see-save{position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);background:var(--ink);color:#fff;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;padding:.28rem .6rem;border-radius:6px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:31}
  .see-save.on{opacity:1}

  .cx{padding-block:clamp(4rem,10vw,8rem)}
  .cx h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .cx .sup{margin:1.1rem 0 0;max-width:44rem;color:var(--muted);font-size:1.06rem}
  .cx-stage{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.2rem;align-items:start}
  @media(max-width:820px){.cx-stage{grid-template-columns:1fr}}
  .cx-preview{--c-bg:#faf1e6;--c-ink:#241a12;--c-acc:#c4501f;background:var(--c-bg);color:var(--c-ink);border:1px solid var(--line);border-radius:12px;padding:1.4rem;transition:background-color .4s var(--ease),color .4s var(--ease)}
  .cx-preview .cp-nav{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:color-mix(in srgb,var(--c-ink) 60%,var(--c-bg));border-bottom:1px solid color-mix(in srgb,var(--c-ink) 14%,transparent);padding-bottom:.8rem}
  .cx-preview .cp-nav b{color:var(--c-ink);font-weight:700}
  .cx-preview .cp-h{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:.9rem 0 0}
  .cx-preview .cp-p{margin-top:.5rem;color:color-mix(in srgb,var(--c-ink) 66%,var(--c-bg));font-size:.95rem}
  .cx-preview .cp-row{display:flex;justify-content:space-between;margin-top:1rem;font-size:.92rem;color:color-mix(in srgb,var(--c-ink) 70%,var(--c-bg))}
  .cx-preview .cp-pal{display:flex;gap:.45rem;margin-top:1.3rem}
  .cx-preview .cp-pal button{width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;outline:1px solid var(--line);transition:transform .2s var(--ease)}
  .cx-preview .cp-pal button[data-cpal="warm"]{background:linear-gradient(135deg,#faf1e6,#c4501f)}
  .cx-preview .cp-pal button[data-cpal="cool"]{background:linear-gradient(135deg,#eef2f0,#247a6d)}
  .cx-preview .cp-pal button[data-cpal="night"]{background:linear-gradient(135deg,#16130f,#ff6a3d)}
  .cx-preview .cp-pal button.on{outline:2px solid var(--c-ink);outline-offset:2px;transform:scale(1.08)}
  .cx-panel{border:1px solid var(--line);border-radius:12px;background:#fff;padding:1rem 1.1rem}
  .cx-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}
  .cx-count{font-family:var(--mono);font-size:.72rem;color:var(--faint)}
  .cx-sub{color:var(--faint);font-size:.8rem;margin:.25rem 0 .6rem}
  .cx-row{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;border-top:1px solid var(--line2);font-size:.82rem}
  .cx-key{font-size:.82rem;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cx-who{color:var(--faint);font-size:.74rem}
  .cx-at{margin-left:auto;color:var(--faint);font-size:.72rem;white-space:nowrap}
  .cx-row button{border:1px solid var(--line);background:transparent;border-radius:6px;padding:.16rem .5rem;font:inherit;font-size:.72rem;cursor:pointer;color:var(--ink)}
  .cx-row button:hover{background:var(--paper2)}
  .cx-row.is-undone .cx-key{text-decoration:line-through;color:var(--faint)}
  .cx-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:.1rem .35rem}
  .cx-empty{color:var(--faint);font-size:.82rem;padding:.5rem 0}

  .lens{padding-block:clamp(4rem,10vw,8rem)}
  .lens h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .lens .sup{margin:1.1rem 0 0;max-width:44rem;color:var(--muted);font-size:1.06rem}
  .lens-stage{display:grid;grid-template-columns:1.1fr 1fr;gap:1.4rem;margin-top:2.2rem;align-items:start}
  @media(max-width:880px){.lens-stage{grid-template-columns:1fr}}
  .lens-page{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:clip;box-shadow:0 40px 90px -70px rgba(17,17,16,.4)}
  .lsec{position:relative;padding:1.1rem 1.2rem;border-bottom:1px solid var(--line2);transition:opacity .3s}
  .lsec:last-child{border-bottom:0}
  .lsec.is-hidden{opacity:.38}
  .lsec .lname{position:absolute;top:.45rem;right:.7rem;font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .lens-page .lnav{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem;color:var(--muted)}
  .lens-page .lnav b{color:var(--ink)}
  .lens-page .ley{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-top:.6rem}
  .lens-page .lh{font-family:Georgia,serif;font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.06;margin:.4rem 0 0}
  .lens-page .lp{margin-top:.5rem;color:var(--muted);font-size:.95rem}
  .lens-page .lrow2{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;color:var(--muted);padding:.22rem 0}
  .lens-panel{border:1px solid var(--line);border-radius:12px;background:#fff;padding:1rem 1.1rem}
  .lens-tabs{display:flex;gap:.3rem;margin-bottom:.7rem}
  .lens-tabs button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:.28rem .85rem;font:inherit;font-size:.78rem;cursor:pointer}
  .lens-tabs button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .lens-search{width:100%;border:0;border-radius:10px;padding:.55rem .7rem;font:inherit;font-size:.85rem;margin-bottom:.55rem;box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .25s var(--ease)}
  .lens-search:focus{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 50%,transparent);outline:0}
  .lens-status{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:.35rem}
  .lens-list{max-height:320px;overflow:auto;display:flex;flex-direction:column}
  .lgroup{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:.55rem .5rem .2rem}
  .lrow{display:flex;align-items:center;gap:.6rem;padding:.42rem .5rem;border-radius:7px;cursor:pointer;border:0;background:transparent;text-align:left;font:inherit}
  .lrow.on{background:var(--paper2)}
  .lrow .lk{font-size:.82rem;font-weight:600;color:var(--ink);white-space:nowrap}
  .lrow .lv{margin-left:auto;color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:58%}
  .lsec-row{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-top:1px solid var(--line2);font-size:.86rem}
  .lsec-row:first-child{border-top:0}
  .lsec-row .n{font-weight:600}
  .lsec-row .c{margin-left:auto;font-family:var(--mono);font-size:.68rem;color:var(--faint)}
  .lsec-row button{border:1px solid var(--line);background:transparent;border-radius:6px;padding:.16rem .5rem;font:inherit;font-size:.72rem;cursor:pointer}
  .lsec-row button:hover{background:var(--paper2)}
  .lee{outline:2px solid var(--accent)!important;outline-offset:2px;background:color-mix(in srgb,var(--accent) 10%,transparent)!important}

  .qual{padding-block:clamp(4rem,10vw,8rem)}
  .qual h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .qual .sup{margin:1.1rem 0 0;max-width:44rem;color:var(--muted);font-size:1.06rem}
  .qual-stage{display:grid;grid-template-columns:1.2fr 1fr;gap:1.4rem;margin-top:2.2rem;align-items:stretch}
  @media(max-width:820px){.qual-stage{grid-template-columns:1fr}}
  .qual-preview{--q-bg:#fdfcf9;--q-ink:#1a1613;background:var(--q-bg);color:var(--q-ink);border:1px solid var(--line);border-radius:12px;padding:1.8rem;transition:background-color .3s var(--ease),color .3s var(--ease);display:flex;flex-direction:column;justify-content:center}
  .qual-preview .qp-ey{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
  .qual-preview .qp-h{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;letter-spacing:-.02em;line-height:1.06;margin:.6rem 0 0}
  .qual-preview .qp-p{margin:.6rem 0 0;font-size:1rem;opacity:.82}
  .qual-panel{border:1px solid var(--line);border-radius:12px;background:#fff;padding:1.1rem}
  .qrow{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
  .qrow-l{width:4.6rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
  .qrow input[type=color]{width:44px;height:32px;border:1px solid var(--line);border-radius:7px;background:none;padding:0;cursor:pointer}
  .qrow b{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
  .qverdict{display:flex;align-items:center;gap:.7rem;margin:1rem 0 .45rem;padding-top:1rem;border-top:1px solid var(--line2)}
  .qratio{font-size:1.9rem;font-weight:700;letter-spacing:-.03em}
  .qbadge{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.24rem .5rem;border-radius:6px;background:var(--accent);color:#fff}
  .qbadge.fail{background:#b3261e}
  .qnote{color:var(--muted);font-size:.86rem}
  .qchips{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:1rem}
  .qchips button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:.3rem .75rem;font:inherit;font-size:.78rem;cursor:pointer}
  .qchips button:hover{background:var(--paper2)}
  .qchips button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

  .tmpl{padding-block:clamp(4rem,10vw,8rem)}
  .tmpl h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .tmpl .sup{margin:1.1rem 0 0;max-width:44rem;color:var(--muted);font-size:1.06rem}
  .tmpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.2rem}
  @media(max-width:820px){.tmpl-grid{grid-template-columns:1fr}}
  .tmpl-card{display:block;border:1px solid var(--line);border-radius:14px;overflow:clip;background:#fff;color:inherit;text-decoration:none;box-shadow:0 40px 90px -70px rgba(17,17,16,.4);transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
  .tmpl-card:hover{transform:translateY(-3px);box-shadow:0 54px 100px -60px rgba(17,17,16,.5)}
  .tmpl-shot{aspect-ratio:16/10;overflow:hidden;background:var(--paper2);border-bottom:1px solid var(--line2)}
  .tmpl-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
  .tmpl-meta{display:flex;align-items:baseline;gap:.7rem;padding:.9rem 1.1rem}
  .tmpl-meta b{font-size:1rem}
  .tmpl-meta span{color:var(--muted);font-size:.85rem}
  .tmpl-meta i{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
  .tmpl-note{margin-top:1.4rem;color:var(--faint);font-size:.9rem}

  .mq{margin-top:clamp(2.4rem,6vw,4rem);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .mq-track{display:flex;width:max-content;animation:mq 38s linear infinite}
  .mq-track span{display:inline-flex;align-items:center;gap:1.4rem;padding-right:1.4rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
  .mq-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--line);margin-left:1.4rem}
  .mq:hover .mq-track{animation-play-state:paused}
  @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  .ways{background:linear-gradient(180deg,var(--paper) 0,#111110 4.5rem,#111110 calc(100% - 4.5rem),var(--paper) 100%);color:#f5f5f2;padding-block:clamp(5.5rem,12vw,9rem)}
  .ways .eyebrow{color:#8c8c85}
  .ways h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .ways .sup{margin:1.1rem 0 0;max-width:44rem;color:#b6b6ae;font-size:1.06rem}
  .doors{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.4rem}
  @media(max-width:820px){.doors{grid-template-columns:1fr}}
  .door{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.6rem;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);text-decoration:none;color:inherit;overflow:hidden;transition:transform .35s var(--ease),border-color .35s,background-color .35s}
  .door::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.10),transparent 42%);opacity:0;transition:opacity .3s;pointer-events:none}
  .door:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.28)}
  .door:hover::before{opacity:1}
  .door:focus-visible{outline:2px solid #f5f5f2;outline-offset:3px}
  .door-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#9a9a92}
  .door-h{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:600;letter-spacing:-.02em;margin-top:.2rem}
  .door-p{color:#b6b6ae;font-size:.98rem;max-width:34rem}
  .door-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
  .door-list i{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:#cfcfc6;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.26rem .55rem}
  .door-cta{margin-top:1.1rem;font-weight:600;display:inline-flex;align-items:center;gap:.45rem}
  .door-cta::after{content:"\2192";transition:transform .3s var(--ease)}
  .door:hover .door-cta::after{transform:translateX(5px)}

  .progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--accent);z-index:60;pointer-events:none}

  .mob{padding-block:clamp(3rem,7vw,5.5rem)}
  .mob h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .mob .sup{margin:1.1rem 0 0;max-width:44rem;color:var(--muted);font-size:1.06rem}
  .mob-stage{display:grid;grid-template-columns:1fr 0.85fr;gap:clamp(1.6rem,4vw,3rem);margin-top:2rem;align-items:start}
  @media(max-width:820px){.mob-stage{grid-template-columns:1fr}}
  .mob-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}
  .mob-list li{position:relative;padding-left:1.7rem;color:var(--muted);font-size:1.02rem}
  .mob-list li::before{content:"";position:absolute;left:0;top:.5rem;width:9px;height:9px;border-radius:50%;background:var(--accent)}
  .phone{position:relative;width:min(330px,100%);margin-inline:auto;animation:float 9s var(--ease) infinite alternate}
  @keyframes float{from{transform:translateY(-5px)}to{transform:translateY(5px)}}
  .phone-screen{position:relative;border-radius:34px;border:11px solid #17150f;background:linear-gradient(165deg,#fbf7f0,#f1e8d9);overflow:hidden;aspect-ratio:9/17.5;padding:1.5rem 1rem 1.1rem;box-shadow:0 50px 90px -50px rgba(17,17,16,.55);display:flex;flex-direction:column}
  .phone-island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:76px;height:20px;border-radius:9999px;background:#0b0b0a;z-index:6}
  .phone-home{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:104px;height:4px;border-radius:9999px;background:rgba(17,17,16,.3);z-index:3}
  .phone-status{display:flex;justify-content:space-between;align-items:center;font-size:.62rem;font-weight:600;color:var(--ink);padding-bottom:.7rem}
  .phone-status b{font-variant-numeric:tabular-nums}
  .phone-nav{display:flex;justify-content:space-between;gap:.6rem;font-size:.66rem;color:var(--muted);padding-bottom:.6rem;border-bottom:1px solid rgba(17,17,16,.1)}
  .phone-photo{height:96px;border-radius:12px;margin:.7rem 0 .1rem;overflow:hidden;background:#241a12}
  .phone-photo img{width:100%;height:100%;object-fit:cover;display:block;animation:ken 18s ease-in-out infinite alternate}
  @keyframes ken{from{transform:scale(1.02)}to{transform:scale(1.14)}}
  .phone-h{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.45rem;letter-spacing:-.02em;line-height:1.05;margin:.7rem 0 0}
  .phone-p{color:var(--muted);font-size:.82rem;margin-top:.4rem}
  .phone-row{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-top:.5rem}
  .phone-tabs{display:flex;justify-content:space-around;margin-top:auto;padding-top:.7rem;border-top:1px solid rgba(17,17,16,.1);font-size:.6rem;letter-spacing:.04em;color:var(--muted)}
  .phone-tabs span.on{color:var(--ink);font-weight:600}
  .phone-cta{display:inline-flex;align-self:flex-start;margin-top:.9rem;background:var(--accent);color:#fff;border-radius:999px;padding:.5rem 1.05rem;font-size:.8rem;font-weight:600}
  .phone-tap{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:color-mix(in srgb,var(--accent) 45%,transparent);pointer-events:none;z-index:8;animation:tap .65s var(--ease) forwards}
  @keyframes tap{from{transform:scale(.35);opacity:.85}to{transform:scale(2.4);opacity:0}}
  .phone-ed{position:relative;cursor:pointer;border-radius:4px;outline:1px dashed transparent;outline-offset:2px;transition:outline-color .2s,background-color .2s}
  .phone-ed:hover,.phone-ed:focus-visible{outline-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
  .phone-hint{position:absolute;right:6px;bottom:17%;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:#17150f;border-radius:999px;padding:.34rem .7rem;box-shadow:0 10px 24px -14px rgba(0,0,0,.6);animation:hint 2.6s var(--ease) infinite;pointer-events:none;z-index:7}
  @keyframes hint{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  .phone-backdrop{position:absolute;inset:0;background:rgba(17,17,16,.32);opacity:0;pointer-events:none;transition:opacity .35s;z-index:4}
  .phone-screen.sheet-open .phone-backdrop{opacity:1;pointer-events:auto}
  .phone-sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;background:#fff;border-top-left-radius:20px;border-top-right-radius:20px;box-shadow:0 -24px 60px -34px rgba(0,0,0,.55);padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));transform:translateY(118%);transition:transform .5s var(--ease)}
  .phone-sheet.is-open{transform:none}
  .phone-sheet .sh-lbl{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .phone-sheet input{width:100%;margin-top:.5rem;border:0;border-radius:10px;padding:.62rem .72rem;font:inherit;font-size:1rem;box-shadow:inset 0 0 0 1px var(--hair)}
  .phone-sheet input:focus{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 50%,transparent);outline:0}
  .phone-sheet .sh-act{display:flex;gap:.5rem;margin-top:.6rem}
  .phone-sheet .sh-act button{flex:1;border:1px solid var(--line);background:transparent;border-radius:9px;padding:.62rem;font:inherit;font-weight:600;cursor:pointer}
  .phone-sheet .sh-act .save{background:var(--accent);color:#fff;border-color:var(--accent)}


  .own{padding-block:clamp(4rem,10vw,8rem)}
  .own h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .own .sup{margin:1.1rem 0 0;max-width:44rem;color:var(--muted);font-size:1.06rem}
  .own-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.4rem}
  @media(max-width:980px){.own-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.own-grid{grid-template-columns:1fr}}
  .own-card{position:relative;border:1px solid var(--line);border-radius:14px;background:#fff;padding:1.3rem;overflow:hidden;transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
  .own-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 30px 60px -50px color-mix(in srgb,var(--accent) 60%,transparent)}
  .own-num{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--faint)}
  .own-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);margin:.9rem 0 1rem}
  .own-ico svg{width:18px;height:18px}
  .own-card h3{font-size:1.05rem;font-weight:600;letter-spacing:-.02em;margin:0 0 .4rem}
  .own-card p{color:var(--muted);font-size:.92rem;margin:0}
  .own-note{margin-top:1.6rem;color:var(--faint);font-size:.9rem}

  .plat{padding-block:clamp(4rem,10vw,8rem)}
  .plat h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .plat .sup{margin:1.1rem 0 0;max-width:44rem;color:var(--muted);font-size:1.06rem}
  .plat-legend{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.6rem}
  .plat-legend button{display:inline-flex;align-items:center;gap:.45rem;border:0;background:#fff;border-radius:999px;padding:.36rem .8rem;font:inherit;font-size:.8rem;color:var(--muted);cursor:pointer;box-shadow:inset 0 0 0 1px var(--hair);transition:background-color .2s,box-shadow .25s var(--ease),color .2s}
  .plat-legend button:hover{background:var(--paper2)}
  .plat-legend button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .dot{width:8px;height:8px;border-radius:50%}
  .dot.live{background:var(--accent)}
  .dot.build{background:#c58a2e}
  .dot.plan{background:var(--faint)}
  .plat-board{margin-top:1.6rem;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
  .plat-row{display:grid;grid-template-columns:2.2rem 1fr minmax(0,1.4fr) auto;gap:1rem;align-items:center;padding:.95rem 1.2rem;border-top:1px solid var(--line2);transition:opacity .35s var(--ease),background-color .2s}
  .plat-row:first-child{border-top:0}
  .plat-row:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
  .plat-row.is-dim{opacity:.3}
  @media(max-width:760px){.plat-row{grid-template-columns:1.6rem 1fr auto;gap:.7rem}.plat-note{display:none}}
  .plat-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--paper2);color:var(--ink)}
  .plat-ico svg{width:16px;height:16px}
  .plat-name{font-weight:600;font-size:.98rem;letter-spacing:-.01em}
  .plat-note{color:var(--muted);font-size:.9rem}
  .chip{justify-self:end;font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:.22rem .55rem;white-space:nowrap}
  .chip.live{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
  .chip.build{background:color-mix(in srgb,#c58a2e 18%,transparent);color:#95650f}
  .chip.plan{background:var(--paper2);color:var(--faint)}

  .infra{padding-block:clamp(4rem,10vw,8rem)}
  .infra h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .infra .sup{margin:1.1rem 0 0;max-width:44rem;color:var(--muted);font-size:1.06rem}
  .infra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem}
  @media(max-width:900px){.infra-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.infra-grid{grid-template-columns:1fr}}
  .infra-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:1.3rem;transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
  .infra-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 30px 60px -50px color-mix(in srgb,var(--accent) 60%,transparent)}
  .infra-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .infra-val{margin-top:.55rem;font-size:clamp(1.7rem,3.6vw,2.3rem);font-weight:700;letter-spacing:-.04em;color:var(--ink)}
  .infra-card p{color:var(--muted);font-size:.92rem;margin:.5rem 0 0}

  .gal{padding-block:clamp(4rem,10vw,8rem)}
  .gal h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .gal .sup{margin:1.1rem 0 0;max-width:44rem;color:var(--muted);font-size:1.06rem}
  .gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem}
  @media(max-width:900px){.gal-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.gal-grid{grid-template-columns:1fr}}
  .gal-card{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
  .gal-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 30px 60px -50px color-mix(in srgb,var(--accent) 60%,transparent)}
  .gal-wf{height:118px;padding:16px;background:linear-gradient(180deg,#fbfbf9,#f2f2ef);border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:7px;justify-content:center}
  .gal-wf.center{align-items:center}
  .gal-name{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;padding:.7rem .9rem}
  .gal-name b{font-weight:600;font-size:.9rem}
  .gal-name span{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
  .ln{height:7px;border-radius:4px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
  .w45{width:45%}.w60{width:60%}.w75{width:75%}.w90{width:90%}
  .blk{border-radius:6px;background:color-mix(in srgb,var(--ink) 11%,transparent)}
  .h24{height:24px}.h34{height:34px}
  .pill{width:56px;height:16px;border-radius:9999px;background:color-mix(in srgb,var(--accent) 70%,transparent)}
  .wf2{display:grid;grid-template-columns:1fr 1fr;gap:7px;height:100%}
  .wf2 .blk{min-height:32px}
  .wfrow{display:flex;align-items:center;gap:9px}
  .dot2{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--accent) 70%,transparent);flex:none}
  .wfcol{flex:1;display:flex;flex-direction:column;gap:9px}

  .layers{padding-block:clamp(4rem,10vw,8rem)}
  .layers h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .layers .sup{margin:1.1rem 0 0;max-width:44rem;color:var(--muted);font-size:1.06rem}
  .layers-stack{display:flex;flex-direction:column;gap:.8rem;margin-top:2.4rem;max-width:820px}
  .layer-card{display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:center;border:1px solid var(--line);border-radius:16px;background:#fff;padding:1.2rem 1.3rem;box-shadow:0 24px 50px -48px rgba(17,17,16,.45);transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
  .layer-card:hover{transform:translateX(6px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 30px 60px -46px color-mix(in srgb,var(--accent) 60%,transparent)}
  .layer-card:nth-child(1){margin-right:2.6rem}
  .layer-card:nth-child(2){margin-right:1.3rem}
  .layer-num{position:relative;display:grid;place-items:center;width:50px;height:50px;border-radius:16px;font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.05em;color:var(--accent);background:color-mix(in srgb,var(--ink) 4%,transparent);box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .5s var(--ease)}
  .layer-num::before{content:"";position:absolute;inset:5px;border-radius:11px;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--accent) 5%,#fff));box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent),0 10px 18px -12px color-mix(in srgb,var(--accent) 55%,transparent);transition:box-shadow .5s var(--ease)}
  .layer-num i{position:relative;font-style:normal}
  .layer-card:hover .layer-num{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 26%,var(--hair))}
  .layer-card:hover .layer-num::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent),0 14px 26px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
  .layer-body h3{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:-.02em}
  .layer-body p{margin:.3rem 0 0;color:var(--muted);font-size:.92rem}
  .layer-who{font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:.24rem .55rem;white-space:nowrap}
  @media(max-width:640px){.layer-card{grid-template-columns:auto 1fr;gap:.8rem 1rem}.layer-who{grid-column:2;justify-self:start}.layer-card:nth-child(1),.layer-card:nth-child(2){margin-right:0}}

  .fit{padding-block:clamp(4rem,10vw,8rem)}
  .fit h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .fit .sup{margin:1.1rem 0 0;max-width:44rem;color:var(--muted);font-size:1.06rem}
  .fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.4rem}
  @media(max-width:760px){.fit-grid{grid-template-columns:1fr}}
  .fit-col{border:0;border-radius:18px;padding:1.6rem;background:#fff}
  .fit-col h3{display:flex;align-items:center;gap:.55rem;margin:0 0 1.2rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .fit-yes h3{color:var(--accent)}
  .fit-col h3::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
  .fit-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.95rem}
  .fit-col li{position:relative;padding-left:2rem;font-size:.98rem;color:var(--ink)}
  .fit-yes li::before{content:"";position:absolute;left:0;top:.06rem;width:1.25rem;height:1.25rem;border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.8)}
  .fit-yes li::after{content:"";position:absolute;left:.4rem;top:.34rem;width:.42rem;height:.22rem;border-left:1.8px solid var(--accent);border-bottom:1.8px solid var(--accent);transform:rotate(-45deg)}
  .fit-no li{color:var(--muted)}
  .fit-no li::before{content:"";position:absolute;left:.12rem;top:.72rem;width:.8rem;height:1.5px;border-radius:2px;background:var(--faint)}

  /* Premium card system: hairline rings and soft, diffused ambient shadows -- no flat gray borders. */
  .own-card,.infra-card,.gal-card,.layer-card,.fit-col,.plat-board,.tmpl-card,.stage{border:0;box-shadow:inset 0 0 0 1px var(--hair),var(--sh)}
  .own-card:hover,.infra-card:hover,.gal-card:hover,.fit-col:hover{border:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 42%,var(--hair)),var(--sh-hover);transform:translateY(-5px)}
  .layer-card:hover{border:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 42%,var(--hair)),var(--sh-hover)}
  .tmpl-card:hover{border:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 42%,var(--hair)),0 54px 100px -60px rgba(17,17,16,.5);transform:translateY(-3px)}

  .why{padding-block:clamp(4rem,10vw,8rem)}
  .why-q{margin:1.2rem auto 0;max-width:24em;text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.45rem,3.4vw,2.5rem);font-weight:600;line-height:1.28;letter-spacing:-.02em}
  .why-sig{margin:1.8rem auto 0;max-width:36rem;text-align:center;color:var(--muted);font-size:1.02rem}
  .why-sig b{color:var(--ink)}
  .price{padding-block:clamp(4rem,10vw,8rem)}
  .price h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .price .sup{margin:1.1rem 0 0;max-width:44rem;color:var(--muted);font-size:1.06rem}
  .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.4rem}
  @media(max-width:760px){.price-grid{grid-template-columns:1fr}}
  .price-card{display:flex;flex-direction:column;border:0;border-radius:18px;background:#fff;padding:1.7rem;box-shadow:inset 0 0 0 1px var(--hair),var(--sh)}
  .price-card h3{margin:0;font-size:1.15rem;font-weight:600;letter-spacing:-.02em}
  .price-line{margin:.5rem 0 1.2rem;color:var(--muted);font-size:.95rem}
  .price-card ul{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-direction:column;gap:.75rem}
  .price-card li{position:relative;padding-left:1.5rem;font-size:.94rem;color:var(--ink)}
  .price-card li::before{content:"";position:absolute;left:.15rem;top:.55rem;width:6px;height:6px;border-radius:50%;background:var(--accent)}
  .price-card .btn{align-self:flex-start;margin-top:auto}
  .price-note{margin-top:1.6rem;color:var(--faint);font-size:.9rem}
  .cta{padding-block:clamp(6rem,13vw,10rem) clamp(5rem,12vw,9rem);text-align:center;background:linear-gradient(180deg,var(--paper) 0,#0e0e0d 4.5rem,#0e0e0d 100%);color:#f4f4f1}
  .cta h2{font-size:clamp(2.2rem,6vw,4rem);font-weight:700;letter-spacing:-.032em;line-height:1;margin:0 auto;max-width:14em;color:#fff}
  .cta p{margin:1.2rem auto 0;max-width:34rem;color:color-mix(in srgb,#f4f4f1 74%,transparent);font-size:1.05rem}
  .cta-act{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:2.1rem}
  .cta .btn.line,.foot .btn.line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
  .cta .btn.line:hover,.foot .btn.line:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
  .foot{background:#0e0e0d;color:#a8a8a0;padding-block:3rem 2rem}
  .foot-in{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.08)}
  .foot-brand{display:flex;flex-direction:column;gap:.5rem}
  .foot-brand b{color:#fff;font-size:1.05rem;letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem}
  .foot-brand .logo{background:#fff}
  .foot-brand p{margin:0;font-size:.9rem;color:#8a8a82}
  .foot-nav{display:flex;gap:1.4rem;flex-wrap:wrap;padding-top:.35rem}
  .foot-nav a{display:inline-flex;align-items:center;min-height:24px;color:#c8c8c0;text-decoration:none;font-size:.9rem;transition:color .2s}
  .foot-nav a:hover{color:#fff}
  .foot-base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.7rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#6f6f68}

  .work{padding-block:clamp(4rem,10vw,8rem)}
  .work h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
  .work .sup{margin:1.1rem 0 0;max-width:44rem;color:var(--muted);font-size:1.06rem}
  .work-card{display:block;margin-top:2.2rem;text-decoration:none;color:inherit;border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair),var(--sh);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
  .work-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 42%,var(--hair)),var(--sh-hover)}
  .work-shot{aspect-ratio:16/10;overflow:hidden;background:var(--paper2)}
  .work-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
  .work-meta{display:flex;align-items:baseline;gap:.7rem;padding:1.05rem 1.25rem}
  .work-meta b{font-size:1.08rem;letter-spacing:-.01em}
  .work-meta span{color:var(--muted);font-size:.9rem}
  .work-meta i{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
  .work-note{margin-top:1.3rem;color:var(--faint);font-size:.9rem}

  .engine{padding-block:clamp(4rem,10vw,8rem)}
  .engine h2,.engine h1{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:18em;margin:1.1rem 0 0}
  .engine .sup{margin:1.1rem 0 0;max-width:46rem;color:var(--muted);font-size:1.06rem}
  .eng-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.8rem}
  .eng-tabs button{border:0;background:#fff;border-radius:999px;padding:.52rem 1.05rem;font:inherit;font-size:.86rem;font-weight:600;color:var(--muted);cursor:pointer;box-shadow:inset 0 0 0 1px var(--hair);transition:background-color .25s,color .25s,box-shadow .25s var(--ease)}
  .eng-tabs button.on{background:var(--ink);color:var(--paper);box-shadow:none}
  .eng-stage{position:relative;margin-top:1.4rem;border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair),var(--sh);aspect-ratio:16/10;background:var(--paper2)}
  .eng-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .55s var(--ease)}
  .eng-shot.on{opacity:1}
  .eng-cap{position:absolute;left:1rem;right:1rem;bottom:1rem;background:color-mix(in srgb,var(--ink) 84%,transparent);color:#fff;border-radius:12px;padding:.7rem .95rem;font-size:.9rem;transition:opacity .3s}
  .eng-note{margin-top:1.2rem;color:var(--faint);font-size:.9rem}
  .sync{padding-block:clamp(4rem,10vw,8rem)}
  .sync h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.06;max-width:18em;margin:1.1rem 0 0}
  .sync .sup{margin:1.1rem 0 0;max-width:46rem;color:var(--muted);font-size:1.06rem}
  .sync-flow{display:grid;grid-template-columns:1fr minmax(150px,0.7fr) 1fr;gap:1rem;align-items:center;margin-top:2.4rem}
  @media(max-width:820px){.sync-flow{grid-template-columns:1fr;gap:.9rem}}
  .sync-node{border:0;border-radius:18px;background:#fff;padding:1.2rem;box-shadow:inset 0 0 0 1px var(--hair),var(--sh);display:flex;flex-direction:column;gap:.3rem;min-height:118px;justify-content:center}
  .sync-k{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .sync-node b{font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
  .sync-sub{color:var(--muted);font-size:.82rem}
  .sync-rail{display:flex;align-items:center;gap:.55rem;justify-content:center}
  @media(max-width:820px){.sync-rail{flex-direction:column}}
  .sync-line{position:relative;flex:1;height:2px;background:var(--line2);border-radius:2px;overflow:hidden}
  .sync-line i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;border-radius:2px;transition:transform .5s var(--ease)}
  .sync-line.on i{transform:scaleX(1)}
  @media(max-width:820px){.sync-line{width:2px;height:34px;flex:none}.sync-line i{transform:scaleY(0);transform-origin:top}.sync-line.on i{transform:scaleY(1)}}
  .sync-chip{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-radius:999px;padding:.34rem .62rem;white-space:nowrap;background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 34%,var(--hair)),0 10px 22px -18px color-mix(in srgb,var(--accent) 70%,transparent)}
  .sync-hi{background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:6px;padding:0 .35rem;transition:background-color .8s var(--ease)}
  .sync-btn{margin-top:1.6rem}
  .sync-note{margin-top:1.2rem;color:var(--faint);font-size:.9rem;max-width:46rem}
  .contact{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:2.1rem}

  .own-col{border:0;border-radius:18px;background:#fff;padding:1.7rem;box-shadow:inset 0 0 0 1px var(--hair),var(--sh)}
  .own-provides{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,var(--hair)),var(--sh)}
  .own-col h3{display:flex;align-items:center;gap:.5rem;margin:0 0 1.2rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .own-col h3::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint)}
  .own-provides h3{color:var(--accent)}
  .own-provides h3::before{background:var(--accent)}
  .own-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.95rem}
  .own-col li{position:relative;padding-left:2rem;font-size:.98rem;color:var(--ink)}
  .own-col li::before{content:"";position:absolute;left:0;top:.05rem;width:1.25rem;height:1.25rem;border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.8)}
  .own-col li::after{content:"";position:absolute;left:.4rem;top:.33rem;width:.42rem;height:.22rem;border-left:1.8px solid var(--accent);border-bottom:1.8px solid var(--accent);transform:rotate(-45deg)}
  .own-provides li::before{background:#fff;box-shadow:inset 0 0 0 1px var(--hair)}
  .own-provides li::after{border-left-color:var(--faint);border-bottom-color:var(--faint)}
  .cta-paths{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:780px;margin:2.3rem auto 0;text-align:left}
  @media(max-width:640px){.cta-paths{grid-template-columns:1fr}}
  .cta-path{display:flex;flex-direction:column;gap:.35rem;padding:1.35rem;border-radius:16px;text-decoration:none;color:#fff;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s}
  .cta-path:hover{transform:translateY(-3px);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
  .cta-k{font-size:1.04rem;font-weight:600}
  .cta-d{color:#b6b6ae;font-size:.9rem}
  .cta-go{margin-top:.7rem;font-weight:600;color:#7fe0b4}

  .compose{padding-block:clamp(4rem,10vw,8rem)}
  .compose h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.06;max-width:18em;margin:1.1rem 0 0}
  .compose .sup{margin:1.1rem 0 0;max-width:46rem;color:var(--muted);font-size:1.06rem}
  .comp{display:grid;grid-template-columns:minmax(150px,0.5fr) 1fr;gap:1.2rem;margin-top:2.2rem;align-items:start}
  @media(max-width:760px){.comp{grid-template-columns:1fr}}
  .comp-rail{display:flex;flex-wrap:wrap;gap:.4rem;align-content:flex-start}
  .comp-rail button{border:0;background:#fff;border-radius:999px;padding:.44rem .82rem;font:inherit;font-size:.82rem;color:var(--muted);cursor:pointer;box-shadow:inset 0 0 0 1px var(--hair);transition:background-color .2s,color .2s,box-shadow .25s var(--ease)}
  .comp-rail button.on{background:var(--accent);color:#fff;box-shadow:none}
  .comp-page{position:relative;border-radius:18px;background:var(--paper2);padding:.9rem;box-shadow:inset 0 0 0 1px var(--hair);min-height:340px;display:flex;flex-direction:column;gap:.7rem}
  .comp-blk{background:#fff;border-radius:12px;padding:.9rem 1rem;box-shadow:inset 0 0 0 1px var(--hair);opacity:0;transform:translateY(10px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .comp-blk.in{opacity:1;transform:none}
  .comp-blk-k{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  .comp-blk-h{display:block;font-weight:600;font-size:.95rem;margin:.2rem 0 .55rem;letter-spacing:-.01em}
  .comp-blk-skel{display:flex;flex-direction:column;gap:6px}
  .comp-note{margin-top:1.4rem;color:var(--faint);font-size:.9rem}
  .comp-note b{color:var(--ink)}
  .surf{padding-block:clamp(4rem,10vw,8rem)}
  .surf h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.06;max-width:18em;margin:1.1rem 0 0}
  .surf .sup{margin:1.1rem 0 0;max-width:46rem;color:var(--muted);font-size:1.06rem}
  .surf-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.8rem}
  .surf-tabs button{border:0;background:#fff;border-radius:999px;padding:.46rem .9rem;font:inherit;font-size:.84rem;font-weight:600;color:var(--muted);cursor:pointer;box-shadow:inset 0 0 0 1px var(--hair);transition:background-color .25s,color .25s,box-shadow .25s var(--ease)}
  .surf-tabs button.on{background:var(--ink);color:var(--paper);box-shadow:none}
  .surf-stage{margin-top:1.4rem;border-radius:18px;background:#fbfbf9;padding:1.2rem;box-shadow:inset 0 0 0 1px var(--hair),var(--sh)}
  .surf-sec{--sf-head:Georgia,"Times New Roman",serif;--sf-w:400;--sf-ls:-.02em;border-radius:14px;padding:1.4rem;background:#f6f2ea;color:#1a1613;transition:background-color .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
  .surf-sec[data-s="wash"]{background:transparent;box-shadow:inset 0 0 0 1px var(--hair);--sf-head:"Satoshi",system-ui,sans-serif;--sf-w:500;--sf-ls:-.03em}
  .surf-sec[data-s="linen"]{background:#ece5d8;--sf-head:"Times New Roman",Georgia,serif;--sf-w:400;--sf-ls:-.025em}
  .surf-sec[data-s="dark"]{background:#16130f;color:#f2ece3;--sf-head:Georgia,"Times New Roman",serif;--sf-w:700;--sf-ls:-.035em}
  .surf-sec-ey{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#c4501f}
  .surf-sec[data-s="surface"] .surf-sec-ey::after{content:" / Editorial"}
  .surf-sec[data-s="wash"] .surf-sec-ey::after{content:" / Modern"}
  .surf-sec[data-s="linen"] .surf-sec-ey::after{content:" / Classic"}
  .surf-sec[data-s="dark"] .surf-sec-ey::after{content:" / Statement"}
  .surf-sec[data-s="dark"] .surf-sec-ey{color:#e08a6d}
  .surf-sec-h{font-family:var(--sf-head);font-weight:var(--sf-w);font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:var(--sf-ls);line-height:1.08;margin:.5rem 0 .9rem;transition:font-weight .4s var(--ease),letter-spacing .4s var(--ease)}
  .surf-sec-r{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;opacity:.82;padding:.3rem 0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}

  .thero{position:relative;padding-block:clamp(4rem,11vw,8rem) clamp(2.6rem,6vw,4rem)}
  .thero .wrap{position:relative;z-index:1}
  .thero .aura{position:absolute;top:-30%;left:50%;width:min(820px,100%);aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%);filter:blur(50px);animation:aura 18s var(--ease) infinite alternate;pointer-events:none;z-index:0}
  @keyframes aura{from{transform:translateX(-50%) translateY(-2%)}to{transform:translateX(-50%) translateY(4%)}}
  .thero h1{position:relative;font-size:clamp(2.4rem,6.4vw,4.6rem);font-weight:700;letter-spacing:-.032em;line-height:1;max-width:14em;margin:1.2rem 0 0}
  .thero .sup{position:relative;margin:1.2rem 0 0;max-width:42rem;color:var(--muted);font-size:1.08rem}
  .tgal{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem}
  @media(max-width:900px){.tgal{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.tgal{grid-template-columns:1fr}}
  .tcard{position:relative;display:flex;flex-direction:column;width:100%;border:0;border-radius:18px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--hair),var(--sh);cursor:pointer;text-align:left;padding:0;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
  .tcard:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,var(--hair)),var(--sh-hover)}
  .tcard-shot{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--paper2)}
  .tcard-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .7s var(--ease)}
  .tcard:hover .tcard-shot img{transform:scale(1.045)}
  .tcard-meta{display:flex;align-items:baseline;gap:.6rem;padding:.95rem 1rem}
  .tcard-meta b{font-size:1rem;letter-spacing:-.01em}
  .tcard-meta span{color:var(--muted);font-size:.86rem}
  .tcard-meta i{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
  .tview{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);background:color-mix(in srgb,var(--ink) 60%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .tview[hidden]{display:none}
  .tview-inner{width:min(1080px,100%);max-height:92vh;display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 60px 120px -50px rgba(0,0,0,.7)}
  .tview-shot{aspect-ratio:16/10;background:var(--paper2);overflow:hidden}
  .tview-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
  .tview-meta{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem .5rem;flex-wrap:wrap}
  .tview-meta b{font-size:1.12rem;letter-spacing:-.01em}
  .tview-meta span{color:var(--muted);font-size:.92rem}
  .tview-meta .sp{flex:1}
  .tview-chips{display:flex;gap:.4rem;flex-wrap:wrap;padding:.2rem 1.2rem 1.1rem}
  .tview-chips i{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--hair);border-radius:999px;padding:.24rem .55rem}
  .tview-close{border:0;background:#fff;border-radius:999px;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 0 0 1px var(--hair);font-size:1rem}
  .tview-close:hover{background:var(--paper2)}
  .twrap{padding-block:clamp(2rem,5vw,3.4rem) clamp(4rem,9vw,7rem)}
  .tgal-note{margin-top:1.7rem;color:var(--faint);font-size:.92rem;max-width:52rem}
  .tgal-2{grid-template-columns:1fr 1fr}
  @media(max-width:760px){.tgal-2{grid-template-columns:1fr}}
  .tsub{margin-top:2.6rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .tmake{padding-block:clamp(4rem,10vw,8rem)}
  .tmake h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.06;max-width:18em;margin:1.1rem 0 0}
  .tmake .sup{margin:1.1rem 0 0;max-width:46rem;color:var(--muted);font-size:1.06rem}
  .tmake-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.4rem}
  @media(max-width:900px){.tmake-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.tmake-grid{grid-template-columns:1fr}}
  .tmake-card{border:0;border-radius:16px;background:#fff;padding:1.3rem;box-shadow:inset 0 0 0 1px var(--hair),var(--sh)}
  .tmake-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  .tmake-card b{display:block;font-size:1.15rem;font-weight:600;letter-spacing:-.02em;margin:.5rem 0 .25rem}
  .tmake-s{color:var(--muted);font-size:.86rem}
  .tmake .btn{margin-top:2rem}
  /* The template customizer: a template is data, so the preview is the real token set applied
     to real UI -- not a swatch, and not a picture. Pick a template, then reshape it live. */
  .tks{display:grid;grid-template-columns:1.12fr .88fr;gap:1.4rem;margin-top:2.4rem;align-items:start}
  @media(max-width:820px){.tks{grid-template-columns:1fr}}
  .tk-page{--k-bg:#fdfcf9;--k-ink:#1a1613;--k-acc:#b4553a;--k-head:Georgia,"Times New Roman",serif;--k-weight:400;--k-track:-.03em;--k-shape:12px;--k-clip:none;background:var(--k-bg);color:var(--k-ink);border-radius:var(--k-shape,16px);clip-path:var(--k-clip,none);padding:1.2rem 1.35rem 1.4rem;box-shadow:inset 0 0 0 1px var(--hair),var(--sh);transition:background-color .55s var(--ease),color .55s var(--ease),border-radius .5s var(--ease),clip-path .5s var(--ease)}
  .tk-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
  .tk-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--k-acc)}
  .tk-note{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  @media(max-width:480px){.tk-note{display:none}}
  .tk-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.74rem;color:color-mix(in srgb,var(--k-ink) 62%,var(--k-bg));border-bottom:1px solid color-mix(in srgb,var(--k-ink) 14%,transparent);padding-bottom:.7rem;margin-top:.7rem}
  .tk-nav b{color:var(--k-ink);letter-spacing:.02em}
  .tk-h{font-family:var(--k-head);font-weight:var(--k-weight);letter-spacing:var(--k-track);font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.05;margin:.9rem 0 0;transition:font-weight .4s var(--ease)}
  .tk-p{color:color-mix(in srgb,var(--k-ink) 66%,var(--k-bg));font-size:.92rem;margin-top:.5rem}
  .tk-rows{margin-top:.9rem;border-top:1px solid color-mix(in srgb,var(--k-ink) 14%,transparent);padding-top:.65rem}
  .tk-row{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;color:color-mix(in srgb,var(--k-ink) 66%,var(--k-bg));padding:.2rem 0}
  .tk-row span{min-width:0}
  .tk-row span:last-child{flex:none;font-variant-numeric:tabular-nums}
  .tk-btn{display:inline-flex;margin-top:1.1rem;background:var(--k-acc);color:#fff;border-radius:9999px;padding:.55rem 1.1rem;font-size:.85rem;font-weight:600;transition:background-color .55s var(--ease)}
  .tk-panel{border-radius:16px;background:#fff;padding:1.1rem 1.2rem 1.2rem;box-shadow:inset 0 0 0 1px var(--hair),var(--sh)}
  .tk-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:.95rem 0 .5rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .tk-lbl:first-child{margin-top:0}
  .tk-lbl b{font-family:"Satoshi",sans-serif;font-weight:600;font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--ink)}
  .tk-note2{display:block;margin-top:1.1rem;color:var(--faint);font-size:.8rem;line-height:1.55}
  .tk-note2 b{color:var(--ink)}
  .tk-start{display:flex;gap:.4rem}
  .tk-start button{flex:1;border:0;border-radius:10px;padding:.5rem;font:inherit;font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer;background:#fff;box-shadow:inset 0 0 0 1px var(--hair);transition:background-color .2s,color .2s,box-shadow .2s}
  .tk-start button:hover{background:var(--paper2)}
  .tk-start button.on{background:var(--ink);color:var(--paper);box-shadow:none}
  .tk-sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:.35rem}
  .tk-sw button{border:0;border-radius:8px;padding:0;overflow:hidden;cursor:pointer;background:transparent;box-shadow:inset 0 0 0 1px var(--hair)}
  .tk-sw .bars{display:flex;height:14px}
  .tk-sw .bars i{flex:1}
  .tk-sw button.on{outline:2px solid var(--ink);outline-offset:1px}
  .tk-seg{display:flex;flex-wrap:wrap;gap:.3rem}
  .tk-seg button{border:0;background:#fff;border-radius:999px;padding:.3rem .7rem;font:inherit;font-size:.74rem;color:var(--muted);cursor:pointer;box-shadow:inset 0 0 0 1px var(--hair);transition:background-color .2s,color .2s,box-shadow .2s}
  .tk-seg button:hover{background:var(--paper2)}
  .tk-seg button.on{background:var(--ink);color:var(--paper);box-shadow:none}
  .tk-shapes{display:flex;flex-wrap:wrap;gap:.35rem}
  .tk-shapes button{width:40px;height:34px;border:0;background:#fff;border-radius:8px;cursor:pointer;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--hair)}
  .tk-shapes button:hover{background:var(--paper2)}
  .tk-shapes button .box{width:18px;height:18px;background:var(--ink);opacity:.86}
  .tk-shapes button.on{outline:2px solid var(--ink);outline-offset:1px}
  .tv-open{overflow:hidden}
  ::view-transition-group(morph){animation-duration:.5s;animation-timing-function:var(--ease)}

  /* Mobile: no row may clip. A flex row with a long label and a right-aligned value
     overflows its box, and the card's own clip cuts the value off. Let the label
     shrink and wrap; keep the value from shrinking. The editor nav may wrap too. */
  .pmrow,.srow,.lrow2,.cp-row{gap:.9rem}
  .pmrow>span,.srow>span,.lrow2>span,.cp-row>span{min-width:0}
  .pmrow>span:last-child,.srow>span:last-child,.lrow2>span:last-child,.cp-row>span:last-child{flex:none}
  .page .pnav{flex-wrap:wrap;gap:.4rem 1.4rem}
  @media(max-width:640px){.page .pnav{gap:.35rem .9rem}}

  @media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}.rise{opacity:1;transform:none}.rise.stagger>*{opacity:1!important;transform:none!important}.mq-track{animation:none}.phone-hint{animation:none}.phone,.phone-photo img{animation:none}.thero .aura{animation:none}}

  .brand-logo{height:26px;width:auto;display:block}
  .foot-brand .brand-logo{height:24px;width:auto;filter:brightness(0) invert(1)}
  .brand .brand-logo{transition:transform .6s var(--ease)}
  .brand:hover .brand-logo{transform:rotate(-2.5deg) translateY(-1px)}
  @media (prefers-reduced-motion:no-preference){
    .tmpl-card,.work-card{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
    .tmpl-card:hover,.work-card:hover{transform:translateY(-4px)}
    .tmpl-shot img,.work-shot img{transition:transform 1s var(--ease)}
    .tmpl-card:hover .tmpl-shot img,.work-card:hover .work-shot img{transform:scale(1.05)}
  }

.foot-founder{margin:.35rem 0 0;font-size:.82rem;color:#8a8a82;letter-spacing:.01em}
.foot-base span:first-child{color:inherit}

/* landing tap targets: comfortable on a phone (WCAG 2.2 target size) */
@media (max-width:820px){
  .bar nav a,.foot-nav a,.back{display:inline-flex;align-items:center;min-height:44px}
  .eng-tabs button,.tcard,.tmpl-card,.work-card,.btn,.tk-start button,.tk-seg button,.sync-btn,.gal-pill,.cp-nav span,.cp-rail button{min-height:44px}
  .bar nav a{padding-inline:.35rem}
}
@media (max-width:820px){.etog,.etbtn,.eadd,.crumb{min-height:44px}}

.pmenu-note{margin:.5rem 0 0;font-size:.72rem;letter-spacing:.04em;color:var(--faint)}

/* FAQ: the Q&A an answer engine can lift, and a reader can scan. */
.faq{padding:clamp(4rem,10vw,8rem) 0}
.faq h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.03;max-width:16em;margin:1.1rem 0 0}
.faq-list{margin-top:2.4rem;border-top:1px solid var(--line);max-width:56rem}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;list-style:none;padding:1.15rem 2.6rem 1.15rem 0;font-size:1.06rem;font-weight:600;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:.2rem;top:1.05rem;font-weight:400;font-size:1.3rem;line-height:1;color:var(--accent);transition:transform .25s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:0 0 1.3rem;max-width:52rem;color:var(--muted);line-height:1.65}

/* Guides: long-form article pages written to be quoted by search engines and AI assistants. */
.guide{padding:clamp(3rem,7vw,5rem) 0 clamp(4rem,9vw,7rem)}
.guide h1{font-size:clamp(2rem,5.2vw,3.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.04;margin:1rem 0 0;max-width:20em}
.guide .lede{font-size:1.2rem;color:var(--muted);max-width:44rem;margin:1.2rem 0 0;line-height:1.6}
.guide h2{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:2.8rem 0 0;max-width:24em}
.guide h3{font-size:1.15rem;font-weight:600;margin:1.8rem 0 0}
.guide p{margin:1.1rem 0 0;max-width:44rem;line-height:1.75}
.guide ul{margin:1.1rem 0 0;padding-left:1.2rem;max-width:44rem;line-height:1.75}
.guide li{margin:.4rem 0}
.guide .answer{background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.4rem;margin:1.6rem 0 0;max-width:44rem}
.guide .answer b{display:block;margin-bottom:.35rem;font-weight:600}
.guide .gmeta{margin-top:1rem;font-size:.82rem;color:var(--faint)}
.guide .gcta{margin-top:2.8rem;border-top:1px solid var(--line);padding-top:1.6rem;max-width:44rem}
.guide .gback{margin-top:2.4rem;font-size:.9rem}
.guide .gback a{color:var(--accent);text-decoration:none;font-weight:600}
.gcards{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.4rem}
@media(max-width:720px){.gcards{grid-template-columns:1fr}}
.gcard{border:1px solid var(--line);border-radius:16px;padding:1.5rem;text-decoration:none;color:inherit;background:var(--paper2);transition:transform .25s var(--ease),border-color .25s var(--ease)}
.gcard:hover{transform:translateY(-3px);border-color:var(--accent)}
.gcard .gk{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.gcard b{display:block;font-size:1.25rem;font-weight:700;margin:.5rem 0 .5rem;letter-spacing:-.01em}
.gcard span{color:var(--muted);line-height:1.6}