/* Samt landing page on the app's brand (guidelines 2026-10-14): paper, plum ink and actions, orchid as
   expression, Markazi Text for display, Readex Pro for text. The page's one accent is the nuqta, the dots of
   سمت: a square turned 45 degrees with 18 percent corners. It frames every photograph, marks every step and,
   once, fills half the first screen. The phone (phone.css) takes the same palette through its --sp-* tokens. */

@font-face{font-family:"Markazi Text";src:url(/assets/fonts/app/markazitext-arabic.woff2) format("woff2");font-weight:400 700;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+202A-202E,U+2066-2069}
@font-face{font-family:"Markazi Text";src:url(/assets/fonts/app/markazitext-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Readex Pro";src:url(/assets/fonts/app/readexpro-arabic.woff2) format("woff2");font-weight:160 700;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+202A-202E,U+2066-2069}
@font-face{font-family:"Readex Pro";src:url(/assets/fonts/app/readexpro-latin.woff2) format("woff2");font-weight:160 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}

/* where the page margin falls, for content inside a panel that bleeds to 20px */
:root{--edge:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)))}
:root{
  --paper:#FDFAF6;--surface:#FFFFFF;--surface-2:#F7EFF2;
  --ink-900:#2B1322;--ink-800:#3F1E33;--ink-600:#68495C;
  --plum-800:#511D3B;--plum-700:#67274C;
  --orchid-600:#8C5277;--orchid-500:#B37298;--orchid-300:#D8B2C8;--orchid-100:#F5E9F0;
  --moss-600:#5F6F4E;--berry-600:#A83C4E;
  --display:"Markazi Text","Readex Pro",Georgia,serif;
  --body:"Readex Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(20px,4vw,56px);--maxw:1240px;--radius:20px;--nuqta-radius:18%;
  /* five type steps */
  --s-display:clamp(3.5rem,6.6vw,6.25rem);--s-h2:clamp(2.4rem,4.4vw,4rem);--s-statement:clamp(1.5rem,2.4vw,2.25rem);
  --s-lead:clamp(1.125rem,1.4vw,1.3125rem);--s-body:1.0625rem;
  --s-small:.9375rem;
  --section:clamp(120px,15vh,200px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--paper);color:var(--ink-800);font-family:var(--body);font-size:var(--s-body);line-height:1.6;font-weight:350;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
b{font-weight:600}
ol,ul{list-style:none}
.nx-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.nx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--plum-700);outline-offset:3px;border-radius:4px}
.nx-skip{position:absolute;top:12px;inset-inline-start:16px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--plum-700);color:#fff}
.nx-skip:not(:focus){inset-inline-start:-9999px}

.nx-h2{font-family:var(--display);font-size:var(--s-h2);font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--ink-900)}
html[lang="ar"] .nx-h2{line-height:1.3;letter-spacing:0}
.nx-h2 span{display:block}

/* Photographs sit in a rounded portrait frame that fills its column; the nuqta stays a small accent. */
:root{--nuqta-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M41 9Q50 0 59 9L91 41Q100 50 91 59L59 91Q50 100 41 91L9 59Q0 50 9 41Z'/%3E%3C/svg%3E")}
.nx-thumb{-webkit-mask:var(--nuqta-mask) center/100% 100% no-repeat;mask:var(--nuqta-mask) center/100% 100% no-repeat}
.nx-photo{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:28px;background:var(--orchid-100)}
.nx-photo picture{position:absolute;inset:0}
.nx-photo img{width:100%;height:100%;object-fit:cover}

/* ---- buttons: one shape, the pill ---- */
.nx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border:0;border-radius:999px;
  background:var(--plum-700);color:#fff;font:inherit;font-weight:500;cursor:pointer;transition:background-color .2s,color .2s,transform .12s ease-out}
.nx-btn:hover{background:var(--plum-800)}
.nx-btn:active{transform:scale(.97)}
.nx-btn-light{background:var(--paper);color:var(--plum-700)}
.nx-btn-light:hover{background:var(--orchid-100)}

/* ---- header ---- */
.nx-bar{position:sticky;top:0;z-index:50;background:var(--paper)}
.nx-bar-in{display:flex;align-items:center;justify-content:space-between;height:76px}
.nx-logo img{width:104px;height:auto}
html[lang="ar"] .nx-logo img{width:120px}
.nx-nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);font-size:var(--s-small)}
.nx-nav a{padding-block:12px;color:var(--ink-800);transition:color .2s}
.nx-nav a:hover{color:var(--plum-700)}
.nx-lang{padding-inline:16px!important;border-radius:999px;background:var(--surface-2)}
/* contact: a pill in the bar that opens a small panel of ways to reach us */
.nx-contact{position:relative}
.nx-contact-btn{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--ink-800);font:inherit;cursor:pointer;transition:background-color .2s,color .2s}
.nx-contact-btn:hover,.nx-contact-btn[aria-expanded="true"]{background:var(--surface-2);color:var(--plum-700)}
.nx-contact-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:60;display:grid;gap:4px;width:300px;padding:10px;border-radius:var(--radius);background:var(--surface);
  box-shadow:0 18px 48px rgb(43 19 34 / .16)} /* taste-skill-ignore: an open menu floats over the page */
.nx-contact-menu[hidden]{display:none}
.nx-contact-menu:not([hidden]){animation:nx-fade .25s var(--ease)}
.nx-contact-menu a{display:flex;align-items:center;gap:14px;padding:14px 16px!important;border-radius:14px;color:var(--ink-900)!important}
.nx-contact-menu a:hover,.nx-contact-menu a:focus-visible{background:var(--surface-2)}
.nx-contact-menu svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--plum-700);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nx-contact-menu b{display:block;font-weight:500}
.nx-contact-sub{display:block;font-size:.875rem;color:var(--ink-600)}
/* on phones the same button is the menu: the page links first, then the ways to reach us */
.nx-menu-pages,.nx-label-narrow{display:none}
.nx-menu-page{padding:14px 16px!important;border-radius:14px;font-family:var(--display);font-size:var(--s-statement);line-height:1.2;color:var(--ink-900)!important}
.nx-menu-page[aria-current="page"]{color:var(--plum-700)!important}

/* ---- hero: the promise centred; Samt's Today screen rises from the foot of the screen on a phone ---- */
.nx-hero{position:relative;min-height:calc(100svh - 76px);overflow:hidden;padding-top:clamp(40px,7vh,88px)}
.nx-hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.nx-hero-copy>*{max-width:40rem}
.nx-hero-copy .nx-form{width:min(100%,32rem)}
.nx-hero-stage{position:relative;height:clamp(280px,36vh,400px);margin-top:clamp(28px,4vh,48px)}
.nx-hero-phone{position:absolute;top:0;left:50%;--sp-w:300px;transform:translateX(-50%);animation:nx-lift 1.2s var(--ease) calc(var(--intro) + .2s) both}
.nx-hero-phone-view{padding:4px 18px 22px}
.nx-hero-phone .sp-cta,.nx-hero-phone .sp-read{pointer-events:none}
@keyframes nx-lift{from{opacity:0;transform:translate(-50%,48px)}to{opacity:1;transform:translateX(-50%)}}
.nx-display{font-family:var(--display);font-size:var(--s-display);font-weight:500;line-height:.92;letter-spacing:-.03em;color:var(--ink-900)}
.nx-display span{display:block}
html[lang="ar"] .nx-display{font-size:calc(var(--s-display) * 1.1);line-height:1.15;letter-spacing:0}
/* The rising rule: climbs 1 in 12 toward the end of the line. */
.nx-rise{width:160px;height:16px;margin-top:26px}
.nx-rise path{fill:none;stroke:var(--orchid-500);stroke-width:3;stroke-linecap:round}
html[lang="ar"] .nx-rise{transform:scaleX(-1)}
.nx-lead{margin-top:22px;font-size:var(--s-lead);line-height:1.5;color:var(--ink-800)}
.nx-form{display:flex;gap:10px;margin-top:32px}
.nx-form input[type="email"]{flex:1;min-width:0;height:56px;padding:0 22px;border:1.5px solid var(--orchid-300);border-radius:999px;
  background:var(--surface);color:var(--ink-900);font:inherit;transition:border-color .2s}
.nx-form input[type="email"]::placeholder{color:var(--ink-600)}
.nx-form input[type="email"]:focus{outline:none;border-color:var(--plum-700)}
.nx-note{margin-top:14px;font-size:var(--s-small);color:var(--ink-600)}
.nx-note [data-state="error"]{color:var(--berry-600)}
.nx-note [data-state="ok"],.nx-note [data-state="success"]{color:var(--moss-600)}

/* ---- recognition: her moments set large, beside one portrait ---- */
.nx-know{padding-block:var(--section)}
.nx-know-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center}
.nx-know-lines{display:grid;gap:clamp(20px,3vh,32px);margin-top:clamp(32px,5vh,56px)}
.nx-know-lines li{display:flex;gap:.6em;font-family:var(--display);font-size:var(--s-statement);font-weight:500;line-height:1.15;color:var(--ink-900)}
html[lang="ar"] .nx-know-lines li{line-height:1.5}
.nx-know-lines li::before{content:"";flex:none;width:.32em;height:.32em;margin-top:.42em;border-radius:var(--nuqta-radius);background:var(--orchid-500);transform:rotate(45deg)}
html[lang="ar"] .nx-know-lines li::before{margin-top:.62em}
.nx-know-end{max-width:36rem;margin-top:clamp(36px,5vh,56px);font-size:var(--s-lead);line-height:1.55}
.nx-know-end b{color:var(--ink-900)}
.nx-know-pic .nx-photo{width:100%}
.nx-know-pic img{object-position:50% 30%}
.nx-thumb{display:block;width:100%;max-width:130px}
.nx-thumb img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 25%}

/* ---- the year page: the section opens the page, and one quiet line leads back to the ordinary day ---- */
/* no launch screen on this page, so its first screen arrives at once */
.nx-year-page{--intro:0s}
/* privacy and terms: the policy read as a document, one column at reading width */
.nx-legal-doc{max-width:calc(45rem + 2 * var(--gutter));padding-block:clamp(56px,9vh,104px) var(--section)}
.nx-legal-meta{margin-top:18px;font-size:var(--s-small);color:var(--ink-600)}
.nx-legal-note{margin-top:28px;padding:18px 22px;border-radius:var(--radius);background:var(--orchid-100);color:var(--ink-900)}
.nx-legal-doc h2{margin-top:clamp(40px,6vh,56px);font-family:var(--display);font-size:clamp(1.75rem,2.6vw,2.25rem);font-weight:500;line-height:1.15;color:var(--ink-900)}
.nx-legal-doc p,.nx-legal-doc li{line-height:1.75;color:var(--ink-800)}
.nx-legal-doc>p:not([class]){margin-top:28px}
.nx-legal-doc>h2+p:not([class]),.nx-legal-doc>h2+ul{margin-top:12px}
.nx-legal-doc ul{display:grid;gap:10px;padding-inline-start:22px}
.nx-legal-doc strong{font-weight:500;color:var(--ink-900)}
.nx-legal-doc a{color:var(--plum-700);text-decoration:underline;text-underline-offset:3px}
.nx-legal-disc{margin-top:clamp(48px,7vh,72px);font-size:var(--s-small);color:var(--ink-600)!important}
html[lang="ar"] .nx-legal-doc p,html[lang="ar"] .nx-legal-doc li{line-height:1.95}
html[lang="ar"] .nx-legal-doc h2{font-size:calc(clamp(1.75rem,2.6vw,2.25rem) * 1.15);line-height:1.4}
/* the 404 page: the lockup, one line in each language, the way back */
.nx-nf{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:48px var(--gutter);text-align:center}
.nx-nf-mark{width:min(100%,320px);margin-bottom:28px}
.nx-nf-code{font-size:var(--s-small);color:var(--ink-600)}
.nx-nf-ar{font-size:var(--s-lead);line-height:1.8;color:var(--ink-900)}
.nx-nf-en{max-width:34em;color:var(--ink-800)}
.nx-nf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.nx-nf .nx-btn-light{background:var(--surface-2)}
.nx-year-page .nx-year{padding-top:clamp(56px,9vh,112px)}
.nx-year-next{padding-block:clamp(72px,11vh,128px);text-align:center}
.nx-year-next h2{font-family:var(--display);font-size:var(--s-statement);font-weight:500;line-height:1.2;color:var(--ink-900)}
.nx-year-next p{margin-top:14px;font-size:var(--s-lead)}
.nx-year-next a{color:var(--plum-700);font-weight:500;text-decoration:underline;text-underline-offset:4px}

/* ---- the journey: four steps in order, each a portrait with its number and name on it, a sentence beneath;
   a flat band of surface tone sits behind the top of the row ---- */
.nx-journey{position:relative;padding-block:var(--section);counter-reset:step}
.nx-journey::before{content:"";position:absolute;inset:0 0 auto;height:62%;background:var(--surface-2)}
.nx-journey .nx-wrap{position:relative}
.nx-journey-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.nx-journey-head p{max-width:30rem;font-size:var(--s-lead);line-height:1.55}
.nx-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(40px,6vh,72px)}
.nx-step{counter-increment:step}
.nx-step-pic{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:var(--orchid-100)}
.nx-step-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
/* a neutral shade under the words on the photograph, the one place a fade is allowed */
.nx-step-pic::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(to top,rgb(20 12 16 / .62),rgb(20 12 16 / 0))} /* taste-skill-ignore: neutral scrim under text on a photograph */
.nx-step h3{position:absolute;z-index:1;inset:auto 0 0;padding:20px 22px;font-family:var(--display);font-size:var(--s-statement);font-weight:500;line-height:1.1;color:#fff}
html[lang="ar"] .nx-step h3{line-height:1.5}
.nx-step h3::before{content:counter(step,decimal);display:block;margin-bottom:6px;font-family:var(--body);font-size:var(--s-small);font-weight:400;font-variant-numeric:tabular-nums;color:var(--orchid-100)}
html[lang="ar"] .nx-step h3::before{content:counter(step,arabic-indic)}
.nx-step>p{max-width:22rem;margin-top:16px;line-height:1.6}

/* ---- how it works: three chapters scroll past a held phone ---- */
.nx-how{padding-block:var(--section) clamp(80px,10vh,140px);background:var(--surface-2)}
.nx-how-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,7vw,120px);margin-top:clamp(24px,4vh,48px)}
.nx-chapter{display:flex;flex-direction:column;justify-content:center;min-height:64vh;max-width:30rem;color:var(--ink-600);transition:color .5s var(--ease)}
@media(min-width:701px){
  .nx-chapter:first-child{justify-content:flex-start;min-height:56vh;padding-top:clamp(56px,10vh,120px)}
  /* while the cookie line is up, the held phone starts below it */
  body:has(.cookie.in) .nx-phone{top:max(calc(50vh - 380px),168px)}
}
@media(min-width:701px) and (max-width:1000px){
  body:has(.cookie.in) .nx-phone{top:max(calc(50vh - 380px),196px)}
}
.nx-chapter.on{color:var(--ink-800)}
.nx-chapter h3{display:flex;align-items:center;gap:16px;font-family:var(--display);font-size:var(--s-h2);font-weight:500;line-height:1;letter-spacing:-.02em;color:inherit;transition:color .5s var(--ease)}
.nx-chapter.on h3{color:var(--ink-900)}
html[lang="ar"] .nx-chapter h3{line-height:1.3;letter-spacing:0}
.nx-chapter h3::before{content:"";flex:none;width:.28em;height:.28em;border-radius:var(--nuqta-radius);background:var(--orchid-300);transform:rotate(45deg);transition:background-color .4s}
.nx-chapter.on h3::before{background:var(--plum-700)}
.nx-chapter p{margin-top:18px;font-size:var(--s-lead);line-height:1.55}
.nx-phone{position:sticky;top:calc(50vh - 380px);align-self:start;display:flex;flex-direction:column;align-items:center;gap:14px;padding-block:12px}
.nx-phone-hint{max-width:22rem;font-size:var(--s-small);text-align:center;color:var(--ink-600)}
/* the hours of her day, slid by home.js so the lit chapter's hour sits over the phone; the nuqta marks it */
.nx-hours{position:relative;width:360px;max-width:100%;overflow:hidden;contain:inline-size;padding-top:16px}
.nx-hours::before{content:"";position:absolute;top:0;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:var(--nuqta-radius);background:var(--plum-700);transform:rotate(45deg)}
.nx-hours-track{display:flex;width:max-content;transition:transform .7s var(--ease)}
.nx-hours-track span{width:96px;flex:none;text-align:center;font-size:var(--s-small);font-variant-numeric:tabular-nums;color:var(--ink-600);transition:color .4s}
.nx-hours-track span.on{color:var(--ink-900);font-weight:500}
.js .nx-hours-track span:not(.near){visibility:hidden}

/* ---- your year: the moments she lives the transition through, one open at a time, beside the plate ---- */
.nx-year{padding-block:var(--section);background:var(--orchid-100)}
.nx-year-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.nx-year-title{font-size:calc(var(--s-display) * .8)}
html[lang="ar"] .nx-year-title{font-size:calc(var(--s-display) * .86)}
.nx-year-title span{display:block}
.nx-year-intro .nx-lead{max-width:34rem}
.nx-today{max-width:34rem;margin-top:clamp(24px,3vh,36px);font-size:var(--s-lead);line-height:1.5;color:var(--plum-700);font-weight:500}
.nx-year-body{margin-top:clamp(56px,8vh,96px)}
.nx-year-plate .nx-photo{width:100%}
.nx-year-plate img{object-position:50% 30%}
/* the five moments as a strip of picture cards; the chosen one carries the plum frame and label */
.nx-year-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.nx-year-tabs button{display:grid;gap:10px;padding:0;border:0;background:none;color:var(--ink-800);font:inherit;text-align:start;cursor:pointer}
.nx-card-img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;outline:3px solid transparent;outline-offset:3px;transition:outline-color .25s,transform .5s var(--ease)}
.nx-year-tabs button:hover .nx-card-img{transform:scale(1.02)}
.nx-year-tabs button[aria-selected="true"] .nx-card-img{outline-color:var(--plum-700)}
.nx-year-tabs button span{font-size:var(--s-small);font-weight:500}
.nx-year-tabs button[aria-selected="true"] span{color:var(--plum-700)}
.nx-moments{margin-top:24px}
.nx-moment{padding:clamp(28px,4vw,56px);border-radius:var(--radius);background:var(--surface)}
.nx-moment-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.nx-moment[hidden]{display:none}
.nx-moment:not([hidden]){animation:nx-fade .45s var(--ease)}
.nx-moment h3{font-family:var(--display);font-size:var(--s-h2);font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--ink-900)}
html[lang="ar"] .nx-moment h3{line-height:1.35;letter-spacing:0}
.nx-moment-when{margin-top:12px;color:var(--plum-700);font-weight:500}
.nx-moment h4{margin-top:28px;font-size:var(--s-body);font-weight:500;color:var(--ink-900)}
.nx-moment-list{display:grid;gap:10px;margin-top:12px}
.nx-moment-list li{position:relative;padding-inline-start:22px;line-height:1.55}
.nx-moment-list li::before{content:"";position:absolute;top:.55em;inset-inline-start:0;width:8px;height:8px;border-radius:var(--nuqta-radius);background:var(--orchid-500);transform:rotate(45deg)}
.nx-moment-samt{max-width:36rem;margin-top:12px;font-size:var(--s-lead);line-height:1.55}
.nx-year .nx-aside{max-width:44rem;margin-top:20px}
.nx-credits{max-width:44rem;margin-top:28px;font-size:.875rem;line-height:1.6;color:var(--ink-800)}
.nx-credits a{text-decoration:underline;text-underline-offset:3px}

/* ---- what Samt stands on: a board of tiles ---- */
.nx-proof{padding-block:var(--section)}
.nx-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.nx-tile{display:flex;flex-direction:column;gap:12px;min-height:220px;padding:28px;border-radius:var(--radius);background:var(--surface-2)}
.nx-tile-lead{grid-column:span 2;justify-content:flex-end;background:var(--plum-700);color:#fff}
.nx-tile-lead h2{font-family:var(--display);font-size:clamp(2rem,3.3vw,3.1rem);font-weight:500;line-height:1.02;letter-spacing:-.02em}
html[lang="ar"] .nx-tile-lead h2{line-height:1.3;letter-spacing:0}
.nx-tile-wide{grid-column:span 3;min-height:auto;flex-direction:row;align-items:baseline;gap:clamp(24px,4vw,64px)}
.nx-tile .nx-tile-say{flex:0 0 auto;max-width:11em;font-family:var(--display);font-size:var(--s-statement);font-weight:500;line-height:1.15;color:var(--ink-900)}
.nx-cites{margin-top:14px;color:var(--ink-600)}
.nx-tile-wide p{font-size:var(--s-body);max-width:52ch}
@media(max-width:1000px){.nx-tile-wide{flex-direction:column;gap:12px}}
.nx-num{font-family:var(--display);font-size:clamp(3.5rem,5.4vw,5rem);font-weight:500;line-height:.9;color:var(--plum-700)}
.nx-tile p{font-size:var(--s-small);line-height:1.5}
.nx-tile a{color:var(--plum-700);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.nx-tile-name{justify-content:space-between}
.nx-tile-name span{font-family:var(--display);font-size:var(--s-statement);font-weight:500;line-height:1;color:var(--ink-900)}
.nx-tile-name small{font-size:var(--s-small);color:var(--ink-600)}

/* ---- privacy: a deep inset panel, one portrait ---- */
.nx-privacy{padding-inline:20px}
.nx-panel{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;overflow:hidden;border-radius:var(--radius);background:var(--ink-900);color:var(--orchid-100)}
.nx-panel-start{position:relative;padding:clamp(48px,6vw,88px) 0 clamp(48px,6vw,88px) max(calc(var(--edge) - 20px),28px)}
html[lang="ar"] .nx-panel-start{padding:clamp(48px,6vw,88px) max(calc(var(--edge) - 20px),28px) clamp(48px,6vw,88px) 0}
.nx-panel .nx-h2{color:var(--paper)}
.nx-portrait{width:min(100%,440px);margin-top:clamp(40px,6vh,64px)}
.nx-portrait .nx-photo{background:var(--plum-800)}
.nx-panel-end{display:flex;flex-direction:column;gap:56px;align-items:flex-start;padding-block:clamp(56px,8vw,120px);padding-inline:0 max(calc(var(--edge) - 20px),28px)}
html[lang="ar"] .nx-panel-end{padding-inline:max(calc(var(--edge) - 20px),28px) 0}
.nx-promise{max-width:22rem}
.nx-promise h3{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:var(--s-statement);font-weight:500;line-height:1.1;color:var(--paper)}
.nx-promise h3::before{content:"";flex:none;width:.3em;height:.3em;border-radius:var(--nuqta-radius);background:var(--orchid-500);transform:rotate(45deg)}
.nx-promise p{margin-top:12px;line-height:1.6}

/* ---- questions: one card per question, one open at a time ---- */
.nx-faq{padding-block:var(--section)}
.nx-faq-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.nx-faq-more{max-width:22rem;margin-top:24px;font-size:var(--s-lead);line-height:1.5}
.nx-faq-more a{color:var(--plum-700);font-weight:500;text-decoration:underline;text-underline-offset:4px}
.nx-cards{display:grid;gap:8px}
.nx-card{--card:var(--surface-2);border-radius:var(--radius);background:var(--card);transition:background-color .3s}
.nx-card summary{display:block;padding:22px 28px;cursor:pointer;list-style:none}
.nx-card summary::-webkit-details-marker{display:none}
.nx-card-q{display:block;font-family:var(--display);font-size:var(--s-statement);font-weight:500;line-height:1.2;color:var(--ink-900)}
html[lang="ar"] .nx-card-q{line-height:1.5}
.nx-card p{max-width:52ch;padding:0 28px 28px;font-size:var(--s-body);line-height:1.65}
.nx-card[open]{--card:var(--plum-700);color:var(--orchid-100)}
.nx-card[open] .nx-card-q{color:#fff}
.nx-card[open] p{animation:nx-fade .4s var(--ease)}

/* ---- the close: the email field where she already is ---- */
.nx-join{position:relative;margin-inline:20px;
  padding:clamp(64px,10vh,112px) max(calc(var(--edge) - 20px),28px);overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;background:var(--plum-700);color:var(--orchid-100)}
.nx-join-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.nx-join-in .nx-form{margin-top:0}
.nx-join-h{font-family:var(--display);font-size:var(--s-h2);font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--paper)}
html[lang="ar"] .nx-join-h{line-height:1.35;letter-spacing:0}
.nx-join-line{max-width:30rem;margin-top:20px;font-size:var(--s-lead);line-height:1.5}
.nx-form-light input[type="email"]{border-color:transparent;background:var(--paper)}
.nx-form-light input[type="email"]:focus{border-color:var(--orchid-300)}
.nx-form-light .nx-btn-light{outline:1.5px solid var(--orchid-300);outline-offset:-1.5px}
.nx-join-note{color:var(--orchid-300)}
.nx-join-note [data-state="error"]{color:#FFD1D8}
.nx-join-note [data-state="ok"],.nx-join-note [data-state="success"]{color:var(--paper)}

/* ---- footer ---- */
.nx-foot{padding-block:clamp(72px,10vh,120px) 48px;background:var(--surface-2)}
.nx-lockup{width:min(100%,760px);height:auto}
.nx-foot-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:56px}
.nx-foot-col{display:flex;flex-direction:column;gap:14px;max-width:24rem}
.nx-foot-h{font-size:var(--s-small);color:var(--ink-600)}
.nx-foot-ecdf img{width:200px}
.nx-foot-links{display:flex;gap:24px;font-size:var(--s-small)}
.nx-foot-links a{padding-block:10px}
.nx-foot-links a:hover{color:var(--plum-700)}
.nx-legal{margin-top:32px;font-size:var(--s-small);color:var(--ink-600)}

/* ---- backing: the institution behind Samt, named large ---- */
/* ---- backing: one slim centred band, the institution named once, straight after the first screen ---- */
.nx-backing{padding-block:clamp(56px,8vh,96px);background:var(--surface-2)}
.nx-backing-in{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.nx-backing-logo img{width:min(100%,340px)}
.nx-backing-h{max-width:20em;font-family:var(--display);font-size:var(--s-statement);font-weight:500;line-height:1.15;letter-spacing:-.01em;color:var(--ink-900)}
html[lang="ar"] .nx-backing-h{line-height:1.35;letter-spacing:0}

/* ---- the shift: one sentence on a field of plum ---- */
.nx-shift{padding-block:var(--section);background:var(--plum-700);color:var(--paper)}
.nx-shift-q{max-width:14em;font-family:var(--display);font-size:clamp(2.75rem,5.6vw,5.5rem);font-weight:500;line-height:1.02;letter-spacing:-.02em}
html[lang="ar"] .nx-shift-q{line-height:1.4;letter-spacing:0}
.nx-shift-q span{display:block}
.nx-shift-q span+span{color:var(--orchid-300)}
.nx-shift-hope{max-width:30rem;margin-top:28px;font-size:var(--s-lead);line-height:1.5;color:var(--paper)}
.nx-shift-src{margin-top:28px;font-size:var(--s-small);color:var(--orchid-300)}
.nx-shift-src a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.nx-shift-rise{animation:none}
.nx-shift-rise path{stroke:var(--orchid-300)}

/* ---- stages: three nuqtas on the rising rule; the line climbs a twelfth of its length ---- */
.nx-aside{margin-top:clamp(40px,6vh,64px);font-size:var(--s-small);color:var(--ink-600)}
/* ---- every stage, in plain words: pill tabs over one open panel ---- */
.nx-help{padding-block:var(--section);background:var(--surface-2)}
.nx-help-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.nx-help-head p{max-width:30rem;font-size:var(--s-lead);line-height:1.55}
.nx-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(40px,6vh,64px)}
.nx-pills button{min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--surface);color:var(--ink-800);font:inherit;font-size:var(--s-small);cursor:pointer;transition:background-color .2s,color .2s}
.nx-pills button:hover{background:var(--orchid-100)}
.nx-pills button[aria-selected="true"]{background:var(--plum-700);color:var(--paper)}
.nx-pills button:active{transform:scale(.97)}
.nx-help-panels{margin-top:24px}
.nx-help-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);padding:clamp(32px,5vw,64px);border-radius:var(--radius);background:var(--surface)}
.nx-help-panel[hidden]{display:none}
.nx-help-panel:not([hidden]){animation:nx-fade .45s var(--ease)}
.nx-help-panel h3{font-family:var(--display);font-size:var(--s-h2);font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--ink-900)}
html[lang="ar"] .nx-help-panel h3{line-height:1.35;letter-spacing:0}
.nx-help-panel>p{max-width:34rem;font-size:var(--s-lead);line-height:1.55}
.nx-help-opts{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.nx-help-opts>p{grid-column:2}
.nx-help-opts ul{grid-column:2;display:grid;gap:20px}
.nx-help-opts li{display:grid;gap:4px;padding-inline-start:22px;position:relative;line-height:1.55}
.nx-help-opts li::before{content:"";position:absolute;top:.5em;inset-inline-start:0;width:9px;height:9px;border-radius:var(--nuqta-radius);background:var(--plum-700);transform:rotate(45deg)}
.nx-help-opts li b{font-weight:500;color:var(--ink-900)}
.nx-help-opts .nx-aside{grid-column:2;margin-top:0}

/* ---- family: three faces held together ---- */
.nx-family{padding-block:var(--section)}
.nx-family-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:end}
.nx-family-end{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.nx-family-end p{max-width:28rem;font-size:var(--s-lead);line-height:1.55}
.nx-faces{display:flex}
.nx-faces .nx-thumb{width:88px;max-width:none}
.nx-faces .nx-thumb+.nx-thumb{margin-inline-start:-14px}

/* ---- cookie choice (consent.js): one low line docked under the bar, part of the top chrome until she
   chooses, so it never lies over a heading she is reading ---- */
.cookie{position:fixed;top:76px;inset-inline:0;z-index:49;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"p b l";
  column-gap:clamp(20px,3vw,40px);align-items:center;padding:10px var(--edge);background:var(--ink-900);color:var(--orchid-100);
  transform:translateY(-100%);opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.cookie.in{transform:none;opacity:1}
.cookie .ck,.cookie h3{display:none}
.cookie p{grid-area:p;max-width:52rem;font-size:.875rem;line-height:1.5}
.cookie .ck-btns{grid-area:b;display:flex;gap:10px}
.cookie .ck-btn{min-height:44px;padding:0 20px;border:1.5px solid var(--paper);border-radius:999px;background:transparent;color:var(--paper);font:inherit;font-size:var(--s-small);font-weight:500;cursor:pointer;transition:background-color .2s,color .2s}
.cookie .ck-accept{background:var(--paper);color:var(--plum-700)}
.cookie .ck-btn:hover{background:var(--orchid-100);color:var(--plum-700)}
.cookie a.ck-link{grid-area:l;justify-self:end;font-size:var(--s-small);text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){
  .cookie{grid-template-columns:1fr auto;grid-template-areas:"p p" "b l";row-gap:8px;padding:10px 20px}
  .cookie p{font-size:.8125rem}
  .cookie .ck-btn{min-height:40px;padding:0 14px;white-space:nowrap}
  .cookie .ck-btns{gap:8px}
}

/* ---- motion that follows the scroll: lines draw, the statement inks in ---- */
@supports (animation-timeline: view()){
  .nx-shift-rise{animation:nx-draw linear both;animation-timeline:view();animation-range:entry 30% cover 50%}
  .nx-shift-q span{animation:nx-ink linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
  .nx-shift-q span+span{animation-range:entry 45% cover 60%}
}
/* a clip, not a dash: the strokes do not scale with the line, so dash lengths cannot be trusted */
@keyframes nx-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes nx-ink{from{opacity:.18;transform:translateY(.25em)}to{opacity:1;transform:none}}

/* ---- the phone in the app's palette ---- */
.sp{--sp-accent:var(--plum-700);--sp-accent-soft:var(--orchid-500);--sp-tint:var(--orchid-100);--sp-ink-strong:var(--ink-900);
  --sp-cta:var(--plum-700);--sp-cta-ink:#fff;--sp-ground:var(--surface-2);--sp-bar:var(--paper);--sp-quiet:var(--orchid-300);
  --sp-ink:var(--ink-800);--sp-ink-2:var(--ink-600);--sp-ink-3:var(--ink-600);--sp-meta:var(--orchid-600);--sp-ok:var(--moss-600);
  --sp-font:var(--body);--sp-font-ar:var(--body);--sp-ease:var(--ease)}
.sp .sp-h1,.sp .sp-hero-q,.sp .sp-article h4{font-family:var(--display);font-weight:600;letter-spacing:0}
.sp .sp-h1{font-size:29px;line-height:1.05}
html[lang="ar"] .sp .sp-h1{font-size:28px;line-height:1.35}
.sp .sp-hero-q{font-size:25px;line-height:1.1}
html[lang="ar"] .sp .sp-hero-q{font-size:24px;line-height:1.4}
.sp .sp-article h4{font-size:26px}
.sp .sp-mark{width:58px;height:auto}
.sp .sp-hero .sp-cta{background:#fff;color:var(--plum-700)}
.sp .sp-hero .sp-cta-quiet{background:transparent;color:#fff}
.sp .sp-noted li{background:rgba(255,255,255,.16)}
.sp .sp-cta:disabled{background:var(--orchid-100);color:var(--ink-600)}
.sp .sp-week li{border-radius:var(--nuqta-radius);transform:rotate(45deg) scale(.72)}
.sp .sp-week li.on{background:var(--orchid-500)}
.sp .sp-week li.now.on{background:var(--plum-700)}
.sp .sp-fast input:checked~i{background:var(--plum-700)}

/* ---- motion: a rise that settles ---- */
@keyframes nx-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes nx-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* The signature move: the nuqta opens from its far edge while the photograph settles. */
/* ---- the launch screen (splash.js decides whether it shows): the wordmark alone on paper for a moment ---- */
.nx-splash{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--paper);animation:nx-splash-out .45s var(--ease) 1.5s forwards}
.nx-splash img{width:min(52vw,220px);height:auto;animation:nx-splash-in .5s var(--ease) both}
.nx-no-splash .nx-splash{display:none}
@keyframes nx-splash-out{to{opacity:0;visibility:hidden}}
@keyframes nx-splash-in{from{opacity:0;transform:scale(.96)}}
/* the first screen's entrance starts as the launch screen leaves */
:root{--intro:1.65s}
.nx-no-splash{--intro:0s}
.nx-display span,.nx-lead,.nx-form,.nx-note{animation:nx-rise .9s var(--ease) both}
.nx-display span{animation-delay:var(--intro)}.nx-display span:nth-child(2){animation-delay:calc(var(--intro) + .07s)}.nx-lead{animation-delay:calc(var(--intro) + .16s)}.nx-form{animation-delay:calc(var(--intro) + .26s)}.nx-note{animation-delay:calc(var(--intro) + .4s)}
html[lang="ar"] .nx-rise{animation-name:nx-rise-ar}
@keyframes nx-rise-ar{from{opacity:0;transform:scaleX(-1) translateY(16px)}to{opacity:1;transform:scaleX(-1)}}
.js .nx-in{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .nx-in.in{opacity:1;transform:none}

@media(max-width:1000px){
  /* the cookie line wraps here, so it takes two rows */
  .cookie{grid-template-columns:1fr auto;grid-template-areas:"p p" "b l";row-gap:8px}
  .nx-family-in{grid-template-columns:1fr}
  .nx-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-journey::before{height:40%}
  .nx-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-tile-wide{grid-column:1 / -1}
  .nx-panel{grid-template-columns:1fr;min-height:auto}
  .nx-panel-start{display:contents}
  .nx-panel .nx-h2{order:-2;padding:48px clamp(28px,4vw,56px) 0}
  .nx-panel-end,html[lang="ar"] .nx-panel-end{order:-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px;padding:0 28px}
  .nx-portrait{width:min(86%,420px);margin:40px auto}
}
@media(max-width:700px){
  .nx-shift{padding-block:64px}
  .nx-shift-q{font-size:var(--s-statement);line-height:1.2}
  html[lang="ar"] .nx-shift-q{line-height:1.6}
  .nx-help-head{grid-template-columns:1fr}
  .nx-journey-head{grid-template-columns:1fr}
  .nx-steps{grid-template-columns:1fr}
  .nx-step-pic{aspect-ratio:16/11}
  .nx-help-panel,.nx-help-opts{grid-template-columns:1fr;gap:16px;padding:28px 22px}
  .nx-help-opts>p,.nx-help-opts ul,.nx-help-opts .nx-aside{grid-column:auto}
  .nx-nav .nx-nav-link{display:none}
  .nx-contact-menu{position:fixed;top:76px;inset-inline:auto 16px;width:min(248px,calc(100vw - 32px));max-height:calc(100dvh - 92px);overflow-y:auto;gap:0;padding:8px}
  .nx-contact-menu a{gap:12px;padding:12px!important}
  .nx-contact-menu svg{width:20px;height:20px}
  .nx-menu-pages{display:grid;margin-bottom:12px}
  .nx-menu-page{font-family:inherit;font-size:1.0625rem;font-weight:500}
  .nx-label-wide{display:none}
  .nx-label-narrow{display:inline}
  .nx-hero-copy{align-items:stretch;text-align:start}
  .nx-hero-copy>*{max-width:none}
  .nx-hero-copy .nx-form{width:auto}
  .nx-hero-stage{height:300px}
  .nx-hero-phone{--sp-w:270px}
  .nx-form{flex-direction:column}
  .nx-form input[type="email"]{flex:none}
  .nx-know-in{grid-template-columns:1fr}
  .nx-know-pic{order:-1;width:72%;margin-inline:auto}
  .nx-how-grid{grid-template-columns:1fr}
  .nx-phone{position:relative;top:auto;order:-1}
  .nx-hours{display:none}
  .nx-chapter{min-height:auto;padding-block:28px;color:var(--ink-800)}
  .nx-chapter h3{color:var(--ink-900)}
  .nx-year-top,.nx-moment-cols{grid-template-columns:1fr}
  .nx-year-plate{width:64%;margin-inline:auto}
  .nx-year-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nx-card-img{aspect-ratio:1}
  .nx-board{grid-template-columns:1fr}
  .nx-tile-lead,.nx-tile-wide{grid-column:auto}
  .nx-tile-lead h2{font-size:2rem}
  .nx-privacy{padding-inline:10px}
  .nx-faq-in{grid-template-columns:1fr}
  .nx-faq-side{position:static}
  .nx-card summary{padding:20px}
  .nx-card p{padding:0 20px 24px}
  .nx-join{min-height:auto;margin-inline:10px;padding-inline:20px}
  .nx-join-in{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .nx-splash img{animation:none}
  html{scroll-behavior:auto}
  .nx-hero-phone,.nx-display span,.nx-rise,.nx-lead,.nx-form,.nx-note,.nx-help-panel,.nx-shift-rise,.nx-shift-q span,.nx-moment,.nx-card p{animation:none}
  .js .nx-in{transform:none;transition:opacity .3s}
  .nx-chapter,.nx-btn,.nx-join,.nx-hours-track,.nx-card-img{transition:none}
}