/* Self-hosted Google Fonts (SIL Open Font License): Noto Serif Hebrew (variable wght+wdth), IBM Plex Sans Hebrew, Gveret Levin.
   Same subsets and unicode ranges as fonts.googleapis.com, minus cyrillic. Paths are relative to assets/css/. */
@font-face{
  font-family: 'Gveret Levin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/gveret-levin-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face{
  font-family: 'Gveret Levin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/gveret-levin-latin-min.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-hebrew-400-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face{
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-hebrew-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A9, U+20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-hebrew-400-latin-min.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-hebrew-500-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face{
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-hebrew-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A9, U+20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-hebrew-500-latin-min.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-hebrew-600-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face{
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-hebrew-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A9, U+20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-hebrew-600-latin-min.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-hebrew-700-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face{
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-hebrew-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A9, U+20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-hebrew-700-latin-min.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Noto Serif Hebrew';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(../fonts/noto-serif-hebrew-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face{
  font-family: 'Noto Serif Hebrew';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(../fonts/noto-serif-hebrew-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A9, U+20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Noto Serif Hebrew';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(../fonts/noto-serif-hebrew-latin-min.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Layout concept: a page from the session notebook. Ruled paper, ink display type
   that swings between hairline (the head) and heavy (the moment), ballpoint notes in the margin.
   Deliberately single-theme: the paper/ink world is the brand. */
:root{
  /* color */
  --paper:#F2F3EF;        /* notebook paper, cool */
  --paper-2:#E8EBE5;      /* alternate band */
  --sheet:#FBFBF8;        /* a lifted page */
  --ink:#0E1A33;          /* deep ink navy: display type, dark bands */
  --ink-2:#192A4C;        /* raised surface on ink */
  --text:#18233B;         /* running text on paper */
  --muted:#566070;        /* secondary text on paper (5.9:1) */
  --pen:#2340A0;          /* ballpoint blue: handwriting, links, focus */
  --marker:#EADC7C;       /* highlighter, only behind words */
  --rule:#C9D3E3;         /* ruled lines */
  --margin:#D4837E;       /* the red margin line of a notebook, used once */
  --on-ink:#EEF0EA;       /* text on ink */
  --on-ink-muted:#A9B1C2; /* secondary text on ink (7.7:1) */
  --line:rgba(14,26,51,.14);
  --line-strong:rgba(14,26,51,.32);
  --line-on-ink:rgba(238,240,234,.16);

  /* type */
  --f-display:"Noto Serif Hebrew","Frank Ruhl Libre","David Libre",Georgia,serif;
  --f-text:"IBM Plex Sans Hebrew","Assistant","Heebo","Segoe UI",Arial,sans-serif;
  --f-hand:"Gveret Levin","Noto Serif Hebrew",cursive;
  --fs-small:16px;
  --fs-body:clamp(18px, .55vw + 15.5px, 20px);
  --fs-lead:clamp(20px, .9vw + 15.5px, 25px);
  --fs-h3:clamp(24px, 1.4vw + 17px, 34px);
  --fs-h2:clamp(42px, 5.4vw + 12px, 96px);
  --fs-h1:clamp(54px, 7.4vw + 8px, 124px);
  --w-hair:130;  --w-heavy:860;   /* the two voices of the display face */
  --s-hair:100%; --s-heavy:76%;

  /* space & motion */
  --maxw:1240px;
  --sec-pad:clamp(88px, 10vw + 40px, 176px);
  --gut-l:max(20px, env(safe-area-inset-left, 0px));
  --gut-r:max(20px, env(safe-area-inset-right, 0px));
  --ease:cubic-bezier(.2,.7,.1,1);
  --radius:6px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--f-text);font-size:var(--fs-body);
  line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
/* paper grain over everything, never blocks input */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.1 0 0 0 0 0.2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg,video{display:block;max-width:100%}
a{color:var(--pen);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:inherit}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--pen);outline-offset:3px;border-radius:2px}
.section--ink :focus-visible{outline-color:var(--marker)}
::selection{background:var(--marker);color:var(--ink)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;background:var(--ink);color:var(--on-ink);padding:10px 16px;border-radius:var(--radius)}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:calc(var(--maxw) + 40px);margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.section{position:relative;padding-block:var(--sec-pad)}
.section--paper2{background:var(--paper-2)}
.section--ink{background:var(--ink);color:var(--on-ink)}
.section--ink .muted,.section--ink .kicker{color:var(--on-ink-muted)}
.stack{display:flex;flex-direction:column}
/* Far sections skip layout and paint until they come near the screen (on a slow phone the 45-screen page cost a
   ~1 s layout before the first paint). Not #voice (right after the hero) and never #words: containment breaks
   the sticky WhatsApp stage. Measured 29.10, Slow 4G + 4x CPU: first paint 2.2 -> 1.5 s. */
main>section:is(#moment,#after,#method,#different,#about,#price,#fit,#faq,#contact){content-visibility:auto;contain-intrinsic-size:auto 2600px}
.cv-off main>section:is(#moment,#after,#method,#different,#about,#price,#fit,#faq,#contact){content-visibility:visible} /* base.js: idle or first anchor */

/* ---------- type ---------- */
.kicker{display:flex;align-items:center;gap:12px;font:500 16px/1.15 var(--f-text);color:var(--muted);margin-bottom:clamp(20px,2.4vw,32px)}
/* no rule line before the kicker (11.11): the same "—— label" over every section read as a template (external review, Gemini) */
.display,.h2,.h1{font-family:var(--f-display);color:var(--ink);text-wrap:balance}
.section--ink .display,.section--ink .h2{color:var(--on-ink)}
.h1{font-size:var(--fs-h1);line-height:.96;letter-spacing:-.005em}
.h2{font-size:var(--fs-h2);line-height:1.02;font-weight:var(--w-heavy);font-stretch:var(--s-heavy);letter-spacing:-.004em}
.h3{font-family:var(--f-display);font-size:var(--fs-h3);line-height:1.18;font-weight:700;font-stretch:88%;color:var(--ink)}
.section--ink .h3{color:var(--on-ink)}
.thin{font-weight:var(--w-hair);font-stretch:var(--s-hair)}
.heavy{font-weight:var(--w-heavy);font-stretch:var(--s-heavy)}
.lead{font-size:var(--fs-lead);line-height:1.6;max-width:32em;text-wrap:pretty}
.prose p{max-width:36em;text-wrap:pretty}
.prose p+p{margin-top:1.1em}
.muted{color:var(--muted)}
.small{font-size:var(--fs-small);line-height:1.55}
.hand{font-family:var(--f-hand);color:var(--pen);font-weight:400;line-height:1.15;font-size:clamp(26px,1.6vw + 18px,40px)}
.section--ink .hand{color:#9FB3FF}
.quote-mark{font-family:var(--f-display)}
/* highlighter behind words: draws right-to-left when .is-in lands on it or an ancestor */
.mark{background-image:linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%);
  background-repeat:no-repeat;background-position:right 0;background-size:100% 100%;color:inherit;padding-inline:.06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.section--ink .mark{background-image:linear-gradient(transparent 58%, rgba(234,220,124,.38) 58%, rgba(234,220,124,.38) 92%, transparent 92%)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 28px;
  border-radius:var(--radius);border:1.5px solid transparent;font:600 18px/1.2 var(--f-text);text-decoration:none;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .16s var(--ease)}
.btn .ico{inline-size:22px;block-size:22px;flex:none}
.btn--primary{background:var(--ink);color:var(--on-ink)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.section--ink .btn--primary{background:var(--on-ink);color:var(--ink)}
.section--ink .btn--ghost{border-color:var(--line-on-ink);color:var(--on-ink)}
.link-arrow{position:relative;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--line-strong);padding-bottom:2px}
.section--ink .link-arrow{color:var(--on-ink);border-color:var(--line-on-ink)}
.link-arrow::after{content:"";position:absolute;inset:-8px -6px} /* 48px hit area, same look */
.ico{inline-size:1em;block-size:1em;fill:currentColor}
/* Hover only where a real pointer hovers: on touch it sticks after the tap (iOS) and the ghost reads as a second primary. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{text-decoration:none;transform:translateY(-1px)}
  .btn--primary:hover{background:var(--pen);color:#fff}
  .btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--on-ink)}
  .section--ink .btn--primary:hover{background:#fff;color:var(--pen)}
  .section--ink .btn--ghost:hover{background:var(--on-ink);color:var(--ink)}
  .link-arrow:hover{border-color:var(--ink)}
}
/* Press feedback the instant a finger lands: the WhatsApp hand-off from an in-app browser can take a second. */
.btn:active,.cta-bar__main:active,.cta-bar__call:active{transform:scale(.97)}
html{-webkit-tap-highlight-color:transparent}
a,button,summary,label{touch-action:manipulation}

/* ---------- ruled paper ---------- */
.ruled{--lh:44px;background-image:repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px) var(--lh))}

/* ---------- reveal (content is visible at rest; only off-screen items get armed) ---------- */
@keyframes rv-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rv-fade{from{opacity:0}to{opacity:1}}
@keyframes mark-draw{from{background-size:0% 100%}to{background-size:100% 100%}}
.rv-armed{opacity:0}
.rv-in{animation:rv-up .55s var(--ease) both;animation-delay:var(--d,0ms)}
.rv-in[data-reveal="fade"]{animation-name:rv-fade}
.rv-in .mark,.mark.rv-in{animation:mark-draw 1.1s var(--ease) both;animation-delay:calc(var(--d,0ms) + 450ms)}

/* Phones (3.11.2026): readers up to 55, often outdoors, in in-app browsers. The hairline voice stays light but stops
   vanishing; the full-screen paper grain costs a blend on every scroll frame and can't be seen at phone size. */
@media (max-width:760px){
  :root{--w-hair:200}
  body::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}
  .rv-armed{opacity:1}
}

/* 00 header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper);
  background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:flex;align-items:baseline;gap:14px;text-decoration:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand__mark{align-self:center;block-size:25px;inline-size:auto;flex:none;margin-inline-end:-4px}
.brand__name{font-family:var(--f-display);font-weight:820;font-stretch:80%;font-size:27px;line-height:1;letter-spacing:-.005em}
.brand__sig{font-family:var(--f-display);font-size:18px;line-height:1;color:var(--muted);padding-inline-start:14px;border-inline-start:1px solid var(--line-strong)}
.brand__sig b{font-weight:var(--w-heavy);font-stretch:var(--s-heavy);color:var(--ink)}
.brand__sig i{font-style:normal;font-weight:var(--w-hair)}
.site-nav{display:flex;gap:clamp(20px,2.6vw,40px)}
.site-nav a{color:var(--text);text-decoration:none;font-size:17px;font-weight:500;padding-block:8px;border-bottom:1.5px solid transparent}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.btn--sm{min-height:48px;padding:0 18px;font-size:16px;gap:10px}
.btn--sm .ico{inline-size:19px;block-size:19px}
@media (max-width:1040px){.site-nav{display:none}}
@media (max-width:480px){.brand__sig{display:none}.site-header__in{min-height:66px}}
@media (max-width:760px){.site-header{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* 01 hero: the one orchestrated moment. The head line arrives quietly; the moment lines jolt in and settle. */
.hero{padding-block:clamp(36px,5vw,88px) clamp(72px,8vw,128px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:end}
.hero__text{min-width:0}
.hero__title{display:flex;flex-direction:column;margin-bottom:clamp(28px,3vw,44px)}
.hero__l1{color:var(--muted);font-size:.72em;line-height:1.05;margin-bottom:.12em}
.hero__l2,.hero__l3{color:var(--ink)}
.hero__l2 .w,.hero__l3 .w{display:inline-block}
.hero__lead{max-width:29em;color:var(--text)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3vw,40px)}
.hero__micro{margin-top:16px}

.hero__portrait{position:relative;margin:0;justify-self:end;width:min(100%,440px);min-width:0}
.hero__photo{position:relative;aspect-ratio:4/5;max-width:100%;isolation:isolate}
.hero__photo::before{content:"";position:absolute;inset:0;transform:translate(-14px,14px);border:1px solid var(--ink);border-radius:2px;z-index:-1}
.hero__photo img{width:100%;height:100%;object-fit:cover;border-radius:2px;filter:saturate(.9) contrast(1.03)}
.hero__cap{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding-top:12px;border-top:1px solid var(--line)}
.hero__cap span:first-child{font-weight:600;color:var(--ink)}
.hero__note{position:absolute;top:-26px;inset-inline-end:-14px;z-index:2;background:var(--sheet);padding:8px 16px 4px;border:1px solid var(--line);border-radius:2px;transform:rotate(-4deg);pointer-events:none}
.hero__note .hand{font-size:clamp(24px,1.6vw + 12px,34px);white-space:nowrap}

.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin-top:clamp(56px,7vw,104px)}
.proof li{display:flex;flex-direction:column;gap:6px;padding-top:24px;min-width:0}
.proof li+li{border-inline-start:1px solid var(--line);padding-inline-start:clamp(16px,2.4vw,32px)}
.proof__n{font-family:var(--f-display);font-weight:var(--w-heavy);font-stretch:var(--s-heavy);font-size:clamp(36px,3.2vw,52px);line-height:1;color:var(--ink)}
.proof span{font-size:16px;line-height:1.4;color:var(--muted)}
.proof__link{display:flex;flex-direction:column;gap:6px;text-decoration:none}
.proof__link:hover .proof__n{color:var(--pen)}
.stars{color:#86661C;letter-spacing:.08em;font-size:14px}

@keyframes hero-hair{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* no blur filter: it waits for the main thread, which on a slow phone held the core line back ~1.8 s (29.10) */
@keyframes hero-jolt{0%{opacity:0;transform:translateY(.22em) scale(1.06)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes hero-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.hero__l1{animation:hero-hair 1.3s var(--ease) both}
.hero__l2 .w,.hero__l3 .w{animation:hero-jolt .85s cubic-bezier(.25,1.35,.45,1) both}
.hero__l2 .w:nth-child(1){animation-delay:.5s}
.hero__l2 .w:nth-child(2){animation-delay:.62s}
.hero__l3 .w:nth-child(1){animation-delay:.78s}
.hero__l3 .w:nth-child(2){animation-delay:.9s}
/* The lead and the CTA arrive with the headline, not after it: a visitor from a video decides in the first second. */
.hero__lead,.hero__ctas,.hero__micro{animation:hero-in .5s var(--ease) both;animation-delay:.3s}
.hero__ctas{animation-delay:.38s}.hero__micro{animation-delay:.44s}
.hero__mark{animation:mark-draw 1.1s var(--ease) both;animation-delay:2s}
.hero__photo{animation:hero-in 1.2s var(--ease) both;animation-delay:.3s}
.hero__note{animation:rv-fade .9s var(--ease) both;animation-delay:2.1s}
.proof{animation:rv-fade 1s var(--ease) both;animation-delay:1.7s}

@media (max-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:56px}
  .hero__portrait{justify-self:start;width:min(calc(100% - 16px),420px)}
  .hero__photo::before{transform:translate(-12px,12px)}
  .hero__note{top:-18px;inset-inline-end:-6px}
  }
@media (max-width:640px){
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof li:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .proof li{padding-bottom:20px}
  .proof li:nth-child(n+3){border-top:1px solid var(--line)}
  .hero__ctas .btn{flex:1 1 100%}
  /* the free-first-call explainer has to fit the first screen of an in-app browser (390x664) */
  .hero{padding-top:20px}
  .hero__title{margin-bottom:18px}
  .hero__ctas{margin-top:20px;gap:10px}
  .hero__micro{margin-top:10px}
  /* external review 11.11 (ChatGPT + Gemini): one main button on the phone; "try the moment" is a quiet link */
  .hero__ctas .btn.hero__try{flex:0 0 auto;align-self:flex-start;min-height:44px;padding:0 0 2px;gap:8px;font-size:17px;
    border:0;border-bottom:1.5px solid var(--line-strong);border-radius:0;background:none;color:var(--ink)}
  .hero__ctas .btn.hero__try .ico{inline-size:18px;block-size:18px}
  /* ...and the face, not the top of the head, is what shows at the bottom of the first screen */
  .hero__ctas{gap:4px}
  .hero__micro{margin-top:6px}
  .hero__grid{gap:36px}
  .hero__note{top:auto;bottom:62px}
  .hero__photo{aspect-ratio:1/1}
  .hero__photo img{object-position:50% 38%}
}

/* A/B hero_hook b (ops/EXPERIMENTS.md): its thin line is longer, so it gets smaller to keep the CTA and the explainer on the first screen */
html[data-ab-hero_hook="b"] .hero__l1{font-size:.56em;line-height:1.12}

/* 01b reviews_first (A/B, variant b only, Moshe 31.10): Google reviews verbatim right after the hero.
   Initial of the first name only. Text kept exactly as written (line breaks via pre-line). Arm a keeps the empty slot. */
.rv-slot{display:none}
.rv{background:var(--paper)}
.rv__head{max-width:46em;margin-bottom:clamp(36px,4.4vw,60px)}
.rv__title{line-height:1.02}
.rv__t1,.rv__t2{display:block}
.rv__note{margin-top:14px;max-width:36em}
.rv__list{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(24px,3vw,48px)}
.rv__card{margin:0;border-top:1px solid var(--line);padding-block:22px 28px;min-width:0}
.rv__text{margin:0}
.rv__text p{margin:0;font-size:clamp(17px,.5vw + 15px,19px);line-height:1.65;white-space:pre-line;overflow-wrap:anywhere;color:var(--text)}
.rv__by{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:14px;font-size:var(--fs-small);color:var(--muted)}
.rv__by b{color:var(--ink);font-weight:700}
.rv__by .stars{color:var(--pen);letter-spacing:1px}
.rv__score{display:inline-flex;align-items:baseline;gap:8px;margin-top:16px;font-size:var(--fs-small);color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.rv__score .stars{color:var(--pen);letter-spacing:1px}
.rv__more{margin-top:8px}
.rv__more > summary{list-style:none;cursor:pointer}
.rv__more > summary::-webkit-details-marker{display:none}
.rv__more[open] > summary{display:none}
.rv__btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border:1.5px solid var(--line-strong);border-radius:var(--radius);font-weight:600;color:var(--ink);margin-top:12px}
.rv__btn:focus-visible{outline:3px solid var(--pen);outline-offset:2px}
.rv__all{margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--line);padding-top:20px}
/* B shows every Google review in full here, so #words drops its own rating, featured excerpt and quote wall (no double showing). */
html[data-ab-reviews_first="b"] .words__rating,
html[data-ab-reviews_first="b"] .words__feature,
html[data-ab-reviews_first="b"] .words__wall{display:none}
@media (min-width:900px){ .rv__list{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start} }

/* 02 voice: the reader's own inner voice, the night after the fight. A cloud of overheard thoughts on ink,
   then the turn ("it was learned") and the new voice in handwriting. Everything is visible at rest. */
.voice__head{margin-bottom:clamp(48px,6vw,96px)}

/* ---------- the cloud ---------- */
.voice__cloud{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;
  column-gap:clamp(28px,4.2vw,72px);row-gap:clamp(20px,2.6vw,40px)}
.voice__p{--o:.7;min-width:0;margin:0;font-family:var(--f-display);color:var(--on-ink);text-wrap:balance;
  opacity:var(--o);transition:opacity 1.1s ease}
.voice__p.is-lit{opacity:1;transition-duration:.7s}

/* size: five steps, mobile floor 20px, desktop ceiling 46px */
.voice__p--xl{font-size:clamp(28px,3.4vw,46px);line-height:1.12}
.voice__p--l{font-size:clamp(26px,2.7vw,38px);line-height:1.15}
.voice__p--m{font-size:clamp(23px,2.1vw,30px);line-height:1.25}
.voice__p--s{font-size:clamp(20px,1.65vw,24px);line-height:1.35}

/* two voices of the display face */
.voice__p--hair{font-weight:var(--w-hair);font-stretch:var(--s-hair)}
.voice__p--med{font-weight:500;font-stretch:92%}

/* per-phrase brightness, scatter and measure (desktop) */
.voice__p:nth-child(1){--o:.88;max-width:15em;margin-block-start:6px}
.voice__p:nth-child(2){--o:.7;margin-block-start:34px;margin-inline-start:clamp(0px,3vw,48px)}
.voice__p:nth-child(3){--o:.5;margin-block-start:0}
.voice__p:nth-child(4){--o:.92;max-width:17em;margin-inline-start:clamp(0px,5vw,84px);margin-block-start:14px}
.voice__p:nth-child(5){--o:.76;margin-block-start:30px}
.voice__p:nth-child(6){--o:.52;margin-block-start:4px;margin-inline-start:clamp(0px,2vw,32px)}
.voice__p:nth-child(7){--o:.86;margin-block-start:26px}
.voice__p:nth-child(8){--o:.66;max-width:19em;margin-inline-start:clamp(0px,6vw,96px);margin-block-start:8px}
.voice__p:nth-child(9){--o:.6;margin-block-start:0;margin-inline-start:clamp(0px,2vw,32px)}
.voice__p:nth-child(10){--o:.56;margin-block-start:32px}
.voice__p:nth-child(11){--o:.82;max-width:16em;margin-block-start:10px;margin-inline-start:clamp(0px,4vw,64px)}
.voice__p:nth-child(12){--o:.9;margin-block-start:28px}

/* ---------- the turn ---------- */
.voice__turn{margin-top:clamp(64px,8vw,128px);padding-top:clamp(40px,5vw,72px);border-top:1px solid var(--line-on-ink);
  display:flex;flex-direction:column;gap:.1em;
  font-family:var(--f-display);font-size:clamp(32px,4vw,64px);line-height:1.1;text-wrap:balance}
.voice__t1{max-width:18em;font-weight:var(--w-heavy);font-stretch:var(--s-heavy);color:var(--on-ink)}
.voice__t2{max-width:18em;font-weight:var(--w-hair);font-stretch:var(--s-hair);color:var(--on-ink-muted)}

/* ---------- the new voice ---------- */
.voice__new{display:block;width:fit-content;max-width:100%;margin-top:clamp(56px,7vw,104px);margin-inline-start:clamp(0px,7vw,112px);
  rotate:-1.2deg;transform-origin:right center}
.voice__hand{font-size:clamp(40px,5vw,76px);line-height:1.12;text-wrap:balance}
.voice__ul{inline-size:100%;block-size:clamp(14px,1.5vw,22px);margin-top:clamp(6px,.8vw,12px);overflow:visible;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.voice__ul path{vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:0}

.voice__foot{margin-top:clamp(40px,5vw,72px)}

/* the pen draws the underline right to left once the block is revealed */
@keyframes voice-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.rv-in .voice__ul path{animation:voice-draw 1.3s var(--ease) both;animation-delay:calc(var(--d,0ms) + 700ms)}

/* ---------- mobile: a loose left/right staggered stack ---------- */
@media (max-width:760px){
  .voice__cloud{flex-direction:column;align-items:stretch;row-gap:22px}
  .voice__p{max-width:86%;margin:0;align-self:flex-start;text-align:start;text-wrap:pretty;opacity:max(var(--o),.72)}
  .voice__p:nth-child(n){max-width:86%;margin:0}
  .voice__p:nth-child(even){align-self:flex-end;text-align:end}
  .voice__p--xl{font-size:clamp(26px,7.4vw,30px)}
  .voice__p--l{font-size:clamp(24px,6.8vw,28px)}
  .voice__p--m{font-size:clamp(22px,6vw,26px)}
  .voice__p--s{font-size:20px}
  .voice__new{margin-inline-start:0;rotate:-1deg}
}

/* 03 moment: the simulator. Choices on the right (RTL start), results on the left and sticky on desktop.
   Calm and tactile: big forgiving buttons, one ink panel (what was heard), one notebook card (what to say). */
.sim{--sim-gap:clamp(48px,5.5vw,88px)}

/* ---------- header ---------- */
.sim__head{margin-bottom:clamp(44px,5.5vw,80px)}
.sim__h2>span{display:block}
.sim__lead{margin-top:clamp(22px,2.4vw,32px);color:var(--text)}

/* ---------- workspace ---------- */
.sim__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,7vw,64px)}
.sim__choose{display:flex;flex-direction:column;gap:clamp(44px,5vw,56px);min-width:0;container:sim-choose/inline-size}
.sim__results{display:flex;flex-direction:column;gap:clamp(30px,2.6vw,36px);min-width:0}
@media (min-width:1000px){
  .sim__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:var(--sim-gap);align-items:start}
  .sim__results{position:sticky;top:100px}
}
/* a short window cannot hold a sticky column: let it scroll with the page */
@media (min-width:1000px) and (max-height:740px){
  .sim__results{position:static}
}

/* ---------- step titles: a real sequence, numeral + title ---------- */
.sim__titlebar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;margin-bottom:clamp(16px,2vw,22px)}
.sim__title{display:flex;align-items:baseline;gap:14px;min-width:0;font-family:var(--f-display);
  font-size:clamp(22px,1vw + 17px,28px);line-height:1.2;font-weight:700;font-stretch:88%;color:var(--ink);text-wrap:balance}
.sim__n{flex:none;font-weight:var(--w-heavy);font-stretch:var(--s-heavy);font-size:1.5em;line-height:.8;color:var(--pen);
  font-variant-numeric:lining-nums;padding-inline-end:14px;border-inline-end:1px solid var(--line-strong)}
.sim__tag{display:inline-block;padding:2px 12px;border:1px solid var(--line-strong);border-radius:4px;
  font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
.sim__tag[hidden]{display:none}

/* ---------- choice buttons ---------- */
.sim__opts{display:grid;gap:12px}
.sim__opts--sit,.sim__opts--rea{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:599px){
  .sim__opts--sit{grid-template-columns:minmax(0,1fr)}
}
/* narrow desktop column: one situation per row so nothing gets cramped */
@container sim-choose (max-width:459px){
  .sim__opts--sit{grid-template-columns:minmax(0,1fr)}
}

.sim__opt{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;min-height:48px;margin:0;
  padding:clamp(16px,1.8vw,22px);text-align:start;color:var(--text);background:transparent;
  border:1.5px solid var(--line-strong);border-radius:var(--radius);-webkit-tap-highlight-color:transparent;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
@media (hover:hover){
  .sim__opt:hover{background:var(--paper);border-color:var(--ink)}
}
.sim__opt:active{transform:translateY(1px)}
.sim__opt[aria-pressed="true"]{background:var(--sheet);border-color:var(--ink)}

.sim__opt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sim__opt-title{min-width:0;font-weight:600;font-size:20px;line-height:1.3;color:var(--ink);text-wrap:balance}
.sim__opt--rea .sim__opt-title{font-weight:700}
.sim__opt-desc{font-size:var(--fs-small);line-height:1.5;color:var(--muted);text-wrap:pretty}
.sim__opt-line{margin-top:auto;padding-top:12px;font-family:var(--f-display);font-weight:230;font-stretch:var(--s-hair);
  font-size:22px;line-height:1.35;color:var(--ink);text-wrap:balance}
.sim__opt--sit .sim__opt-desc{margin-bottom:6px}

/* the small check badge: an empty ring while unselected, so every card reads as a choice */
.sim__check{flex:none;display:grid;place-items:center;inline-size:26px;block-size:26px;margin-top:1px;border-radius:50%;
  border:1.5px solid var(--line-strong);color:var(--on-ink);
  transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.sim__check .ico{inline-size:16px;block-size:16px;opacity:0;transform:scale(.5);
  transition:opacity .2s var(--ease),transform .35s cubic-bezier(.25,1.35,.45,1)}
.sim__opt[aria-pressed="true"] .sim__check{background:var(--ink);border-color:var(--ink)}
.sim__opt[aria-pressed="true"] .sim__check .ico{opacity:1;transform:none}
.sim__opt--rea{padding:clamp(14px,1.5vw,18px) clamp(16px,1.6vw,20px)}
.sim__opt--rea .sim__check{inline-size:24px;block-size:24px}
.sim__opt--rea .sim__check .ico{inline-size:15px;block-size:15px}

/* ---------- crossfade ---------- */
.sim__swap{transition:opacity .35s var(--ease)}
.sim__swap.is-out{opacity:0;transition-duration:.15s}
@keyframes sim-mark{from{background-size:0% 100%}to{background-size:100% 100%}}
.sim__say .sim__mark.is-draw{background-position:right 0;animation:sim-mark .9s var(--ease) .3s both}

/* ---------- step 3: what the other side heard ---------- */
.sim__heard{padding:clamp(24px,2.7vw,36px);background:var(--ink);color:var(--on-ink);border-radius:var(--radius)}
.sim__heard-text{font-family:var(--f-display);font-size:clamp(24px,2.2vw,34px);
  line-height:1.32;font-weight:400;color:var(--on-ink);text-wrap:pretty}
.sim__heard-note{margin-top:clamp(18px,2vw,26px);padding-top:clamp(14px,1.6vw,18px);border-top:1px solid var(--line-on-ink);
  max-width:34em;font-size:var(--fs-small);line-height:1.55;color:var(--on-ink-muted)}

/* ---------- step 4: how it sounds in כוח שקט ---------- */
.sim__card{container:sim-card/inline-size;background-color:var(--sheet);border:1px solid var(--line);border-radius:var(--radius)}
.sim__say{padding:clamp(18px,2.2vw,26px) clamp(22px,2.6vw,36px) clamp(22px,2.4vw,30px);border-bottom:1px solid var(--line)}
.sim__lbl{display:block;font-family:var(--f-hand);font-size:26px;line-height:32px;color:var(--pen)}
.sim__say-text{margin-top:6px;font-family:var(--f-display);font-size:clamp(26px,2.6vw,40px);line-height:1.22;
  font-weight:var(--w-heavy);font-stretch:var(--s-heavy);color:var(--ink);text-wrap:balance}
.sim__notes{--lh:32px;display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:var(--lh) clamp(22px,2.6vw,36px)}
.sim__col{min-width:0}
.sim__col+.sim__col{margin-top:var(--lh)}
.sim__col-text{font-size:18px;line-height:var(--lh);color:var(--text)}
@container sim-card (min-width:560px){
  .sim__notes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,2.6vw,36px)}
  .sim__col+.sim__col{margin-top:0}
}

/* ---------- closing ---------- */
.sim__foot{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;
  margin-top:clamp(52px,6vw,88px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.sim__close{max-width:30em;font-size:var(--fs-body);line-height:1.65;text-wrap:pretty}
.sim__actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.sim__cta{min-width:min(100%,340px)}
.sim__reset{display:inline-flex;align-items:center;min-height:48px;margin:0;padding:0;background:none;border:0;
  font-size:18px;line-height:1.3;color:var(--ink);-webkit-tap-highlight-color:transparent}
.sim__reset .link-arrow{transition:border-color .25s var(--ease)}
.sim__reset:hover .link-arrow{border-color:var(--ink)}
@media (min-width:1000px){
  .sim__foot{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:var(--sim-gap)}
}
@media (max-width:599px){
  .sim__cta{width:100%}
}

/* 04 after: the transformation. A struck-through "from" beside a confident "to", and the one big quote.
   Pen-blue is the editor's hand: strike lines, arrows. The compass card left on 11.11 (external review: it repeated the method section). */
.after__head{margin-bottom:clamp(56px,6vw,96px)}
.after__title{display:flex;flex-direction:column}
.after__t1{color:var(--ink)}
.after__lead{margin-top:clamp(24px,3vw,40px)}

/* ---------- ledger: from -> to ---------- */
.after__cols,.after__row{display:grid;grid-template-columns:minmax(0,.78fr) clamp(64px,8vw,120px) minmax(0,1.5fr);align-items:center}
.after__cols{padding-bottom:14px;border-bottom:1px solid var(--line-strong)}
.after__col{font-size:var(--fs-small);font-weight:600;line-height:1.3;color:var(--muted)}
.after__col--from{grid-column:1}
.after__col--to{grid-column:3}

.after__row{padding-block:clamp(20px,2.2vw,30px);border-bottom:1px solid var(--line)}

.after__from{position:relative;justify-self:start;max-width:100%;padding-inline:2px;text-decoration:none;
  font-size:clamp(18px,.5vw + 15px,21px);line-height:1.4;color:var(--muted)}
.after__from::after{content:"";position:absolute;inset-inline:0 -8px;top:50%;border-top:1.5px solid var(--pen);
  transform:rotate(-1deg);transform-origin:50% 50%;pointer-events:none}

.after__arr{display:grid;place-items:center;color:var(--pen)}
.after__ico{inline-size:24px;block-size:24px}
.after__ico--v{display:none}

.after__to{text-decoration:none;font-style:normal;font-weight:600;color:var(--ink);
  font-size:clamp(20px,.9vw + 14px,24px);line-height:1.35;text-wrap:balance}


/* ---------- featured quote ---------- */
.after__quote{margin:clamp(88px,10vw,168px) 0 0}
.after__q{margin:0;max-width:22em;font-size:clamp(30px,3.6vw,56px);line-height:1.2;
  font-weight:var(--w-hair);font-stretch:var(--s-hair);text-wrap:balance}
.after__src{display:flex;align-items:center;gap:14px;margin-top:clamp(24px,3vw,40px)}
.after__src::before{content:"";inline-size:36px;block-size:1px;background:currentColor;opacity:.7}
.after__src .stars{font-size:16px}

/* ---------- motion (content is complete at rest; these only play once a block is revealed) ---------- */
@keyframes after-strike{from{clip-path:inset(-3px 0 -3px 100%)}to{clip-path:inset(-3px 0 -3px 0)}}
.rv-in .after__from::after{animation:after-strike .8s var(--ease) both;animation-delay:calc(var(--d,0ms) + 520ms)}

/* ---------- narrow screens ---------- */
@media (min-width:1000px){
  .after__q{text-indent:-.3em}  /* hang the opening mark */
}
@media (max-width:760px){
  .after__cols{display:none}
  .after__row{grid-template-columns:minmax(0,1fr);row-gap:10px;padding-block:24px}
  .after__arr{place-items:center start}
  .after__ico{inline-size:22px;block-size:22px}
  .after__ico--h{display:none}
  .after__ico--v{display:block}

}

/* 05 method: the wordmark moment, then a real sequence (numbered), then one object that is a page: the notebook. */
.method{--num-w:clamp(60px,7.4vw,112px);--num-gap:clamp(16px,2vw,28px);--side-w:540px;--col-gap:clamp(48px,6vw,88px)}

/* header */
.method__head{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px);margin-bottom:clamp(56px,7vw,104px)}
.method__head-main{min-width:0}
.method__title{font-size:clamp(64px,9vw,150px);line-height:.92;letter-spacing:-.012em;margin-bottom:clamp(14px,1.8vw,24px)}
.method__sub{font-family:var(--f-display);font-weight:var(--w-hair);font-stretch:var(--s-hair);font-size:clamp(24px,2.4vw,38px);line-height:1.2;color:var(--muted)}
.method__sub span{display:inline-block}
.method__lead{margin:0;max-width:26em}

/* body: sequence | notebook */
.method__body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(56px,7vw,96px)}
.method__flow{min-width:0;border-bottom:1px solid var(--line)}

.method__step{display:grid;grid-template-columns:var(--num-w) minmax(0,1fr);column-gap:var(--num-gap);align-items:start;
  padding-block:clamp(28px,3.2vw,44px);border-top:1px solid var(--line);min-width:0}
.method__n{grid-column:1;grid-row:1 / span 3;font-family:var(--f-display);font-weight:var(--w-heavy);font-stretch:var(--s-heavy);
  font-size:clamp(56px,6vw,96px);line-height:1;color:var(--ink);margin-top:-.05em}
.method__name{grid-column:2;grid-row:1;min-width:0}
.method__text{grid-column:2;grid-row:2;margin-top:.6em;max-width:36em;text-wrap:pretty}
.method__out{grid-column:2;grid-row:3;margin-top:clamp(14px,1.6vw,22px);line-height:1.3;text-wrap:pretty}
.method__out-lbl{font-size:var(--fs-small);color:var(--muted);margin-inline-end:6px}
.method__out .hand{font-size:clamp(26px,1vw + 17px,32px);line-height:1.3}

/* sixth row: the compass, no numeral */
.method__step--compass .method__glyph{grid-column:1;grid-row:2 / span 2;inline-size:56px;block-size:56px;fill:none;stroke:var(--pen);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;margin-top:.1em}
.method__after{grid-column:2;grid-row:1;font-size:var(--fs-small);line-height:1.4;color:var(--muted);margin-bottom:8px}
.method__step--compass .method__name{grid-row:2}
.method__step--compass .method__text{grid-row:3}

/* the notebook page */
.method__side{min-width:0}
.method__page{--mg:156px;position:relative;background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius);
  transform:rotate(-.6deg);box-shadow:0 30px 60px -30px rgba(14,26,51,.35);width:min(100%,640px);margin-inline:auto}
.method__page::before{content:"";position:absolute;inset-block:0;inset-inline-start:var(--mg);inline-size:1px;background:var(--margin);pointer-events:none}
.method__page-title{font-family:var(--f-display);font-weight:var(--w-heavy);font-stretch:var(--s-heavy);font-size:clamp(32px,2.8vw,44px);line-height:1.1;
  color:var(--ink);text-wrap:balance;padding:clamp(28px,3vw,40px) 20px 14px;padding-inline-start:calc(var(--mg) + 22px)}

.method__sheet{--lh:48px;--sit:7px;display:grid;grid-template-columns:var(--mg) minmax(0,1fr);border-top:1px solid var(--rule);padding-block-end:var(--lh);border-radius:0 0 var(--radius) var(--radius)}
.method__lines{grid-column:2;grid-row:1;counter-reset:ln;font-size:clamp(23px,.7vw + 15px,28px);line-height:var(--lh);padding-inline:22px 18px;min-width:0}
.method__lines li{position:relative;counter-increment:ln;padding-inline-start:1.6em;top:var(--sit)}
.method__lines li::before{content:counter(ln) ".";position:absolute;inset-inline-start:0;top:0}

.method__notes{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--lh) * 1.5);padding:calc(var(--lh) * .9) 20px 0 14px;min-width:0}
.method__note{font-size:clamp(21px,.4vw + 16px,24px);line-height:1.15;margin:0;max-width:100%}
.method__note--a{transform:rotate(-5deg);transform-origin:100% 50%}
.method__note--b{transform:rotate(3.5deg);transform-origin:100% 50%}
.method__circled{position:relative;display:inline-block;padding:.12em .1em}
.method__circle{position:absolute;inset-block-start:-.5em;inset-inline-start:-.6em;inline-size:calc(100% + 1.2em);block-size:calc(100% + .95em);overflow:visible;
  fill:none;stroke:var(--pen);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

/* the circle draws itself once the page scrolls into view (only when reveal armed it) */
@keyframes method-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.rv-in .method__circle path{stroke-dasharray:1;animation:method-draw 1.3s var(--ease) both;animation-delay:.9s}

/* focus session */
.method__focus{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px clamp(24px,4vw,64px);
  margin-top:clamp(56px,6vw,88px)}
.method__focus-text{max-width:36em;text-wrap:pretty}
.method__focus-text b{font-weight:600;color:var(--ink)}
.method__focus .link-arrow{position:relative;flex:none}
.method__focus .link-arrow::before{content:"";position:absolute;inset:-14px -10px}

@media (min-width:1180px){
  .method__head{grid-template-columns:minmax(0,1fr) minmax(0,var(--side-w));column-gap:var(--col-gap);align-items:end}
  .method__lead{padding-bottom:.5em}
  .method__body{grid-template-columns:minmax(0,1fr) minmax(0,var(--side-w));column-gap:var(--col-gap);align-items:start}
  .method__page{width:100%}
}

@media (min-width:1180px) and (min-height:760px){
  .method__side{position:sticky;top:108px}
}

@media (max-width:640px){
  .method{--num-w:56px}
  .method__step{column-gap:16px}
  .method__n{grid-row:1;align-self:center;margin-top:0;font-size:56px}
  .method__name{align-self:center}
  .method__text{grid-column:1 / -1;grid-row:2;margin-top:16px}
  .method__out{grid-column:1 / -1;grid-row:3}
  .method__step--compass .method__glyph{grid-row:1 / span 2;align-self:center;margin-top:0;inline-size:48px;block-size:48px}
  .method__step--compass .method__text{grid-row:3}
  .method__after{margin-bottom:4px}

  .method__page{--mg:44px}
  .method__page-title{padding-inline-start:calc(var(--mg) + 16px);padding-inline-end:16px}
  .method__sheet{--lh:44px;grid-template-columns:minmax(0,1fr);padding-inline-start:var(--mg)}
  .method__lines{grid-column:1;padding-inline:16px 14px}
  .method__notes{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:calc(var(--lh) * .9) 28px;padding:calc(var(--lh) * .9) 14px 0 16px}
  .method__note--a{transform-origin:100% 50%}
}

/* Photos (approved by Moshe 31.10): a wide session shot under the head, the notebook shot closing the steps. */
.method__photo{margin:0 0 clamp(56px,7vw,96px);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.method__photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 30%}
.method__hands{margin:clamp(36px,4vw,52px) 0 0;border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.method__hands img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
@media (min-width:900px){ .method__photo img{aspect-ratio:2/1;object-position:50% 8%} }
/* The session photo only (Moshe, 31.10: its color read as AI): black and white with a light ink wash, like the "about" photo. */
.method__photo{position:relative}
.method__photo img{filter:grayscale(1) contrast(1.08)}
.method__photo::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:.22;mix-blend-mode:multiply;pointer-events:none}

/* 06 different: four equals, not a sequence. Hairline-topped columns of text; no numbers, no cards, no icons. */
.diff__head{margin-bottom:clamp(52px,6.4vw,96px)}
.diff__title{max-width:11em;line-height:1}

.diff__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,7vw,120px);row-gap:clamp(52px,6vw,96px)}
.diff__item{min-width:0;border-top:1px solid var(--line-strong);padding-top:clamp(28px,3.2vw,48px)}
.diff__t{font-size:clamp(28px,2.7vw,42px);line-height:1.14;max-width:16em;text-wrap:balance}
.diff__item p{margin-top:clamp(16px,1.8vw,24px);max-width:29em;text-wrap:pretty}

@media (max-width:760px){
  .diff__grid{grid-template-columns:minmax(0,1fr);row-gap:44px}
  .diff__item{padding-top:26px}
}

/* 07 about: the one dark band. Text on the start side, a toned-down portrait opposite (different treatment from the hero). */
.about__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);column-gap:clamp(56px,8vw,128px);align-items:start}
.about__text{min-width:0}
.about__title{font-size:clamp(40px,4.6vw,76px);line-height:1.04;margin-bottom:clamp(32px,3.8vw,56px)}
.about__title span{display:block}
.about__l2{color:var(--on-ink)}

.about__prose p:first-child{font-size:var(--fs-lead);line-height:1.6}
.about__prose p{max-width:34em}

.about__facts{margin-top:clamp(40px,4.4vw,64px);border-top:1px solid var(--line-on-ink);max-width:34em}
.about__facts li{display:flex;align-items:flex-start;gap:14px;padding-block:14px;border-bottom:1px solid var(--line-on-ink);line-height:1.5}
.about__facts .ico{flex:none;inline-size:20px;block-size:20px;margin-top:.22em;color:var(--marker)}
.about__facts span{min-width:0}

.about__quote{margin:clamp(56px,6.4vw,96px) 0 0;padding:0}
.about__quote blockquote{margin:0}
.about__quote p{font-family:var(--f-display);font-weight:var(--w-hair);font-stretch:var(--s-hair);font-size:clamp(28px,3vw,46px);line-height:1.2;
  color:var(--on-ink);text-wrap:balance;max-width:18em}
.about__quote .quote-mark{color:var(--marker)}
.about__src{display:flex;align-items:center;gap:14px;margin-top:22px;color:var(--on-ink-muted)}
.about__src::before{content:"";inline-size:28px;block-size:1px;background:currentColor;opacity:.7}

.about__portrait{margin:0;justify-self:end;width:min(100%,440px);min-width:0}
.about__photo{position:relative;aspect-ratio:4/5;border-radius:2px;isolation:isolate;outline:1px solid var(--line-on-ink);outline-offset:12px;background:var(--ink-2)}
.about__photo img{inline-size:100%;block-size:100%;object-fit:cover;border-radius:2px;filter:grayscale(1) contrast(1.05)}
.about__photo::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--ink);opacity:.25;mix-blend-mode:multiply;pointer-events:none}

@media (min-width:900px) and (min-height:720px){
  .about__portrait{position:sticky;top:116px}
}
@media (max-width:899px){
  .about__grid{grid-template-columns:minmax(0,1fr);row-gap:64px}
  .about__portrait{order:-1;position:static;justify-self:start;width:min(calc(100% - 14px),420px);margin-inline-start:0}
}

/* 08 words: testimonials as a calm editorial wall. One quote is set very large, the rest in columns with hairline tops. */
.words__head{display:flex;flex-direction:column;gap:28px;margin-bottom:clamp(48px,6vw,88px)}
.words__title{min-width:0}
.words__title .kicker{margin-bottom:clamp(20px,2.4vw,32px)}

.words__rating{display:flex;align-items:center;gap:18px;flex:none}
.words__n{font-family:var(--f-display);font-weight:var(--w-heavy);font-stretch:var(--s-heavy);font-size:clamp(40px,3.2vw,48px);line-height:1;color:var(--ink)}
.words__side{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.words__side .stars{font-size:20px;line-height:1}
.words__side .link-arrow{font-size:var(--fs-small)}
.words__side .ico{inline-size:16px;block-size:16px;flex:none}

/* the featured quote */
.words__feature{margin:0 0 clamp(64px,8vw,128px)}
.words__big{margin:0;max-width:16em;font-family:var(--f-display);font-weight:var(--w-hair);font-stretch:var(--s-hair);font-size:clamp(36px,5vw,80px);line-height:1.1;letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
.words__src{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,2.6vw,36px);font-size:var(--fs-small);line-height:1.4;color:var(--muted)}
.words__src::before{content:"";inline-size:36px;block-size:1px;background:currentColor;opacity:.7}

/* the wall */
.words__wall{column-count:1;column-gap:clamp(32px,4vw,64px)}
.words__item{margin:0;break-inside:avoid;border-top:1px solid var(--line);padding-block:24px clamp(36px,4vw,56px)}
.words__q{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(20px,1.6vw,26px);line-height:1.45;color:var(--ink);text-wrap:pretty}
.words__q .mark{white-space:nowrap}
.words__cap{margin-top:14px;font-size:var(--fs-small);line-height:1.4;color:var(--muted)}

@media (min-width:700px){
  .words__wall{column-count:2}
}
@media (min-width:760px){
  .words__head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:48px}
}
@media (min-width:1100px){
  .words__wall{column-count:3}
}

/* WhatsApp proof: the original screenshots, untouched, on a full-bleed ink band.
   With motion (08-words.js adds .is-stage): the band pins as a stage and the page scroll drives a deck.
   Each screenshot rises into the middle on its own, large, holds still to be read, then sinks back
   as the next one slides over it (spring-smoothed). Without JS or with reduced motion: a calm column of large screenshots. */
.words__wa{margin-top:clamp(64px,8vw,120px);margin-inline:calc(50% - 50vw);background:var(--ink);padding-block:clamp(56px,8vw,104px)}
.words__wa-pin{position:relative}
.words__shots{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vw,56px);padding-inline:12px}
.words__shot{inline-size:min(100%,720px);position:relative;transform-origin:50% 50%}
.words__shot img{display:block;inline-size:100%;block-size:auto}
.words__shot::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:var(--dim,0);pointer-events:none}
.words__wa-num,.words__wa-bar{display:none}

.words__wa.is-stage{padding-block:0}
.words__wa.is-stage .words__wa-pin{position:sticky;top:0;block-size:100vh;block-size:100svh;overflow:hidden;cursor:pointer;
  display:grid;grid-template-rows:minmax(0,1fr) auto;padding-block:calc(76px + 14px) 26px;
  background:radial-gradient(52% 40% at 50% 47%,rgba(234,220,124,.1),transparent 72%),
             radial-gradient(120% 80% at 50% 120%,rgba(25,42,76,.95),transparent 60%),var(--ink)}
.words__wa.is-stage .words__shots{display:grid;place-items:center;min-block-size:0;padding:0;gap:0}
.words__wa.is-stage .words__shot{grid-area:1 / 1;inline-size:min(var(--cw,90vw),calc(var(--ch,60vh) * var(--ar)));
  box-shadow:0 46px 90px -34px rgba(0,0,0,.82),0 0 0 1px rgba(238,240,234,.07);will-change:transform,opacity;backface-visibility:hidden}

/* the big rolling number behind the deck (an odometer driven by the same spring) */
.words__wa.is-stage .words__wa-num{display:flex;align-items:flex-start;gap:.06em;position:absolute;margin:0;z-index:0;pointer-events:none;
  right:clamp(20px,6vw,110px);top:50%;transform:translateY(-50%);
  font-family:var(--f-display);font-weight:var(--w-hair);font-stretch:var(--s-hair);font-size:clamp(120px,15vw,250px);line-height:1;
  color:var(--on-ink);opacity:.11;font-variant-numeric:lining-nums tabular-nums}
.words__wa-win{display:block;block-size:1em;overflow:hidden}
.words__wa-roll{display:block;will-change:transform}
.words__wa-roll span{display:block;block-size:1em}
.words__wa-of{font-size:.18em;letter-spacing:.06em;padding-top:.5em}

.words__wa.is-stage .words__wa-bar{display:flex;justify-content:center;gap:5px;padding-top:22px;position:relative;z-index:1}
.words__wa-bar span{inline-size:clamp(14px,3.2vw,26px);block-size:2px;background:var(--line-on-ink);border-radius:1px;overflow:hidden;position:relative}
.words__wa-bar span::before{content:"";position:absolute;inset:0;background:var(--marker);transform:scaleX(var(--f,0));transform-origin:100% 50%}

@media (max-width:999.98px){
  /* narrow screens: the number sits above the deck, centred */
  .words__wa.is-stage .words__wa-num{left:0;right:0;justify-content:center;top:calc(76px + 6px);transform:none;font-size:min(34vw,190px);opacity:.09}
}
@media (max-width:759.98px){
  /* room for the fixed WhatsApp bar at the bottom */
  .words__wa.is-stage .words__wa-pin{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}

/* 08b price: three tiers on ink, total price first and quiet (hairline serif), the full process first in reading order.
   Hairline-topped columns like "different"; the full process sits on the raised ink surface. */
.price__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(40px,7vw,120px);align-items:end;
  margin-bottom:clamp(52px,6.4vw,96px)}
.price__head .kicker{grid-column:1 / -1;margin-bottom:clamp(14px,1.6vw,22px)}
.price__title{line-height:1;max-width:9em}
.price__title .thin{display:block}
.price__lead{max-width:30em;text-wrap:pretty}
.price__intro .price__promise{margin-top:clamp(22px,2.4vw,30px);padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--line-on-ink);max-width:22em}

.price__grid{display:grid;grid-template-columns:1.12fr 1fr 1fr;column-gap:clamp(20px,3vw,44px);align-items:start}
.price__tier{min-width:0;display:flex;flex-direction:column;border-top:1px solid var(--line-on-ink);padding-top:clamp(26px,3vw,40px)}
.price__tier--main{background:var(--ink-2);border-top:2px solid var(--marker);border-radius:0 0 var(--radius) var(--radius);
  padding:clamp(26px,3vw,40px) clamp(22px,2.6vw,36px) clamp(28px,3vw,40px)}

.price__name{font-family:var(--f-display);font-weight:700;font-stretch:88%;font-size:clamp(26px,1.6vw + 16px,36px);line-height:1.15;color:var(--on-ink)}
.price__note{margin-top:6px;font-size:22px;line-height:1.2}
.price__meta{margin-top:14px;font-size:var(--fs-small);color:var(--on-ink-muted)}

.price__sum{margin-top:clamp(22px,2.4vw,32px);display:flex;align-items:baseline;gap:10px;color:var(--on-ink);line-height:1}
.price__n{font-family:var(--f-display);font-weight:var(--w-hair);font-stretch:var(--s-hair);font-size:clamp(58px,5.6vw,92px);letter-spacing:-.01em;
  font-variant-numeric:lining-nums}
.price__cur{font-family:var(--f-text);font-weight:500;font-size:clamp(20px,1.4vw,26px);color:var(--on-ink-muted)}
.price__per{margin-top:12px;font-size:18px;color:var(--on-ink-muted)}

.price__list{margin-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line-on-ink)}
.price__list li{padding-block:12px;border-bottom:1px solid var(--line-on-ink);font-size:18px;line-height:1.55;text-wrap:pretty}
.price__go{margin-top:clamp(22px,2.4vw,30px);align-self:flex-start}

.price__foot{margin-top:clamp(52px,6vw,88px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(40px,7vw,120px);row-gap:28px;align-items:center}
.price__promise{font-family:var(--f-display);font-weight:600;font-stretch:88%;font-size:clamp(23px,1.2vw + 17px,31px);line-height:1.3;color:var(--on-ink);text-wrap:balance}
.price__promise-lbl{display:block;font-size:.8em;margin-bottom:4px}
.price__promise-why{display:block;margin-top:12px;font-size:.8em;line-height:1.3;color:var(--on-ink)}
.price__pay{color:var(--on-ink-muted);max-width:40em}
.price__cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.price__cta .small{max-width:22em}

@media (max-width:1000px){
  .price__head{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .price__grid{grid-template-columns:minmax(0,1fr);row-gap:44px;max-width:34em}
  .price__foot{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .price__tier--main{margin-inline:calc(-1 * clamp(8px,3vw,14px));padding-inline:clamp(16px,4vw,22px)}
  .price__cta .btn{inline-size:100%}
}

/* The free first call as step one of the process (Moshe, 2.11): a quiet strip above the three options. */
.price__first{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(20px,3vw,40px);row-gap:6px;align-items:baseline;
  border:1px solid var(--line-on-ink);border-radius:var(--radius);padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,30px);margin-bottom:clamp(36px,4vw,56px)}
.price__first-k{grid-column:1 / -1;margin:0;color:var(--on-ink-muted)}
.price__first-t{font-family:var(--f-display);font-weight:700;font-stretch:88%;font-size:clamp(24px,1.4vw + 16px,32px);line-height:1.15;color:var(--on-ink);margin:0}
.price__first-x{color:var(--on-ink-muted);margin:0;max-width:44em;text-wrap:pretty}
@media (max-width:760px){ .price__first{grid-template-columns:minmax(0,1fr)} }

/* 5.11.2026 (moshe-pricing): the full process alone and large, the other two smaller under "אפשר גם" (not three equal cards:
   a middle option pulls, the compromise effect). */
.price__main{display:grid;grid-template-columns:minmax(0,1fr);row-gap:8px}
.price__main-a{display:flex;flex-direction:column;min-width:0}
.price__why{margin-top:10px;font-size:18px;line-height:1.5;color:var(--on-ink);max-width:28em;text-wrap:pretty}
.price__also{margin-top:clamp(40px,5vw,64px)}
.price__also-k{font:500 16px/1.2 var(--f-text);color:var(--on-ink-muted);margin:0 0 6px}
.price__alt{display:grid;grid-template-columns:minmax(0,1fr);row-gap:28px}
.price__opt{min-width:0;display:flex;flex-direction:column;border-top:1px solid var(--line-on-ink);padding-top:clamp(20px,2.4vw,28px)}
.price__opt .price__name{font-size:clamp(22px,1.2vw + 14px,28px)}
.price__opt .price__sum{margin-top:14px}
.price__opt .price__n{font-size:clamp(40px,3.4vw,58px)}
.price__opt-x{margin-top:10px;font-size:17px;line-height:1.55;color:var(--on-ink-muted);max-width:32em;text-wrap:pretty}
.price__terms{display:flex;flex-direction:column;gap:8px}
@media (min-width:1000px){
  .price__main{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:clamp(32px,5vw,72px);align-items:start}
  .price__main .price__list{margin-top:0}
  .price__alt{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px)}
}

/* 09 fit: who it is for. Hairline rows instead of boxes; the "less suitable" list is the quiet counterpart. */
.fit__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;margin-top:clamp(40px,5vw,72px)}
.fit__yes,.fit__no{min-width:0}

.fit__list{border-bottom:1px solid var(--line)}
.fit__list li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:18px;align-items:start;padding-block:22px;border-top:1px solid var(--line);font-size:clamp(19px,.3vw + 18px,20px);line-height:1.55;color:var(--ink);text-wrap:pretty}
.fit__ico{inline-size:22px;block-size:22px;margin-top:4px;color:var(--ink)}

.fit__h3{font-size:22px;line-height:1.35;padding-block:22px;color:var(--muted);text-wrap:balance}
.fit__no .fit__list li{color:var(--muted)}
.fit__no .fit__ico{color:var(--muted)}

.fit__safety{margin-top:clamp(48px,6vw,80px);border:1px solid var(--line-strong);border-radius:var(--radius);padding:clamp(20px,2.4vw,28px) clamp(20px,2.8vw,36px)}
.fit__safety p{max-width:52em;font-size:18px;line-height:1.7;color:var(--text)}
.fit__nums{display:block;margin-top:6px}
.fit__num{font-weight:600;color:var(--ink);white-space:nowrap}

@media (min-width:760px){
  .fit__h3{border-top:1px solid var(--line)}
  .fit__cols{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(48px,7vw,112px);align-items:start}
}

/* 10 faq: native details/summary. Sticky header on the right, hairline-separated questions on the left. */
.faq__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
.faq__head{min-width:0}
.faq__title{font-size:clamp(40px,4.4vw,68px)}
.faq__more{margin-top:clamp(28px,3vw,40px);font-size:17px;line-height:1.4;text-wrap:balance}
.faq__more .ico{inline-size:16px;block-size:16px;flex:none}

.faq__list{min-width:0;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding-block:20px;cursor:pointer;list-style:none;border-radius:var(--radius)}
.faq__q::-webkit-details-marker{display:none}
.faq__q::marker{content:""}
.faq__qt{min-width:0;font-family:var(--f-display);font-weight:600;font-size:clamp(21px,1.7vw,27px);line-height:1.3;color:var(--ink);text-wrap:balance;transition:color .25s var(--ease)}
.faq__q:hover .faq__qt{color:var(--pen)}
.faq__ico{flex:none;inline-size:26px;block-size:26px;color:var(--ink);transition:transform .35s var(--ease)}
.faq__item[open] .faq__ico{transform:rotate(45deg)}

.faq__a{padding-bottom:24px;font-size:clamp(18px,.3vw + 17px,19px)}
.faq__a p{max-width:38em}
.faq__item[open] .faq__a{animation:rv-fade .5s var(--ease) both}

@media (min-width:900px){
  .faq__grid{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(48px,7vw,112px);align-items:start}
  .faq__head{position:sticky;top:110px}
}

/* 11 contact: the one dark band that closes the page. Big quiet headline, a single raised panel to start the conversation. */
.contact__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);grid-template-rows:auto auto auto 1fr;
  column-gap:clamp(40px,6vw,112px);align-items:start}
.contact__head{grid-column:1;grid-row:1;min-width:0}
.contact__trust{grid-column:1;grid-row:2;min-width:0}
.contact__photo{grid-column:1;grid-row:3;min-width:0;margin:clamp(32px,4vw,48px) 0 0;max-width:340px;border-radius:var(--radius);overflow:hidden}
.contact__photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.contact__cap{grid-column:1;grid-row:4;min-width:0}
.contact__panel{grid-column:2;grid-row:1 / span 4;min-width:0}

.contact__title{font-size:clamp(52px,7vw,120px);line-height:.98;margin-bottom:clamp(24px,2.6vw,36px)}
.contact__em{color:var(--marker)}
.contact__lead{color:var(--on-ink);max-width:25em}

.contact__trust{max-width:30em;margin-top:clamp(32px,4vw,52px);border-top:1px solid var(--line-on-ink)}
.contact__trust li{display:flex;align-items:center;gap:14px;padding-block:14px;border-bottom:1px solid var(--line-on-ink);
  font-size:18px;line-height:1.5;color:var(--on-ink)}
.contact__trust .ico{inline-size:20px;block-size:20px;flex:none;color:var(--marker)}
.contact__cap{max-width:30em;margin-top:22px;color:var(--on-ink-muted);text-wrap:balance}

/* the composer */
.contact__panel{background:var(--ink-2);border:1px solid var(--line-on-ink);border-radius:var(--radius);padding:clamp(28px,3.2vw,40px)}
.composer__title{margin-bottom:22px}

.composer__topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;border:0;min-width:0}
.chip{position:relative;display:block;min-width:0;cursor:pointer}
.chip__input{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;margin:0;opacity:0;pointer-events:none}
.chip__face{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 14px;text-align:center;
  border:1px solid color-mix(in srgb,var(--on-ink) 30%,transparent);border-radius:var(--radius);
  font:600 18px/1.2 var(--f-text);color:var(--on-ink);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.chip:hover .chip__face{border-color:var(--on-ink-muted)}
.chip__ico{display:none;inline-size:18px;block-size:18px;flex:none}
.chip__input:checked + .chip__face{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.chip__input:checked + .chip__face .chip__ico{display:block}
.chip__input:focus-visible + .chip__face{outline:3px solid var(--marker);outline-offset:3px}


.composer__send{display:flex;inline-size:100%;min-height:62px;margin-top:28px;font-size:19px}
.composer__call{margin-top:14px;text-align:center;font-size:18px;line-height:1.5;color:var(--on-ink-muted)}
.composer__tel{display:inline-flex;align-items:center;min-height:48px;padding-inline:6px;color:var(--on-ink);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em}
.composer__tel:hover{text-decoration-thickness:2px}
.composer__tel span{user-select:text;-webkit-user-select:text}

@media (max-width:900px){
  .contact__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .contact__head,.contact__trust,.contact__photo,.contact__cap,.contact__panel{grid-column:1;grid-row:auto}
  .contact__photo{max-width:min(300px,100%)}
  .contact__panel{margin-top:clamp(36px,6vw,56px)}
  .contact__cap{margin-top:28px}
}

/* 12 footer + mobile CTA bar */
.site-footer{background:var(--paper);padding-block:clamp(48px,5vw,72px) clamp(32px,3.4vw,44px)}

.site-footer__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 40px;padding-bottom:clamp(28px,3vw,40px)}
.site-footer__brand{display:flex;align-items:baseline;gap:16px;color:var(--ink)}
.site-footer__name{font-family:var(--f-display);font-weight:820;font-stretch:80%;font-size:clamp(32px,2.4vw + 18px,44px);line-height:1;letter-spacing:-.005em}
.site-footer__sig{font-family:var(--f-display);font-size:clamp(19px,.8vw + 13px,24px);line-height:1;color:var(--muted);padding-inline-start:16px;border-inline-start:1px solid var(--line-strong)}
.site-footer__sig b{font-weight:var(--w-heavy);font-stretch:var(--s-heavy);color:var(--ink)}
.site-footer__sig i{font-style:normal;font-weight:var(--w-hair)}
.site-footer__tag{font-size:17px;line-height:1.5;color:var(--muted)}

.site-footer__links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 48px;
  padding-block:clamp(12px,1.4vw,18px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.site-footer__group{min-width:0}
.site-footer__group ul{display:flex;flex-wrap:wrap;gap:0 clamp(24px,2.6vw,40px)}
.site-footer__group a{display:inline-flex;align-items:center;min-height:48px;padding-block:6px;font-size:17px;line-height:1.35;
  color:var(--text);text-decoration:none;text-underline-offset:.28em;text-decoration-thickness:1px}
.site-footer__group a:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px}

.site-footer__bottom{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 40px;padding-top:clamp(22px,2.4vw,30px)}
.site-footer__legal{max-width:38em}

/* mobile CTA bar: hidden until base.js adds .is-on (past the hero, before the contact band) */
.cta-bar{display:none}
@media (max-width:759.98px){
  .cta-bar{display:flex;align-items:stretch;gap:10px;position:fixed;inset-inline:0;bottom:0;z-index:55;
    background:var(--ink);
    padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    transform:translateY(110%);visibility:hidden;
    transition:transform .35s var(--ease),visibility 0s linear .35s}
  .cta-bar.is-on{transform:none;visibility:visible;transition-delay:0s}
  /* one WhatsApp button on screen at a time: the header's steps aside while the bar is up */
  .site-header .btn--primary{transition:opacity .25s var(--ease),visibility 0s linear 0s}
  body:has(.cta-bar.is-on) .site-header .btn--primary{opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s linear .25s}
  .cta-bar :focus-visible{outline-color:var(--marker)}
  .cta-bar__main{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 12px;
    border-radius:var(--radius);background:var(--on-ink);color:var(--ink);text-decoration:none;
    font:600 18px/1.2 var(--f-text);text-align:center;transition:background-color .2s var(--ease),transform .16s var(--ease)}
  @media (hover:hover) and (pointer:fine){
    .cta-bar__main:hover{background:var(--sheet);color:var(--ink);text-decoration:none}
    .cta-bar__call:hover{background:var(--on-ink);color:var(--ink);text-decoration:none}
  }
  .cta-bar__main .ico{inline-size:22px;block-size:22px;flex:none}
  .cta-bar__call{flex:none;display:flex;align-items:center;justify-content:center;inline-size:54px;block-size:54px;
    border-radius:var(--radius);background:var(--ink-2);border:1px solid color-mix(in srgb,var(--on-ink) 30%,transparent);
    color:var(--on-ink);text-decoration:none;transition:transform .16s var(--ease)}
  
  .cta-bar__call .ico{inline-size:24px;block-size:24px}

  .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .site-footer__top{flex-direction:column;align-items:flex-start}
  .site-footer__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;align-items:start;padding-block:10px}
  .site-footer__group ul{flex-direction:column}
  .site-footer__bottom{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .cta-bar{transition:none}
}