/* Sfiro site. Tokens from the kit (src/tokens.json) and the approved board (the site design board
   of 2026-10-29, s.2): white dominant, ink for text, amber for one bead per screen, 2 px corners,
   Outfit display, Assistant Hebrew and UI, Plex Mono numbers. Review fixes of 2026-11-08 marked (R). */

@font-face{font-family:"Outfit";src:url("/assets/fonts/Outfit.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Assistant";src:url("/assets/fonts/Assistant.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#15223B; --bead:#F2B01E; --mist:#E3E8F2; --paper:#FFFFFF; --tile:#F6F8FC;
  --ink-2:#4A5873; --ink-3:#637088; /* (R) 5.00:1 on paper, 4.70:1 on tile */
  --line:#D5DCEA; --sheet:#FFFFFF; --sheet-filter:none; --on-bead:#15223B; --error:#B3261E;
  --display:"Outfit",system-ui,sans-serif; --he:"Assistant",system-ui,sans-serif;
  --ui:"Assistant",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:2px; --ease:cubic-bezier(.23,1,.32,1); --gutter:56px; --content:1280px;
  --side:max(0px,calc((100vw - var(--content)) / 2));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --ink:#EEF2FA; --bead:#F6BE3B; --mist:#2A3A58; --paper:#0F1A2E; --tile:#16233B;
  --ink-2:#B7C2D9; --ink-3:#8E9BB5; --line:#2A3A58; --sheet:#121E33; --error:#FF8A80;
  --sheet-filter:invert(.93) hue-rotate(180deg) saturate(.6); color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:18px;line-height:1.5;font-weight:400}
main{flex:1}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:300;text-wrap:balance}
h2{font-size:clamp(30px,3.6vw,46px);line-height:1.1}
[lang="en"] h2,[lang="en"] .block--title h1,[lang="en"] .legal h1,[lang="en"] .block--demo h1{font-family:var(--display);font-weight:200;letter-spacing:-.01em}
h3{font-size:24px;font-weight:600;letter-spacing:-.01em}
p{margin:0;max-width:62ch}
.lede{color:var(--ink-2);font-size:20px;margin-top:16px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:var(--content);margin:0 auto;padding-inline:var(--gutter)}
.wrap.narrow{max-width:calc(var(--content) * .62)}
.placeholder{font-family:var(--mono);font-size:.85em;color:var(--ink-3);border:1px dashed var(--ink-3);padding:0 4px;border-radius:var(--r)}

/* skip link */
.skip{position:absolute;inset-inline-start:16px;top:-60px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--r);z-index:10;text-decoration:none}
.skip:focus{top:12px}

/* focus */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r)}

/* button: one verb for the whole site */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:var(--r);font:600 16px/1 var(--ui);
  background:var(--bead);color:var(--on-bead);border:1px solid var(--bead);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform 160ms var(--ease),background 160ms var(--ease)}
.btn:hover{background:color-mix(in srgb,var(--bead) 88%,var(--ink))}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.cta{display:flex;align-items:center;gap:22px;margin-top:34px;flex-wrap:wrap}
.cta--center{justify-content:center;margin-top:56px}
.cta__note{font-size:15.5px;color:var(--ink-3)}

/* header */
.top{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--gutter);max-width:var(--content);margin:0 auto;position:relative;z-index:3;width:100%}
.top__home{display:block;line-height:0}
.lockup{height:28px;width:auto;display:block;direction:ltr}
.top__nav{display:flex;gap:28px;align-items:center;font-size:16px}
.top__nav a{text-decoration:none;color:var(--ink-2)}
.top__nav a:hover,.top__nav a[aria-current="page"]{color:var(--ink)}
.top__nav a.btn{color:var(--on-bead)}
.top__lang{font-size:15px}

/* hero A: the sheet, white dominant; the button is the one amber bead on the screen */
.hero{position:relative;min-height:688px;overflow:hidden;isolation:isolate}
.hero__sheet{position:absolute;inset:0;mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.hero__sheet .sheetimg image{opacity:.34}
.hero__sheet .pm text{display:none}
.sheetimg--m{display:none}
.hero__panel{position:relative;z-index:2;max-width:var(--content);margin:0 auto;padding:84px var(--gutter) 96px;width:100%}
/* (R) the panel runs from the viewport edge, as on the board */
.hero__panel::before{content:"";position:absolute;inset:0 auto 0 calc(-1 * var(--side));width:calc(var(--side) + 620px);background:linear-gradient(90deg,var(--paper) 72%,transparent);z-index:-1}
[dir="rtl"] .hero__panel::before{inset:0 calc(-1 * var(--side)) 0 auto;background:linear-gradient(270deg,var(--paper) 72%,transparent)}
.hero__panel>*{max-width:508px}
.hero__h1{font-family:var(--display);font-weight:200;font-size:clamp(44px,6.5vw,84px);line-height:.98;letter-spacing:-.015em}
[dir="rtl"] .hero__h1{font-family:var(--he);font-weight:300;font-size:clamp(42px,6.2vw,80px);letter-spacing:0;line-height:1.08}
.hero__h1 small{display:block;font-family:var(--ui);font-weight:300;font-size:clamp(20px,2.3vw,30px);letter-spacing:0;line-height:1.25;color:var(--ink-2);margin-top:22px}
.hero__sub{font-size:21px;color:var(--ink-2);margin-top:26px;max-width:46ch}
.hero__chip{position:absolute;inset-inline-end:calc(var(--side) + var(--gutter));bottom:64px;z-index:2} /* (R) on the grid */

/* the sheet and the marks */
.sheetimg{position:absolute;inset:0;width:100%;height:100%}
.sheetimg image{filter:var(--sheet-filter)}
.pm{opacity:0;transform-box:fill-box;transform-origin:center;animation:drop 420ms var(--ease) forwards}
.pm circle.b{fill:var(--mk,var(--ink))}
.pm circle.r{fill:none;stroke:var(--mk,var(--ink));stroke-width:.55}
.pm text{font-family:var(--mono);font-size:4.2px;fill:var(--ink)}
@keyframes drop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
/* marks drop 45 ms apart, once; in the pillar crops only once scrolled into view (R) */
.pcrop:not(.is-in) .pm{animation-play-state:paused}
.marks .pm:nth-child(1){animation-delay:500ms}
.marks .pm:nth-child(2){animation-delay:545ms}.marks .pm:nth-child(3){animation-delay:590ms}.marks .pm:nth-child(4){animation-delay:635ms}.marks .pm:nth-child(5){animation-delay:680ms}
.marks .pm:nth-child(6){animation-delay:725ms}.marks .pm:nth-child(7){animation-delay:770ms}.marks .pm:nth-child(8){animation-delay:815ms}.marks .pm:nth-child(9){animation-delay:860ms}
.marks .pm:nth-child(10){animation-delay:905ms}.marks .pm:nth-child(11){animation-delay:950ms}.marks .pm:nth-child(12){animation-delay:995ms}.marks .pm:nth-child(13){animation-delay:1040ms}
.marks .pm:nth-child(14){animation-delay:1085ms}.marks .pm:nth-child(15){animation-delay:1130ms}.marks .pm:nth-child(16){animation-delay:1175ms}.marks .pm:nth-child(17){animation-delay:1220ms}
.marks .pm:nth-child(18){animation-delay:1265ms}.marks .pm:nth-child(19){animation-delay:1310ms}.marks .pm:nth-child(20){animation-delay:1355ms}.marks .pm:nth-child(21){animation-delay:1400ms}
.marks .pm:nth-child(22){animation-delay:1445ms}.marks .pm:nth-child(23){animation-delay:1490ms}.marks .pm:nth-child(24){animation-delay:1535ms}.marks .pm:nth-child(25){animation-delay:1580ms}
.marks .pm:nth-child(26){animation-delay:1625ms}.marks .pm:nth-child(27){animation-delay:1670ms}.marks .pm:nth-child(28){animation-delay:1715ms}.marks .pm:nth-child(29){animation-delay:1760ms}
.marks .pm:nth-child(30){animation-delay:1805ms}.marks .pm:nth-child(31){animation-delay:1850ms}.marks .pm:nth-child(32){animation-delay:1895ms}.marks .pm:nth-child(33){animation-delay:1940ms}
.marks .pm:nth-child(34){animation-delay:1985ms}.marks .pm:nth-child(35){animation-delay:2030ms}.marks .pm:nth-child(36){animation-delay:2075ms}.marks .pm:nth-child(37){animation-delay:2120ms}
.marks .pm:nth-child(38){animation-delay:2165ms}.marks .pm:nth-child(39){animation-delay:2210ms}.marks .pm:nth-child(40){animation-delay:2255ms}.marks .pm:nth-child(n+41){animation-delay:2300ms}
@media (prefers-reduced-motion:reduce){.pm{animation:none;opacity:1}}

/* the total chip: the stack beside a Plex Mono number; the label in the page's own direction (R) */
.chip{display:inline-grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:14px 18px;background:var(--sheet);border:1px solid var(--ink);border-radius:var(--r)}
.chip .stack{width:38px;height:38px;grid-row:1 / span 2}
.chip .num{font-size:28px;line-height:1;text-align:start}
.chip__label{display:block;font:300 14px/1.4 var(--ui);color:var(--ink-2)}
.chip--amber{--mk:var(--bead)}
.chip--amber .stack circle:first-of-type{fill:var(--bead)}
/* in hero A the chip's apex stays ink: the button is the only amber on the screen */
.hero__chip .stack circle{fill:var(--ink)}

/* blocks */
.block{padding-block:96px}
.block--title{padding-block:72px 24px}
.block__head{display:flex;align-items:center;gap:18px;margin-bottom:12px}
.block__head .motif{width:48px;height:48px;flex:none;color:var(--ink)}
.motif [stroke]{stroke:currentColor}
.block--problem{background:var(--tile);border-block:1px solid var(--line)}
.block--who{background:var(--tile);border-block:1px solid var(--line)}
.block--who h2{font-size:clamp(26px,3vw,38px)}
.block--accuracy .lede{margin-top:10px}
.block--accuracy .motif circle{fill:var(--ink)} /* (R) one amber bead per screen: the button */
.block--how + .block--pillars,.block--title + .block--how{padding-top:24px} /* (R) */

/* how it works: three steps on the rod */
.steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.step{border-top:1px solid var(--ink);padding-top:18px;display:grid;gap:10px;align-content:start}
.step__n{font-size:14px;color:var(--ink-3)}
.step p{color:var(--ink-2);font-size:17px}

/* pillars P1: three full-width rows in the order of the flow */
.block--pillars .prow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;padding-block:28px}
.block--pillars .prow+.prow{border-top:1px solid var(--line)}
.pcopy p{color:var(--ink-2);margin-top:10px;max-width:40ch}
.pcrop{position:relative;aspect-ratio:760/236;border:1px solid var(--line);background:var(--sheet);overflow:hidden;border-radius:var(--r)}
.pcrop .sheetimg{position:absolute;inset:0}
.pcrop__chip{position:absolute;inset-inline-end:16px;top:16px}
.leader{stroke:var(--ink);stroke-width:1.2;fill:none}
.boq{position:absolute;inset-inline-end:16px;bottom:16px;border:1px solid var(--ink);background:var(--sheet);font-size:13px;border-collapse:collapse}
.boq td,.boq th{padding:7px 12px;border-bottom:1px solid var(--line);text-align:start;font-weight:400}
.boq th{font-weight:600;background:var(--tile)}
.boq .num{font-size:13px}
.boq tr.hit td{background:var(--mist)}

/* security */
.block--security h2{font-size:26px;font-weight:600;margin-top:44px;font-family:var(--ui);letter-spacing:0}
.block--security h2:first-child{margin-top:0}
.block--security p{margin-top:12px;color:var(--ink-2)}
.block--security .more{margin-top:36px;color:var(--ink)}

/* the demo form */
.block--demo{background:var(--tile);border-top:1px solid var(--line)}
.form{display:grid;gap:22px;margin-top:36px;max-width:520px}
.field{display:grid;gap:8px}
.field label{font-weight:600;font-size:16px}
.field input[type="text"],.field input[type="email"],.field input[type="tel"]{height:48px;padding:0 14px;border:1px solid var(--ink-3);border-radius:var(--r);background:var(--paper);color:var(--ink);font:400 17px var(--ui)}
.field input:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.field.is-invalid input{border-color:var(--error)}
.field__msg{font-size:14px;color:var(--error)}
.field--hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.field--check{grid-template-columns:auto 1fr;align-items:start;gap:12px}
.field--check input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--ink)}
.field--check label{font-weight:400;font-size:16px}
.form__notice{font-size:15px;color:var(--ink-2)}
.form__error{color:var(--error);font-size:15px}
.form .btn{justify-self:start}
.demo__closed{margin-top:24px;font-size:18px}

/* legal pages */
.legal{padding-block:72px 96px}
.legal h1{font-size:clamp(32px,4vw,48px);font-weight:300}
.legal h2{font-size:24px;font-weight:600;margin-top:40px;letter-spacing:0}
[lang="en"] .legal h2{font-family:var(--ui)}
.legal__date{color:var(--ink-3);margin-top:8px;font-size:15px}
.legal p{margin-top:18px;color:var(--ink);max-width:70ch}
.legal h2+p{margin-top:12px}
.legal ul{margin:12px 0 0;padding-inline-start:22px;max-width:70ch}
.legal li{margin-top:8px}
.legal strong{font-weight:600}
.legal__back{margin-top:48px}

/* footer: separators are drawn, so they never open a wrapped line (R) */
.foot{border-top:1px solid var(--line);padding-block:40px 56px;color:var(--ink-3);font-size:14.5px}
.foot__row{max-width:var(--content);margin:0 auto;padding-inline:var(--gutter);display:flex;flex-wrap:wrap;gap:8px 0;align-items:center}
.foot__row>*{position:relative;padding-inline-end:24px}
.foot__row>*+*::before{content:"·";position:absolute;inset-inline-start:-14px;color:var(--ink-3)}
.foot__row>*+*{margin-inline-start:4px}
.foot a{text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--ink)}
.foot__brand{font-family:var(--ui);font-weight:600;letter-spacing:0;color:var(--ink)}

/* responsive: one column under 768, 16 px sides */
@media (max-width:1000px){
  .steps{grid-template-columns:1fr;gap:28px}
  .block--pillars .prow{grid-template-columns:1fr;gap:20px}
  .hero__chip{inset-inline-end:var(--gutter)}
}
@media (max-width:767px){
  :root{--gutter:16px}
  body{font-size:17px}
  .top{height:64px;gap:12px}
  .top__nav{gap:12px;font-size:15px;flex:none}
  .top__nav a:not(.btn):not(.top__lang){display:none}
  .top__cta{height:40px;padding:0 14px;font-size:15px}
  .lockup{height:20px}
  .hero{min-height:0}
  .hero__sheet{inset:0 0 auto 0;height:260px;mask-image:linear-gradient(180deg,#000 60%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent)}
  .sheetimg--d{display:none}
  .sheetimg--m{display:block}
  .hero__panel{padding:150px var(--gutter) 40px}
  .hero__panel::before{display:none}
  .hero__panel{background:linear-gradient(180deg,transparent 0,var(--paper) 130px)}
  .hero__h1{font-size:44px}
  [dir="rtl"] .hero__h1{font-size:42px}
  .hero__sub{font-size:18px}
  .hero__chip{position:static;margin:0 var(--gutter) 40px;display:inline-grid}
  .block{padding-block:56px}
  .lede{font-size:18px}
  h2{font-size:30px}
  .block--who h2{font-size:24px}
  .chip .num{font-size:22px}
  .pcrop{aspect-ratio:760/330}
  .pcrop--legend{aspect-ratio:760/400}
  .sheetimg--m .leader,.crop-rule{vector-effect:non-scaling-stroke;stroke-width:1px}
  .crop-rule{stroke:var(--line);fill:none}
  .pcrop--boq{aspect-ratio:auto;padding:96px 8px 8px}
  .pcrop--boq .boq{position:relative;inset:auto;width:100%}
  .boq{font-size:11px}
  .boq td,.boq th{padding:4px 8px}
  .cta{gap:14px}
  .foot__row{font-size:14px;gap:8px 18px}
  .foot__row>*{padding-inline-end:0}
  .foot__row>*+*{margin-inline-start:0}
  .foot__row>*::before{content:none}
}