/* ProcessBuilder public site.
   The layout and restraint were approved on the mockup; this file carries them,
   plus what the mockup did not have: the real-editor demo surfaces, true slider
   ticks, focus visibility, reduced motion, and the gated-section ribbon.
   Directions come from logical properties only, so RTL and LTR are one code
   path. No em dashes anywhere, including these comments. */

:root{
  /* The product's own brand ramp (colors.css --fb-primary-*), so the page, the
     installer and the product read as one thing. Do not pick a new blue here.
     --brand-strong exists because white 14.5px text on #0078d4 measures 4.48:1,
     a hair under AA; surfaces that carry white text darken to it. */
  --brand:#0078d4; --brand-2:#005a9e; --brand-strong:#006ec2; --brand-soft:#e8f1fb; --brand-glow:#4d9de8;
  --ink:#0d1117; --ink-2:#3d4a5c; --ink-3:#697586;
  --bg:#ffffff; --bg-2:#f6f8fb; --bg-3:#eef2f7;
  --line:#e2e8f0; --line-2:#cbd5e1;
  --ok:#0f9d68; --warn:#d97706; --danger:#dc2626;
  --r:14px; --r-lg:22px;
  --shadow:0 1px 2px rgba(13,17,23,.04),0 8px 24px -8px rgba(13,17,23,.10);
  --shadow-lg:0 2px 4px rgba(13,17,23,.04),0 24px 60px -20px rgba(13,17,23,.22);
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --max:1180px;
}
html[data-theme="dark"]{
  --brand:#4d9de8; --brand-2:#7cb9f0; --brand-strong:#4d9de8; --brand-soft:#0f2439; --brand-glow:#4d9de8;
  --ink:#eef2f7; --ink-2:#b6c2d2; --ink-3:#8494a8;
  --bg:#0b0f14; --bg-2:#11161d; --bg-3:#161d26;
  --line:#1f2933; --line-2:#2b3947;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 24px 60px -20px rgba(0,0,0,.7);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
img{max-width:100%}

/* Keyboard visibility. The default outline was removed nowhere, but controls
   built from divs need this to be visible at all. */
:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:6px}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--brand);color:#fff;
  padding:10px 18px;border-radius:0 0 10px 10px;font-weight:600}
.skip:focus{inset-inline-start:16px}

/* ---------- header ---------- */
header.site{position:fixed;inset-block-start:0;inset-inline:0;z-index:100;transition:.35s;
  background:transparent;border-block-end:1px solid transparent}
header.site.stuck{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px) saturate(160%);border-block-end-color:var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.2px}
.logo svg{width:30px;height:30px;flex:none}
.nav-links{display:flex;gap:26px;margin-inline-start:auto;font-size:14.5px;color:var(--ink-2)}
.nav-links a{position:relative;padding:4px 0;transition:.2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;height:1.5px;width:0;background:var(--brand);transition:.25s}
.nav-links a:hover::after{width:100%}
.nav-tools{display:flex;align-items:center;gap:8px}
.chip{border:1px solid var(--line-2);background:transparent;color:var(--ink-2);border-radius:99px;
  padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.btn{border:0;border-radius:99px;padding:11px 22px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  transition:.25s;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.btn-primary{background:var(--brand-strong);color:#fff;box-shadow:0 6px 20px -6px color-mix(in srgb,var(--brand) 70%,transparent)}
.btn-primary:hover{background:var(--brand-2);transform:translateY(-1px);box-shadow:0 12px 30px -8px color-mix(in srgb,var(--brand) 80%,transparent)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-lg{padding:15px 30px;font-size:16px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
/* dark: the light-blue brand cannot carry white text, so buttons and the
   active column segment speak in dark ink instead */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .colSeg button[aria-pressed="true"],
html[data-theme="dark"] .tag{color:#0b0f14}

/* ---------- hero ---------- */
.hero{position:relative;padding:160px 0 96px;overflow:hidden}
.mesh{position:absolute;inset:0;z-index:-1;pointer-events:none}
.mesh svg,.mesh img{width:100%;height:100%;object-fit:cover}
/* the generated ribbon field: light theme only; the dark hero keeps its mesh */
.hero-art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.55;pointer-events:none;
  mask-image:linear-gradient(#000 60%,transparent);-webkit-mask-image:linear-gradient(#000 60%,transparent)}
html[data-theme="dark"] .hero-art{display:none}
.grid-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;opacity:.4;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--brand-soft);color:var(--brand);
  border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);
  border-radius:99px;padding:7px 16px;font-size:13.5px;font-weight:600;margin-bottom:26px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
h1{font-size:clamp(38px,5.4vw,66px);line-height:1.1;letter-spacing:-1.4px;font-weight:700;max-width:15ch}
h1 .grad{background:linear-gradient(120deg,var(--brand) 0%,var(--brand-glow) 55%,var(--brand-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(17px,2vw,20.5px);color:var(--ink-2);max-width:56ch;margin-top:24px;line-height:1.65}
.cta-row{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;align-items:center}
.cta-note{font-size:13.5px;color:var(--ink-3);margin-top:16px;display:flex;align-items:center;gap:8px}
.trust{margin-top:64px;padding-top:30px;border-top:1px solid var(--line);display:flex;gap:44px;flex-wrap:wrap}
.trust-i{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--ink-2)}
.trust-i svg{width:19px;height:19px;color:var(--brand);flex:none}

/* ---------- sections ---------- */
section{padding:104px 0;position:relative}
.sec-head{max-width:660px;margin-bottom:52px}
.kicker{font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--brand);margin-bottom:14px}
h2{font-size:clamp(28px,3.6vw,44px);line-height:1.18;letter-spacing:-.9px;font-weight:700}
.sub{font-size:17.5px;color:var(--ink-2);margin-top:16px;line-height:1.65}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .dot{animation:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-delay:0s !important;transition-delay:0s !important}
}

/* A section rendered in the local preview whose plan item is not done yet.
   The production build removes the whole section; this ribbon exists only so a
   preview reader knows which parts of the page are gated on what. */
[data-gated]{position:relative;outline:2px dashed color-mix(in srgb,var(--warn) 45%,transparent);outline-offset:-2px}
[data-gated]::before{content:"preview · " attr(data-ready-at);position:absolute;inset-block-start:10px;inset-inline-end:10px;
  z-index:5;background:var(--warn);color:#fff;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;letter-spacing:.4px}

/* ---------- the demo: the real editor's surfaces ---------- */
.demo-wrap{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.demo-bar{display:flex;align-items:center;gap:9px;padding:13px 18px;background:var(--bg-3);border-bottom:1px solid var(--line)}
.tl{width:11px;height:11px;border-radius:50%}
.demo-title{margin-inline-start:12px;font-size:13px;color:var(--ink-3);font-weight:500}
.demo-body{display:grid;grid-template-columns:236px 1fr 264px;min-height:520px}

/* the field bank, as in the editor: a titled rail of type chips */
.bank{border-inline-end:1px solid var(--line);padding:18px;background:var(--bg)}
.bank h3,.props h3,.flow h3{font-size:12px;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;font-weight:700}
.bank-hint{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin-bottom:14px}
.bank-list{display:flex;flex-wrap:wrap;gap:8px}
.f-item{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);cursor:grab;font-size:13px;transition:.18s;user-select:none;color:var(--ink-2);font-weight:500}
.f-item:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.f-item:active{cursor:grabbing}
.f-item svg{width:15px;height:15px;color:var(--brand);flex:none}
.f-item.dragging{opacity:.45}

/* the canvas: section cards over a grey work surface */
.canvas{padding:22px;background:var(--bg-2);position:relative;display:flex;flex-direction:column;gap:16px}
.dSec{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;transition:border-color .18s}
.dSec.dropTarget{border-color:var(--brand)}
.dSec-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.dSec-grip{color:var(--ink-3);cursor:grab;line-height:1;font-size:15px;letter-spacing:2px;user-select:none;
  padding:4px 2px;border-radius:6px;transition:.15s;touch-action:none}
.dSec-grip:hover{color:var(--brand);background:var(--brand-soft)}
.dSec-grip:active{cursor:grabbing}
.dSec-title{font-size:16.5px;font-weight:650;letter-spacing:-.3px;flex:1;min-width:8ch}
.dSec-title input{font:inherit;color:inherit;background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;padding:2px 8px;width:100%}
.iconbtn{width:28px;height:28px;border-radius:8px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;
  display:inline-grid;place-items:center;transition:.15s;flex:none}
.iconbtn:hover{background:var(--brand-soft);color:var(--brand)}
.iconbtn.danger:hover{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.iconbtn svg{width:15px;height:15px}
/* the 1..4 column segment, exactly the editor's control */
.colSeg{display:flex;border:1px solid var(--line-2);border-radius:9px;overflow:hidden}
.colSeg button{width:30px;height:26px;border:0;background:var(--bg);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer;transition:.15s}
.colSeg button + button{border-inline-start:1px solid var(--line-2)}
.colSeg button[aria-pressed="true"]{background:var(--brand-strong);color:#fff;font-weight:700}
/* the inner grey panel holding the field grid */
.dGridWrap{background:var(--bg-3);border-radius:10px;padding:14px;min-height:64px}
.dGrid{display:grid;gap:12px}
.dGrid:empty{display:flex}
.dEmpty{border:2px dashed var(--line-2);border-radius:10px;min-height:64px;flex:1;display:flex;align-items:center;
  justify-content:center;color:var(--ink-3);font-size:13.5px;padding:14px;text-align:center}
/* a field card: grip, name, type, edit, kebab. The real card's anatomy. */
.dCard{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;cursor:pointer;
  position:relative;transition:border-color .15s,box-shadow .15s;min-width:0}
.dCard:hover{border-color:var(--brand)}
.dCard.sel{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
.dCard.dragging{opacity:.4}
/* where the field will land: a dashed marker in the grid itself, not a
   tinted edge on a neighbour (owner, r73) */
.dIns{border:2px dashed var(--brand);border-radius:10px;min-height:52px;
  background:color-mix(in srgb,var(--brand) 7%,transparent);animation:insPulse 1.1s ease-in-out infinite}
@keyframes insPulse{50%{background:color-mix(in srgb,var(--brand) 14%,transparent)}}
.dSec.dragging{opacity:.45}
.dSec.secDropBefore{box-shadow:0 -3px 0 0 var(--brand)}
.dSec.secDropAfter{box-shadow:0 3px 0 0 var(--brand)}
.dCard-row{display:flex;align-items:center;gap:8px}
.dCard-grip{color:var(--ink-3);cursor:grab;font-size:12px;letter-spacing:1.5px;user-select:none;flex:none}
.dCard-main{flex:1;min-width:0}
/* the full field name, wrapped to two lines. It used to be one nowrap line
   with an ellipsis, so a real Hebrew label showed as three dots. */
.fName{display:block;font-size:13.5px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.fName .req{color:var(--danger);margin-inline-start:3px}
.fType{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.dCard-acts{display:flex;gap:2px;flex:none;align-self:flex-start}
.act-width.on{color:var(--brand);background:var(--brand-soft)}
.dCard-acts .iconbtn{width:24px;height:24px;opacity:0;transition:opacity .15s}
.dCard:hover .iconbtn,.dCard.sel .iconbtn,.dCard:focus-within .iconbtn{opacity:1}
@media (hover:none){.dCard-acts .iconbtn{opacity:1}}
.pillBtn{margin-top:12px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);border-radius:9px;
  background:var(--bg);color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;padding:7px 14px;cursor:pointer;transition:.15s}
.pillBtn:hover{border-color:var(--danger);color:var(--danger)}
.addSection{align-self:center;display:inline-flex;align-items:center;gap:7px;border:1.5px dashed var(--line-2);border-radius:10px;
  background:transparent;color:var(--ink-3);font:inherit;font-size:13.5px;font-weight:600;padding:9px 18px;cursor:pointer;transition:.15s}
.addSection:hover{border-color:var(--brand);color:var(--brand)}

/* one floating menu serves the kebab, the type picker and move-to-section */
.dMenu{position:fixed;z-index:210;background:var(--bg);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-lg);
  padding:6px;min-width:170px;display:none}
.dMenu.open{display:block}
.dMenu button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;color:var(--ink);
  font:inherit;font-size:13px;padding:8px 10px;border-radius:7px;cursor:pointer;text-align:start}
.dMenu button:hover{background:var(--brand-soft);color:var(--brand)}
.dMenu button.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.dMenu hr{border:0;border-top:1px solid var(--line);margin:5px 2px}

/* the props pane */
.props{border-inline-start:1px solid var(--line);padding:18px;background:var(--bg)}
.p-row{margin-bottom:16px}
.p-row label{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:6px;font-weight:600}
.p-row input[type=text]{width:100%;height:36px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2);
  padding:0 11px;font:inherit;font-size:13.5px;color:var(--ink)}
.p-row input[type=text]:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
.sw{display:flex;align-items:center;justify-content:space-between;padding:9px 0}
.sw span{font-size:13.5px;color:var(--ink-2)}
.tog{width:40px;height:22px;border-radius:99px;background:var(--line-2);position:relative;cursor:pointer;transition:.22s;border:0;flex:none}
.tog::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.22s}
.tog[aria-pressed="true"]{background:var(--brand)}
.tog[aria-pressed="true"]::after{inset-inline-start:21px}
.p-empty{color:var(--ink-3);font-size:13.5px;text-align:center;padding:36px 8px;line-height:1.6}
.flow{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.step{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);padding:8px 0}
.step i{width:23px;height:23px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;font-style:normal;flex:none}
.demo-note{font-size:13px;color:var(--ink-3);margin-top:16px;text-align:center}

/* ---------- feature cards ---------- */
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:.3s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--brand),transparent);opacity:0;transition:.3s}
.card:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--shadow)}
.card:hover::before{opacity:1}
/* a quiet pointer-tracked tint; site.js feeds --mx and --my per card */
@media (hover:hover){
  .card::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--brand) 9%,transparent),transparent 70%)}
  .card:hover::after{opacity:1}
}
.ic{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;margin-bottom:18px}
.ic svg{width:22px;height:22px}
.card h3{font-size:17.5px;font-weight:650;margin-bottom:9px;letter-spacing:-.3px}
.card p{font-size:14.5px;color:var(--ink-2);line-height:1.65}

/* split rows with a product screenshot */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.shot{border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--bg-2)}
.shot img{width:100%;height:auto;display:block}
.shot-cap{font-size:12.5px;color:var(--ink-3);padding:10px 16px;border-top:1px solid var(--line);background:var(--bg)}
.ticks{margin-top:26px;display:flex;flex-direction:column;gap:13px}
.tick{display:flex;gap:12px;font-size:15px;color:var(--ink-2);align-items:flex-start}
.tick svg{width:20px;height:20px;color:var(--ok);flex:none;margin-top:2px}

/* ---------- pricing ---------- */
.price-panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px;box-shadow:var(--shadow)}
.slider-row{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.slider-row .n{font-size:46px;font-weight:700;letter-spacing:-1.4px;color:var(--brand);font-variant-numeric:tabular-nums}
.slider-row .t{font-size:16px;color:var(--ink-2)}
.curSwitch{margin-inline-start:auto;display:flex;border:1px solid var(--line-2);border-radius:99px;overflow:hidden}
.curSwitch button{width:40px;height:32px;border:0;background:var(--bg);color:var(--ink-2);font:inherit;font-size:14px;
  font-weight:700;cursor:pointer;transition:.15s}
.curSwitch button + button{border-inline-start:1px solid var(--line-2)}
.curSwitch button[aria-pressed="true"]{background:var(--brand-strong);color:#fff}
html[data-theme="dark"] .curSwitch button[aria-pressed="true"]{color:#0b0f14}
.curNote{font-size:12.5px;color:var(--ink-3);margin-top:-2px}
input[type=range]{width:100%;height:6px;border-radius:99px;background:var(--line-2);appearance:none;margin:22px 0 6px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{appearance:none;width:24px;height:24px;border-radius:50%;background:var(--brand);
  border:3px solid var(--bg);box-shadow:0 2px 10px rgba(0,0,0,.22);cursor:grab}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--brand);border:3px solid var(--bg);cursor:grab}
/* the scale: every tick sits at its true position on the track, not at an even
   quarter. Positions are set by site.js from the same geometry the input uses,
   and the proof asserts the two agree. */
.scale{position:relative;height:20px;font-size:12.5px;color:var(--ink-3)}
.scale span{position:absolute;inset-block-start:0;transform:translateX(-50%);white-space:nowrap;font-variant-numeric:tabular-nums}
html[dir="rtl"] .scale span{transform:translateX(50%)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:38px}
.plan{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:28px;position:relative;transition:.3s;display:flex;flex-direction:column}
.plan.best{border-color:var(--brand);border-width:2px;box-shadow:0 20px 50px -22px color-mix(in srgb,var(--brand) 55%,transparent)}
.tag{position:absolute;inset-block-start:-12px;inset-inline-start:24px;background:var(--brand-strong);color:#fff;
  font-size:11.5px;font-weight:700;padding:5px 13px;border-radius:99px;letter-spacing:.4px}
.plan h3{font-size:19px;font-weight:650;margin-bottom:5px}
.plan .who{font-size:13.5px;color:var(--ink-3);min-height:38px}
.amt{font-size:38px;font-weight:700;letter-spacing:-1.2px;margin:14px 0 2px;font-variant-numeric:tabular-nums}
.amt small{font-size:15px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.per{font-size:13px;color:var(--ink-3);margin-bottom:20px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink-2);margin-bottom:24px;flex:1}
.plan li{display:flex;gap:9px;align-items:flex-start}
.plan li svg{width:17px;height:17px;color:var(--ok);flex:none;margin-top:3px}
.plan .btn{width:100%;justify-content:center}
.founding{margin-top:26px;border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);background:var(--brand-soft);
  border-radius:12px;padding:14px 18px;font-size:14px;color:var(--ink-2);display:flex;gap:11px;align-items:flex-start}
.founding svg{width:18px;height:18px;color:var(--brand);flex:none;margin-top:3px}
.hidden-note{text-align:center;font-size:13px;color:var(--ink-3);margin-top:22px}

/* ---------- install strip ---------- */
.install-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;counter-reset:step}
.istep{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:24px;position:relative}
.istep::before{counter-increment:step;content:counter(step);position:absolute;inset-block-start:-14px;inset-inline-start:20px;
  width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:13.5px;
  display:grid;place-items:center;box-shadow:0 4px 12px -4px color-mix(in srgb,var(--brand) 60%,transparent)}
.istep h3{font-size:15.5px;font-weight:650;margin:4px 0 7px}
.istep p{font-size:13.5px;color:var(--ink-2);line-height:1.6}

/* ---------- customers ---------- */
.logos{display:flex;gap:52px;flex-wrap:wrap;justify-content:center;align-items:center;opacity:.5}
.logo-ph{width:132px;height:38px;border-radius:9px;background:var(--bg-3);border:1px dashed var(--line-2)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.form-grid{display:grid;gap:16px}
.fld label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
.fld input,.fld textarea{width:100%;border:1px solid var(--line-2);border-radius:11px;background:var(--bg);
  padding:12px 14px;font:inherit;font-size:14.5px;color:var(--ink);transition:.2s}
.fld textarea{min-height:110px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
.fld.err input,.fld.err textarea{border-color:var(--danger)}
.fld-err{display:none;font-size:12.5px;color:var(--danger);margin-top:5px}
.fld.err .fld-err{display:block}
.form-state{display:none;border-radius:12px;padding:16px 18px;font-size:14.5px;line-height:1.6}
.form-state.show{display:flex;gap:11px;align-items:flex-start}
.form-state svg{width:19px;height:19px;flex:none;margin-top:2px}
.form-ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.form-fail{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger)}
.c-info{display:flex;flex-direction:column;gap:22px}
.c-item{display:flex;gap:14px;align-items:flex-start}
.c-item svg{width:21px;height:21px;color:var(--brand);flex:none;margin-top:3px}
.c-item b{display:block;font-size:15px;margin-bottom:2px}
.c-item span{font-size:14px;color:var(--ink-2)}
/* the honeypot field: absent for people, present for scripts */
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- final cta ---------- */
.final{background:linear-gradient(135deg,var(--brand-2),var(--brand) 60%,var(--brand-glow));border-radius:28px;
  padding:76px 48px;text-align:center;color:#fff;position:relative;overflow:hidden}
.final::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 18% 12%,rgba(255,255,255,.22),transparent 45%),
  radial-gradient(circle at 82% 88%,rgba(255,255,255,.14),transparent 45%)}
.final>*{position:relative;z-index:1}
/* the generated silk wave, under the gradient's highlights */
.cta-art{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.5;mix-blend-mode:overlay;pointer-events:none}
.final h2{font-size:clamp(28px,3.8vw,44px);margin-bottom:16px}
.final p{font-size:18px;opacity:.94;max-width:52ch;margin:0 auto 34px}
.final .btn-primary{background:#fff;color:var(--brand-2);box-shadow:0 10px 34px -10px rgba(0,0,0,.4)}
.final .btn-primary:hover{background:#f1f6fc}
.final .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.final .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

footer{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--bg-2)}
.f-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.f-cols .f-h{font-size:13px;font-weight:700;margin-bottom:14px;letter-spacing:.4px}
.f-cols a{display:block;font-size:14px;color:var(--ink-2);padding:5px 0;transition:.2s}
.f-cols a:hover{color:var(--brand)}
.f-bot{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:14px;font-size:13.5px;color:var(--ink-3)}

/* ══════════ the life layer: entrance, scroll, pointer ══════════
   Every rule here rides transform and opacity only, is gated on html.js so a
   scriptless load stays fully visible, and dies wholesale under reduced
   motion. */

/* hero entrance: the lines rise in order once the page arrives */
.js .hero .eyebrow,.js .hero h1>span,.js .hero .lede,.js .hero .cta-row,.js .hero .cta-note,.js .hero .trust{opacity:0}
.js .hero h1>span{display:inline-block}
body.arrived .hero .eyebrow{animation:riseIn .7s cubic-bezier(.16,1,.3,1) .05s forwards}
body.arrived .hero h1>span:first-child{animation:riseIn .8s cubic-bezier(.16,1,.3,1) .18s forwards}
body.arrived .hero h1>span.grad{animation:riseIn .8s cubic-bezier(.16,1,.3,1) .32s forwards}
body.arrived .hero .lede{animation:riseIn .7s cubic-bezier(.16,1,.3,1) .5s forwards}
body.arrived .hero .cta-row{animation:riseIn .7s cubic-bezier(.16,1,.3,1) .64s forwards}
body.arrived .hero .cta-note{animation:riseIn .7s cubic-bezier(.16,1,.3,1) .76s forwards}
body.arrived .hero .trust{animation:riseIn .8s cubic-bezier(.16,1,.3,1) .9s forwards}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* the art drifts with the pointer and the scroll; site.js feeds the vars */
.hero-art{transform:translate3d(var(--px,0),calc(var(--py,0) + var(--sy,0)),0) scale(1.05);will-change:transform}
.mesh{transform:translate3d(calc(var(--px,0) * -.6),calc(var(--py,0) * -.6),0)}

/* reveals, staggered: site.js sets a ONE-SHOT inline transition-delay from
   --d and clears it after the entrance, so hover transitions never inherit
   the stagger and a button never answers late */
.demo-wrap.reveal{transform:translateY(30px) scale(.98)}
.demo-wrap.reveal.in{transform:none}
.shot.reveal{transform:translateY(26px) rotate(.6deg)}
html[dir="rtl"] .shot.reveal{transform:translateY(26px) rotate(-.6deg)}
.shot.reveal.in{transform:none}

/* buttons that answer the hand: magnetic pull (js feeds --tx/--ty), a press,
   and a sheen that sweeps a primary button once on hover */
.btn{position:relative;overflow:hidden;transform:translate(var(--tx,0),var(--ty,0))}
.btn:active{transform:translate(var(--tx,0),var(--ty,0)) scale(.96)}
.btn-primary::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.38) 50%,transparent 62%);
  transform:translateX(-130%);transition:transform .01s}
.btn-primary:hover::before{transform:translateX(130%);transition:transform .65s ease}
html[dir="rtl"] .btn-primary::before{transform:translateX(130%)}
html[dir="rtl"] .btn-primary:hover::before{transform:translateX(-130%)}
.btn-primary:hover{transform:translate(var(--tx,0),var(--ty,0)) translateY(-1px)}

/* the scroll rail: a vertical progress track with a cap at each end, one dot
   per chapter, and a live percentage */
.rail{position:fixed;inset-inline-end:20px;top:50%;translate:0 -50%;z-index:95;display:none}
@media(min-width:1180px){.js .rail{display:flex;flex-direction:column;align-items:center;gap:12px}}
.rail-track{position:relative;width:4px;height:42vh;min-height:230px;border-radius:99px;
  background:color-mix(in srgb,var(--line) 70%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line-2) 40%,transparent)}
.rail-fill{position:absolute;inset-inline:0;top:0;height:0%;border-radius:inherit;
  background:linear-gradient(var(--brand-2),var(--brand) 55%,var(--brand-glow));
  box-shadow:0 0 12px -2px color-mix(in srgb,var(--brand) 60%,transparent)}
/* the two ends belong to the line: they sit ON it, centred, not beside it */
.rail-cap{position:absolute;inset-inline-start:50%;translate:-50% 0;width:9px;height:9px;border-radius:50%;
  border:2px solid var(--line-2);background:var(--bg);transition:border-color .3s,background-color .3s}
html[dir="rtl"] .rail-cap{translate:50% 0}
.rail-cap-top{top:-4px}
.rail-cap-end{bottom:-4px}
.rail-cap.lit{border-color:var(--brand);background:var(--brand)}
.rail-pct{font-size:11px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.3px;
  min-width:4ch;text-align:center;transition:color .3s}
.rail-pct.lit{color:var(--brand)}
.rail-dot{position:absolute;inset-inline-start:50%;translate:-50% -50%;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--line-2);background:var(--bg);cursor:pointer;padding:0;
  transition:border-color .2s,scale .2s,box-shadow .2s}
html[dir="rtl"] .rail-dot{translate:50% -50%}
.rail-dot:hover,.rail-dot:focus-visible{border-color:var(--brand);scale:1.2}
/* ── THE DOTS ARE A PROGRESS BAR ────────────────────────────────────────────
   Everything the reader has scrolled past is FILLED, everything ahead is empty.
   `passed` comes from the same percentage the fill uses, so the two can never
   disagree. `aria-current` still marks WHERE the reader is, with a larger dot
   and a ring, because "passed" and "here" are different facts and the reader
   wants both. */
.rail-dot.passed{border-color:var(--brand);background:var(--brand)}
.rail-dot[aria-current="true"]{border-color:var(--brand);background:var(--brand);scale:1.3;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.rail-dot::after{content:attr(data-label);position:absolute;inset-block-start:50%;translate:0 -50%;
  inset-inline-end:20px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;
  padding:4px 11px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,translate .2s}
.rail-dot:hover::after,.rail-dot:focus-visible::after{opacity:1;translate:-4px -50%}
html[dir="rtl"] .rail-dot:hover::after,html[dir="rtl"] .rail-dot:focus-visible::after{translate:4px -50%}

/* ══════════ the generated art, placed ══════════ */
.art-dark{display:none}
html[data-theme="dark"] .art-dark{display:block}
html[data-theme="dark"] .art-light{display:none}
html[data-theme="dark"] .hero-art{opacity:.5;mask-image:linear-gradient(#000 55%,transparent);-webkit-mask-image:linear-gradient(#000 55%,transparent)}

.divider{height:120px;overflow:hidden;position:relative;opacity:.75}
.divider img{width:100%;height:100%;object-fit:cover;display:block;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.dv-dark{display:none}
html[data-theme="dark"] .dv-dark{display:block}
html[data-theme="dark"] .dv-light{display:none}

html:not([data-theme="dark"]) .price-panel{
  background:linear-gradient(color-mix(in srgb,var(--bg-2) 82%,transparent),color-mix(in srgb,var(--bg-2) 94%,transparent)),
    url("assets/art-pricing.webp") center/cover no-repeat}

/* the install band's backdrop spans the SECTION, edge to edge, and fades on
   every side. The old rule pinned a 52vw box to one corner, which read as a
   picture that had slipped rather than as a background. */
#install{overflow:hidden;position:relative;isolation:isolate}
.install-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:.3;z-index:-1;pointer-events:none;
  mask-image:radial-gradient(120% 90% at 50% 55%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 55%,#000 30%,transparent 78%)}
html[data-theme="dark"] .install-art{opacity:.16}

/* the accent stays INSIDE layout bounds and drifts out visually with a
   transform, which never adds scrollable overflow. Its negative inset used to
   add 4% of real page overflow at every width. */
.split{position:relative}
/* a transformed decoration still counts toward scrollable overflow, so the
   sections that host one clip their inline axis */
#signatures,#oversight{overflow-x:clip}
@media(min-width:981px){
  .split::before{content:"";position:absolute;inset-inline-end:0;inset-block-start:-9%;width:320px;height:320px;z-index:-1;
    background:url("assets/art-accent.webp") center/contain no-repeat;opacity:.55;filter:blur(1.5px);
    transform:translateX(12%)}
  html[dir="rtl"] .split::before{transform:translateX(-12%)}
  html[data-theme="dark"] .split::before{opacity:.1}
}

/* the demo on a phone behaves like the real editor below its own narrow
   breakpoint: one field per row, whatever the author chose, so a label is
   never squeezed into ellipsis */
@media(max-width:640px){
  .dGrid{grid-template-columns:1fr !important}
  .dCard{grid-column:auto !important}
}

/* the product screenshots are per language: an English page showing Hebrew
   screens was the owner's finding, and one image cannot serve both */
.shot-en{display:none}
html[lang="en"] .shot-en{display:block}
html[lang="en"] .shot-he{display:none}

/* ══════════ the evidence chain, drawn rather than photographed ══════════
   It replaced a crop of one approval row whose approver was called "developer"
   and whose signature was a zigzag. A diagram is honest (nobody mistakes it for
   a screen) and it says the thing the screenshot could not: each link is
   derived from the one before it. */
.chain{position:relative;display:flex;flex-direction:column;gap:18px;padding:26px 22px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.chain::before{content:"";position:absolute;inset-block:52px 74px;inset-inline-start:40px;width:2px;
  background:linear-gradient(var(--brand),var(--brand-glow));border-radius:2px;transform-origin:top;
  transform:scaleY(0);transition:transform .9s cubic-bezier(.16,1,.3,1) .1s}
.chain.in::before{transform:scaleY(1)}
.chain-link{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
  opacity:0;transform:translateY(12px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),border-color .25s}
.chain.in .chain-link{opacity:1;transform:none}
.chain.in .chain-link:nth-child(2){transition-delay:.18s}
.chain.in .chain-link:nth-child(3){transition-delay:.36s}
.chain-link:hover{border-color:var(--brand)}
.chain-dot{width:11px;height:11px;border-radius:50%;background:var(--bg);border:2.5px solid var(--brand);flex:none;
  box-shadow:0 0 0 4px var(--bg)}
.chain-link.is-head .chain-dot{background:var(--brand)}
.chain-txt{flex:1;font-size:14.5px;font-weight:600;color:var(--ink-2);min-width:0}
.chain-link.is-head .chain-txt{color:var(--ink)}
.chain-hash{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;font-weight:600;color:var(--brand);
  background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 20%,transparent);
  border-radius:8px;padding:3px 10px;direction:ltr;flex:none}
.chain-note{font-size:13px;color:var(--ink-3);text-align:center;margin-top:2px}
@media (prefers-reduced-motion:reduce){
  .chain::before{transform:scaleY(1)}
  .chain-link{opacity:1;transform:none}
}

/* ══════════ the form preview ══════════ */
.previewBtn{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);
  background:var(--bg);color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:600;padding:6px 13px;
  border-radius:99px;cursor:pointer;transition:.18s}
.previewBtn:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.previewBtn svg{width:14px;height:14px}
.pvBack{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:color-mix(in srgb,var(--ink) 42%,transparent);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s}
.pvBack.open{opacity:1}
.pvCard{background:var(--bg);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);
  width:min(760px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(18px) scale(.985);transition:transform .28s cubic-bezier(.16,1,.3,1)}
.pvBack.open .pvCard{transform:none}
.pvHeadBar{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.pvTitle{font-size:14.5px;font-weight:650;flex:1}
.pvBody{padding:22px;overflow-y:auto}
/* the page's own `section{padding:104px 0}` reaches these, because they are
   <section> elements too: 208px of dead air per block, measured. */
.pvSec{padding:0;margin-bottom:24px}
.pvSec h3{font-size:16px;font-weight:650;margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.pvGrid{display:grid;gap:16px}
.pvField{display:flex;flex-direction:column;gap:6px;min-width:0;justify-content:flex-start}
/* every control in a row shares one height, so the row reads as a row */
.pvGrid{align-items:start}
.pvInput:not(textarea){height:42px}
.pvChecks{min-height:42px;align-items:center}
.pvField .tog{margin-top:10px}
.pvLabel{font-size:13.5px;font-weight:600}
.pvLabel .req{color:var(--danger);margin-inline-start:3px}
.pvInput{width:100%;border:1px solid var(--line-2);border-radius:10px;background:var(--bg);color:var(--ink);
  padding:10px 12px;font:inherit;font-size:14px;transition:.18s}
.pvInput:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
select.pvInput{cursor:pointer}
.pvField.bad .pvInput{border-color:var(--danger)}
.pvErr{display:none;font-size:12px;color:var(--danger)}
.pvField.bad .pvErr{display:block}
.pvChecks{display:flex;flex-wrap:wrap;gap:8px 16px}
.pvCheck{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.pvHead{font-size:15.5px;font-weight:700;color:var(--brand);grid-column:1/-1;margin-top:4px}
.pvHint{font-size:13px;color:var(--ink-3);border:1px dashed var(--line-2);border-radius:10px;padding:12px 14px;background:var(--bg-2)}
.pvNote{font-size:12px;color:var(--ink-3)}
.pvNote.ok{color:var(--ok);font-weight:600}
.pvFile{font-size:13px}
.pvHints{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.pvHintsTitle{font-size:12.5px;color:var(--ink-3);font-weight:600}
.pvChip{font-size:12px;font-weight:600;color:var(--brand);background:var(--brand-soft);
  border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);border-radius:99px;padding:4px 11px}
.pvFoot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--line);background:var(--bg-2)}

/* ══════════ scroll to top ══════════ */
.toTop{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:96;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line-2);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);
  color:var(--ink-2);cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transform:translateY(10px) scale(.9);transition:.3s cubic-bezier(.16,1,.3,1)}
.toTop.show{opacity:1;pointer-events:auto;transform:none}
.toTop:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.toTop svg{width:18px;height:18px}
@media(min-width:1180px){.toTop{inset-inline-end:64px}}

/* ══════════ capabilities: a bento, not nine equal boxes ══════════ */
@media(min-width:981px){
  .f-grid{grid-template-columns:repeat(6,1fr)}
  .f-grid>.card{grid-column:span 2}
  #features .f-grid>.card:nth-child(1){grid-column:span 3}
  #features .f-grid>.card:nth-child(2){grid-column:span 3}
  #features .f-grid>.card:nth-child(9){grid-column:span 3}
  #features .f-grid>.card:nth-child(8){grid-column:span 3}
  #launch .f-grid>.card:nth-child(1),#launch .f-grid>.card:nth-child(2){grid-column:span 3}
  #types .f-grid>.card{grid-column:span 3}
}
/* the icon answers a hover, and a hairline sweeps under the title */
.card .ic{transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .3s}
.card:hover .ic{transform:translateY(-3px) rotate(-4deg);background:color-mix(in srgb,var(--brand) 16%,transparent)}
.card h3{position:relative;display:inline-block}
.card h3::after{content:"";position:absolute;inset-block-end:-4px;inset-inline-start:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--brand),transparent);transition:width .45s cubic-bezier(.16,1,.3,1)}
.card:hover h3::after{width:100%}

/* ══════════ scroll-linked entrances for the smaller parts ══════════ */
.js .tick,.js .istep,.js .trust-i,.js .c-item{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.js .tick.in,.js .istep.in,.js .trust-i.in,.js .c-item.in{opacity:1;transform:none}
/* the section heading lifts a little as it enters the viewport */
.js .sec-head h2{transition:transform .8s cubic-bezier(.16,1,.3,1)}

/* the first-paint veil: a short wipe so the page ARRIVES rather than blinks */
.js body::before{content:"";position:fixed;inset:0;z-index:300;background:var(--bg);pointer-events:none;
  opacity:1;transition:opacity .45s ease .1s}
body.arrived::before{opacity:0}
body.arrived.settled::before{display:none}

@media(max-width:980px){
  .demo-body{grid-template-columns:1fr}
  .bank,.props{border-inline-end:0;border-inline-start:0;border-bottom:1px solid var(--line)}
  .split,.contact{grid-template-columns:1fr;gap:36px}
  .split .shot{order:1}
  .f-cols{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}
@media(max-width:640px){
  section{padding:72px 0}
  .hero{padding:130px 0 70px}
  .price-panel,.final{padding:32px 22px}
  .f-cols{grid-template-columns:1fr}
  /* the fixed header cannot hold logo, toggles AND a button at 390: the button
     was the thing that clipped, and the hero's own button is one screen away */
  .nav .btn{display:none}
  .nav{gap:14px}
}


/* ══════════ the send button while it is working ══════════
   It used to set `disabled` and nothing else, so a slow send looked like a dead
   button. The spinner takes no layout when idle (`width:0`) so the resting
   button is exactly the size it was. */
.btn .btn-spin{display:inline-block;width:0;height:14px;border-radius:50%;
  border:2px solid color-mix(in srgb,currentColor 35%,transparent);border-top-color:currentColor;
  opacity:0;transition:width .18s,opacity .18s,margin .18s}
html[dir="rtl"] .btn.is-busy .btn-spin{margin-inline-end:8px}
.btn.is-busy .btn-spin{width:14px;opacity:1;margin-inline-end:8px;animation:btn-spin .7s linear infinite}
.btn.is-busy{cursor:progress}
@keyframes btn-spin{to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){
  /* No spin, but still a visible change of state: the ring stays and the label
     still swaps, so the feedback survives the preference. */
  .btn.is-busy .btn-spin{animation:none}
}

/* the "(optional)" marker beside a label. Quieter than the label, never a colour
   on its own, because colour alone is not a signal. */
.fld-opt{color:var(--ink-3);font-weight:400;font-size:.86em}


/* ══════════ built on Microsoft, said out loud ══════════
   A quiet strip, not a badge wall: four names with one line each. The four-square
   is the only real mark and it is drawn from Microsoft's documented brand colours
   rather than borrowed as a file. */
.platform{padding:34px 0 6px}
.plat-head{font-size:15px;font-weight:600;color:var(--ink-2);text-align:center;margin:0 0 20px}
.plat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.plat-i{display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.plat-i b{font-size:15px;font-weight:600}
.plat-i span:last-child{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.ms-squares{display:grid;grid-template-columns:repeat(2,10px);grid-template-rows:repeat(2,10px);gap:2.4px}
.ms-squares i{display:block;width:10px;height:10px}
/* Microsoft's four documented brand colours, in their published order. */
.ms-squares i:nth-child(1){background:#F25022}
.ms-squares i:nth-child(2){background:#7FBA00}
.ms-squares i:nth-child(3){background:#00A4EF}
.ms-squares i:nth-child(4){background:#FFB900}
.plat-mark{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 5px;border-radius:5px;background:var(--brand-soft);color:var(--brand);
  font-size:10.5px;font-weight:700;letter-spacing:.4px;direction:ltr}
/* Capped and centred: a legal line set to the full page width reads as a
   paragraph the eye skips, which defeats the point of it being there. */
.plat-note{font-size:11.5px;color:var(--ink-3);text-align:center;margin:16px auto 0;
  max-width:74ch;line-height:1.6}


/* ══════════ the builder is a desk job, on the page as in the product ══════════
   `phonePosture.ts` marks the editor route `hidden` on a phone, so the demo does
   not offer on a phone what the product will not. 980px is the width the demo's
   own three-pane grid already collapses at, reused rather than invented: one
   breakpoint, one meaning. */
.demo-phone,.demo-phone-head{display:none}
@media(max-width:980px){
  .demo-interactive{display:none !important}
  .demo-phone-head{display:block}
  .demo-phone{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
    padding:26px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
  .demo-phone-i{display:inline-flex;color:var(--brand);width:30px;height:30px}
  .demo-phone-i svg{width:30px;height:30px}
  .demo-phone b{font-size:17px;font-weight:600}
  .demo-phone p{font-size:14.5px;color:var(--ink-2);line-height:1.65;margin:0}
  .demo-phone .btn{margin-top:4px}
}

/* ── ROUND 94: THE PLATFORM MARKS ARE ICONS, NOT LETTERS ───────────────────
   The owner asked for icons a customer recognises. The three tiles were the
   letters SP, FX and EID, which name a platform without looking like anything.
   These are drawn shapes: a share graph, angle brackets, a shield with a
   person. They are deliberately NOT redrawings of Microsoft's logo files, for
   the reason already written above this strip in index.html, which is that a
   redrawn SharePoint or Entra logo is a worse likeness and a trademark problem
   at the same time. The Microsoft four-square stays as it is, from its own
   documented brand colours, used nominatively to name the platform. */
.plat-mark.plat-svg{padding:0;min-width:22px;width:22px;height:22px}
.plat-mark.plat-svg svg{width:14px;height:14px}
/* ── ROUND 95: THE PLATFORM MARKS ARE THE PRODUCTS' OWN COLOURS ───────────────
   The owner looked at the live page and asked for real marks for SharePoint,
   Entra ID and SPFx instead of what was there. What was there was three grey
   line-art glyphs in the page's own brand colour: a node graph, a code bracket
   and a shield. They carried no recognition at all, and the row read as four
   decorations rather than as the platform this product runs on.

   These are OUR renderings in each product's documented brand colours, used
   nominatively to name the platform, exactly as the four-square above already
   is. They are not copies of Microsoft's logo files.

   `plat-logo` carries no background of its own: the mark IS the artwork, so the
   tinted rounded tile that `plat-mark` gives a wordmark would put a box around
   a logo. */
.plat-mark.plat-logo{padding:0;min-width:24px;width:24px;height:24px;background:none;border-radius:0}
.plat-mark.plat-logo svg{width:24px;height:24px;display:block}
/* The row is a row of MARKS now, so they line up on their own optical centre
   rather than on the four-square's 20px grid. */
.plat-i .ms-squares{margin:1px 0}