/*
  Silvy's public site: the one stylesheet of the home page and the accessibility statement. The design system is
  docs/design.md. The look and, since Oct 28 late evening, the layout and the words are the founder's prototype
  (portal/silvy-website/index.html): her <style> block and her five inline styles as classes here, on our tokens, with
  our dark mode and our self-hosted Heebo 400/700 (700 where she used 600 to 900). Fonts are ours, under /fonts/ (SIL Open Font License, the
  licence beside them); nothing is loaded from anywhere else (the server's content security policy says so too).
  Choosing the founder's palette (presentation/paleta.jpeg, B or C) is a change of the tokens below, not of the pages.
*/
@font-face{font-family:"Heebo";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/heebo-400.woff2) format("woff2")}
@font-face{font-family:"Heebo";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/heebo-700.woff2) format("woff2")}

:root{
  --bg:#faf6ed;--card:#ffffff;--sand:#f6e7cc;--blush:#f2d5c8;--border:#e9e0cc;
  --text:#073e35;--muted:#48665b;--link:#073e35;
  --head-accent:#c9533b;
  --line:#b7b7b7;--icon:#48665b;
  --accent:#ec6d57;--accent-ink:#1f2933;--focus:#b8432e;
  --ph-bg:#efe3cb;--ph-text:#574c3f;
  --band:#073e35;--band-text:#faf6ed;--band-muted:#c9d8cf;--band-focus:#f2b8a8;--band-edge:#073e35;
  --wa-wall:#efeae2;--wa-doodle:#e2d9ca;--wa-in:#ffffff;--wa-out:#d9fdd3;--wa-doc:#c8eec1;--wa-text:#111b21;--wa-meta:#58656c;--wa-meta-out:#58656c;
  --wa-head:#f6f6f6;--wa-head-text:#111b21;--wa-status:#58656c;--wa-edge:#d5d9db;--wa-pill:#ffffff;--wa-icon:#0a7cff;--wa-tick:#53bdeb;--bezel:#1c1c1e;--bezel-edge:#3a3a3c;--island:#000000;
  --sky:#fbdcbd;--sun:#f6b98a;--sea:#9fc3c0;--tower:#d3d0c7;--tower-2:#bdbab1;--tower-top:#e4e1d8;--win:#b3afa5;--hill:#c9cf9a;--hill-2:#a7b073;--leaf:#7d8a4a;--olive:#55602d;--ground:#ecd6ad;
  --flower:#ffffff;--flower-mid:#f2b33d;--cheek:#f7a08c;
  --btn-hover:#156151;--veil-strong:94%;--veil-mid:72%;--veil-end:65%;--backdrop:#002e29;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#101915;--card:#17231e;--sand:#241f17;--blush:#33241f;--border:#2c3a33;
  --text:#f1ece1;--muted:#a7bab1;--link:#f1ece1;
  --head-accent:#f2907a;
  --line:#5f646a;--icon:#a7bab1;
  --accent:#ef7a65;--accent-ink:#1f2933;--focus:#f2917f;
  --ph-bg:#302b23;--ph-text:#dcd2c2;
  --band:#0c2f28;--band-text:#f1ece1;--band-muted:#b6cbc2;--band-focus:#f2917f;--band-edge:#2c3a33;
  --wa-wall:#0b141a;--wa-doodle:#16222a;--wa-in:#202c33;--wa-out:#005c4b;--wa-doc:#025144;--wa-text:#e9edef;--wa-meta:#9aa7ae;--wa-meta-out:#b3cfc9;
  --wa-head:#202c33;--wa-head-text:#e9edef;--wa-status:#9aa7ae;--wa-edge:#313d45;--wa-pill:#2a3942;--wa-icon:#53bdeb;--wa-tick:#53bdeb;--bezel:#1c1c1e;--bezel-edge:#4a4a4e;--island:#000000;
  --sky:#2e2419;--sun:#8a5a3c;--sea:#284a4a;--tower:#4a4a46;--tower-2:#3c3c39;--tower-top:#57574f;--win:#363632;--hill:#3a3f2a;--hill-2:#2f3422;--leaf:#6c7744;--olive:#9aa565;--ground:#3a3020;
  --flower:#f1ece1;--flower-mid:#d9a03a;--cheek:#d8826f;
  --btn-hover:#d9d3c6;--veil-strong:97%;--veil-mid:92%;--veil-end:78%;--backdrop:#000000;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#101915;--card:#17231e;--sand:#241f17;--blush:#33241f;--border:#2c3a33;
  --text:#f1ece1;--muted:#a7bab1;--link:#f1ece1;
  --head-accent:#f2907a;
  --line:#5f646a;--icon:#a7bab1;
  --accent:#ef7a65;--accent-ink:#1f2933;--focus:#f2917f;
  --ph-bg:#302b23;--ph-text:#dcd2c2;
  --band:#0c2f28;--band-text:#f1ece1;--band-muted:#b6cbc2;--band-focus:#f2917f;--band-edge:#2c3a33;
  --wa-wall:#0b141a;--wa-doodle:#16222a;--wa-in:#202c33;--wa-out:#005c4b;--wa-doc:#025144;--wa-text:#e9edef;--wa-meta:#9aa7ae;--wa-meta-out:#b3cfc9;
  --wa-head:#202c33;--wa-head-text:#e9edef;--wa-status:#9aa7ae;--wa-edge:#313d45;--wa-pill:#2a3942;--wa-icon:#53bdeb;--wa-tick:#53bdeb;--bezel:#1c1c1e;--bezel-edge:#4a4a4e;--island:#000000;
  --sky:#2e2419;--sun:#8a5a3c;--sea:#284a4a;--tower:#4a4a46;--tower-2:#3c3c39;--tower-top:#57574f;--win:#363632;--hill:#3a3f2a;--hill-2:#2f3422;--leaf:#6c7744;--olive:#9aa565;--ground:#3a3020;
  --flower:#f1ece1;--flower-mid:#d9a03a;--cheek:#d8826f;
  --btn-hover:#d9d3c6;--veil-strong:97%;--veil-mid:92%;--veil-end:78%;--backdrop:#000000;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Heebo",Arial,"Arial Hebrew",sans-serif;font-size:1rem;line-height:1.6;overflow-wrap:break-word}
h1,h2{font-family:"Heebo",Arial,"Arial Hebrew",sans-serif;font-weight:700;letter-spacing:-.03em;margin:0}
h3{font-weight:700}
p{margin:0 0 12px}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--focus);outline-offset:5px;border-radius:6px}
bdi{unicode-bidi:isolate}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.narrow{max-width:760px}

/* The word mark: the umbrella and the name (her Latin "silvy✳" waits for her pick, docs/design.md). */
.mark{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--text);text-decoration:none;font-weight:700;font-size:1.9rem;letter-spacing:-.03em;line-height:1}
.mark svg{width:38px;height:auto}
.umb-canopy{fill:var(--accent)}
.umb-handle{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round}

/* The home page, her layout: the nav, the hero card over her render, the strip, the sections, the band, the FAQ, the CTA. */
.top-nav{height:90px;max-width:1400px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 48px}
.top-nav a{text-decoration:none}
.links{display:flex;gap:32px;font-size:15px}
.links a{display:inline-flex;align-items:center;min-height:44px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:44px;padding:15px 25px;border-radius:100px;background:var(--text);color:var(--bg);font-weight:700;border:1px solid var(--text);text-decoration:none;line-height:1.2}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn.light{background:transparent;color:var(--text)}
.btn.light:hover{background:transparent}

.hero{position:relative;margin:0 20px;border-radius:24px;min-height:720px;overflow:hidden;background:var(--sand);isolation:isolate}
.hero-art{position:absolute;inset:0;z-index:-2}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,var(--sand),transparent 70%);background:linear-gradient(270deg,color-mix(in srgb,var(--sand) var(--veil-strong),transparent),color-mix(in srgb,var(--sand) var(--veil-mid),transparent) 33%,transparent var(--veil-end))}
.hero-copy{position:relative;max-width:650px;padding:75px 65px 45px;margin-left:auto}
.eyebrow{font-size:14px;display:flex;gap:8px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.hero h1{font-size:76px;line-height:1.1;letter-spacing:-3px;margin:24px 0}
.h-accent{font-style:normal;color:var(--head-accent)}
.intro{font-size:21px;line-height:1.7;max-width:450px;margin:0}
.hero-actions{display:flex;gap:12px;align-items:center;margin-top:26px}
.micro{font-size:12px;margin-top:16px;color:var(--text)}
.qr-pill{position:absolute;left:35px;bottom:30px;background:var(--card);color:var(--text);border-radius:18px;padding:13px;display:flex;gap:15px;align-items:center;max-width:270px;box-shadow:0 10px 40px #11223333;text-decoration:none}
.qr-pill img{width:85px;height:85px;background:#ffffff;padding:4px;border-radius:6px;flex:none}
.qr-pill strong{font-size:17px;display:block}
.qr-pill small{font-size:11px;line-height:1.5;display:block;margin-top:5px}

.strip{display:flex;justify-content:center;gap:60px;padding:25px;border-bottom:1px solid var(--border);font-size:14px}
.strip span::before{content:"✓";padding-left:10px;color:var(--head-accent)}

.section{max-width:1240px;margin:0 auto;padding:100px 40px}
.section.flush-top{padding-top:0}
.kicker{font-size:13px;letter-spacing:1px;color:var(--muted);font-weight:700}
.heading{font-size:48px;line-height:1.2;letter-spacing:-1.5px;margin:15px 0 22px}
.section-intro{font-size:19px;line-height:1.8;max-width:600px}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:45px}
.editorial-services{gap:0;margin-top:55px;border-top:1px solid var(--border);padding-top:35px}
.service-story{padding:0 32px;position:relative}
.service-story:first-child{padding-right:0}
.service-story:last-child{padding-left:0}
.service-story+.service-story{border-right:1px solid var(--border)}
.service-story h3{font-size:28px;line-height:1.4;letter-spacing:-.6px;margin:0 0 20px;min-height:80px}
.service-story p{font-size:17px;line-height:1.9;margin:0;max-width:330px;color:var(--muted)}

.journey{background:var(--band);color:var(--band-text);border:1px solid var(--band-edge);border-radius:25px;padding:55px;display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.journey .kicker{color:var(--band-muted)}
.journey .heading{font-size:44px;max-width:440px}
.journey :focus-visible{outline-color:var(--band-focus)}
.steps{display:grid;gap:22px;margin-top:32px}
.step{line-height:1.85;color:var(--band-muted);font-size:16px;max-width:410px}
.step b{display:block;color:var(--band-text);font-size:21px;margin-bottom:-19px}
.chat{justify-self:center;width:100%;max-width:300px;min-width:0;transform:rotate(-2deg)}

/* The demo chat as an iPhone with WhatsApp in it (the founder, Oct 29: "should look like a whatsapp conversation on
   iphone"). Drawn here, generic shapes, no logo: the body and the Dynamic Island, the status bar, WhatsApp's iOS header
   (light, a back chevron, the drawn Silvy as the avatar, video and phone), the beige wallpaper with a doodle of CSS
   gradients (the CSP allows no data: image), her bubbles green on the left and Silvy's white on the right with tails,
   times and blue ticks, a document card and a photo tile around her own words, the input bar and the home indicator.
   Sizes follow the phone's width (container units), so it scales down on a narrow screen. */
.phone{position:relative;container-type:inline-size;background:var(--bezel);border-radius:44px;padding:9px;box-shadow:0 0 0 1px var(--bezel-edge),0 24px 50px #001b2455}
.phone-screen{position:relative;overflow:clip;border-radius:36px;background:var(--wa-wall);color:var(--wa-text);display:flex;flex-direction:column}
.island{position:absolute;z-index:2;top:9px;left:50%;width:31%;height:25px;margin-left:-15.5%;border-radius:20px;background:var(--island)}
.ios-status{direction:ltr;display:flex;align-items:center;justify-content:space-between;height:44px;padding:4px 7% 0 9%;background:var(--wa-head);color:var(--wa-head-text);font-size:15px;font-weight:700;line-height:1}
.ios-icons{display:flex;align-items:center;gap:5px}
.ios-icons svg{display:block;fill:var(--wa-head-text)}
.ios-signal{width:17px;height:11px}
.ios-wifi{width:15px;height:11px}
.ios-wifi .arc{fill:none;stroke:var(--wa-head-text);stroke-width:1.9;stroke-linecap:round}
.ios-battery{width:25px;height:12px}
.ios-battery .shell{fill:none;stroke:var(--wa-head-text);stroke-opacity:.45}
.wa-head{display:flex;align-items:center;gap:8px;padding:4px 10px 8px;background:var(--wa-head);color:var(--wa-head-text);border-bottom:1px solid var(--wa-edge)}
.wa-back svg{display:block;width:11px;height:19px;fill:none;stroke:var(--wa-icon);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.avatar{width:36px;height:36px;border-radius:50%;overflow:clip;flex:none}
.avatar svg{display:block;width:100%;height:100%}
.mf-bg{fill:var(--accent)}
.mf-eyes{fill:var(--accent-ink)}
.mf-smile{fill:none;stroke:var(--accent-ink);stroke-width:2.2;stroke-linecap:round}
.mf-cheek{fill:var(--cheek)}
.mf-flower{fill:var(--flower)}
.mf-mid{fill:var(--flower-mid)}
.wa-who{flex:1;min-width:0;font-size:clamp(14px,5.2cqi,15.5px);line-height:1.25}
.wa-who small{font-size:clamp(11.5px,4.2cqi,12.5px);color:var(--wa-status)}
.wa-calls{display:flex;align-items:center;gap:16px}
.wa-calls svg{display:block;width:22px;height:18px;fill:none;stroke:var(--wa-icon);stroke-width:1.8;stroke-linejoin:round}
.wa-chat{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px 11px 14px;background-color:var(--wa-wall);
  background-image:radial-gradient(circle at 22% 24%,var(--wa-doodle) 0 2.5px,transparent 3px),radial-gradient(circle at 70% 64%,transparent 0 5px,var(--wa-doodle) 5.5px 6.8px,transparent 7.3px),linear-gradient(45deg,transparent 0 46%,var(--wa-doodle) 46% 54%,transparent 54%),linear-gradient(-45deg,transparent 0 46%,var(--wa-doodle) 46% 54%,transparent 54%);
  background-size:46px 46px,58px 58px,14px 14px,14px 14px;background-position:0 0,12px 20px,30px 34px,30px 34px;background-repeat:repeat,repeat,no-repeat,no-repeat}
.bubble{position:relative;align-self:flex-start;max-width:84%;padding:6px 9px 7px;border-radius:9px;border-start-start-radius:0;background:var(--wa-in);color:var(--wa-text);font-size:clamp(13px,4.9cqi,14.5px);line-height:1.45;box-shadow:0 1px .5px #0b141a26}
.bubble::before{content:"";position:absolute;top:0;inset-inline-start:-7px;width:8px;height:11px;background:inherit;clip-path:polygon(0 0,100% 0,0 100%)}
.bubble.you{align-self:flex-end;border-start-start-radius:9px;border-start-end-radius:0;background:var(--wa-out)}
.bubble.you::before{inset-inline-start:auto;inset-inline-end:-7px;clip-path:polygon(0 0,100% 0,100% 100%)}
.meta{float:left;display:inline-flex;align-items:center;gap:3px;margin:7px 10px -3px 0;font-size:11px;line-height:1;color:var(--wa-meta);direction:ltr}
.you .meta{color:var(--wa-meta-out)}
.ticks{width:16px;height:10px;fill:none;stroke:var(--wa-tick);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bubble.file,.bubble.pic{display:flex;flex-direction:column;align-items:stretch;padding:4px 4px 6px}
.bubble.file .meta,.bubble.pic .meta{float:none;align-self:flex-end;margin:5px 5px 0}
.attachment.doc{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:7px;background:var(--wa-doc);font-size:.93em}
.doc-icon{width:22px;height:28px;flex:none}
.doc-icon .page{fill:#ffffff;stroke:#c3c9cc}
.doc-icon .fold{fill:#e9edef;stroke:#c3c9cc}
.doc-icon .band{fill:var(--accent)}
.bubble.pic .caption{padding:5px 5px 0}
.attachment.photo{order:-1;display:flex;align-items:flex-end;width:190px;max-width:100%;height:118px;padding:7px;border-radius:7px;
  background:linear-gradient(#a59d90,#a59d90) 50% 26px/58px 3px no-repeat,repeating-linear-gradient(#ffffff 0 9px,#dad4c8 9px 10px) 50% 38px/70px 50px no-repeat,linear-gradient(#ffffff,#ffffff) 50% 16px/86px 92px no-repeat,linear-gradient(160deg,#d9c8a9,#b3a184)}
.photo-chip{padding:2px 7px;border-radius:6px;background:var(--wa-in);color:var(--wa-text);font-size:.86em}
.typing{display:none}
.wa-input{display:flex;align-items:center;gap:10px;padding:8px 12px 24px;background:var(--wa-head);border-top:1px solid var(--wa-edge)}
.wa-input svg{display:block;width:22px;height:22px;flex:none;fill:none;stroke:var(--wa-icon);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wa-field{flex:1;min-width:0;height:30px;border-radius:16px;background:var(--wa-pill);border:1px solid var(--wa-edge)}
@container (max-width:280px){
  .ios-status{font-size:13px;padding:4px 6% 0 8%}
  .island{width:27%;margin-left:-13.5%;height:22px}
  .ios-icons{gap:3px}
  .ios-signal{width:14px;height:9px}.ios-wifi{width:13px;height:10px}.ios-battery{width:20px;height:10px}
  .wa-head{gap:6px;padding-inline:8px}
  .avatar{width:32px;height:32px}
  .wa-calls{gap:9px}
  .wa-calls svg{width:19px;height:16px}
}
.home-bar{position:absolute;bottom:7px;left:50%;width:36%;height:5px;margin-left:-18%;border-radius:3px;background:var(--wa-head-text)}
.demo-label{font-size:12px;text-align:center;margin:14px 0 0;color:var(--band-muted)}

.about{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about p{font-size:18px;line-height:1.9}
.about-art{background:var(--sand);border-radius:45% 45% 20px 20px;min-height:400px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.about-art img{display:block;width:100%;height:400px;object-fit:cover;object-position:15% 70%}
.about-art span{position:absolute;bottom:20px;background:var(--card);color:var(--text);padding:10px 22px;border-radius:50px;font-size:13px}
.underline-link{display:inline-flex;align-items:center;min-height:44px;color:var(--text);text-decoration:none;border-bottom:1px solid;padding-bottom:5px}

.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:75px;border-top:1px solid var(--border)}
.faq-title{align-self:start}
.faq details{border-bottom:1px solid var(--border);padding:23px 0}
.faq summary{font-size:20px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:25px;font-weight:400;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{font-size:16px;line-height:1.9}

.cta{background:var(--blush);text-align:center;margin:0 20px;border-radius:24px;padding:65px 25px}
.cta .heading{font-size:56px}
.cta p{font-size:19px}
.cta .btn{margin:15px}
.cta-note{font-size:12px}
/* The drawn Silvy in the closing band, hello pose (the model sheet in docs/design.md). */
.mascot-wave{display:block;width:84px;height:auto;margin:0 auto 4px;overflow:visible}
.mw-body{fill:var(--accent)}
.mw-limb{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round}
.mw-shadow{fill:var(--text);fill-opacity:.08}
.mw-smile{stroke-width:2.6}
.wave-arm{transform-box:fill-box;transform-origin:0% 100%}
.mf-eyes{transform-box:fill-box;transform-origin:center}

.footer{max-width:1240px;margin:auto;padding:50px 40px 25px}
.footer-top{display:flex;justify-content:space-between;align-items:center}
.footer-links{display:flex;gap:25px;font-size:14px}
.footer-links a,.legal a{color:var(--text);text-decoration:none}
.footer-links a{display:inline-flex;align-items:center;min-height:44px}
.legal{font-size:12px;line-height:1.9;color:var(--muted);border-top:1px solid var(--border);padding-top:25px;margin-top:30px}
.legal a{color:var(--muted);text-decoration:underline}

/* Her dialog without a script (the site's CSP runs none): hidden until the address ends in #whatsapp; the close link and
   the backdrop go back to the top. */
/* Always fixed and only hidden, so opening it (#whatsapp) and closing it (#closed, a fixed pin) never scroll the page (code review, Oct 29). */
.dialog{display:grid;place-items:center;position:fixed;inset:0;z-index:50;padding:16px;visibility:hidden}
.dialog:target{visibility:visible}
.anchor-pin{position:fixed;top:0;left:0;width:0;height:0}
.dialog-backdrop{position:absolute;inset:0;background:rgba(7,30,26,.6);background:color-mix(in srgb,var(--backdrop) 67%,transparent);backdrop-filter:blur(5px)}
.dialog-panel{position:relative;background:var(--bg);color:var(--text);border-radius:24px;padding:35px;max-width:440px;width:90%;text-align:center;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto}
.dialog-panel h2{font-size:28px}
.dialog-panel p{line-height:1.8}
.dialog-panel img{width:180px;height:180px;display:block;margin:20px auto;background:#ffffff;padding:8px;border-radius:8px}
.close{float:left;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:25px;color:var(--text);text-decoration:none;line-height:1}
.dialog-note{font-size:14px}
.mobile-contact,.mobile-dialog-intro{display:none}

@media (min-width:1600px){.hero{max-width:1560px;margin:auto}}
/* Between the phone layout and a wide screen the words cover most of the render: a fuller veil keeps them readable
   (mobile pass, Oct 29). */
@media (min-width:801px) and (max-width:1100px){.hero::before{background:var(--sand);background:linear-gradient(270deg,var(--sand),var(--sand) 50%,color-mix(in srgb,var(--sand) var(--veil-mid),transparent) 82%,transparent)}}
@media (max-width:800px){
  /* The sticky WhatsApp bar (about 97px, QA Oct 29) is the home page's only: room under the page for it, and keyboard focus
     scrolled clear of it. */
  html{scroll-padding-bottom:120px}
  body{overflow-x:clip}
  body.home{padding-bottom:110px}
  .top-nav{height:72px;padding:0 20px}
  .top-nav .btn{font-size:13px;padding:10px 15px;min-height:44px}
  .mark{font-size:1.6rem}
  .links{display:none}
  .hero{margin:0 10px;min-height:0;display:flex;flex-direction:column;border-radius:22px}
  .hero::before{display:none}
  .hero-art{position:relative;inset:auto;z-index:0;order:2;height:320px;margin-top:-15px;-webkit-mask-image:linear-gradient(transparent,#000 12%);mask-image:linear-gradient(transparent,#000 12%)}
  .hero-art img{object-position:10% 55%}
  .hero-copy{padding:30px 24px 5px;width:100%;max-width:none;margin:0}
  .eyebrow{font-size:12px;line-height:1.7;gap:6px;max-width:290px}
  .hero h1{font-size:clamp(36px,10.3vw,56px);line-height:1.13;letter-spacing:-1.5px;margin:20px 0 18px}
  .h-accent{display:block;margin-top:3px}
  .intro{font-size:16px;line-height:1.8;max-width:100%}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:12px;margin-top:22px}
  .hero-actions .btn{width:100%;min-height:52px;font-size:16px;padding:13px 20px}
  .hero-actions .light{border:0;padding:6px;min-height:44px;font-size:14px}
  .micro{font-size:12px;text-align:center;margin-top:10px}
  .qr-pill{display:none}
  .strip{display:grid;grid-template-columns:1fr;gap:10px;padding:22px 28px;font-size:13px;line-height:1.5}
  .strip span::before{padding-left:8px}
  .section{padding:48px 24px}
  .heading{font-size:32px;line-height:1.3;letter-spacing:-.8px;margin:12px 0 18px}
  .section-intro{font-size:16px;line-height:1.85}
  .kicker{font-size:12px;letter-spacing:0}
  .services{grid-template-columns:1fr;gap:12px}
  .editorial-services{margin-top:26px;padding-top:0}
  .service-story,.service-story:first-child,.service-story:last-child{padding:24px 0}
  .service-story+.service-story{border-right:0;border-top:1px solid var(--border)}
  .service-story h3{min-height:0;font-size:24px;line-height:1.4;margin:0 0 12px}
  .service-story p{font-size:16px;line-height:1.9;max-width:none}
  .journey{grid-template-columns:1fr;padding:28px 20px;border-radius:22px;gap:30px}
  .journey .heading{font-size:31px}
  .steps{gap:22px;margin-top:25px}
  .step{font-size:15px;line-height:1.8}
  .step b{font-size:19px}
  .chat{transform:none}
  .about{grid-template-columns:1fr;gap:28px}
  .about-art{min-height:245px;border-radius:100px 100px 18px 18px}
  .about-art img{height:245px;object-position:15% center}
  .about-art span{font-size:12px;padding:8px 12px;bottom:12px}
  .about p{font-size:16px;line-height:1.9}
  .faq{grid-template-columns:1fr;gap:22px}
  .faq summary{font-size:17px;line-height:1.6}
  .faq details{padding:18px 0}
  .faq details p{font-size:15px;line-height:1.9}
  .cta{margin:0 10px;padding:38px 23px;border-radius:22px}
  .cta .heading{font-size:34px}
  .cta p{font-size:16px}
  .cta .btn{width:100%;margin:12px 0;min-height:52px}
  .footer{padding:36px 24px 25px}
  .footer-top{align-items:start;gap:25px;flex-direction:column}
  .footer-links{flex-wrap:wrap;gap:0 20px;font-size:13px}
  .legal{font-size:12px;overflow-wrap:anywhere}
  .mobile-contact{display:flex;flex-direction:column;gap:6px;position:fixed;bottom:0;left:0;right:0;z-index:20;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(14px);padding:12px 20px calc(9px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}
  .mobile-contact .btn{min-height:50px;width:100%;font-size:16px}
  .mobile-contact small{text-align:center;font-size:11px;color:var(--muted)}
  .dialog-panel{padding:26px 22px}
  .dialog-panel img,.desktop-dialog-intro{display:none}
  .mobile-dialog-intro{display:block}
  .dialog-panel .btn{width:100%;min-height:52px}
  .dialog-panel h2{font-size:25px}
}
@media (max-width:360px){.hero-copy{padding-right:20px;padding-left:20px}.hero h1{font-size:36px}.hero-art{height:285px}.section{padding-right:20px;padding-left:20px}.journey{padding-right:17px;padding-left:17px}}

/* The accessibility statement (and any plain text page): the header, a card, the footer. */
.site-head{padding:12px 0}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.page{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:28px 20px;margin-top:8px;font-size:1.0625rem;line-height:1.7}
.page h1{font-size:clamp(2.1rem,7vw,3rem);line-height:1.1;letter-spacing:-.035em;margin:0 0 18px}
.page h2.sub{font-size:1.2rem;letter-spacing:-.01em;margin:22px 0 8px}
.page a{text-decoration:underline;text-underline-offset:3px}
@media (min-width:800px){.page{padding:44px 48px;font-size:1.125rem}}
.prose p,.prose li{max-width:46rem}
.prose ul{padding-inline-start:20px;margin:0 0 14px}
.prose li{margin:0 0 10px}
.note{color:var(--muted);font-size:.95rem;margin-top:16px}
.ph{display:inline-block;line-height:1.45;margin:1px 0;background:var(--ph-bg);color:var(--ph-text);border-radius:6px;padding:0 6px;font-size:.95em;white-space:normal}
.ph-tag{display:inline-block;margin-inline-start:6px;font-size:.75em;font-weight:700;border:1px solid currentColor;border-radius:999px;padding:0 6px;line-height:1.5;vertical-align:1px}
.site-foot{margin-top:56px;padding:32px 0 40px;border-top:1px solid var(--border);color:var(--muted);font-size:.95rem}
.site-foot a{color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 18px;list-style:none;padding:0;margin:12px 0 0}
.foot-links a{display:inline-flex;align-items:center;min-height:44px}

/* Motion (the founder, Oct 29: "some moving graphics - could be the cards that move, or the little creature"). Only for
   a visitor who has not asked for less; the reduce block below stills the rest. Everything that moves is driven by the
   scroll (animation-timeline: view()), so nothing moves by itself or loops on (WCAG 2.2.2, no pause control needed), and
   a browser without scroll-driven animations shows every element where it ends, still and visible. */
@media (prefers-reduced-motion:no-preference){
  .btn,.qr-pill,.service-story,.step{transition:transform .18s}
  .btn:hover,.qr-pill:hover{transform:translateY(-2px)}
  .service-story:hover,.step:hover{transform:translateY(-3px)}
  @supports (animation-timeline:view()){
    @keyframes rise{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
    @keyframes mw-float{0%{translate:0 14px}50%{translate:0 -4px}100%{translate:0 3px}}
    @keyframes wave{0%,62%,100%{rotate:0deg}12%,36%{rotate:-20deg}24%,48%{rotate:6deg}}
    @keyframes blink{0%,30%,35%,62%,67%,100%{scale:1 1}32%,64%{scale:1 .1}}
    @keyframes typing{0%{opacity:0}12%{opacity:1}82%{opacity:1}to{opacity:0}}
    @keyframes dot{0%,20%,40%,60%,80%,100%{translate:0 0}10%,30%,50%,70%,90%{translate:0 -3px}}
    /* Her three services, the steps, the FAQ's title: rise and fade in once, as each enters the screen. */
    .service-story,.step,.faq-title{animation:rise linear both;animation-timeline:view();animation-range:entry}
    /* The closing band's Silvy floats up and waves twice as the band comes in. */
    .cta{view-timeline:--wave}
    .mascot-wave{animation:mw-float linear both;animation-timeline:--wave;animation-range:cover 0% cover 100%}
    .wave-arm{animation:wave linear both;animation-timeline:--wave;animation-range:cover 20% cover 60%}
    /* The chat's avatar blinks twice while the phone crosses the screen. */
    .avatar{view-timeline:--avatar}
    .avatar .mf-eyes{animation:blink linear both;animation-timeline:--avatar;animation-range:cover 10% cover 90%}
    /* The messages come in one after another as the phone scrolls up; the typing dots show before her last line, which
       then stays. */
    .wa-chat{timeline-scope:--last}
    .wa-chat .bubble{animation:rise linear both;animation-timeline:view();animation-range:cover 4% cover 16%}
    .wa-chat .bubble.last{view-timeline:--last;animation-timeline:--last;animation-range:cover 14% cover 18%}
    .typing{display:flex;position:absolute;bottom:14px;right:11px;gap:4px;align-items:center;padding:11px 12px;border-radius:9px;border-start-start-radius:0;background:var(--wa-in);box-shadow:0 1px .5px #0b141a26;animation:typing linear both;animation-timeline:--last;animation-range:cover 5% cover 14%}
    .typing span{width:7px;height:7px;border-radius:50%;background:var(--wa-meta);animation:dot linear both;animation-timeline:--last;animation-range:cover 6% cover 13%}
    .typing span:nth-child(2){animation-range:cover 6.5% cover 13.5%}
    .typing span:nth-child(3){animation-range:cover 7% cover 14%}
  }
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}