/* Bookchoco PRO — V4 "The Creative Connection"
   One visual system derived from the symbol: a ring (the shared space) entered by two stems
   (creator from above, brand from below). Ring 51/29, stem 22 — the exact proportions of
   assets/symbol-orange.svg. Arabic-first, mobile-first. */

@font-face{font-family:"Thmanyah Sans";font-weight:400;font-style:normal;font-display:swap;src:url("https://cdn.jsdelivr.net/gh/engdawood/thmanyah-font-web@4266a9d/fonts/thmanyah-sans/woff2/thmanyah-sans-Regular.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Sans";font-weight:500;font-style:normal;font-display:swap;src:url("https://cdn.jsdelivr.net/gh/engdawood/thmanyah-font-web@4266a9d/fonts/thmanyah-sans/woff2/thmanyah-sans-Medium.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Sans";font-weight:700;font-style:normal;font-display:swap;src:url("https://cdn.jsdelivr.net/gh/engdawood/thmanyah-font-web@4266a9d/fonts/thmanyah-sans/woff2/thmanyah-sans-Bold.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Serif Display";font-weight:500;font-style:normal;font-display:swap;src:url("https://cdn.jsdelivr.net/gh/engdawood/thmanyah-font-web@4266a9d/fonts/thmanyah-serif-display/woff2/thmanyah-serif-display-Medium.woff2") format("woff2")}

:root{
  /* Brand */
  --black:#0B0B0E; --orange:#FF7A00; --ivory:#F2F0EB;
  /* Derived neutrals (warm, from black + ivory) */
  --black-2:#141418; --black-3:#1E1E23; --black-4:#2A2A30;
  --ivory-2:#E9E6DF; --paper:#FAF9F6; --white:#FFFFFF;
  --on-black:#F2F0EB; --on-black-2:#B4B1AA; --on-black-3:#7D7A74;
  --ink:#0B0B0E; --ink-2:#55524C; --ink-3:#7A766F;
  --orange-deep:#A84E00;          /* orange for small text on ivory (AA) */
  --line-dark:rgba(242,240,235,.12); --line-light:rgba(11,11,14,.10);
  --danger:#A3261F; --ok:#1F6B3A;
  /* Type */
  --font:"Thmanyah Sans","IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  --font-display:"Thmanyah Serif Display","Thmanyah Sans","IBM Plex Sans Arabic",serif;
  --font-latin:"Manrope","Segoe UI",system-ui,sans-serif;
  /* Soft precision radii */
  --r-xs:8px; --r-field:14px; --r-card:20px; --r-panel:32px; --r-pill:999px;
  /* Layout */
  --gutter:clamp(16px,5vw,72px); --max:1360px;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:68px;
}
html[lang="en"]{--font:"Manrope","Thmanyah Sans","Segoe UI",system-ui,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;min-width:320px;background:var(--black);color:var(--on-black);font:400 16px/1.75 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.latin{font-family:var(--font-latin);letter-spacing:.02em}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.trap{position:absolute!important;inline-size:1px!important;block-size:1px!important;opacity:0;pointer-events:none;overflow:hidden}
.skip-link{position:absolute;inset-inline-start:12px;top:-100px;z-index:100;background:var(--orange);color:var(--black);padding:10px 16px;border-radius:var(--r-pill);font-weight:700}
.skip-link:focus{top:12px}
.preview-banner{position:relative;z-index:60;padding:8px 16px;background:var(--orange);color:var(--black);font-size:13px;font-weight:700;text-align:center}
.shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ───────── Header ───────── */
.site-header{position:absolute;inset-inline:0;top:0;z-index:40;padding-top:env(safe-area-inset-top)}
.page-directory .site-header,.page-manage .site-header{position:relative;background:var(--black)}
.nav{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brandmark{display:block;flex:none;padding:8px 0}
.brandmark img{width:132px;height:auto}
.nav-actions{display:flex;align-items:center;gap:6px}
.nav-link{display:none;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);color:var(--on-black-2);font-size:14px;font-weight:500;transition:color .2s}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--on-black)}
.nav-link[aria-current="page"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);margin-inline-end:8px}
.lang-switch{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--on-black-2);font:600 13px/1 var(--font-latin);letter-spacing:.04em;transition:color .2s,background .2s}
.lang-switch:hover{color:var(--on-black);background:rgba(242,240,235,.06)}
.lang-switch .ar-label{font-family:var(--font);font-weight:500;letter-spacing:0}
.nav-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px 0 16px;border-radius:var(--r-pill);background:var(--ivory);color:var(--black);font-size:14px;font-weight:500;white-space:nowrap;transition:background .25s var(--ease)}
html[dir="ltr"] .nav-cta{padding:0 16px 0 8px;flex-direction:row-reverse}
.nav-cta .dot-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--black);color:var(--ivory);font:500 14px/1 var(--font-latin);transition:background .25s var(--ease),color .25s}
.nav-cta:hover .dot-arrow{background:var(--orange);color:var(--black)}
@media (min-width:720px){.nav-link{display:inline-flex}.brandmark img{width:156px}:root{--header-h:84px}.nav-actions{gap:10px}}

/* ───────── Buttons ───────── */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:0 8px 0 24px;border:0;border-radius:var(--r-pill);font-size:16px;font-weight:500;line-height:1;transition:transform .25s var(--ease),background .25s var(--ease),color .25s}
html[dir="ltr"] .btn{padding:0 24px 0 8px;flex-direction:row-reverse}
.btn .arrow{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;font:500 17px/1 var(--font-latin);transition:transform .35s var(--ease-out),background .25s}
.btn:hover .arrow{transform:translate(-2px,-2px)}
html[dir="ltr"] .btn:hover .arrow{transform:translate(2px,-2px)}
.btn:active{transform:scale(.98)}
.btn-orange{background:var(--orange);color:var(--black)}
.btn-orange .arrow{background:var(--black);color:var(--orange)}
.btn-orange:hover{background:#FF8A1F}
.btn-ink{background:var(--black);color:var(--ivory)}
.btn-ink .arrow{background:var(--orange);color:var(--black)}
.btn-ink:hover{background:#1C1C21}
.btn[disabled],.btn.busy{opacity:.6;cursor:progress;transform:none}
.btn.busy .arrow{animation:pulse 1s var(--ease) infinite alternate}
.link-quiet{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--on-black-2);font-size:15px;transition:color .2s}
.link-quiet .under{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .35s var(--ease)}
.link-quiet:hover{color:var(--on-black)}
.link-quiet .arw{font-family:var(--font-latin);color:var(--orange)}
.on-light .link-quiet{color:var(--ink-2)}
.on-light .link-quiet:hover{color:var(--ink)}
.on-light .link-quiet .arw{color:var(--orange-deep)}

/* ───────── Brand glyphs (exact symbol geometry) ───────── */
.mark-fill{fill:currentColor}
.ring-glyph{width:14px;height:26px;flex:none;color:var(--orange)}

/* ───────── Hero: the symbol as architecture ───────── */
.hero{position:relative;overflow:hidden;background:var(--black);isolation:isolate;padding-top:calc(var(--header-h) + env(safe-area-inset-top))}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr}
/* Mobile: the art box runs up behind the transparent header so the upper stem bleeds off the top;
   the ring stays whole and only the lower stem is cropped by the box. */
.hero-art{--ah:300px;--sh:460px;--cy:150px;position:relative;height:calc(var(--header-h) + var(--ah));margin-top:calc(var(--header-h) * -1);margin-inline:calc(var(--gutter) * -1);overflow:hidden}
.hero-copy{position:relative;z-index:3;padding-block:4px 44px}
.hero-kicker{display:flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--on-black-3);font:500 12px/1.4 var(--font-latin);letter-spacing:.14em;text-transform:uppercase}
.hero-kicker::before{content:"";width:22px;height:1px;background:var(--orange)}
.hero-title{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,8.6vw,38px);line-height:1.3;letter-spacing:0;color:var(--on-black)}
html[lang="en"] .hero-title{letter-spacing:-.015em;line-height:1.15}
.hero-title .stop{color:var(--orange)}
.hero-sub{margin-top:14px;max-width:34ch;text-wrap:pretty;color:var(--on-black-2);font-size:16px;line-height:1.85}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:26px}
.hero-foot{display:none}

/* Symbol stage */
.stage{position:absolute;aspect-ratio:102/190;height:var(--sh);inset-inline-end:calc(var(--gutter) - 8px);top:calc(var(--header-h) + var(--cy) - var(--sh) / 2);color:var(--black-3)}
.stage-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stage-svg .mark-fill{fill:var(--black-3)}
/* an orange quarter of the ring — the connection being made; it advances with each portrait */
.stage-svg .arc{fill:none;stroke:var(--orange);stroke-width:22;stroke-dasharray:0 251.33;transform:rotate(var(--rot,-90deg));transform-origin:0 0;transition:stroke-dasharray 1.4s var(--ease-out),transform 1.6s var(--ease-out)}
.stage-svg .arc.drawn{stroke-dasharray:62.83 188.5}
/* the counter (inner hole r=29 of 51) holds the portraits */
.counter{position:absolute;left:50%;top:50%;width:57.84%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;overflow:hidden;background:var(--black-2);z-index:-1}
.counter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);filter:grayscale(1) contrast(1.06);transition:opacity 1.1s var(--ease),transform 3.6s var(--ease-out),filter 1.1s}
.counter img.on{opacity:1;transform:scale(1)}
.stage:hover .counter img.on{filter:grayscale(.2) contrast(1.02)}
.caption{position:absolute;z-index:4;display:flex;flex-direction:column;gap:2px;min-width:0;max-width:44vw;font-size:13px;line-height:1.5;color:var(--on-black-2);transition:opacity .5s var(--ease)}
.caption strong{color:var(--on-black);font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caption.swap{opacity:0}
.hero .caption{inset-inline-start:var(--gutter);top:calc(var(--header-h) + var(--cy) + 24px);max-width:calc(100% - var(--sh) * .5368 - var(--gutter) * 2 - 16px)}
.caption-label{font:500 11px/1.4 var(--font-latin);letter-spacing:.14em;text-transform:uppercase;color:var(--on-black-3);margin-bottom:6px}

@media (max-width:419px){
  .hero .caption{display:none}
  .nav-cta .dot-arrow{display:none}
  .nav-cta{padding:0 16px!important}
  .brandmark img{width:118px}
  .nav-actions{gap:2px}
}
.hero .caption strong,.hero .caption span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (min-width:480px){
  .hero-art{--ah:340px;--sh:540px;--cy:170px}
}
@media (min-width:768px){
  .hero-art{--ah:420px;--sh:680px;--cy:210px}
  .stage{inset-inline-end:8vw}
  .hero-title{font-size:48px}
  .hero-sub{font-size:17px}
}
@media (min-width:1024px){
  .hero{--hh:clamp(640px,100svh,900px);--sx:max(4vw,calc((100vw - var(--max)) / 2 + 80px))}
  .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;min-height:calc(var(--hh) - var(--header-h))}
  .hero-art{position:static;height:auto;margin:0;overflow:visible;grid-column:2;grid-row:1}
  .hero-copy{grid-column:1;grid-row:1;align-self:center;padding-block:40px 120px;max-width:520px}
  /* ring centre sits at ~47% of the viewport; both stems are cropped by the hero edges */
  .stage{height:calc(var(--hh) * 1.18);top:calc(var(--hh) * -.12 - var(--header-h));inset-inline-end:var(--sx);inset-inline-start:auto}
  .hero .caption{top:auto;bottom:calc(var(--hh) * .25);inset-inline-start:auto;inset-inline-end:calc(var(--sx) + var(--hh) * .6335 + 28px);max-width:200px}
  .hero .caption::before{content:"";display:block;width:28px;height:1px;background:var(--orange);margin-bottom:12px}
  .hero-title{font-size:clamp(48px,4.2vw,60px)}
  .hero-kicker{margin-bottom:26px}
  .hero-sub{margin-top:18px}
  .hero-actions{margin-top:36px}
  .hero-foot{display:flex;position:absolute;inset-inline:var(--gutter);bottom:0;z-index:3;align-items:center;justify-content:space-between;gap:20px;padding-block:22px;border-top:1px solid var(--line-dark);color:var(--on-black-3);font:500 12px/1.4 var(--font-latin);letter-spacing:.14em;text-transform:uppercase}
  .hero-foot a{display:inline-flex;align-items:center;gap:12px;color:var(--on-black-2);font:500 14px/1 var(--font);letter-spacing:0;text-transform:none;min-height:44px}
  .hero-foot a:hover{color:var(--on-black)}
  .hero-foot .arw{display:inline-block;color:var(--orange);font-family:var(--font-latin);animation:nudge 2.4s var(--ease) infinite}
}

/* ───────── Register ───────── */
.register{position:relative;background:var(--ivory);color:var(--ink);padding-block:64px 72px}
.register-grid{display:grid;gap:28px}
.section-label{display:flex;align-items:center;gap:10px;color:var(--ink-3);font:500 14px/1.4 var(--font)}
.section-label .num{font:500 12px/1 var(--font-latin);letter-spacing:.12em}
.section-label::after{content:"";flex:0 0 28px;height:1px;background:currentColor;opacity:.35}
html[lang="ar"] .hero-kicker{font:500 14px/1.4 var(--font);letter-spacing:0}
.section-label b{color:var(--orange-deep);font-weight:600}
.dark .section-label{color:var(--on-black-3)}
.dark .section-label b{color:var(--orange)}
.register-title{margin-top:14px;font-family:var(--font-display);font-weight:500;font-size:clamp(26px,6.4vw,36px);line-height:1.4;letter-spacing:0}
.register-intro{margin-top:10px;color:var(--ink-2);font-size:16px;max-width:34ch}
.returning{display:flex;gap:14px;align-items:flex-start;margin-top:24px;padding:18px 18px 16px;border-radius:var(--r-card);background:var(--ivory-2)}
.returning .ring-glyph{margin-top:3px;color:var(--orange-deep)}
.returning p{font-size:15px;line-height:1.7;color:var(--ink)}
.returning p span{display:block;color:var(--ink-2);font-size:14px}
.returning .actions{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:6px}
.text-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font-size:15px;font-weight:500}
.text-btn .under{background:linear-gradient(var(--orange-deep),var(--orange-deep)) 0 100%/100% 1px no-repeat;padding-bottom:2px}
.text-btn .arw{font-family:var(--font-latin);color:var(--orange-deep)}
.text-btn:hover .under{background-size:100% 2px}

.form-card{position:relative;background:var(--paper);border-radius:var(--r-panel);padding:22px 18px 24px;box-shadow:0 1px 0 rgba(11,11,14,.04),0 30px 60px -40px rgba(11,11,14,.25)}
.form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.form-head h3{font-size:19px;font-weight:500;line-height:1.4}
.form-step{color:var(--ink-3);font:500 12px/1 var(--font-latin);letter-spacing:.12em}

/* Path selector — two stems entering one ring */
.paths{border:0;margin:0;padding:0;min-width:0}
.paths legend{padding:0;margin-bottom:10px;font-size:14px;color:var(--ink-2)}
.path-track{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:var(--r-pill);background:var(--ivory-2)}
.path-thumb{position:absolute;top:5px;bottom:5px;inset-inline-start:5px;width:calc(50% - 5px);border-radius:var(--r-pill);background:var(--black);transition:transform .5s var(--ease-out)}
.path-track[data-path="business"] .path-thumb{transform:translateX(-100%)}
html[dir="ltr"] .path-track[data-path="business"] .path-thumb{transform:translateX(100%)}
.path{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 10px;border-radius:var(--r-pill);cursor:pointer;color:var(--ink-2);font-size:15px;font-weight:500;line-height:1.3;text-align:center;transition:color .35s var(--ease)}
.path input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.path:has(input:checked){color:var(--ivory)}
.path:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
.path svg{width:12px;height:22px;flex:none;color:currentColor;opacity:.55;transition:opacity .3s,color .3s}
.path:has(input:checked) svg{color:var(--orange);opacity:1}
.path-note{min-height:24px;margin:10px 4px 0;font-size:14px;color:var(--ink-3);line-height:1.6}

.subtype{display:block;border:0;padding:0;margin:16px 0 0;min-width:0}
.subtype legend{margin-bottom:8px;padding:0;font-size:14px;color:var(--ink-2)}
.chip{position:relative;display:inline-flex;white-space:nowrap;margin-inline-end:8px;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-light);background:var(--white);font-size:15px;cursor:pointer;transition:border-color .2s,background .2s}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink-3);transition:background .2s,border-color .2s}
.chip:has(input:checked){border-color:var(--black)}
.chip:has(input:checked)::before{background:var(--orange);border-color:var(--orange)}
.chip:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}

.fields{display:grid;gap:14px;margin-top:20px}
.field.span{grid-column:1/-1}
.branch-enter{animation:branchIn .5s var(--ease-out) both}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:500;color:var(--ink)}
.field label small{font-weight:400;color:var(--ink-3);font-size:13px}
.field input,.field textarea,.field select,.solo-input{width:100%;min-height:52px;padding:12px 16px;border:1px solid #D9D5CC;border-radius:var(--r-field);background:var(--white);color:var(--ink);font-size:16px;line-height:1.5;outline:0;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.field textarea{min-height:104px;resize:vertical}
.field input::placeholder,.field textarea::placeholder,.solo-input::placeholder{color:#A19C93}
.field input:hover,.field textarea:hover,.solo-input:hover{border-color:#BDB8AE}
.field input:focus,.field textarea:focus,.solo-input:focus{border-color:var(--black);box-shadow:0 0 0 4px rgba(255,122,0,.18)}
.field input[aria-invalid="true"],.solo-input[aria-invalid="true"]{border-color:var(--danger)}
.field input[dir="ltr"],.solo-input[dir="ltr"]{text-align:left}
html[dir="rtl"] .field input[dir="ltr"]::placeholder{text-align:right}
.field-error{font-size:13px;line-height:1.5;color:var(--danger)}
.field-error:empty{display:none}
.more{margin-top:2px}
.more summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;list-style:none;cursor:pointer;color:var(--ink-2);font-size:15px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-light);font:500 14px/1 var(--font-latin);transition:transform .3s var(--ease)}
.more[open] summary::before{transform:rotate(45deg)}
.more summary small{color:var(--ink-3);font-size:13px}
.more .field{margin-top:6px}
.consent{display:flex;align-items:flex-start;gap:12px;margin-top:18px;text-wrap:pretty;cursor:pointer;font-size:14px;line-height:1.7;color:var(--ink-2)}
.consent input{flex:none;width:22px;height:22px;margin:2px 0 0;border:1.5px solid #A9A49A;border-radius:7px;background:var(--white);-webkit-appearance:none;appearance:none;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
.consent input::after{content:"";width:10px;height:6px;border:2px solid var(--black);border-top:0;border-inline-end:0;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .2s var(--ease-out)}
html[dir="rtl"] .consent input::after{border-inline-end:2px solid var(--black);border-inline-start:0}
.consent input:checked{background:var(--orange);border-color:var(--orange)}
.consent input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.consent input[aria-invalid="true"]{border-color:var(--danger)}
.submit{width:100%;margin-top:20px}
.fine{margin-top:14px;font-size:13px;line-height:1.7;color:var(--ink-3)}
.notice{margin-top:14px;padding:12px 14px;border-radius:var(--r-field);background:#E7F0E9;color:var(--ok);font-size:14px;line-height:1.7}
.notice:empty{display:none}
.notice.error{background:#F6E4E1;color:var(--danger)}
.dark .notice{background:rgba(242,240,235,.08);color:var(--on-black)}

.previous-panel h3{font-size:20px;font-weight:500;line-height:1.5;margin-top:8px}
.previous-panel p{margin-top:6px;color:var(--ink-2);font-size:15px}
.previous-panel form{display:grid;gap:8px;margin-top:18px}
.previous-panel label{font-size:14px;font-weight:500}
.back-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--ink-2);font-size:14px}
.back-btn:hover{color:var(--ink)}

/* Success */
.success{padding:12px 4px 4px;text-align:start}
.success:focus{outline:0}
.success-mark{width:44px;height:82px;color:var(--black)}
.success-mark .arc{fill:none;stroke:var(--orange);stroke-width:22;stroke-dasharray:251.33;stroke-dashoffset:251.33;transform:rotate(-90deg);transform-origin:0 0}
.success:not([hidden]) .success-mark .arc{animation:closeRing 1.4s .15s var(--ease-out) forwards}
.success h3{margin-top:20px;font-family:var(--font-display);font-weight:500;font-size:28px;line-height:1.4}
.success p{margin-top:10px;color:var(--ink-2);font-size:16px;line-height:1.8;max-width:42ch}
.success .fine{margin-top:16px}
.success .success-links{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:18px}

@media (min-width:768px){
  .register{padding-block:96px 104px}
  .form-card{padding:36px 36px 34px}
  .fields.two{grid-template-columns:1fr 1fr;column-gap:16px}
}
@media (min-width:1024px){
  .register-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,7vw,120px);align-items:start}
  .register-aside{position:sticky;top:40px;padding-top:12px}
  .register-title{font-size:36px}
  .form-card{padding:44px 48px 40px}
}

/* ───────── Creator presence: portraits as symbol halves on one connection line ───────── */
.presence{position:relative;background:var(--black);padding-block:64px 72px;overflow:hidden}
.presence-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.presence-title{margin-top:12px;font-family:var(--font-display);font-weight:500;font-size:clamp(24px,6vw,34px);line-height:1.4}
.presence-sub{margin-top:6px;color:var(--on-black-2);font-size:15px}
.chain{position:relative;display:flex;justify-content:space-between;align-items:center;height:250px;margin-top:20px}
.chain::before{content:"";position:absolute;inset-inline:0;top:50%;height:1px;background:var(--line-dark)}
.node{--d:76px;--stem:54px;position:relative;flex:none;width:var(--d);height:100%;display:block}
.node .face{position:absolute;left:0;width:var(--d);height:var(--d);border-radius:50%;overflow:hidden;background:var(--black-3);z-index:1}
.node .face img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .5s var(--ease),transform .7s var(--ease-out)}
.node .stem{position:absolute;width:calc(var(--d) * .2157);background:var(--black-4);transition:background .4s var(--ease)}
/* up: portrait above the line, stem leaves from the centre on the right edge (lower stem of the mark) */
.node.up .face{bottom:calc(50% + var(--stem))}
.node.up .stem{left:calc(var(--d) * .7843);bottom:50%;height:calc(var(--stem) + var(--d) / 2)}
/* down: portrait below, stem rises on the left edge (upper stem of the mark) */
.node.down .face{top:calc(50% + var(--stem))}
.node.down .stem{left:0;top:50%;height:calc(var(--stem) + var(--d) / 2)}
.node.lit .stem{background:var(--orange)}
.node:hover .face img,.node:focus-visible .face img{filter:grayscale(0) contrast(1);transform:scale(1.05)}
.node:hover .stem{background:var(--orange)}
.node:nth-child(n+5){display:none}
.presence-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line-dark)}
.presence-foot p{color:var(--on-black-3);font-size:14px}
@media (min-width:480px){.node:nth-child(n+5){display:block}.node:nth-child(n+6){display:none}}
@media (min-width:768px){
  .presence{padding-block:96px 100px}
  .chain{height:380px;margin-top:24px}
  .node:nth-child(n+6){display:block}.node:nth-child(n+8){display:none}
}
@media (min-width:1200px){.chain{height:400px}.node:nth-child(n+8){display:block}}

/* ───────── Footer ───────── */
.site-footer{background:var(--black);border-top:1px solid var(--line-dark);padding-block:40px calc(32px + env(safe-area-inset-bottom));color:var(--on-black-2)}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.footer-top img{width:140px;height:auto}
.footer-links{display:flex;flex-wrap:wrap;gap:0 22px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;transition:color .2s}
.footer-links a:hover{color:var(--on-black)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-dark);font-size:13px;color:var(--on-black-3)}
.footer-bottom .dev{display:inline-flex;align-items:center;gap:10px}
.footer-bottom .dev::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}

/* ───────── Mobile sticky CTA ───────── */
.dock{position:fixed;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;display:flex;justify-content:center;pointer-events:none;opacity:0;transform:translateY(24px);transition:opacity .35s var(--ease),transform .45s var(--ease-out)}
.dock.show{opacity:1;transform:none}
.dock .btn{pointer-events:auto;width:100%;max-width:420px;box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
.dock:not(.show) .btn{pointer-events:none}
@media (min-width:1024px){.dock{display:none}}

/* ───────── Directory page ───────── */
.page-directory{background:var(--ivory)}
.dir-hero{position:relative;overflow:hidden;background:var(--black);padding-block:40px 44px}
.dir-hero .shell{position:relative;z-index:2}
.dir-title{margin-top:14px;font-family:var(--font-display);font-weight:500;font-size:clamp(28px,7.4vw,44px);line-height:1.35;max-width:24ch;text-wrap:balance}
.dir-sub{margin-top:10px;color:var(--on-black-2);font-size:16px}
.dir-count{display:inline-flex;align-items:center;gap:10px;margin-top:18px;color:var(--on-black-3);font-size:14px}
.dir-count::before{content:"";width:22px;height:1px;background:var(--orange)}
.dir-ring{position:absolute;z-index:1;inset-inline-end:-70px;top:50%;width:150px;aspect-ratio:102/190;translate:0 -46%;color:var(--black-3)}
.dir-ring .mark-fill{fill:var(--black-3)}
.toolbar{position:sticky;top:0;z-index:30;background:var(--ivory);padding-block:12px;border-bottom:1px solid transparent;transition:border-color .3s}
.toolbar.stuck{border-bottom-color:var(--line-light)}
.toolbar .shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:8px}
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;inset-inline-start:16px;width:18px;height:18px;color:var(--ink-3);pointer-events:none}
.search input,.select select{width:100%;min-height:50px;border:1px solid #D9D5CC;border-radius:var(--r-pill);background:var(--paper);color:var(--ink);font-size:16px;outline:0;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.search input{padding:0 46px 0 16px}
html[dir="ltr"] .search input{padding:0 16px 0 46px}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.select{position:relative}
.select select{padding:0 16px 0 40px;cursor:pointer;text-overflow:ellipsis}
html[dir="ltr"] .select select{padding:0 40px 0 16px}
.select::after{content:"";position:absolute;inset-inline-end:18px;top:50%;width:8px;height:8px;border-inline-end:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.search input:focus,.select select:focus{border-color:var(--black);box-shadow:0 0 0 4px rgba(255,122,0,.18)}
.people{padding-block:20px 72px;color:var(--ink)}
.dir-meta{display:flex;flex-direction:column;gap:2px;margin-bottom:16px;color:var(--ink-3);font-size:13px}
.dir-meta #directoryCount{color:var(--ink);font-size:14px;font-weight:500}
@media (min-width:768px){.dir-meta{flex-direction:row;justify-content:space-between;gap:16px}}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.creator-card{position:relative;min-width:0;padding:6px 6px 0;border-radius:var(--r-card);background:var(--paper);box-shadow:0 1px 0 rgba(11,11,14,.04);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.creator-photo{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--ivory-2)}
.creator-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out),opacity .5s var(--ease)}
.creator-photo img.loading{opacity:0}
.creator-initials{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);font-size:24px;font-weight:500}
.creator-photo:has(img) .creator-initials{display:none}
.creator-card-body{display:flex;flex-direction:column;gap:2px;padding:10px 8px 12px;min-width:0}
.creator-name{font-size:15px;font-weight:500;line-height:1.5;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[dir="rtl"] .creator-name{text-align:right}
html[dir="ltr"] .creator-name{text-align:left}
.creator-meta{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.5;color:var(--ink-3);min-width:0}
.creator-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.creator-meta::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;opacity:.7;transition:border-color .3s,background .3s}
.creator-meta:empty::before{display:none}
@media (hover:hover){
  .creator-card:hover{transform:translateY(-4px);box-shadow:0 24px 44px -28px rgba(11,11,14,.45)}
  .creator-card:hover .creator-photo img{transform:scale(1.04)}
  .creator-card:hover .creator-meta::before{border-color:var(--orange);background:var(--orange);opacity:1}
}
.skeleton .creator-photo{background:linear-gradient(100deg,var(--ivory-2) 40%,#F1EEE8 50%,var(--ivory-2) 60%) 0 0/300% 100%;animation:shimmer 1.6s linear infinite}
.skeleton .bar{display:block;height:12px;border-radius:6px;background:var(--ivory-2);margin:6px 0}
.skeleton .bar.short{width:55%}
.empty-state{padding:56px 16px;text-align:center;color:var(--ink-2)}
.empty-state h2{font-size:20px;font-weight:500}
.empty-state p{margin-top:6px;font-size:15px}
.load-more{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;margin:28px auto 0;padding:0 24px;border:1px solid #CFCAC0;border-radius:var(--r-pill);background:transparent;color:var(--ink);font-size:15px;transition:border-color .2s,background .2s}
.load-more:hover{border-color:var(--black);background:var(--paper)}
.dir-end{display:grid;gap:20px;margin-top:56px;padding:28px 22px;border-radius:var(--r-panel);background:var(--black);color:var(--on-black)}
.dir-end h2{font-family:var(--font-display);font-weight:500;font-size:28px;line-height:1.4}
.dir-end h2 .stop{color:var(--orange)}
.dir-end p{color:var(--on-black-2);font-size:15px;margin-top:6px}
.dir-end .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
@media (min-width:600px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:768px){
  .dir-hero{padding-block:64px 72px}
  .dir-ring{width:220px;inset-inline-end:6vw}
  .toolbar{padding-block:16px}
  .toolbar .shell{grid-template-columns:minmax(0,420px) minmax(0,240px);justify-content:start}
  .people{padding-block:28px 96px}
  .dir-end{grid-template-columns:1fr auto;align-items:center;padding:40px 48px}
}
@media (min-width:1024px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.creator-card{padding:8px 8px 0}.creator-card-body{padding:12px 8px 14px}.dir-ring{width:260px;inset-inline-end:10vw}}
@media (min-width:1280px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ───────── Manage page (shares the system) ───────── */
.page-manage{background:var(--ivory)}
.manage{color:var(--ink);padding-block:40px 80px}
.manage-grid{display:grid;gap:28px}
.manage-intro h1{margin-top:14px;font-family:var(--font-display);font-weight:500;font-size:clamp(28px,7vw,40px);line-height:1.35;white-space:pre-line}
.manage-intro p{margin-top:10px;color:var(--ink-2);max-width:36ch}
.manage-sheet h2{font-size:20px;font-weight:500;line-height:1.5}
.manage-sheet>form>p,.manage-sheet>section>p{margin-top:6px;color:var(--ink-2);font-size:15px}
.manage-sheet form,.manage-sheet section{display:grid;gap:10px}
.manage-sheet label:not(.consent){font-size:14px;font-weight:500;margin-top:6px}
.manage-sheet textarea{min-height:96px}
.verified-email{color:var(--ink-3);font:500 14px/1.4 var(--font-latin)}
.small-kicker{color:var(--ink-3);font-size:13px}
#profilePreview{width:100%;max-width:200px;justify-self:start}
.profile-details summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:500}
.profile-details[open]{display:grid;gap:8px}
.manage-controls{display:flex;flex-wrap:wrap;gap:4px 20px}
.manage-sheet .consent{margin-top:4px}
@media (min-width:1024px){.manage{padding-block:80px 120px}.manage-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,7vw,120px)}}

/* ───────── Motion ───────── */
/* Entrance is opt-in: art.js adds html.motion, so content is always visible if scripts fail. */
html.motion .reveal{opacity:0;transform:translateY(14px)}
html.motion .reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform 1s var(--ease-out)}
.reveal.d1.in{transition-delay:.08s}.reveal.d2.in{transition-delay:.16s}.reveal.d3.in{transition-delay:.24s}
html.motion .stage{opacity:0;transform:translateY(24px);transition:opacity 1.2s var(--ease),transform 1.6s var(--ease-out)}
html.motion .stage.in{opacity:1;transform:none}
@keyframes closeRing{to{stroke-dashoffset:0}}
@keyframes branchIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes shimmer{to{background-position:-300% 0}}
@keyframes pulse{to{opacity:.4}}
@keyframes nudge{0%,70%,100%{transform:none}35%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .reveal{opacity:1;transform:none}
  .counter img{transform:none}
}

/* ───────── V5: one-pass, complete registration ───────── */
.v5-form-content{min-width:0}
.v5-step-heading{display:flex;align-items:flex-start;gap:12px;margin-top:28px;padding-bottom:12px;border-bottom:1px solid var(--line-light)}
.v5-count{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid rgba(11,11,14,.15);border-radius:50%;font:600 11px/1 var(--font-latin);color:var(--orange-deep)}
.v5-step-heading h3{color:var(--ink);font:500 19px/1.4 var(--font)}
.v5-step-heading p{margin-top:3px;color:var(--ink-3);font-size:13px;line-height:1.65}
.v5-step-heading.v5-minor{margin-top:30px}
.v5-visual{margin-top:20px}
.v5-upload{position:relative;display:flex;align-items:center;gap:18px;border:1px dashed #C3BDB1;background:var(--white);border-radius:22px;padding:13px;min-height:130px;cursor:pointer;transition:border .2s,background .2s}
.v5-upload:hover,.v5-upload:focus-within{border-color:var(--orange);background:#FFF9F2}
.v5-upload:focus-within{box-shadow:0 0 0 4px rgba(255,122,0,.12)}
.v5-upload-frame{display:grid;place-items:center;flex:none;position:relative;width:92px;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:var(--ivory-2);color:var(--orange-deep)}
.v5-upload-frame img{width:100%;height:100%;object-fit:cover}
.v5-upload-icon{font:500 34px/1 var(--font-latin)}
.v5-upload-text{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.v5-upload-text strong{font-size:16px;line-height:1.4;font-weight:500;color:var(--ink)}
.v5-upload-text small{font-size:12px;line-height:1.65;color:var(--ink-3)}
.v5-upload-text em{font-size:13px;line-height:1.5;color:var(--orange-deep);font-style:normal;overflow-wrap:anywhere}
.v5-upload input[type="file"]{position:absolute;width:100%;height:100%;inset:0;opacity:0;cursor:pointer;overflow:hidden}
.v5-visual>.field-error{display:block;margin-top:7px}
.v5-label-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.v5-inline-button{border:0;background:none;padding:4px 2px;color:var(--orange-deep);font-size:13px}
.v5-generated textarea{background:var(--ivory-2);color:var(--ink-2);min-height:96px}
.v5-generated small{font-size:12px;color:var(--ink-3);line-height:1.5}
.v5-social-rows{display:grid;gap:12px;margin-top:12px}
.v5-social-row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--white);border:1px solid #E2DED6;border-radius:18px;padding:16px;padding-top:16px}
.v5-social-row .field{min-width:0}
.v5-social-row .field input,.v5-social-row .field select{min-height:46px;padding:8px 11px;font-size:14px}
.v5-social-row .field input[dir="ltr"]{font-family:var(--font-latin);font-size:13px}
.v5-social-row .field label{font-size:12px;color:var(--ink-3)}
.v5-social-row .field:nth-child(3){grid-column:1/-1}
.v5-social-row .field:nth-child(4){grid-column:1/-1}
.v5-accounts-head{display:none}
.v5-remove-social{position:absolute;inset-inline-end:8px;top:8px;width:27px;height:27px;border:0;background:var(--ivory-2);color:var(--ink-2);border-radius:50%;font:500 20px/1 var(--font-latin)}
.v5-remove-social:hover{background:#F4E0D0;color:var(--orange-deep)}
.v5-add-social{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:10px;padding:0 15px;border:1px solid #C8C2B7;border-radius:var(--r-pill);background:transparent;color:var(--ink);font-size:14px}
.v5-add-social span:first-child{font:500 22px/1 var(--font-latin);color:var(--orange-deep)}
.v5-add-social:hover{border-color:var(--ink)}
.v5-add-social:disabled{opacity:.4;cursor:not-allowed}
.v5-consent-group{margin-top:28px;padding-top:18px;border-top:1px solid var(--line-light)}
.v5-privacy-title{font-weight:500;color:var(--ink);font-size:16px}
.v5-consent-group .consent{margin-top:13px}
.v5-consent-group .fine{margin-top:14px;color:var(--ink-3);font-size:12px;line-height:1.7}
@media(min-width:500px){.v5-social-row{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.v5-social-row .field:nth-child(3){grid-column:1/-1}.v5-social-row .field:nth-child(4){grid-column:2/3;grid-row:2/3}.v5-social-row .field:nth-child(3){grid-column:1/2;grid-row:2/3}}
@media(min-width:1200px){.v5-social-row{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.7fr) minmax(0,.8fr);gap:9px;padding:14px 12px 16px}.v5-social-row .field:nth-child(3),.v5-social-row .field:nth-child(4){grid-column:auto;grid-row:auto}.v5-social-row .field input,.v5-social-row .field select{min-width:0;padding-inline:8px}.v5-social-row .field label{font-size:11px}.v5-remove-social{width:24px;height:24px;top:-9px;inset-inline-end:-8px}}
@media(max-width:380px){.v5-upload{gap:12px}.v5-upload-frame{width:78px}}
/* Email verification landing */
.page-confirm{background:var(--black);min-height:100vh;display:flex;flex-direction:column}
.page-confirm .site-header{position:relative}
.v5-confirm-wrap{flex:1;display:grid;place-items:center;padding:70px 18px 96px}
.v5-confirm-panel{width:min(100%,660px);background:var(--paper);color:var(--ink);border-radius:34px;padding:clamp(28px,6vw,70px);text-align:center;box-shadow:0 28px 95px rgba(0,0,0,.17)}
.v5-confirm-mark{display:grid;place-items:center;width:74px;height:74px;background:var(--ivory-2);border-radius:22px;margin:0 auto 26px}
.v5-confirm-mark img{max-width:34px;height:55px}
.v5-confirm-kicker{font:600 11px/1.6 var(--font-latin);letter-spacing:.14em;color:var(--orange-deep)}
.v5-confirm-panel h1{margin-top:14px;font:500 clamp(26px,5vw,38px)/1.45 var(--font-display)}
.v5-confirm-panel>p:not(.v5-confirm-kicker){font-size:16px;color:var(--ink-2);line-height:1.9;margin-top:16px}
.v5-confirm-state.is-confirmed{width:56px;height:56px;display:grid;place-items:center;margin:24px auto 0;border-radius:50%;background:var(--orange);color:var(--black);font:600 28px/1 var(--font-latin)}
.v5-confirm-home{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--black);color:var(--ivory);border-radius:999px;padding:0 24px;margin-top:28px;font-size:14px}
.v5-confirm-home:hover{background:var(--black-3)}
.page-confirm .site-footer{padding-top:6px}

.v5-policy-link{display:inline-flex;margin-top:8px;color:var(--orange-deep);text-decoration:underline;text-underline-offset:4px;font-size:13px}

/* V7 — The Community Pulse: editorial numbers, never dashboard cards. */
.community-impact{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1.45fr);align-items:center;gap:clamp(18px,4vw,55px);margin-top:clamp(30px,6vw,64px);padding:clamp(24px,4vw,40px) 0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.impact-item{min-width:0;display:flex;flex-direction:column;gap:8px}
.impact-number{display:block;width:fit-content;max-width:100%;font:500 clamp(38px,5.6vw,83px)/1.1 var(--font-latin);letter-spacing:-.06em;color:var(--on-black);direction:ltr;white-space:nowrap}
.impact-item:first-child .impact-number::after{content:".";color:var(--orange)}
.impact-label{display:block;max-width:36ch;color:var(--on-black-2);font-size:clamp(12px,1.3vw,15px);line-height:1.7}
.impact-divider{width:1px;height:100%;min-height:92px;background:var(--line-dark);position:relative}
.impact-divider span{position:absolute;top:0;inset-inline-start:-2px;width:5px;height:22px;background:var(--orange);border-radius:5px}
.community-impact-note{margin-top:15px;max-width:85ch;color:var(--on-black-3);font-size:12px;line-height:1.8}
@media(max-width:600px){.community-impact{grid-template-columns:1fr;gap:16px;padding-block:27px}.impact-divider{width:100%;height:1px;min-height:1px}.impact-divider span{inset-inline-start:0;top:-2px;width:24px;height:4px}.impact-number{font-size:clamp(36px,11vw,54px)}.impact-item{gap:6px}}