:root{
    --oct: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
    /* palette — Rose Tint */
    --bg:#faece3; --bg2:#f3dccd;
    --ink:#2e211c; --ink2:#7a6257; --line:#e4c9b6;
    --rose:#f3d9c8;
    --salmon:#e07558;   /* brand accent */
    --blue:#0d28f2;     /* interaction accent (electric) — set equal to --salmon for the Electric look */
    --chip:#2e211c; --onchip:#faece3;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:"Rethink Sans",system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;padding-bottom:0}

  .wrap{max-width:1440px;margin:0 auto;padding:0 clamp(24px,4vw,56px)}
  .section{padding:72px 0}
  .rule{border:0;border-top:1px solid var(--line)}
  .eyebrow{font:500 12px "DM Mono",monospace;letter-spacing:.14em;color:var(--salmon);text-transform:uppercase}
  h1{font-weight:600;letter-spacing:-.03em;line-height:1.05;font-size:clamp(42px,6vw,80px)}
  .sub{font-size:19px;line-height:1.55;color:var(--ink2);max-width:560px}
  h2{font-weight:600;letter-spacing:-.02em;font-size:clamp(26px,3.4vw,40px);line-height:1.1}

  /* header */
  .hdr{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line);padding:14px 0}
  .hdr-in{max-width:1440px;margin:0 auto;padding:0 clamp(24px,4vw,56px);display:flex;align-items:center;gap:32px}
  .brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
  .wordmark{font-weight:700;font-size:26px;letter-spacing:-.02em}
  .xtend{display:inline-flex;align-items:center;gap:2px}
  .xmark{width:24px;height:24px;color:var(--blue);flex:0 0 auto;display:block}
  .nav{display:flex;gap:28px;margin-left:auto;align-items:center}
  .nav a{font-size:14px;font-weight:500;color:var(--ink2);text-decoration:none;transition:color .14s}
  .nav a:hover{color:var(--ink)}
  .nav a.active{color:var(--blue)}
  .profile{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink2);cursor:pointer;transition:color .14s,border-color .14s;flex:0 0 auto}
  .profile:hover{color:var(--blue);border-color:var(--blue)}
  .profile i{font-size:17px}

  /* buttons — octagon; blue reserved for hover/click */
  .btn{display:inline-flex;align-items:center;gap:8px;font:500 14px "DM Mono",monospace;padding:14px 26px;cursor:pointer;border:none;clip-path:var(--oct);text-decoration:none;transition:background .14s,color .14s,transform .1s}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--chip);color:var(--onchip)}
  .btn-primary:hover{background:var(--blue);color:#fff}
  .btn-ghost{background:var(--rose);color:var(--ink)}
  .btn-ghost:hover{background:var(--blue);color:#fff}

  /* feature split (list + preview) */
  .feat-split{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,3.5vw,56px);align-items:start}
  .feat-list{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--line);gap:1px;overflow:hidden;border-radius:10px}
  .flist-item{display:block;padding:15px 20px;background:var(--bg);border:none;cursor:pointer;text-align:left;font-family:inherit;transition:background .14s}
  .flist-item:hover{background:var(--bg2)}
  .flist-head{display:flex;align-items:center;gap:14px;width:100%}
  .flist-ico{font-size:22px;color:var(--ink);flex:0 0 auto;line-height:1;display:block;width:22px}
  .flist-ico i{display:block}
  .flist-name{flex:1;font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
  .flist-caret{font-size:15px;color:var(--ink2);flex:0 0 auto;transition:transform .2s}
  .flist-item.active{background:var(--bg2);box-shadow:inset 3px 0 0 var(--blue)}
  .flist-item.active .flist-ico{color:var(--blue)}
  .flist-item.active .flist-caret{transform:rotate(180deg)}
  .flist-desc{display:block;max-height:0;overflow:hidden;opacity:0;transition:max-height .32s ease,opacity .22s ease,margin .28s ease;font-size:14px;line-height:1.55;color:var(--ink2);padding:0 20px 0 36px}
  .flist-item.active .flist-desc{max-height:240px;opacity:1;margin-top:8px;padding-bottom:12px}
  .fpanel{display:none}
  .fpanel.active{display:block}

  /* scene: mini sheets + dock */
  .scene{display:flex;gap:16px;align-items:stretch}
  .sheet{background:#fff;border:1px solid #d8d8d8;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px -32px rgba(46,33,28,.4);flex:0 0 auto;position:relative}
  .fxbar{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid #e4e4e4;background:#fafafa}
  .fx{font:italic 500 14px "DM Mono",monospace;color:#9aa0a6}
  .fxformula{font:500 13px "DM Mono",monospace;color:var(--ink)}
  .grid{display:grid;grid-template-columns:34px repeat(4,74px)}
  .grid.g2{grid-template-columns:34px repeat(2,118px)}
  .corner,.col,.rowhead{border-right:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4;background:#f7f8f9;color:#5f6368;font:500 11px "DM Mono",monospace;display:flex;align-items:center;justify-content:center}
  .col{height:26px}
  .rowhead{height:44px}
  .cell{height:44px;border-right:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4;display:flex;align-items:center;padding:0 10px;font-size:13px;color:var(--ink);background:#fff}
  .cell.num{justify-content:flex-end;font:400 13px "DM Mono",monospace}
  .cell.formula{font:500 13px "DM Mono",monospace;color:var(--blue)}
  .sheetbar{border-top:1px solid #e4e4e4;padding:7px 12px;font:400 12px "DM Mono",monospace;color:#5f6368;display:flex;gap:0;align-items:center}

  /* dock */
  .xpanel{background:var(--bg);border:1px solid var(--line);border-radius:10px;width:170px;display:flex;flex-direction:column;padding:14px 12px;gap:11px;flex:0 0 auto}
  .xhead{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px;letter-spacing:-.01em}
  .puck{width:15px;height:15px;flex:0 0 auto}
  .xsub{font:500 10px "DM Mono",monospace;color:var(--ink2);letter-spacing:.08em;text-transform:uppercase}
  .xrow{display:flex;justify-content:space-between;align-items:center;font:400 12px "DM Mono",monospace;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;min-height:31px}
  .xrow b{font-weight:500;color:var(--ink)}
  .xbadge{margin-top:2px;padding:7px 8px;border-radius:7px;background:var(--blue);color:#fff;font:500 11px "DM Mono",monospace;align-self:flex-start}
  .btns{display:flex;gap:6px}
  .xbtn{flex:1;text-align:center;padding:6px 8px;border:1px solid var(--line);border-radius:7px;font:500 11px "DM Mono",monospace;background:#fff;color:var(--ink)}
  .xbtn.lit{border-color:var(--blue);color:var(--blue);background:rgba(13,40,242,.06);animation:copyflash 4.6s infinite}
  .xbtn.lock{animation:lockin 4.6s infinite}
  .copybtn{margin-top:2px;display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--blue);border-radius:7px;background:#fff;color:var(--blue);font:500 11px "DM Mono",monospace;align-self:flex-start;animation:copyin 4.6s infinite}

  /* animations */
  .cell.active{animation:sel 4.6s infinite}
  .cell.prec{animation:prec 4.6s infinite}
  .cell.prec.p2{animation-delay:.4s}
  @keyframes sel{0%,8%{box-shadow:inset 0 0 0 2px transparent}12%,86%{box-shadow:inset 0 0 0 2px var(--blue)}92%,100%{box-shadow:inset 0 0 0 2px transparent}}
  @keyframes prec{0%,16%{background:#fff;box-shadow:inset 0 0 0 2px transparent}20%,46%{background:rgba(13,40,242,.12);box-shadow:inset 0 0 0 2px var(--blue)}52%,84%{background:rgba(13,40,242,.05);box-shadow:inset 0 0 0 2px rgba(13,40,242,.45)}90%,100%{background:#fff;box-shadow:inset 0 0 0 2px transparent}}
  .xrow.lit{animation:rowlit 4.6s infinite}
  .xrow.lit.r2{animation-delay:.4s}
  @keyframes rowlit{0%,16%{border-color:var(--line);background:#fff}20%,50%{border-color:var(--blue);background:rgba(13,40,242,.08)}56%,84%{border-color:rgba(13,40,242,.4);background:rgba(13,40,242,.04)}90%,100%{border-color:var(--line);background:#fff}}
  .xbadge.anim{animation:badge 4.6s infinite}
  @keyframes badge{0%,54%{opacity:0;transform:translateY(5px)}62%,86%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(5px)}}
  .selrect{position:absolute;border:2px solid var(--blue);border-radius:2px;background:rgba(13,40,242,.07);pointer-events:none;animation:selrect 4.6s infinite;z-index:2}
  @keyframes selrect{0%,10%{opacity:0}16%,88%{opacity:1}94%,100%{opacity:0}}
  .stat-row{animation:statin 4.6s infinite}
  .stat-row.s2{animation-delay:.3s}.stat-row.s3{animation-delay:.6s}.stat-row.s4{animation-delay:.9s}
  @keyframes statin{0%,18%{opacity:0;transform:translateX(6px)}26%,90%{opacity:1;transform:translateX(0)}96%,100%{opacity:0;transform:translateX(6px)}}
  .cell.src{animation:srcflash 4.6s infinite}
  @keyframes srcflash{0%,12%{box-shadow:inset 0 0 0 2px transparent}16%,30%{box-shadow:inset 0 0 0 2px var(--blue);background:rgba(13,40,242,.10)}34%,100%{box-shadow:inset 0 0 0 2px transparent}}
  .cell.painted{animation:paint 4.6s infinite}
  .cell.painted.p2{animation-delay:.35s}.cell.painted.p3{animation-delay:.7s}
  @keyframes paint{0%,22%{font-weight:400;background:#fff;color:var(--ink)}28%,88%{font-weight:700;background:var(--rose);color:var(--ink)}94%,100%{font-weight:400;background:#fff;color:var(--ink)}}
  .tab{flex:0 0 auto;width:40px;padding:6px 0;text-align:center;border-right:1px solid #e4e4e4;font:400 11px "DM Mono",monospace;color:#5f6368;background:#fff;position:relative}
  .tab.active{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--blue)}
  .tab.mover{animation:tabmove 4.6s infinite;z-index:3}
  .tab.shift{animation:tabshift 4.6s infinite}
  @keyframes tabmove{0%,16%{transform:translateX(0)}28%,62%{transform:translateX(120px)}70%,100%{transform:translateX(0)}}
  @keyframes tabshift{0%,16%{transform:translateX(0)}28%,62%{transform:translateX(-40px)}70%,100%{transform:translateX(0)}}
  .vband{position:absolute;top:0;bottom:0;width:74px;background:rgba(13,40,242,.08);border-left:1px solid rgba(13,40,242,.5);border-right:1px solid rgba(13,40,242,.5);pointer-events:none;z-index:2;animation:vband 4.6s infinite}
  .hband{position:absolute;left:0;right:0;height:44px;background:rgba(13,40,242,.08);border-top:1px solid rgba(13,40,242,.5);border-bottom:1px solid rgba(13,40,242,.5);pointer-events:none;z-index:2;animation:hband 4.6s infinite}
  @keyframes vband{0%,12%{opacity:0}18%,84%{opacity:1}90%,100%{opacity:0}}
  @keyframes hband{0%,12%{opacity:0}18%,84%{opacity:1}90%,100%{opacity:0}}
  .pin{position:absolute;z-index:3;width:12px;height:12px;border-radius:50%;background:var(--blue);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);animation:pin 4.6s infinite}
  @keyframes pin{0%,34%{opacity:0;transform:translateY(-6px)}42%,88%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(-6px)}}
  .cell.findhit{animation:findhit 4.6s infinite}
  .cell.findhit.f2{animation-delay:.3s}
  @keyframes findhit{0%,48%{background:#fff}54%,70%{background:#34a853;color:#fff}76%,100%{background:#fff}}
  .xrow.pinrow{animation:rowlit 4.6s infinite;animation-delay:.9s}
  .xrow.findrow{animation:findrow 4.6s infinite}
  .xrow.findrow.f2{animation-delay:.3s}
  @keyframes findrow{0%,48%{border-color:var(--line);background:#fff}54%,72%{border-color:#34a853;background:rgba(52,168,83,.12)}78%,100%{border-color:var(--line);background:#fff}}
  @keyframes copyflash{0%,12%{border-color:var(--blue);color:var(--blue);background:rgba(13,40,242,.06)}16%,32%{border-color:var(--blue);color:#fff;background:var(--blue)}36%,100%{border-color:var(--blue);color:var(--blue);background:rgba(13,40,242,.06)}}
  @keyframes lockin{0%,42%{border-color:var(--line);color:var(--ink);background:#fff}50%,90%{border-color:var(--blue);color:var(--blue);background:rgba(13,40,242,.06)}96%,100%{border-color:var(--line);color:var(--ink);background:#fff}}
  @keyframes copyin{0%,38%{opacity:0;transform:translateY(4px)}46%,58%{opacity:1;transform:translateY(0);background:var(--blue);color:#fff}62%,90%{opacity:1;transform:translateY(0);background:#fff;color:var(--blue)}96%,100%{opacity:0}}

  /* pricing */
  .price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .price{background:var(--bg);padding:34px;position:relative}
  .badge{position:absolute;top:18px;right:18px;font:500 11px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase;background:var(--salmon);color:#fff;padding:5px 12px;clip-path:var(--oct)}
  .price-name{font:500 13px "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
  .price-amt{font-weight:700;font-size:46px;letter-spacing:-.03em;margin:10px 0 2px;display:flex;align-items:baseline;gap:6px}
  .price-amt small{font:500 15px "DM Mono",monospace;color:var(--ink2)}
  .price-note{font-size:13.5px;color:var(--ink2);line-height:1.5;margin-bottom:22px}

  .trust{display:flex;gap:26px;align-items:center;margin-top:22px;font:500 12px "DM Mono",monospace;color:var(--ink2);letter-spacing:.06em;text-transform:uppercase;flex-wrap:wrap;row-gap:12px}
  .trust i{font-size:18px;color:var(--blue)}
  .chrome-ico{width:18px;height:18px;flex:0 0 auto;display:block;color:var(--blue)}

  /* hero */
  .hero{padding:clamp(48px,8vw,120px) 0}
  .hero h1{margin:18px 0 24px}
  .hero .sub{max-width:680px;font-size:20px}
  .cta-row{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
  .hero-trust{display:flex;align-items:center;gap:9px;margin-top:24px;font:400 13px "DM Mono",monospace;color:var(--ink2)}
  .hero-trust i{font-size:16px;color:var(--blue)}

  .hero-note{font-size:20px;line-height:1.55;color:var(--ink2);max-width:680px;margin-top:18px}
  .hero-note .hero-lock{font-size:14px;color:var(--blue);margin-left:6px;vertical-align:-2px}
  .billed-by{font:400 12px "DM Mono",monospace;color:var(--ink2);margin-top:14px}
  .footer{border-top:1px solid var(--line);padding:30px 0}
  .footer-in{display:flex;align-items:center;gap:11px;font:400 13px "DM Mono",monospace;color:var(--ink2)}
  .flag-ico{width:20px;height:auto;color:var(--blue);flex:0 0 auto;display:block}

  @media(max-width:1100px){
    .feats{grid-template-columns:repeat(3,1fr)}
  }

  @media(max-width:860px){
    .feats{grid-template-columns:1fr 1fr}
    .price-grid{grid-template-columns:1fr}
    .nav{gap:16px}
  }