/*
 * Saywork site, the shared layer of the 2026-11 redesign (the homepage is
 * index.html/next.html; every other page loads this after page.css and
 * experience.css). The header with Clay-style menus and the language sheet,
 * the footer, page typography, cards, and the hover and scroll life.
 * Brand rules: graphite / chalk / paper; pink only for voice and Kit; green
 * and mint only for done; Bricolage Grotesque + Figtree.
 */
:root{
  --graphite:#1D2023;--graphite-2:#262A2E;--graphite-3:#33383D;--chalk:#EEF0EA;--paper:#FAFBF8;
  --pink:#FF4F8B;--green:#0F7A55;--mint:#45D7A2;--stone:#5E6561;--line:#D6DBD2;--mist:#E3E7DF;
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.3,1.35,.5,1);
  --gut:clamp(16px,4vw,40px);
}
body.v2{background:var(--chalk);padding-top:84px;overflow-x:hidden}
body.v2 :focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:8px}

/* ------------------------------------------------------------------ header */
.v2 .top.v2h{position:fixed!important;inset:0 0 auto!important;z-index:60;padding:12px var(--gut) 0;background:none!important;border:0!important;pointer-events:none;opacity:1!important;transform:none!important}
.v2 .top.v2h .topin{pointer-events:auto;max-width:1360px;margin:0 auto;height:60px;display:flex;align-items:center;gap:28px;padding:0 10px 0 22px;border-radius:18px;background:var(--paper);color:var(--graphite);box-shadow:0 1px 0 rgba(29,32,35,.06),0 12px 32px -18px rgba(29,32,35,.35)}
.v2 .top.v2h .lockup{display:inline-flex;align-items:center;gap:8px;font:800 24px/1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.04em;text-decoration:none;color:inherit}
.v2 .top.v2h .lockup svg{width:30px;height:28px}
.v2h .navl{display:flex;gap:2px;font-weight:600;font-size:15.5px}
.v2h .navl>a,.v2h .dd>button{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:0;border-radius:10px;background:none;text-decoration:none;font:600 15.5px/1 "Figtree",system-ui,sans-serif;color:inherit;cursor:pointer;opacity:.92;transition:background .2s,opacity .2s}
.v2h .navl>a:hover,.v2h .dd:hover>button,.v2h .dd.open>button,.v2h .navl>a[aria-current]{opacity:1;background:rgba(128,128,128,.14)}
.v2h .dd>button svg{width:10px;height:10px;transition:transform .3s var(--ease)}
.v2h .dd:hover>button svg:last-child,.v2h .dd.open>button svg:last-child{transform:rotate(180deg)}
.v2h .topr{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.v2h .topr .btn{height:42px;padding:0 18px;border-radius:12px;font:700 15px/1 "Figtree",system-ui,sans-serif;background:var(--graphite);color:var(--chalk);display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.v2h .topr .btn svg{width:16px;height:16px}
.v2h .topr .btn.ghost{background:transparent;color:var(--graphite);box-shadow:inset 0 0 0 1.5px var(--graphite)}
.v2h .dd{position:relative}
.v2h .mm{position:absolute;left:-12px;top:calc(100% + 14px);z-index:70;width:760px;padding:12px;border-radius:24px;background:var(--paper);color:var(--graphite);box-shadow:0 1px 0 rgba(29,32,35,.05),0 40px 80px -30px rgba(29,32,35,.45);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:20% 0;transition:opacity .22s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.v2h .mm::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.v2h .dd:hover .mm,.v2h .dd.open .mm,.v2h .dd:focus-within .mm{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.v2h .mm-g{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.v2h .mm.two .mm-g{grid-template-columns:1.3fr 1fr}
.v2h .mc{display:grid;grid-template-rows:auto 1fr;gap:10px;padding:10px;border-radius:16px;text-decoration:none;color:inherit;transition:background .2s}
.v2h .mc:hover{background:var(--chalk)}
.v2h .mc .pic{position:relative;height:90px;border-radius:12px;background:var(--mist);display:grid;place-items:center;overflow:hidden}
.v2h .mc .pic>*{transition:transform .5s var(--spring)}
.v2h .mc:hover .pic>*{transform:scale(1.08) translateY(-2px)}
.v2h .mc .pic.dark{background:var(--graphite)}
.v2h .mc .pic.green{background:var(--green)}
.v2h .mc .pic .mascot{width:60px}
.v2h .lgrow{display:flex;gap:6px}
.v2h .lgrow span{width:38px;height:38px;border-radius:10px;background:#fff;display:grid;place-items:center;box-shadow:0 6px 14px -8px rgba(29,32,35,.4)}
.v2h .lgrow img{width:22px;height:22px;object-fit:contain}
.v2h .mpill{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 6px;border-radius:20px;background:#111315;color:#fff;font:800 12.5px/1 "Figtree",sans-serif}
.v2h .mpill b{height:28px;padding:0 10px;border-radius:14px;display:grid;place-items:center;background:rgba(255,79,139,.18);color:var(--pink)}
.v2h .mpill svg{width:46px;height:14px;color:var(--pink)}
.v2h .recpill{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-radius:20px;background:#111315;color:#fff;font:800 13px/1 "Figtree",sans-serif}
.v2h .recpill i{width:10px;height:10px;border-radius:50%;background:var(--pink)}
.v2h .mc b.t{display:flex;align-items:center;gap:6px;font-size:15.5px}
.v2h .mc b.t svg{width:14px;height:14px;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .3s var(--ease)}
.v2h .mc:hover b.t svg{opacity:1;transform:none}
.v2h .mc small{display:block;margin-top:3px;font-size:13.5px;color:var(--stone);line-height:1.35}
.v2h .mm-side{display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:18px;border-radius:16px;background:var(--graphite);color:var(--chalk);text-decoration:none;transition:transform .3s var(--spring)}
.v2h .mm-side:hover{transform:translateY(-2px)}
.v2h .mm-side .mascot{width:70px}
.v2h .mm-side b{font:700 22px/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em}
.v2h .mm-side>span:last-child{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;color:var(--mint)}
.v2h .mm-side>span:last-child svg{width:14px;height:14px}
.v2h .mm-list{display:grid;gap:2px}
.v2h .ml{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:9px 10px;border-radius:12px;text-decoration:none;color:inherit;transition:background .2s}
.v2h .ml:hover{background:var(--chalk)}
.v2h .ml .lgs{display:flex}
.v2h .ml .lgs span{width:32px;height:32px;border-radius:9px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px var(--paper),inset 0 0 0 1px var(--mist);margin-inline-end:-8px;transition:margin .3s var(--spring)}
.v2h .ml:hover .lgs span{margin-inline-end:2px}
.v2h .ml .lgs img{width:19px;height:19px;object-fit:contain}
.v2h .ml b{display:block;font-size:15px;margin-inline-start:8px}
.v2h .ml small{display:block;margin-inline-start:8px;font-size:13px;color:var(--stone)}
.v2h .mm.sm{width:300px}
.v2h .mm.sm .ml{grid-template-columns:1fr}
.v2h .mm.sm .ml b,.v2h .mm.sm .ml small{margin-inline-start:0}
/* language sheet */
.v2h .dd.lang>button{gap:7px}
.v2h .dd.lang .globe{width:17px;height:17px}
.v2h .mm.lm{left:auto;right:-10px;width:620px;padding:16px;transform-origin:80% 0}
[dir=rtl] .v2h .mm{left:auto;right:-12px}
[dir=rtl] .v2h .mm.lm{right:auto;left:-10px}
.v2h .lm-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:2px 6px 12px}
.v2h .lm-h b{font:700 18px/1.2 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em}
.v2h .lm-h small{font-size:13px;color:var(--stone)}
.v2 .lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.v2 .lg{position:relative;display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;text-decoration:none;color:inherit;transition:background .2s,transform .25s var(--spring)}
.v2 .lg:hover{background:var(--chalk);transform:translateY(-2px)}
.v2 .lg .gl{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--lc,var(--graphite));color:var(--lt,var(--chalk));box-shadow:inset 0 0 0 1px rgba(29,32,35,.1);font:700 17px/1 system-ui,sans-serif;transition:background .25s,color .25s,transform .4s var(--spring)}
.v2 .lg:hover .gl{transform:rotate(-8deg) scale(1.12);box-shadow:0 6px 16px -6px var(--lc,#000)}
.v2 .lg.now .gl{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--mint)}
.v2 .lg b{display:block;font-size:14px;line-height:1.2;white-space:nowrap}
.v2 .lg small{display:block;font-size:11.5px;color:var(--stone)}
.v2 .lg.soon{opacity:.45;cursor:default}
.v2 .lg.soon:hover{background:none;transform:none}
.v2 .lg.soon:hover .gl{transform:none}
.v2 .lg.soon small::after{content:" · soon"}
.v2h .site-menu{display:none;position:relative}
.v2h .site-menu summary{list-style:none;cursor:pointer}
.v2h .site-menu summary::-webkit-details-marker{display:none}
.v2h .site-menu .lstrip{display:none}
@media (max-width:1100px){
  .v2h .navl{display:none!important}
  .v2h .site-menu{display:block!important}
  .v2h .site-menu summary{display:flex;align-items:center;height:42px;padding:0 16px;border-radius:12px;box-shadow:inset 0 0 0 1.5px currentColor;font-weight:700;font-size:15px}
  .v2h .site-menu nav{position:fixed;top:80px;left:var(--gut);right:var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:10px;border-radius:20px;background:var(--paper);color:var(--graphite);box-shadow:0 30px 60px -30px rgba(29,32,35,.6);max-height:calc(100svh - 100px);overflow:auto}
  .v2h .site-menu nav a{padding:13px 14px;border-radius:12px;font-weight:600;text-decoration:none;color:inherit}
  .v2h .site-menu nav a:hover{background:var(--chalk)}
  .v2h .mm.lm{position:fixed;top:80px;left:var(--gut);right:var(--gut);width:auto}
  .v2 .lgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body.v2{padding-top:80px}
  .v2 .top.v2h .topin{gap:8px;padding:0 8px 0 14px}
  .v2h .dd.lang{display:none}
  .v2h .site-menu nav .lstrip{display:grid;grid-column:1/-1;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px 0 4px;margin-top:6px;border-top:1px solid var(--line)}
  .v2h .site-menu nav .lstrip .lg{padding:6px 4px;flex-direction:column;gap:4px;text-align:center}
  .v2h .lstrip .lg .gl{width:34px;height:34px;font-size:15px}
  .v2h .lstrip .lg b{font-size:12px}
  .v2h .lstrip .lg small{display:none}
  .v2h .topr .btn.talk{display:none}
}

/* ------------------------------------------------------------------ footer */
footer.v2f{border:0;background:var(--chalk);padding:56px 0 40px;font-size:15px;color:var(--graphite)}
footer.v2f .wrap{max-width:1280px;padding-inline:var(--gut)}
footer.v2f .fgrid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px}
footer.v2f h4{margin:0 0 14px;font:700 13px/1 "Figtree",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
footer.v2f ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer.v2f a{text-decoration:none;font-weight:500;color:inherit}
footer.v2f a:hover{color:var(--green)}
footer.v2f .lockup{display:inline-flex;align-items:center;gap:8px;font:800 24px/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.04em}
footer.v2f .lockup svg{width:30px;height:28px}
footer.v2f .tag{margin-top:14px;color:var(--stone);max-width:30ch}
footer.v2f .fbot{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;color:var(--stone);font-size:14px}
@media (max-width:980px){footer.v2f .fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){footer.v2f .fgrid{grid-template-columns:1fr 1fr;gap:32px 20px}footer.v2f .fgrid>div:first-child{grid-column:1/-1}footer.v2f .fbot{flex-direction:column}}

/* --------------------------------------------- page type, the new rhythm --
 * Inner pages keep their content; this gives them the homepage's voice:
 * bigger, tighter headlines, roomier sections, cards that answer the hand. */
.v2 main{overflow-x:clip}
.v2 main h1{font-size:clamp(46px,6.6vw,96px)!important;font-weight:700!important;letter-spacing:-.05em!important;line-height:.96!important;text-wrap:balance}
.v2 main h2{font-size:clamp(34px,4.4vw,64px);font-weight:700;letter-spacing:-.045em;line-height:1;text-wrap:balance}
.v2 main h3{letter-spacing:-.025em}
.v2 main .lede{font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:var(--stone);max-width:44ch}
.v2 main .eyebrow{font:700 13px/1 "Figtree",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.v2 .btn{border-radius:14px;font-weight:700;transition:transform .25s var(--spring),box-shadow .25s,background .2s}
.v2 .btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(29,32,35,.55)}
.v2 main .card,.v2 main .grid>div,.v2 main .grid>a{border-radius:22px;transition:transform .35s var(--spring),box-shadow .3s,background .3s}
.v2 main .card:hover,.v2 main .grid>a:hover{transform:translateY(-4px);box-shadow:0 24px 40px -30px rgba(29,32,35,.6)}
.v2 main details summary{cursor:pointer;transition:color .2s}
.v2 main details summary:hover{color:var(--green)}
.v2 .wrap{max-width:1200px}

/* the hero the inner pages share (built by v2.js from a page's first h1) */
.v2 .v2hero{position:relative;margin:0 clamp(8px,2vw,24px);padding:clamp(70px,10vw,130px) 0 clamp(60px,8vw,110px);border-radius:36px;background:var(--graphite);color:var(--chalk);overflow:hidden;isolation:isolate}
.v2 .v2hero .wrap{position:relative;z-index:1}
.v2 .v2hero h1{color:var(--chalk);max-width:16ch}
.v2 .v2hero .lede{color:#b9c0bb!important}
.v2 .v2hero .eyebrow{color:#9aa19c}
.v2 .v2hero .btn{background:var(--chalk);color:var(--graphite)}
.v2 .v2hero .btn.ghost{background:transparent;color:var(--chalk);box-shadow:inset 0 0 0 1.5px currentColor}
.v2 .v2hero .kitfloat{position:absolute;right:clamp(16px,6vw,90px);bottom:clamp(20px,5vw,60px);width:clamp(90px,12vw,170px);z-index:1}
.v2 .v2hero .dots{position:absolute;inset:0;z-index:0;opacity:.5;background-image:radial-gradient(rgba(238,240,234,.12) 1.2px,transparent 1.2px);background-size:22px 22px;-webkit-mask:radial-gradient(ellipse at 70% 60%,#000,transparent 70%);mask:radial-gradient(ellipse at 70% 60%,#000,transparent 70%)}
@media (max-width:640px){.v2 .v2hero{border-radius:26px;margin:0 8px}.v2 .v2hero .kitfloat{position:static;display:block;margin:28px 0 0;width:90px}}

/* ----------------------------------------------------------------- mascot */
.v2 .mascot{display:inline-block;line-height:0}
.v2 .mascot svg{width:100%;height:auto;overflow:visible}
.v2 .mascot svg *{transform-box:fill-box}
.v2 .mascot-focused svg{animation:m-lean 1.6s ease-in-out infinite;transform-origin:50% 100%}
.v2 .mascot-asking svg{animation:m-tilt 2.2s ease-in-out infinite;transform-origin:50% 100%}
.v2 .mascot-party svg{animation:m-hop 1.1s cubic-bezier(.3,.7,.4,1) infinite;transform-origin:50% 100%}
.v2 .mascot-calm svg,.v2 .mascot-happy svg{animation:m-bob 2.6s ease-in-out infinite;transform-origin:50% 100%}
.v2 .mascot:hover svg{animation:m-hop .7s cubic-bezier(.3,.7,.4,1) 1}
.v2 .mascot .m-eyes{transform-origin:center;animation:m-blink 4.6s infinite}
.v2 .mascot-happy .m-eyes,.v2 .mascot-party .m-eyes{animation:none}
.v2 .mascot-focused .m-bulb{transform-origin:center;animation:m-pulse .9s ease-in-out infinite}
.v2 .mascot-party .m-extra rect{animation:m-confetti 1.6s linear infinite}
.v2 .mascot-party .m-extra rect:nth-child(2n){animation-delay:.5s}
@keyframes m-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes m-hop{0%,100%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-9px) scale(.97,1.04)}60%{transform:translateY(0) scale(1.04,.96)}}
@keyframes m-lean{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) translateY(-2px)}}
@keyframes m-tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-6deg)}60%{transform:rotate(3deg)}}
@keyframes m-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes m-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.75}}
@keyframes m-confetti{0%{transform:translateY(-4px) rotate(0);opacity:0}20%{opacity:1}100%{transform:translateY(14px) rotate(160deg);opacity:0}}

/* ---------------------------------------------------------------- reveals */
.v2js .v2rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.v2js .v2rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.v2 *,.v2 *::before,.v2 *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.v2js .v2rv{opacity:1;transform:none}}