/* Wudd website: the shared layer (12 Oct 2026).
   Tokens, type, buttons, the floating nav and the footer, for every page.
   Brand: docs/EAYNI-HOUSE-STYLE.md. Fraunces for headings, Instrument Sans for
   text, Instrument Serif italic for quotes. One accent: the Wudd rose.
   Radius rule: interactive things are pills, containers are 28px (inner 22px),
   inputs 14px. Every colour pair used for text passes WCAG AA. */

@font-face{font-family:'Fraunces';src:url(/assets/v2/fraunces-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(/assets/v2/fraunces-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(/assets/v2/fraunces-italic.woff2) format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(/assets/v2/instrument-sans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(/assets/v2/instrument-sans-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(/assets/v2/instrument-sans-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(/assets/v2/instrument-serif-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --bg:#FCF1EE;          /* page */
  --bg-2:#F7E6E2;        /* a band one shade deeper */
  --surface:#FFFAF8;     /* cards */
  --tray:rgba(150,70,50,.06);  /* the outer bezel of a card */
  --ink:#2B201C;         /* headings */
  --text:#3E332E;        /* body */
  --muted:#6F5F57;       /* secondary, 5.5:1 on --bg */
  --rose:#ED706A;        /* brand coral, decoration only */
  --rose-soft:#FBE3DC;
  --accent:#B83E4C;      /* deep coral-rose for text and icons, 4.9:1 on --bg */
  --link:#B23C4A;
  --btn:#EC6E66;         /* the app's coral, flat uses (step number, open question) */
  --btn-hover:#E25C55;
  --coral-top:#F27E74;   /* coral buttons and panels run from this ... */
  --coral-bottom:#E8635C;/* ... to this, like the app's own buttons */
  --coral-text:#E5605A;  /* coral for large type: 3:1 on --bg */
  --on-btn:#FFFFFF;
  --ink-btn:#2B201C;
  --on-ink:#FFF8F6;
  --line:rgba(80,40,30,.12);
  --line-soft:rgba(80,40,30,.07);
  --glass:rgba(255,248,246,.72);
  --shadow-sm:0 1px 2px rgba(120,50,35,.06),0 4px 14px -6px rgba(140,60,40,.14);
  --shadow:0 1px 2px rgba(120,50,35,.05),0 24px 60px -24px rgba(140,60,40,.28);
  --shadow-phone:0 2px 4px rgba(60,25,15,.08),0 40px 80px -30px rgba(120,45,30,.45);
  --highlight:inset 0 1px 0 rgba(255,255,255,.7);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --quote:'Instrument Serif',Georgia,serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --maxw:1240px;
  --gutter:clamp(20px,4vw,40px);
  --r-xl:28px;--r-in:22px;--r-sm:14px;
  --nav-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1C1513;--bg-2:#231A17;--surface:#2A201C;--tray:rgba(255,220,210,.05);
    --ink:#F6EDE9;--text:#E6D9D3;--muted:#B7A69E;
    --rose:#F0827C;--rose-soft:#3A2622;--accent:#F29A90;--link:#F29A90;
    --btn:#EC6E66;--btn-hover:#F27E74;--on-btn:#FFFFFF;--coral-text:#F29A90;
    --ink-btn:#F6EDE9;--on-ink:#1C1513;
    --line:rgba(255,225,215,.12);--line-soft:rgba(255,225,215,.07);
    --glass:rgba(32,24,21,.72);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 4px 14px -6px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 24px 60px -24px rgba(0,0,0,.6);
    --shadow-phone:0 2px 4px rgba(0,0,0,.3),0 40px 80px -30px rgba(0,0,0,.7);
    --highlight:inset 0 1px 0 rgba(255,255,255,.06);
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 40px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:600;color:var(--ink);letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
html.no-scroll{overflow:hidden}
::selection{background:var(--rose);color:#2B1512}

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:12px;z-index:60;padding:10px 16px;border-radius:999px;background:var(--ink-btn);color:var(--on-ink);font-weight:600;font-size:15px;text-decoration:none;transform:translateY(-160%);transition:transform .3s var(--ease)}
.skip:focus{transform:none;color:var(--on-ink)}
.wrap{width:100%;max-width:calc(var(--maxw) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}

/* A whisper of paper grain over everything (fixed, so it never repaints on scroll). */
body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){body::after{mix-blend-mode:screen;opacity:.025}}

/* ── type ─────────────────────────────────────────────────────────────── */
.display{font-size:clamp(46px,6.6vw,96px);line-height:.98;letter-spacing:-.04em;font-weight:600}
.display em,.h2 em{font-style:italic;font-weight:600;color:var(--coral-text);letter-spacing:-.03em}
.h2{font-size:clamp(34px,4.6vw,62px);line-height:1.02;letter-spacing:-.035em}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--text);max-width:34em}
.eyebrow{text-wrap:balance;display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:7px 14px 7px 12px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line-soft);font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--text);line-height:1.2}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 22%,transparent);flex:none}

/* ── icons ────────────────────────────────────────────────────────────── */
.ico{width:1em;height:1em;flex:none}

/* ── buttons: the app's own coral button, carrying the app icon ─────────
   Same fill, shadow and press as PrimaryButton in the app (F27E77 to E8665F,
   rose shadow, 96 % press). The tile on the left is the Wudd icon, set a few
   degrees off like the tiles around the phone; it straightens on hover. */
.btn{display:inline-flex;align-items:center;gap:14px;height:58px;padding:0 28px 0 9px;border-radius:999px;background:linear-gradient(180deg,#F27E77,#E8665F);color:var(--on-btn);font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1;text-decoration:none;white-space:nowrap;text-shadow:0 1px 1px rgba(150,45,35,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 0 rgba(170,50,40,.12),0 4px 16px rgba(180,60,45,.22);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.btn:hover{color:var(--on-btn);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 0 rgba(170,50,40,.12),0 14px 30px -10px rgba(180,60,45,.42)}
.btn:active{transform:scale(.96);transition-duration:.1s}
.btn-app{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#fff;color:#ED706A;transform:rotate(-7deg);box-shadow:0 6px 14px -6px rgba(140,40,30,.55),inset 0 -1px 0 rgba(170,60,50,.08);transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
.btn-app .knot{width:28px}
.btn:hover .btn-app{transform:rotate(0) scale(1.06)}
@media (prefers-reduced-motion:reduce){.btn-app,.btn:hover .btn-app{transform:none;transition:none}}

.link-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:16px;color:var(--ink);text-decoration:none}
.link-more .lm{padding-bottom:3px;background:linear-gradient(color-mix(in srgb,currentColor 40%,transparent),color-mix(in srgb,currentColor 40%,transparent)) 0 100%/100% 1px no-repeat}
.link-more .link-ico{font-size:18px;transition:transform .5s var(--ease)}
.link-more:hover{color:var(--ink)}
.link-more:hover .lm{background-image:linear-gradient(currentColor,currentColor)}
.link-more:hover .link-ico{transform:translateY(3px)}

/* ── the wordmark and the knot, drawn in currentColor ────────────────── */
.wordmark{display:block;width:96px;aspect-ratio:313.6/103.1;background:currentColor;-webkit-mask:url(/assets/v3/wudd-wordmark.svg) center/contain no-repeat;mask:url(/assets/v3/wudd-wordmark.svg) center/contain no-repeat}
.knot{display:block;aspect-ratio:144.9/91;background:currentColor;-webkit-mask:url(/assets/v3/wudd-knot.svg) center/contain no-repeat;mask:url(/assets/v3/wudd-knot.svg) center/contain no-repeat}

/* ── the floating nav ─────────────────────────────────────────────────── */
.top-sentinel{position:absolute;top:0;left:0;width:1px;height:1px}
.nav{position:fixed;inset:14px 0 auto;z-index:50;padding:0 max(12px,calc(var(--gutter) - 12px));pointer-events:none}
.nav-bar{pointer-events:auto;max-width:calc(var(--maxw) + 24px);height:var(--nav-h);margin:0 auto;display:flex;align-items:center;gap:20px;padding:0 10px 0 22px;border-radius:999px;background:transparent;box-shadow:0 0 0 1px transparent;transition:background-color .5s var(--ease),box-shadow .5s var(--ease),max-width .7s var(--ease)}
.is-scrolled .nav-bar,.menu-open .nav-bar{background:var(--glass);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);box-shadow:0 0 0 1px var(--line-soft),0 12px 32px -16px rgba(120,50,35,.25)}
.brand{display:flex;align-items:center;color:var(--rose);min-height:44px;flex:none}
.brand:hover{color:var(--rose)}
.nav-links{margin:0 auto}
.nav-links ul{display:flex;gap:4px}
.nav-links a{display:block;white-space:nowrap;padding:10px 14px;border-radius:999px;font-size:15px;font-weight:500;color:var(--text);text-decoration:none;transition:background-color .3s var(--ease),color .3s}
.nav-links a:hover{background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--ink)}
.nav-links a[aria-current]{color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-soft)}
.nav-end{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-links+.nav-end{margin-left:0}
.lang{display:inline-flex;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.lang button{border:0;background:none;min-width:42px;height:38px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--muted);transition:background-color .35s var(--ease),color .3s,box-shadow .35s var(--ease)}
.lang button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(80,40,30,.12),0 0 0 1px var(--line-soft)}
.lang button:hover:not([aria-pressed="true"]){color:var(--ink)}
.lang button:focus-visible{outline-offset:1px}

/* The header's download button: the app's own icon, the words, then the two stores.
   Quiet while the hero shows its big button; coral once the hero is behind you. */
.nav-cta{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 16px 0 7px;border-radius:999px;background:var(--surface);color:var(--ink);font-size:15px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px var(--line-soft),0 8px 22px -12px rgba(120,50,35,.35);transition:background-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease),transform .5s var(--ease)}
.nav-cta:hover{color:var(--ink);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px var(--line),0 14px 28px -14px rgba(120,50,35,.45)}
.nav-cta:active{transform:scale(.98)}
.nav-cta-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#ED706A;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);transition:transform .6s var(--ease),background-color .45s var(--ease),color .45s var(--ease)}
.nav-cta-icon .knot{width:21px}
.nav-cta:hover .nav-cta-icon{transform:rotate(-8deg) scale(1.06)}
.nav-cta-os{display:inline-flex;align-items:center;gap:7px;margin-left:2px;padding-left:12px;border-left:1px solid var(--line);color:var(--muted);font-size:16px;transition:color .45s var(--ease),border-color .45s var(--ease)}
.nav-cta-os .ico:last-child{font-size:14px}
.nav.past-hero .nav-cta{background:linear-gradient(180deg,var(--coral-top),var(--coral-bottom));color:var(--on-btn);text-shadow:0 1px 1px rgba(150,45,35,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px -12px color-mix(in srgb,var(--btn) 85%,transparent)}
.nav.past-hero .nav-cta:hover{background:linear-gradient(180deg,#EF746A,#E25A53);color:var(--on-btn)}
.nav.past-hero .nav-cta-icon{background:#fff;color:#EC6E66}
.nav.past-hero .nav-cta-os{color:inherit;border-left-color:color-mix(in srgb,currentColor 32%,transparent)}
.menu-btn{display:none;position:relative;width:48px;height:48px;border:0;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line-soft)}
.burger{position:absolute;inset:0;display:block}
.burger i{position:absolute;left:15px;right:15px;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .55s var(--ease),top .55s var(--ease)}
.burger i:first-child{top:20px}
.burger i:last-child{top:27px}
.menu-open .burger i:first-child{top:23.5px;transform:rotate(45deg)}
.menu-open .burger i:last-child{top:23.5px;transform:rotate(-45deg)}

.menu{pointer-events:auto;position:fixed;inset:0;z-index:-1;padding:calc(var(--nav-h) + 48px) var(--gutter) 32px;display:flex;flex-direction:column;justify-content:space-between;background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);overflow-y:auto}
.menu-links li{overflow:hidden;border-bottom:1px solid var(--line-soft)}
.menu-links a{display:block;padding:16px 0;font-family:var(--serif);font-weight:600;font-size:clamp(30px,8vw,44px);letter-spacing:-.03em;line-height:1.1;color:var(--ink);text-decoration:none}
.menu-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:28px}
.menu-links li,.menu-foot{opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i) * 55ms + 60ms)}
.menu.is-in .menu-links li,.menu.is-in .menu-foot{opacity:1;transform:none}

@media (max-width:1160px){
  .nav-links{display:none}
  .nav-end,.nav-links+.nav-end{margin-left:auto}
  .menu-btn{display:block}
}
@media (min-width:761px){.menu-foot{display:none}}
@media (max-width:760px){
  .nav-end>.lang,.nav-cta{display:none}
  .nav-bar{padding:0 8px 0 20px}
}
html:not(.js) .menu-btn{display:none}
html:not(.js) .nav-bar{background:var(--glass);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);box-shadow:0 0 0 1px var(--line-soft)}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{padding:72px 0 calc(48px + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft);font-size:15px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start}
.foot-brand .brand{margin-bottom:16px}
.foot-brand .wordmark{width:110px}
.foot-brand p{max-width:30em;color:var(--muted)}
.foot-links ul{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:6px 48px;justify-content:end}
.foot-links a{display:inline-block;padding:11px 0;color:var(--text);text-decoration:none;font-weight:500}
.foot-links a:hover{color:var(--accent)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--muted)}
.foot>.wrap+.wrap{margin-top:0}
.foot-base p{max-width:60em}
@media (max-width:760px){
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .foot-links ul{justify-content:start;gap:2px 40px}
}

/* ── phones: a real screenshot in a thin dark bezel ──────────────────── */
.phone{position:relative;width:var(--pw,300px);aspect-ratio:765/1662;padding:calc(var(--pw,300px) * .028);border-radius:calc(var(--pw,300px) * .16);background:linear-gradient(145deg,#3a2c27,#1b1412 55%,#2c211d);box-shadow:var(--shadow-phone),inset 0 0 0 1px rgba(255,255,255,.08)}
.phone-core{position:relative;height:100%;border-radius:calc(var(--pw,300px) * .135);overflow:hidden;background:#FCE7E2}
.phone-core img{width:100%;height:100%;object-fit:cover}

/* ── reveal on scroll (only when the script runs) ────────────────────── */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(var(--d,0) * 80ms)}
.js [data-reveal].in{opacity:1;transform:none}

/* page to page: the nav stays, the page fades (browsers that support it) */
@view-transition{navigation:auto}
.nav-bar{view-transition-name:wudd-nav}
::view-transition-old(root){animation:vt-out .28s var(--ease) both}
::view-transition-new(root){animation:vt-in .45s var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-reveal]{opacity:1;transform:none}
}