/* ==========================================================================
   Tuuteez — Claymorphism theme
   Soft, puffy surfaces that look moulded from clay: big radii, pastel fills,
   a soft drop shadow outside + a light highlight and a gentle shade inside.
   Loaded last. Rollback: git tag rollback-before-clay
   ========================================================================== */
:root{
  --c-bg:#f4efe8;            /* warm putty page */
  --c-ink:#1d2a22;
  --c-body:#4a5249;
  --c-green:#173f2d; --c-green-2:#2f7a4f;
  --c-mint:#d6efe0; --c-peach:#ffdcc7; --c-butter:#ffefb8; --c-lilac:#e5dcff; --c-sky:#d7ebff; --c-rose:#ffd6de;
  --c-card:#fbf8f3;
  --c-r:30px; --c-r-sm:20px;
  /* the clay recipe */
  --clay:
    14px 16px 32px rgba(92,70,40,.14),
    -10px -10px 24px rgba(255,255,255,.85),
    inset -6px -8px 16px rgba(92,70,40,.07),
    inset 6px 8px 16px rgba(255,255,255,.75);
  --clay-sm:
    8px 10px 20px rgba(92,70,40,.13),
    -6px -6px 14px rgba(255,255,255,.8),
    inset -4px -5px 10px rgba(92,70,40,.07),
    inset 4px 5px 10px rgba(255,255,255,.7);
  --clay-press:
    inset 6px 6px 12px rgba(92,70,40,.14),
    inset -6px -6px 12px rgba(255,255,255,.8);
  --clay-btn:
    8px 10px 20px rgba(23,63,45,.28),
    inset -4px -6px 10px rgba(0,0,0,.22),
    inset 4px 6px 10px rgba(255,255,255,.22);
}

/* ---------- page canvas: soft pastel blobs instead of ruled paper ---------- */
html body{background:var(--c-bg)!important}
html body #website{background:var(--c-bg)!important}
html body #website main>section,
html body #website #home.book-hero,
html body #website #pricing,
html body #website #faq,
html body #website #how,
html body #website #subjects,
html body #website #parents{
  background:
    radial-gradient(42% 38% at 8% 12%,rgba(214,239,224,.75),transparent 70%),
    radial-gradient(36% 34% at 94% 22%,rgba(229,220,255,.6),transparent 70%),
    radial-gradient(40% 40% at 70% 96%,rgba(255,220,199,.55),transparent 70%),
    var(--c-bg)!important;
  background-size:auto!important}
html body #website #how{background:
    radial-gradient(40% 40% at 90% 10%,rgba(255,239,184,.7),transparent 70%),
    radial-gradient(40% 40% at 5% 90%,rgba(215,235,255,.7),transparent 70%),var(--c-bg)!important}
html body #website #parents{background:
    radial-gradient(40% 40% at 10% 20%,rgba(255,214,222,.6),transparent 70%),
    radial-gradient(40% 40% at 95% 85%,rgba(214,239,224,.7),transparent 70%),var(--c-bg)!important}
html body #website #faq{background:
    radial-gradient(40% 40% at 92% 15%,rgba(215,235,255,.7),transparent 70%),
    radial-gradient(38% 38% at 6% 80%,rgba(255,239,184,.6),transparent 70%),var(--c-bg)!important}

/* ---------- header: a floating clay pill ---------- */
html body #website header{background:transparent!important;border:0!important;box-shadow:none!important}
html body #website header::before{content:'';position:absolute;z-index:-1;left:max(2%,calc((100vw - 1290px)/2));right:max(2%,calc((100vw - 1290px)/2));top:8px;bottom:8px;border-radius:999px;background:rgba(251,248,243,.92);box-shadow:var(--clay-sm);backdrop-filter:blur(10px)}
html body #website header{position:sticky}
html body #website header nav a{border-radius:999px;padding:6px 12px!important;transition:background .2s,box-shadow .2s}
html body #website header nav a:hover,html body #website header nav a[aria-current]{background:var(--c-mint);box-shadow:inset 2px 3px 6px rgba(255,255,255,.7),inset -2px -3px 6px rgba(23,63,45,.08)}
html body #website header nav a[aria-current]::after{display:none!important}
html body #website .offer-bar{margin:10px max(2%,calc((100vw - 1290px)/2)) 0!important;border-radius:999px!important;box-shadow:var(--clay-btn)!important;background:linear-gradient(180deg,#245a40,#173f2d)!important}
@media(max-width:760px){html body #website header::before{left:8px;right:8px;top:6px;bottom:6px}html body #website .offer-bar{margin:8px 8px 0!important}}

/* ---------- buttons: puffy clay ---------- */
html body #website a.button,html body #website button.button,html body #website .gt4-web,html body #website #bookExplore,
html body .legal-header .back,html body main .btn,html body .btn{
  border-radius:999px!important;border:0!important;box-shadow:var(--clay-btn)!important;
  background:linear-gradient(180deg,#2a6b4b,#173f2d)!important;color:#fff!important;padding:0 24px!important;min-height:48px!important}
html body #website a.button:hover,html body #website .gt4-web:hover,html body #website #bookExplore:hover,html body .legal-header .back:hover,html body .btn:hover{
  transform:translateY(-2px)!important;box-shadow:10px 14px 24px rgba(23,63,45,.3),inset -4px -6px 10px rgba(0,0,0,.22),inset 4px 6px 10px rgba(255,255,255,.25)!important}
html body #website a.button:active,html body #website .gt4-web:active,html body #website #bookExplore:active,html body .btn:active{
  transform:translateY(1px)!important;box-shadow:inset 4px 6px 12px rgba(0,0,0,.3)!important}
/* light clay buttons: navbar + "Open the web app" (kept outlined before) */
html body #website header a.button.small.small,html body #website header a.button.button,html body #website .gv .gt4-web.gt4-web,html body .legal-header .back{
  background:linear-gradient(180deg,#fffdf9,#efe8dd)!important;color:var(--c-green)!important;box-shadow:var(--clay-sm)!important}
/* section accents */
html body #website #subjects a.button{background:linear-gradient(180deg,#ffe39a,#f2c14e)!important;color:var(--c-green)!important;box-shadow:8px 10px 20px rgba(160,110,20,.28),inset -4px -6px 10px rgba(150,100,0,.2),inset 4px 6px 10px rgba(255,255,255,.5)!important}
html body #website #parents a.button{background:linear-gradient(180deg,#e9805f,#c9573a)!important;box-shadow:8px 10px 20px rgba(160,60,30,.3),inset -4px -6px 10px rgba(0,0,0,.18),inset 4px 6px 10px rgba(255,255,255,.25)!important}

/* ---------- generic clay card helper used below ---------- */
html body #website #subjects .ls-stage,html body #website #subjects .ls-rail,html body #website #subjects .ls-summary,
html body #website #how .wc-table-wrap,
html body #website #pricing .pz-card,html body #website #pricing .pz-compare,
html body #website #faq .faq-item,
html body #website #parents .pp-trust,
html body .legal-shell{
  border:0!important;border-radius:var(--c-r)!important;background:var(--c-card)!important;box-shadow:var(--clay)!important}

/* ---------- hero ---------- */
html body #website #home .hero-trust{gap:12px!important}
html body #website #home .hero-trust li{border:0!important;border-radius:var(--c-r-sm);padding:10px 16px!important;background:var(--c-card);box-shadow:var(--clay-sm)}
html body #website #home .hero-trust li:nth-child(1){background:var(--c-mint)}
html body #website #home .hero-trust li:nth-child(2){background:var(--c-butter)}
html body #website #home .hero-trust li:nth-child(3){background:var(--c-lilac)}
html body #website #home .hero-vert{border-left:0!important;padding:22px 28px!important;border-radius:var(--c-r);background:rgba(251,248,243,.75);box-shadow:var(--clay)}
@media(max-width:1023px){html body #website #home .hero-vert{padding:18px 22px!important}}
@media(max-width:760px){html body #website #home .hero-trust{gap:8px!important}html body #website #home .hero-trust li{padding:8px 6px!important}}

/* ---------- how it works ---------- */
html body #website #subjects .ls-tabs{background:transparent!important;border:0!important;box-shadow:none!important;gap:10px!important;padding:4px!important}
html body #website #subjects .ls-tabs button{border-radius:var(--c-r-sm)!important;background:var(--c-card)!important;box-shadow:var(--clay-sm)!important;border:0!important}
html body #website #subjects .ls-tabs button[aria-selected="true"]{background:var(--c-mint)!important;box-shadow:var(--clay-press)!important}
html body #website #subjects .ls-stage{overflow:hidden}
html body #website #subjects .ls-board,html body #website #subjects .ls-chat-wrap{background:transparent!important}
html body #website #subjects .ls-controls button,html body #website #subjects #lsPlay,html body #website #subjects #lsRestart{border-radius:999px!important;border:0!important;background:var(--c-card)!important;box-shadow:var(--clay-sm)!important}
html body #website #subjects .ls-xp{border:0!important;background:var(--c-butter)!important;box-shadow:var(--clay-sm)!important}

/* ---------- why tuuteez ---------- */
html body #website #how.wh .wc-table-wrap{padding:10px!important;overflow:hidden}
html body #website #how.wh .wc-table-wrap::before,html body #website #how.wh .wc-table-wrap::after{display:none!important}
html body #website #how.wh .wc-table{background:transparent!important;background-image:none!important}
html body #website #how.wh .wc-table th,html body #website #how.wh .wc-table td{border-color:rgba(92,70,40,.08)!important}
html body #website #how.wh .wc-table td.wc-us,html body #website #how.wh .wc-table th.wc-us{background:var(--c-mint)!important;box-shadow:none!important;border-color:transparent!important}
html body #website #how.wh .wc-table thead th.wc-us{border-radius:22px 22px 0 0}
html body #website #how.wh .wc-table tbody tr:last-child td.wc-us{border-radius:0 0 22px 22px!important;box-shadow:none!important}
html body #website #how.wh .wc-picker button{border-radius:999px!important;border:0!important;background:var(--c-card)!important;box-shadow:var(--clay-sm)!important}
html body #website #how.wh .wc-picker button[aria-pressed="true"]{background:var(--c-lilac)!important;box-shadow:var(--clay-press)!important;color:var(--c-ink)!important}
html body #website #how.wh [class*="tape"],html body #website #how.wh .wh-tape{display:none!important}

/* ---------- for parents ---------- */
html body #website #parents.pp1 .pa-device{border-radius:46px!important;box-shadow:18px 22px 40px rgba(60,40,20,.25),inset -6px -8px 14px rgba(0,0,0,.35),inset 6px 6px 12px rgba(255,255,255,.12)!important}
html body #website #parents.pp1 .pp-step{border-radius:var(--c-r-sm)!important;transition:background .3s,box-shadow .3s}
html body #website #parents.pp1 .pp-step.on{background:var(--c-card)!important;box-shadow:var(--clay-sm)!important}
html body #website #parents.pp1 .pp-trust{padding:12px 16px!important}
html body #website #parents.pp1 .pp-trust i,html body #website #parents.pp1 .pp-trust svg{border-radius:14px}

/* ---------- pricing ---------- */
html body #website #pricing{background-image:none}
html body #website #pricing .pz-card{transform:none!important;padding:30px 30px 24px!important;background:linear-gradient(180deg,#fffdf9,#f6f0e7)!important}
html body #website #pricing .pz-card::before{display:none!important}
html body #website #pricing .pz-card.featured{box-shadow:var(--clay),0 0 0 3px rgba(213,161,75,.35)!important}
html body #website #pricing .pz-class-grid button{border:0!important;border-radius:var(--c-r-sm)!important;background:var(--c-card)!important;box-shadow:var(--clay-sm)!important}
html body #website #pricing .pz-class-grid button.in-band{background:var(--c-butter)!important}
html body #website #pricing .pz-class-grid button[aria-checked="true"]{background:linear-gradient(180deg,#2a6b4b,#173f2d)!important;color:#fff!important;box-shadow:var(--clay-btn)!important}
html body #website #pricing .pz-switch{border:0!important;border-radius:999px!important;background:var(--c-card)!important;box-shadow:var(--clay-press)!important;padding:6px!important}
html body #website #pricing .pz-switch button{border-radius:999px!important}
html body #website #pricing .pz-switch button[aria-pressed="true"]{background:linear-gradient(180deg,#2a6b4b,#173f2d)!important;box-shadow:var(--clay-btn)!important}
html body #website #pricing .pz-trial-mini{transform:none!important;border-radius:var(--c-r)!important;background:var(--c-butter)!important;box-shadow:var(--clay)!important}
html body #website #pricing .pz-trial-mini::before{display:none!important}
html body #website #pricing .pz-offer{border:0!important;border-radius:var(--c-r-sm)!important;background:var(--c-peach)!important;box-shadow:var(--clay-sm)!important}
html body #website #pricing .pz-code{border-radius:999px!important;box-shadow:var(--clay-btn)!important;border:0!important}
html body #website #pricing .pz-badge{border:0!important;background:var(--c-rose)!important;color:#9b2f1d!important;box-shadow:var(--clay-sm)!important;transform:none!important}
html body #website #pricing .pz-list{border-top:2px dotted rgba(92,70,40,.15)!important}
html body #website #pricing .pz-compare summary{padding-left:24px!important}
html body #website #pricing .pz-compare-wrap{padding-left:24px!important}

/* ---------- faq ---------- */
html body #website #faq .faq-item{margin-bottom:16px!important;overflow:hidden}
html body #website #faq .faq-item::before,html body #website #faq .faq-item::after{display:none!important}
html body #website #faq .faq-item[open]{background:var(--c-sky)!important}
html body #website #faq .faq-item summary::before{border:0!important;background:var(--c-peach)!important;box-shadow:var(--clay-sm)!important;color:#9b2f1d!important}
html body #website #faq .fh-note,html body #website #faq [class*="bubble"]{border:0!important;border-radius:var(--c-r-sm)!important;background:var(--c-card)!important;box-shadow:var(--clay-sm)!important}

/* ---------- get tuuteez + footer: full-width band with the wavy top edge (as before) ---------- */
html body #website section.get4.gv{margin:0!important;border-radius:0!important;box-shadow:none!important}
html body #website section.get4.gv::before{display:block!important;background:no-repeat center top/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v22c-60 14-120 24-180 18S1140 12 1080 14 960 40 900 42 780 20 720 16 600 30 540 36 420 44 360 36 240 10 180 10 60 26 0 34Z' fill='%23f4efe8'/%3E%3Cpath d='M0 34c60-8 120-24 180-24s120 26 180 26 120-8 180-16 120-4 180 0 120 22 180 26 120-28 180-30 120 16 180 22 120-8 180-18' fill='none' stroke='%23d5a14b' stroke-width='2' stroke-linecap='round' stroke-dasharray='2 8' opacity='.8'/%3E%3C/svg%3E")!important}
html body #website footer{margin:0!important;border-radius:0!important}
html body #website .store-badge{border-radius:18px!important;box-shadow:8px 10px 20px rgba(0,0,0,.22),inset 3px 4px 8px rgba(255,255,255,.12),inset -3px -4px 8px rgba(0,0,0,.4)!important;border:0!important}

/* ---------- legal pages ---------- */
html body.legal,html body:has(.legal-shell){background:var(--c-bg)!important}
html body .legal-shell .meta{border-radius:var(--c-r-sm)!important;background:var(--c-mint)!important;box-shadow:var(--clay-press)!important}
html body .legal-header{background:transparent!important;border:0!important}
html body .legal-footer{border-radius:40px 40px 0 0!important;margin:0 2%!important}

/* ---------- cookie card ---------- */
html body .tz-cookie{border:0!important;border-radius:var(--c-r)!important;box-shadow:var(--clay)!important}
html body .tz-cookie button{border:0!important;border-radius:999px!important}
html body .tz-cookie .tz-yes{background:linear-gradient(180deg,#2a6b4b,#173f2d)!important;box-shadow:var(--clay-btn)!important}
html body .tz-cookie .tz-no{background:var(--c-card)!important;box-shadow:var(--clay-sm)!important}

@media(prefers-reduced-motion:reduce){html body #website a.button,html body .btn{transition:none!important}}

/* header: never fall back to the old white bar */
html.is-scrolled body #website header,html body #website header{background:transparent!important;box-shadow:none!important;border-color:transparent!important}
html body #website #subjects .ls-tabs button small{color:var(--c-body)!important}
html body #website #subjects .ls-stage .ls-bottom{background:transparent!important}

/* why table: drop the notebook margin line + ruled paper inside the clay card */
html body #website #how .wc-table-wrap{background:var(--c-card)!important;background-image:none!important}
html body #website #how .wc-table-wrap *::before{background-image:none}
html body #website #how .wc-table tr>*:first-child{background:transparent!important;box-shadow:none!important}
html body #website #how .wc-table thead th{border-top:0!important}
/* faq: rounded clay rows */
html body #website #faq .faq-item{border-radius:24px!important;background-image:none!important}
html body #website #faq .faq-item summary{background:transparent!important;border:0!important}

/* ---------- About page ---------- */
html body:has(header.top){background:
  radial-gradient(40% 30% at 8% 6%,rgba(214,239,224,.75),transparent 70%),
  radial-gradient(36% 30% at 94% 18%,rgba(229,220,255,.6),transparent 70%),
  radial-gradient(40% 30% at 60% 70%,rgba(255,220,199,.5),transparent 70%),var(--c-bg)!important;background-attachment:fixed!important}
html body header.top{background:transparent!important;border:0!important;box-shadow:none!important;position:sticky;top:0;z-index:20}
html body header.top::before{content:'';position:absolute;z-index:-1;left:max(2%,calc((100vw - 1290px)/2));right:max(2%,calc((100vw - 1290px)/2));top:8px;bottom:8px;border-radius:999px;background:rgba(251,248,243,.92);box-shadow:var(--clay-sm);backdrop-filter:blur(10px)}
html body main section,html body main .board,html body main .wrap{background-image:none!important}
html body main .card{transform:none!important;border:0!important;border-radius:var(--c-r)!important;background:var(--c-butter)!important;box-shadow:var(--clay)!important}
html body main .tape{display:none!important}
html body main .letter{border:0!important;border-radius:var(--c-r)!important;background:var(--c-card)!important;box-shadow:var(--clay)!important;transform:none!important}
html body main .n{border:0!important;background:var(--c-peach)!important;box-shadow:var(--clay-sm)!important}
html body main .contact,html body main .details .wrap>div{border-radius:var(--c-r)!important}
html body main .circle{box-shadow:var(--clay-sm)!important;border-radius:999px!important}
html body:has(header.top)>footer{border-radius:40px 40px 0 0!important;margin:0 2%!important;box-shadow:inset 0 10px 24px rgba(255,255,255,.6)!important}
@media(max-width:760px){html body header.top::before{left:8px;right:8px}}

/* ---------- Clay story: the animated diorama under the hero ---------- */
html body #website .clay-story{position:relative;padding:clamp(40px,7vh,80px) max(4%,calc((100vw - 1240px)/2)) clamp(36px,6vh,64px)!important;scroll-margin-top:90px}
html body #website .clay-story .cs-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 48px;align-items:end;margin-bottom:22px}
html body #website .clay-story .cs-eyebrow{grid-column:1/-1;font:600 27px/1 Caveat,cursive;color:#2f7a4f;transform:rotate(-2deg);transform-origin:left;display:block}
html body #website .clay-story h2{margin:0;font:600 clamp(36px,3.6vw,54px)/1.05 Caveat,cursive!important;color:#16211a!important;letter-spacing:0!important}
html body #website .clay-story .cs-u{position:relative;display:inline-block;color:#173f2d;z-index:0}
html body #website .clay-story .cs-u::after{content:'';position:absolute;left:-2%;right:-3%;bottom:.04em;height:.24em;z-index:-1;background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9C45 4 95 3 140 5s45 3 57 1' fill='none' stroke='%23d5a14b' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E")}
html body #website .clay-story .cs-head p{margin:0 0 6px;max-width:44ch;font:400 16px/1.55 Inter,sans-serif;color:var(--c-body)}
html body #website .clay-story .cs-stage{position:relative;border-radius:44px;overflow:hidden;
  background:radial-gradient(60% 50% at 70% 0%,#ffffff 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#bfe3f5 0%,#d8eef6 46%,#f2efe2 100%);
  box-shadow:var(--clay)}
html body #website .clay-story .cs-canvas{position:relative;width:100%;aspect-ratio:16/7.4;min-height:340px}
html body #website .clay-story .cs-canvas canvas{display:block;width:100%!important;height:100%!important}
html body #website .clay-story .cs-steps{list-style:none;margin:0;padding:0 18px 18px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;position:relative;margin-top:-86px;z-index:2;counter-reset:cs}
html body #website .clay-story .cs-steps li{counter-increment:cs;padding:12px 14px 12px 46px;position:relative;border-radius:22px;background:rgba(251,248,243,.86);backdrop-filter:blur(6px);box-shadow:var(--clay-sm);transition:transform .35s cubic-bezier(.2,.9,.3,1.3),background .35s,box-shadow .35s;min-height:64px}
html body #website .clay-story .cs-steps li::before{content:counter(cs);position:absolute;left:12px;top:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 13px Inter,sans-serif;color:#173f2d;background:var(--c-card);box-shadow:var(--clay-sm)}
html body #website .clay-story .cs-steps b{display:block;font:700 14px/1.25 Inter,sans-serif;color:#1d2a22}
html body #website .clay-story .cs-steps span{display:block;margin-top:2px;font:400 12.5px/1.4 Inter,sans-serif;color:var(--c-body)}
html body #website .clay-story .cs-steps li.on{transform:translateY(-6px);background:#d6efe0;box-shadow:12px 14px 26px rgba(23,63,45,.18),inset -4px -5px 10px rgba(23,63,45,.08),inset 4px 5px 10px rgba(255,255,255,.75)}
html body #website .clay-story .cs-steps li.on::before{background:linear-gradient(180deg,#2a6b4b,#173f2d);color:#fff}
html body #website .clay-story.cs-fallback .cs-canvas{display:none}
html body #website .clay-story.cs-fallback .cs-steps{margin-top:0;padding-top:18px}
@media(max-width:980px){
  html body #website .clay-story .cs-head{grid-template-columns:1fr}
  html body #website .clay-story .cs-steps{grid-template-columns:1fr;margin-top:0;padding:14px}
  html body #website .clay-story .cs-steps li{display:none}
  html body #website .clay-story .cs-steps li.on{display:block;transform:none}
  html body #website .clay-story.cs-fallback .cs-steps li{display:block}
}
@media(max-width:760px){
  html body #website .clay-story{padding:40px 14px 36px!important}
  html body #website .clay-story .cs-stage{border-radius:32px}
  html body #website .clay-story .cs-canvas{aspect-ratio:4/4.4;min-height:0}
  html body #website .clay-story h2{font-size:36px!important}
}
/* the small Lumi that sits on the How-it-works edge: keep it in the gap below the story */
html body #website #subjects .arch-lumi{top:-30px!important}
html body #website .clay-story{padding-bottom:clamp(56px,8vh,84px)!important}
html body #website #subjects.lumi-session::before{display:none!important}
html body #website .clay-story .cs-steps li::before{content:attr(data-n)!important}
@media(max-width:760px){html body #website .clay-story .cs-canvas{aspect-ratio:1/1}}

/* ---------- Clay story as the home hero ---------- */
html body #website .clay-story.cs-hero{padding-top:clamp(18px,3.5vh,36px)!important;padding-bottom:clamp(30px,5vh,56px)!important}
html body #website .cs-hero .cs-head{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:6px 48px;margin-bottom:18px}
html body #website .cs-hero h1{margin:0;font:600 clamp(40px,4.3vw,64px)/1.02 Caveat,cursive!important;color:#16211a!important;letter-spacing:0!important}
html body #website .cs-hero .cs-side p{margin:0 0 14px;max-width:46ch;font:400 16.5px/1.55 Inter,sans-serif;color:var(--c-body)}
html body #website .cs-hero .cs-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
html body #website .cs-hero .cs-actions #bookExplore{background:linear-gradient(180deg,#fffdf9,#efe8dd)!important;color:var(--c-green)!important;box-shadow:var(--clay-sm)!important}
html body #website .cs-hero .cs-trust{display:block;margin-top:12px;font:400 12px/1.4 'Courier New',ui-monospace,monospace;letter-spacing:.06em;color:#5c6456}
html body #website .cs-hero .cs-canvas{aspect-ratio:auto;height:clamp(330px,calc(100svh - 430px),600px)}
@media(max-width:980px){html body #website .cs-hero .cs-head{grid-template-columns:1fr}html body #website .cs-hero .cs-canvas{height:auto;aspect-ratio:16/10}}
@media(max-width:760px){html body #website .cs-hero h1{font-size:40px!important}html body #website .cs-hero .cs-canvas{aspect-ratio:1/1}html body #website .cs-hero .cs-actions .button,html body #website .cs-hero .cs-actions #bookExplore{flex:1;justify-content:center}}

/* ---------- Full-screen clay hero (diorama fills the first screen, text over the sky) ---------- */
html body #website .clay-story.cs-hero{position:relative;padding:0!important;height:calc(100svh - var(--hero-top,132px));min-height:600px;overflow:hidden;background:none!important}
html body #website .cs-hero .cs-stage{position:absolute!important;inset:0;border-radius:0!important;box-shadow:none!important}
html body #website .cs-hero .cs-canvas{position:absolute!important;inset:0;height:100%!important;aspect-ratio:auto!important;min-height:0!important}
html body #website .cs-hero .cs-head{position:absolute;z-index:3;left:max(4%,calc((100vw - 1240px)/2));right:max(4%,calc((100vw - 1240px)/2));top:clamp(18px,4vh,44px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:6px 48px;align-items:end;margin:0;pointer-events:none}
html body #website .cs-hero .cs-head *{pointer-events:auto}
html body #website .cs-hero .cs-side{padding:18px 20px;border-radius:26px;background:rgba(251,248,243,.72);backdrop-filter:blur(8px);box-shadow:var(--clay-sm)}
html body #website .cs-hero .cs-steps{position:absolute;left:max(4%,calc((100vw - 1240px)/2));right:max(4%,calc((100vw - 1240px)/2));bottom:clamp(14px,3vh,28px);margin:0!important;padding:0!important}
html body #website .cs-hero .cs-steps li{background:rgba(251,248,243,.9)}
html body #website .cs-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:36px;background:linear-gradient(transparent,rgba(244,239,232,.6));pointer-events:none;z-index:1}
@media(max-width:980px){
  html body #website .cs-hero .cs-head{grid-template-columns:1fr;gap:6px}
  html body #website .cs-hero .cs-side{padding:0;background:none;box-shadow:none;backdrop-filter:none}
}
@media(max-width:760px){
  html body #website .clay-story.cs-hero{min-height:620px}
  html body #website .cs-hero .cs-head{left:16px;right:16px;top:14px}
  html body #website .cs-hero .cs-side p{font-size:15px;margin-bottom:10px}
  html body #website .cs-hero .cs-trust{display:none}
  html body #website .cs-hero .cs-steps{left:12px;right:12px;bottom:12px}
}
html body #website #home.cs-hero>.lumi-guide{bottom:118px!important}
@media(max-width:980px){html body #website #home.cs-hero>.lumi-guide{bottom:120px!important}}
/* home: no Start free in the menu (it lives in the hero); keep the menu centred */
@media(min-width:761px){html body #website header nav{margin-left:auto;margin-right:auto}}

/* ==========================================================================
   FINAL button system — one look for every state (normal / hover / pressed / focus).
   Highest priority on purpose: older button files (buttons.css etc.) can no longer
   blank a button out on hover or click.
   ========================================================================== */
:root{
  --btn-green:linear-gradient(180deg,#2f7652 0%,#173f2d 100%);
  --btn-green-hi:linear-gradient(180deg,#378a60 0%,#1d4d37 100%);
  --btn-green-lo:linear-gradient(180deg,#1d4d37 0%,#12331f 100%);
  --btn-light:linear-gradient(180deg,#fffdf9 0%,#efe8dd 100%);
  --btn-light-hi:linear-gradient(180deg,#ffffff 0%,#f4eee4 100%);
  --btn-light-lo:linear-gradient(180deg,#ece4d6 0%,#e4dbcb 100%);
  --btn-yellow:linear-gradient(180deg,#ffe39a 0%,#f2c14e 100%);
  --btn-yellow-hi:linear-gradient(180deg,#ffeab0 0%,#f6cb62 100%);
  --btn-yellow-lo:linear-gradient(180deg,#f2c14e 0%,#e3ae38 100%);
  --btn-coral:linear-gradient(180deg,#ec8a69 0%,#c9573a 100%);
  --btn-coral-hi:linear-gradient(180deg,#f29b7c 0%,#d4664a 100%);
  --btn-coral-lo:linear-gradient(180deg,#c9573a 0%,#b04a30 100%);
  --btn-press:inset 4px 6px 12px rgba(0,0,0,.28),inset -2px -3px 6px rgba(255,255,255,.12);
  --btn-press-light:inset 4px 6px 12px rgba(92,70,40,.18),inset -3px -4px 8px rgba(255,255,255,.8);
}
/* base shape for every button-like link */
html body #website :is(#home,#subjects,#how,#parents,#pricing,#faq,#get-tuuteez,header,footer) :is(a.button,button.button).button,
html body #website :is(#home,#subjects,#how,#parents,#pricing,#faq,#get-tuuteez) #bookExplore#bookExplore,
html body :is(main,.legal-header) :is(.btn,.back).btn,html body :is(main,.legal-header) .back.back{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  min-height:48px!important;padding:0 24px!important;border:0!important;border-radius:999px!important;
  font:700 15px/1.2 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;letter-spacing:0!important;text-decoration:none!important;
  background:var(--btn-green)!important;color:#fff!important;box-shadow:var(--clay-btn)!important;
  transform:none;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease!important;outline:none}
html body #website :is(#home,#subjects,#how,#parents,#pricing,#faq,#get-tuuteez,header,footer) :is(a.button,button.button,.gt4-web).button *,html body main .btn *{color:inherit!important}

/* green (default) */
html body #website :is(#home,#subjects,#how,#parents,#pricing,#faq,#get-tuuteez,header,footer) :is(a.button,button.button).button:hover,html body main .btn.btn:hover{
  background:var(--btn-green-hi)!important;color:#fff!important;transform:translateY(-2px)!important;box-shadow:10px 14px 24px rgba(23,63,45,.3),inset -4px -6px 10px rgba(0,0,0,.2),inset 4px 6px 10px rgba(255,255,255,.25)!important}
html body #website :is(#home,#subjects,#how,#parents,#pricing,#faq,#get-tuuteez,header,footer) :is(a.button,button.button).button:active,html body main .btn.btn:active{
  background:var(--btn-green-lo)!important;color:#fff!important;transform:translateY(1px)!important;box-shadow:var(--btn-press)!important}

/* light: See how it works, Open the web app, Back to Tuuteez */
html body #website :is(#home,#subjects,#how,#parents,#pricing,#faq,#get-tuuteez) #bookExplore#bookExplore,
html body #website :is(#home,#subjects,#how,#parents,#pricing,#faq,#get-tuuteez,header,footer) .gt4-web.button.button,
html body .legal-header .back.back{background:var(--btn-light)!important;color:#173f2d!important;box-shadow:var(--clay-sm)!important}
html body #website :is(#home,#subjects,#how,#parents,#pricing,#faq,#get-tuuteez) #bookExplore#bookExplore:hover,
html body #website :is(#home,#subjects,#how,#parents,#pricing,#faq,#get-tuuteez,header,footer) .gt4-web.button.button:hover,
html body .legal-header .back.back:hover{background:var(--btn-light-hi)!important;color:#173f2d!important;transform:translateY(-2px)!important;box-shadow:10px 12px 22px rgba(92,70,40,.18),-6px -6px 14px rgba(255,255,255,.85),inset 3px 4px 8px rgba(255,255,255,.8)!important}
html body #website :is(#home,#subjects,#how,#parents,#pricing,#faq,#get-tuuteez) #bookExplore#bookExplore:active,
html body #website :is(#home,#subjects,#how,#parents,#pricing,#faq,#get-tuuteez,header,footer) .gt4-web.button.button:active,
html body .legal-header .back.back:active{background:var(--btn-light-lo)!important;color:#173f2d!important;transform:translateY(1px)!important;box-shadow:var(--btn-press-light)!important}

/* yellow: Bring your own question */
html body #website :is(#subjects) a.button.button{background:var(--btn-yellow)!important;color:#173f2d!important;box-shadow:8px 10px 20px rgba(160,110,20,.28),inset -4px -6px 10px rgba(150,100,0,.2),inset 4px 6px 10px rgba(255,255,255,.5)!important}
html body #website :is(#subjects) a.button.button:hover{background:var(--btn-yellow-hi)!important;color:#173f2d!important;transform:translateY(-2px)!important}
html body #website :is(#subjects) a.button.button:active{background:var(--btn-yellow-lo)!important;color:#173f2d!important;transform:translateY(1px)!important;box-shadow:inset 4px 6px 12px rgba(120,80,0,.3)!important}

/* coral: Try 3 free sessions */
html body #website :is(#parents) a.button.button{background:var(--btn-coral)!important;color:#fff!important;box-shadow:8px 10px 20px rgba(160,60,30,.3),inset -4px -6px 10px rgba(0,0,0,.18),inset 4px 6px 10px rgba(255,255,255,.25)!important}
html body #website :is(#parents) a.button.button:hover{background:var(--btn-coral-hi)!important;color:#fff!important;transform:translateY(-2px)!important}
html body #website :is(#parents) a.button.button:active{background:var(--btn-coral-lo)!important;color:#fff!important;transform:translateY(1px)!important;box-shadow:var(--btn-press)!important}

/* full-width pricing button keeps its width */
html body #website :is(#pricing) a.button.pz-cta.button{display:flex!important;width:100%!important;min-height:52px!important;font-size:16px!important}

/* keyboard focus ring for every button */
html body #website :is(a.button,button.button,#bookExplore,.gt4-web):focus-visible,html body :is(.btn,.back):focus-visible{outline:3px solid #d5a14b!important;outline-offset:3px!important}

/* small controls that should feel pressed, not flash white */
html body #website #subjects :is(#lsPlay,#lsRestart):hover{background:#fffdf9!important;transform:translateY(-1px)}
html body #website #subjects :is(#lsPlay,#lsRestart):active{background:#ece4d6!important;box-shadow:var(--btn-press-light)!important;transform:translateY(1px)}
html body #website #subjects .ls-tabs button:hover{background:#fffdf9!important}
html body #website #subjects .ls-tabs button:active{box-shadow:var(--clay-press)!important}
html body #website #pricing .pz-class-grid button:active{box-shadow:var(--clay-press)!important;transform:translateY(1px)!important}
html body #website #pricing .pz-switch button:hover:not([aria-pressed="true"]){background:rgba(214,239,224,.7)!important}
html body #website #how .wc-picker button:hover:not([aria-pressed="true"]){background:#fffdf9!important}
html body #website .offer-bar button{background:rgba(255,255,255,.14)!important;border-radius:50%!important}
html body #website .offer-bar button:hover{background:rgba(255,255,255,.26)!important}
/* mobile tap highlight off (it flashes a grey/white box on phones) */
html body a,html body button,html body summary{-webkit-tap-highlight-color:transparent}

/* ---------- Hero tagline: a clear clay strip on the left ---------- */
html body #website .cs-hero .cs-tag{grid-column:1/-1;justify-self:start;display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px;padding:8px 10px 8px 16px;border-radius:999px;background:rgba(251,248,243,.88);backdrop-filter:blur(8px);box-shadow:var(--clay-sm)}
html body #website .cs-hero .cs-tag-l{font:400 12.5px/1 'Courier New',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#4a5249}
html body #website .cs-hero .cs-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;border-radius:999px;font:700 14px/1 Inter,sans-serif;color:#173f2d;box-shadow:4px 5px 10px rgba(92,70,40,.12),inset -2px -3px 6px rgba(92,70,40,.08),inset 2px 3px 6px rgba(255,255,255,.75)}
html body #website .cs-hero .cs-chip::before{content:'';width:16px;height:16px;border-radius:50%;background:#173f2d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2 5 8.3l4.2-4.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
html body #website .cs-hero .cs-chip.c1{background:var(--c-mint)}
html body #website .cs-hero .cs-chip.c2{background:var(--c-butter)}
html body #website .cs-hero .cs-chip.c3{background:var(--c-lilac)}
html body #website .cs-hero .cs-amp{font:600 22px/1 'Playfair Display',Georgia,serif;color:#b8923f}
@media(max-width:760px){
  html body #website .cs-hero .cs-tag{gap:6px;padding:7px 8px 7px 12px;border-radius:22px}
  html body #website .cs-hero .cs-tag-l{font-size:10.5px;letter-spacing:.08em}
  html body #website .cs-hero .cs-chip{font-size:12.5px;padding:6px 10px 6px 8px}
  html body #website .cs-hero .cs-chip::before{width:13px;height:13px;background-size:8px}
}
@media(min-width:761px){html body #website .cs-hero .cs-tag{flex-wrap:nowrap;width:max-content;max-width:none}}
html body #website .cs-hero .cs-tag-l{white-space:nowrap}
html body #website .cs-hero .cs-tag>*{flex:none}
html body #website .cs-hero p.cs-tag{max-width:none!important;width:fit-content!important}

/* ---------- Calmer hero: one reading column, one step caption ---------- */
html body #website .cs-hero .cs-head{grid-template-columns:minmax(0,600px)!important;right:auto!important;gap:10px!important;align-items:start!important}
html body #website .cs-hero .cs-side{padding:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important}
html body #website .cs-hero .cs-side p{max-width:44ch;margin:4px 0 16px!important;color:#2f3a32!important;text-shadow:0 1px 0 rgba(255,255,255,.6)}
html body #website .cs-hero .cs-steps{display:block!important;left:50%!important;right:auto!important;transform:translateX(-50%);width:min(440px,calc(100% - 24px))}
html body #website .cs-hero .cs-steps li{display:none!important;transform:none!important}
html body #website .cs-hero .cs-steps li.on{display:block!important}
@keyframes csIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html.in-hero body #website>.lumi-guide{opacity:0!important;pointer-events:none!important;visibility:hidden}
html body #website>.lumi-guide{transition:opacity .4s ease,visibility .4s}
@media(max-width:760px){html body #website .cs-hero .cs-steps{width:calc(100% - 24px)}}

/* ---------- Lumi talks: speech bubble that follows the flying Lumi ---------- */
html body #website .cs-hero .cs-steps{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;left:0!important;bottom:0!important;transform:none!important}
html body #website .cs-hero .cs-bubble{position:absolute;left:0;top:0;z-index:4;max-width:320px;padding:12px 16px 12px;border-radius:24px 24px 24px 8px;background:rgba(255,253,248,.96);box-shadow:var(--clay);will-change:transform}
html body #website .cs-hero .cs-bubble.left{border-radius:24px 24px 8px 24px}
html body #website .cs-hero .cs-bubble-name{display:block;font:600 19px/1 Caveat,cursive;color:#c9573a;margin-bottom:3px}
html body #website .cs-hero .cs-bubble-text{display:block;font:600 16px/1.4 Inter,sans-serif;color:#1d2a22}
html body #website .cs-hero .cs-bubble.pop .cs-bubble-text{animation:csPop .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes csPop{0%{transform:translateY(5px) scale(.97)}60%{transform:translateY(-2px)}100%{transform:none}}
html body #website .cs-hero .cs-voice{margin-top:9px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:0;border-radius:999px;background:var(--c-mint);color:#173f2d;font:700 12.5px Inter,sans-serif;cursor:pointer;box-shadow:var(--clay-sm)}
html body #website .cs-hero .cs-voice[aria-pressed="true"]{background:linear-gradient(180deg,#2f7652,#173f2d);color:#fff}
html body #website .cs-hero .cs-voice:active{box-shadow:var(--clay-press)}
html body #website .cs-hero .cs-voice:focus-visible{outline:3px solid #d5a14b;outline-offset:2px}
@media(max-width:700px){html body #website .cs-hero .cs-bubble{max-width:calc(100% - 24px);border-radius:24px}html body #website .cs-hero .cs-bubble-text{font-size:15px}}
@media(prefers-reduced-motion:reduce){html body #website .cs-hero .cs-bubble.pop .cs-bubble-text{animation:none}}

/* ===== Rendered clay film hero (rollback: rollback-before-clay-film) ===== */
html body #website .cs-filmhero{background:#f8e9da!important}
html body #website .cs-filmhero .cs-stage{position:absolute!important;inset:0;overflow:hidden;background:#f8e9da url("lumi-film.jpg") 75% 50%/cover no-repeat}
html body #website .cs-filmhero .cs-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% 50%;display:block;pointer-events:none}
/* soft cream wash on the left so the headline always reads */
html body #website .cs-filmhero .cs-stage::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(250,240,228,.55) 0%,rgba(250,240,228,.25) 30%,rgba(250,240,228,0) 48%)}
html body #website .cs-filmhero .cs-head{top:50%!important;transform:translateY(-50%)}
html body #website .cs-filmhero .cs-bubble{display:none!important}
@media(prefers-reduced-motion:reduce){html body #website .cs-filmhero .cs-film{display:none}}
@media(max-width:980px){
  html body #website .cs-filmhero .cs-head{top:clamp(16px,3vh,32px)!important;transform:none}
  html body #website .cs-filmhero .cs-stage{top:auto!important;height:54%;background-position:80% 40%}
  html body #website .cs-filmhero .cs-film{object-position:80% 40%}
  html body #website .cs-filmhero .cs-stage::after{background:linear-gradient(180deg,#f8e9da 0%,rgba(248,233,218,0) 30%)}
}
html body #website .cs-filmhero .lumi-guide,html body #website .cs-filmhero .cs-canvas{display:none!important}
@media(max-width:760px){
  html body #website .cs-filmhero .cs-film{object-position:74% 45%}
  html body #website .cs-filmhero .cs-stage{background-position:74% 45%}
  html body #website .cs-filmhero p.cs-tag{max-width:100%!important;width:auto!important;box-sizing:border-box}
  html body #website .cs-filmhero .cs-actions #bookExplore{white-space:nowrap}
}
@media(max-width:760px){html body #website .cs-filmhero .cs-head{right:16px!important;grid-template-columns:minmax(0,1fr)!important}}

/* Hear Lumi: voice intro with captions */
html body #website .cs-filmhero .cs-voice{position:absolute;z-index:4;right:max(4%,calc((100vw - 1240px)/2));bottom:clamp(18px,5vh,48px);display:flex;flex-direction:column;align-items:flex-end;gap:10px;max-width:min(360px,calc(100% - 32px))}
html body #website .cs-filmhero .cs-say{margin:0;max-width:none;padding:12px 16px;border-radius:22px 22px 6px 22px;background:rgba(255,253,248,.96);box-shadow:var(--clay);font:600 16px/1.4 Inter,sans-serif;color:#1d2a22}
html body #website .cs-filmhero .cs-say::before{content:'Lumi';display:block;font:600 19px/1 Caveat,cursive;color:#c9573a;margin-bottom:3px}
html body #website .cs-filmhero .cs-say.pop{animation:csPop .45s cubic-bezier(.2,.9,.3,1.3)}
html body #website .cs-filmhero .cs-hear{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:8px 18px 8px 8px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#fffaf0,#f3e6d2);color:#173f2d;font:700 14.5px/1 Inter,sans-serif;box-shadow:var(--clay-sm);transition:transform .15s}
html body #website .cs-filmhero .cs-hear:hover{transform:translateY(-2px)}
html body #website .cs-filmhero .cs-hear:focus-visible{outline:3px solid #d5a14b;outline-offset:3px}
html body #website .cs-filmhero .cs-hear-ico{width:32px;height:32px;border-radius:50%;flex:none;background:linear-gradient(180deg,#ffb347,#f07b2c) center/14px no-repeat;box-shadow:0 0 0 0 rgba(240,123,44,.5);animation:csHearPulse 2.2s infinite;position:relative}
html body #website .cs-filmhero .cs-hear-ico::after{content:'';position:absolute;inset:0;background:center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h3l4-3v10L5 10H2z' fill='%23fff'/%3E%3Cpath d='M11 5.5c1 .8 1 4.2 0 5M13 3.5c2 1.6 2 7.4 0 9' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
html body #website .cs-filmhero .cs-hear.on .cs-hear-ico{animation:none;background:linear-gradient(180deg,#2a6b4b,#173f2d)}
@keyframes csHearPulse{0%{box-shadow:0 0 0 0 rgba(240,123,44,.45)}70%{box-shadow:0 0 0 12px rgba(240,123,44,0)}100%{box-shadow:0 0 0 0 rgba(240,123,44,0)}}
@keyframes csPop{0%{transform:scale(.92);opacity:.4}100%{transform:none;opacity:1}}
@media(max-width:760px){
  html body #website .cs-filmhero .cs-voice{right:12px;left:12px;bottom:14px;max-width:none;align-items:flex-end}
  html body #website .cs-filmhero .cs-say{font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){html body #website .cs-filmhero .cs-hear-ico{animation:none}}
html body #website .cs-filmhero .cs-voice{background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important}

/* Film dissolves into the page at the top and bottom */
html body #website .cs-filmhero{background:transparent!important}
html body #website .cs-filmhero .cs-stage{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 78%,transparent 100%)}
html body #website .cs-filmhero::after{display:none}
@media(max-width:980px){
  html body #website .cs-filmhero .cs-stage{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 80%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 80%,transparent 100%)}
  html body #website .cs-filmhero .cs-stage::after{display:none}
}
html body #website .cs-filmhero .cs-hear-ico{background:linear-gradient(180deg,#ffb347,#f07b2c)!important;background-size:auto!important}
html body #website .cs-filmhero .cs-hear.on .cs-hear-ico{background:linear-gradient(180deg,#2a6b4b,#173f2d)!important}

/* Tagline redesign: one clean sentence, Lumi mark, highlighter words (rollback-before-voice-default) */
html body #website .cs-hero p.cs-tagline{grid-column:1/-1;justify-self:start;display:flex;flex-wrap:wrap;align-items:center;column-gap:.32em;row-gap:2px;
  margin:0 0 10px!important;padding:0!important;max-width:34ch!important;background:none!important;box-shadow:none!important;
  font:500 clamp(17px,1.45vw,20px)/1.45 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:#2a352d!important;letter-spacing:0!important;text-transform:none!important}
html body #website .cs-hero .cs-tl-lumi{width:34px;height:34px;margin-right:.25em;flex:none;filter:drop-shadow(0 0 8px rgba(255,170,60,.55));animation:csTlBob 3.2s ease-in-out infinite}
html body #website .cs-hero .cs-tagline mark{position:relative;z-index:0;padding:0 .14em;background:none;color:#173f2d;font-weight:800}
html body #website .cs-hero .cs-tagline mark::before{content:'';position:absolute;z-index:-1;left:-.06em;right:-.06em;bottom:.08em;height:.55em;border-radius:.3em .5em .35em .45em;transform:rotate(-1.5deg);transform-origin:left;
  animation:csMark .7s cubic-bezier(.3,.9,.3,1) both}
html body #website .cs-hero .cs-tagline mark.m1::before{background:#bfe8cf;animation-delay:.35s}
html body #website .cs-hero .cs-tagline mark.m2::before{background:#ffe08f;animation-delay:.6s}
html body #website .cs-hero .cs-tagline mark.m3::before{background:#d9ccff;animation-delay:.85s}
@keyframes csMark{from{transform:rotate(-1.5deg) scaleX(0)}to{transform:rotate(-1.5deg) scaleX(1)}}
@keyframes csTlBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){html body #website .cs-hero .cs-tl-lumi,html body #website .cs-hero .cs-tagline mark::before{animation:none}}
@media(max-width:760px){
  html body #website .cs-hero p.cs-tagline{font-size:16px!important;max-width:none!important}
  html body #website .cs-hero .cs-tl-lumi{width:28px;height:28px}
}
html body #website .cs-hero p.cs-tagline{display:block!important}
html body #website .cs-hero .cs-tl-lumi{display:inline-block;vertical-align:-.45em;margin-right:.35em}
@media(min-width:761px){html body #website .cs-hero p.cs-tagline{max-width:none!important;white-space:nowrap}}

/* Tagline v3: one line, one rolling word (rollback-before-fluid) */
html body #website .cs-hero p.cs-roll{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:.4em;margin:0 0 12px!important;
  padding:7px 16px 7px 10px!important;border-radius:999px;background:rgba(255,253,248,.82);backdrop-filter:blur(6px);box-shadow:var(--clay-sm);
  max-width:none!important;width:fit-content!important;white-space:nowrap;
  font:500 clamp(15px,1.2vw,17px)/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:#2a352d!important;letter-spacing:0!important;text-transform:none!important}
html body #website .cs-hero .cs-roll-dot{width:10px;height:10px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 35%,#ffe7a3,#f59a2c);box-shadow:0 0 0 4px rgba(245,154,44,.16),0 0 12px rgba(245,154,44,.6);animation:csDot 2s ease-in-out infinite}
html body #website .cs-hero .cs-roll-win{display:inline-block;height:1.7em;overflow:hidden;vertical-align:middle;position:relative}
html body #website .cs-hero .cs-roll-track{display:flex;flex-direction:column;animation:csRoll 7.2s cubic-bezier(.7,0,.25,1) infinite}
html body #website .cs-hero .cs-roll-track b{display:block;height:1.7em;line-height:1.7em;padding:0 .55em;border-radius:.6em;font-weight:800;color:#173f2d;text-align:center;
  box-shadow:inset -2px -3px 5px rgba(23,63,45,.08),inset 2px 3px 5px rgba(255,255,255,.7)}
html body #website .cs-hero .cs-roll-track b.w1{background:#c9ecd6}
html body #website .cs-hero .cs-roll-track b.w2{background:#ffe39a}
html body #website .cs-hero .cs-roll-track b.w3{background:#ddd2ff}
@keyframes csRoll{0%,27%{transform:translateY(0)}33%,60%{transform:translateY(-1.7em)}66%,93%{transform:translateY(-3.4em)}100%{transform:translateY(-5.1em)}}
@keyframes csDot{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){
  html body #website .cs-hero .cs-roll-track,html body #website .cs-hero .cs-roll-dot{animation:none}
}
@media(max-width:760px){html body #website .cs-hero p.cs-roll{font-size:14.5px!important;padding:6px 12px 6px 9px!important}}

/* Fluid transitions */
html body #website.fl-ready :is(#subjects,#how,#parents,#pricing,#faq)>*{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
html body #website.fl-ready :is(#subjects,#how,#parents,#pricing,#faq)>*:nth-child(2){transition-delay:.12s}
html body #website.fl-ready :is(#subjects,#how,#parents,#pricing,#faq)>*:nth-child(3){transition-delay:.22s}
html body #website.fl-ready :is(#subjects,#how,#parents,#pricing,#faq)>*:nth-child(n+4){transition-delay:.3s}
html body #website.fl-ready :is(#subjects,#how,#parents,#pricing,#faq).fl-on>*{opacity:1;transform:none}
html body #website.fl-ready :is(#subjects,#how,#parents,#pricing,#faq)>[style*="position: absolute"],
html body #website.fl-ready #subjects>*:last-child{transform:none}
.fl-swap{animation:flSwap .55s cubic-bezier(.2,.7,.2,1)}
@keyframes flSwap{from{opacity:.15;transform:translateY(8px) scale(.995);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}

/* About page menu matches the home menu (same links, pills, active state) */
html body header.top nav{gap:6px!important}
html body header.top nav a{padding:8px 14px;border-radius:999px;font:500 15px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:#3d463c!important;transition:background .25s,color .25s}
html body header.top nav a:hover{background:rgba(214,239,224,.6);color:#173f2d!important}
html body header.top nav a[aria-current="page"]{background:#d6efe0;color:#173f2d!important;box-shadow:inset -2px -2px 5px rgba(23,63,45,.06),inset 2px 2px 5px rgba(255,255,255,.8)}
@media(max-width:760px){
  html body header.top nav a{display:none!important}
  html body header.top nav a.nav-home{display:inline-flex!important;align-items:center;gap:6px;background:#d6efe0;color:#173f2d!important}
  html body header.top nav a.nav-home::before{content:'←'}
}
@media(min-width:761px){
  html body header.top .wrap{max-width:none!important;width:auto!important;margin:0!important;height:78px!important;display:flex!important;align-items:center;justify-content:space-between;
    padding:0 clamp(28px,calc(14.42vw - 107.7px),100px)!important;box-sizing:border-box}
  html body header.top .wrap>a img{height:62px!important;width:auto!important}
  html body header.top nav{margin:0 auto!important;gap:26px!important}
  html body header.top nav a{font:500 14px/22.4px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;padding:6px 12px!important}
}
@media(min-width:761px){html body header.top .wrap{padding-right:calc(clamp(28px,calc(14.42vw - 107.7px),100px) - 24px)!important}}

/* ===== Why Tuuteez: claymorphism redesign (rollback: rollback-before-why-clay) ===== */
html body #website #how.wy{display:block!important;padding:clamp(64px,9vh,104px) 0 clamp(48px,7vh,80px)!important}
html body #website .wy-wrap{width:min(1100px,calc(100% - 40px));margin:0 auto}
html body #website .wy-head{text-align:center;max-width:760px;margin:0 auto 26px}
html body #website .wy-eyebrow{display:inline-block;padding:7px 16px;border-radius:999px;background:var(--c-card);box-shadow:var(--clay-sm);font:600 21px/1 Caveat,cursive;color:#2f7a4f}
html body #website .wy-h2{margin:16px 0 0!important;font:600 clamp(40px,4.4vw,62px)/1.04 Caveat,cursive!important;color:#16211a!important;letter-spacing:0!important}
html body #website .wy-u{position:relative;display:inline-block;z-index:0;color:#173f2d}
html body #website .wy-u::after{content:'';position:absolute;z-index:-1;left:-3%;right:-3%;bottom:.06em;height:.3em;border-radius:.2em;background:#ffd98a;transform:rotate(-1.5deg)}
html body #website .wy-soft{display:block;font-size:.62em;color:#5c6a5f}

/* clay segmented switch with sliding thumb */
html body #website .wy-switch{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin:0 auto 26px}
html body #website .wy-switch-l{font:600 13px/1 Inter,sans-serif;letter-spacing:.04em;color:#5c6456}
html body #website .wy-seg{position:relative;display:inline-flex;padding:6px;border-radius:999px;background:#ece5da;box-shadow:inset 3px 3px 7px rgba(120,95,60,.16),inset -3px -3px 7px rgba(255,255,255,.85)}
html body #website .wy-seg button{position:relative;z-index:1;border:0;background:none;cursor:pointer;padding:11px 20px;border-radius:999px;font:700 14.5px/1 Inter,sans-serif;color:#5c6456;transition:color .3s;white-space:nowrap}
html body #website .wy-seg button[aria-pressed="true"]{color:#173f2d}
html body #website .wy-seg button:focus-visible{outline:3px solid #d5a14b;outline-offset:2px}
html body #website .wy-thumb{position:absolute;z-index:0;left:0;top:6px;bottom:6px;width:0;border-radius:999px;background:linear-gradient(180deg,#fffdf9,#f3ece2);
  box-shadow:5px 6px 12px rgba(92,70,40,.16),-3px -3px 8px rgba(255,255,255,.9),inset -2px -3px 5px rgba(92,70,40,.06);transition:transform .45s cubic-bezier(.3,1.3,.5,1),width .45s cubic-bezier(.3,1.3,.5,1)}

/* the board */
html body #website .wy-board{position:relative;padding:22px 22px 18px;border-radius:40px;background:var(--c-card);
  box-shadow:18px 22px 44px rgba(92,70,40,.14),-10px -10px 28px rgba(255,255,255,.85),inset -6px -8px 16px rgba(92,70,40,.06),inset 6px 8px 16px rgba(255,255,255,.8)}
html body #website .wy-cols,html body #website .wy-row{display:grid;grid-template-columns:52px minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center}
html body #website .wy-cols{padding:0 14px 12px}
html body #website .wy-col-us,html body #website .wy-col-them{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:9px 16px;border-radius:999px;font:700 15px/1 Inter,sans-serif}
html body #website .wy-col-us{background:linear-gradient(180deg,#2a6b4b,#173f2d);color:#fff;box-shadow:4px 6px 14px rgba(23,63,45,.3),inset 2px 2px 4px rgba(255,255,255,.18)}
html body #website .wy-col-us img{width:24px;height:24px;margin:-4px 0;filter:drop-shadow(0 0 6px rgba(255,180,70,.7))}
html body #website .wy-col-them{background:#ece5da;color:#4a5249;box-shadow:inset 2px 2px 5px rgba(120,95,60,.14),inset -2px -2px 5px rgba(255,255,255,.8)}
html body #website .wy-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px;transition:opacity .22s,transform .22s}
html body #website .wy-row{padding:12px 14px;border-radius:24px;background:#f7f2ea;box-shadow:inset 3px 3px 8px rgba(120,95,60,.08),inset -3px -3px 8px rgba(255,255,255,.9)}
html body #website .wy-ic{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;box-shadow:4px 5px 10px rgba(92,70,40,.14),inset -3px -4px 7px rgba(92,70,40,.08),inset 3px 4px 7px rgba(255,255,255,.75)}
html body #website .wy-ic svg{width:24px;height:24px;fill:none;stroke:#173f2d;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body #website .wy-ic.mint{background:var(--c-mint)}html body #website .wy-ic.butter{background:var(--c-butter)}html body #website .wy-ic.sky{background:var(--c-sky)}
html body #website .wy-ic.lilac{background:var(--c-lilac)}html body #website .wy-ic.peach{background:var(--c-peach)}
html body #website .wy-q{font:700 15.5px/1.35 Inter,sans-serif;color:#1d2a22}
html body #website .wy-us,html body #website .wy-them{display:flex;flex-direction:column;gap:5px;font:400 14px/1.4 Inter,sans-serif;color:#3d463c;padding:10px 14px;border-radius:18px;min-height:100%;box-sizing:border-box;justify-content:center}
html body #website .wy-us{background:#dff2e6;box-shadow:3px 4px 9px rgba(23,63,45,.1),inset -2px -3px 6px rgba(23,63,45,.06),inset 2px 3px 6px rgba(255,255,255,.75)}
html body #website .wy-them{background:transparent}
html body #website .wy-m{display:inline-flex;align-items:center;gap:6px;font:700 13px/1 Inter,sans-serif;align-self:flex-start;padding:5px 10px 5px 7px;border-radius:999px}
html body #website .wy-m::before{content:'';width:16px;height:16px;border-radius:50%;flex:none;background:center/10px no-repeat}
html body #website .wy-m.yes{background:#c4ead2;color:#145233}
html body #website .wy-m.yes::before{background-color:#1f7a4a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2 5 8.3l4.2-4.6' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html body #website .wy-m.part{background:#ffeec2;color:#7a5410}
html body #website .wy-m.part::before{background-color:#d79a21;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")}
html body #website .wy-m.no{background:#ffe0d6;color:#8a3317}
html body #website .wy-m.no::before{background-color:#d0603d;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.6 3.6l4.8 4.8M8.4 3.6 3.6 8.4' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}

/* cost strip */
html body #website .wy-cost{margin-top:16px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border-radius:28px;
  background:linear-gradient(180deg,#fff7df,#ffefc4);box-shadow:6px 8px 18px rgba(170,120,30,.14),inset -3px -4px 8px rgba(170,120,30,.08),inset 3px 4px 8px rgba(255,255,255,.8);transition:opacity .22s,transform .22s}
html body #website .wy-cost-k{display:block;font:600 12px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#7a6440;margin-bottom:6px}
html body #website .wy-cost-us strong{display:block;font:600 30px/1 'Playfair Display',Georgia,serif;color:#173f2d}
html body #website .wy-cost-us strong small{font:500 15px Inter,sans-serif;color:#4a5249}
html body #website .wy-cost-n{display:block;margin-top:5px;font:400 13px/1.35 Inter,sans-serif;color:#5c6456}
html body #website .wy-cost-them{font:400 14.5px/1.4 Inter,sans-serif;color:#4a5249}
html body #website .wy-cta{white-space:nowrap}
html body #website .wy-out{opacity:0!important;transform:translateY(6px)!important}
html body #website .wy-fine{max-width:none!important;text-align:center;margin:18px auto 0!important;font:400 12.5px/1.5 Inter,sans-serif!important;color:#6b7266!important}

/* phone */
@media(max-width:820px){
  html body #website .wy-wrap{width:calc(100% - 24px)}
  html body #website .wy-board{padding:14px 12px 12px;border-radius:30px}
  html body #website .wy-cols{display:none}
  html body #website .wy-row{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"ic q q" "us us them";gap:10px;padding:12px}
  html body #website .wy-ic{grid-area:ic;width:40px;height:40px;border-radius:14px}
  html body #website .wy-q{grid-area:q;font-size:15px}
  html body #website .wy-us{grid-area:us}html body #website .wy-them{grid-area:them;background:#efe9df;border-radius:18px}
  html body #website .wy-us::before{content:'Tuuteez';font:700 11px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#1f6a43}
  html body #website .wy-them::before{content:attr(data-name);font:700 11px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6b7266}
  html body #website .wy-cost{grid-template-columns:1fr;text-align:left}
  html body #website .wy-cta{justify-self:stretch;justify-content:center}
  html body #website .wy-seg button{padding:10px 13px;font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){html body #website .wy-thumb,html body #website .wy-rows,html body #website .wy-cost{transition:none}}

/* ===== Why Tuuteez v2: all-at-once clay cards + floating clay shapes (rollback: rollback-before-why-clay2) ===== */
html body #website #how.wz{position:relative;display:block!important;overflow:hidden;padding:clamp(70px,10vh,110px) 0 clamp(50px,7vh,84px)!important}
html body #website .wz-wrap{position:relative;z-index:1;width:min(1140px,calc(100% - 40px));margin:0 auto}
html body #website .wz-head{text-align:center;max-width:740px;margin:0 auto 34px}
html body #website .wz-eyebrow{display:inline-block;padding:7px 16px;border-radius:999px;background:var(--c-card);box-shadow:var(--clay-sm);font:600 21px/1 Caveat,cursive;color:#2f7a4f}
html body #website .wz-h2{margin:16px 0 0!important;font:600 clamp(40px,4.4vw,62px)/1.04 Caveat,cursive!important;color:#16211a!important;letter-spacing:0!important}
html body #website .wz-u{position:relative;display:inline-block;z-index:0;color:#173f2d}
html body #website .wz-u::after{content:'';position:absolute;z-index:-1;left:-3%;right:-3%;bottom:.06em;height:.3em;border-radius:.2em;background:#ffd98a;transform:rotate(-1.5deg)}
html body #website .wz-soft{display:block;font-size:.62em;color:#5c6a5f}
html body #website .wz-lede{margin:14px auto 0!important;max-width:58ch!important;font:400 16.5px/1.6 Inter,sans-serif!important;color:#4a5249!important}

html body #website .wz-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:26px;align-items:stretch}

/* Tuuteez hero card */
html body #website .wz-us{position:relative;padding:26px 24px 22px;border-radius:44px;background:linear-gradient(160deg,#e3f5ea,#cdebd8);
  box-shadow:22px 26px 50px rgba(23,63,45,.18),-12px -12px 30px rgba(255,255,255,.85),inset -8px -10px 20px rgba(23,63,45,.08),inset 8px 10px 20px rgba(255,255,255,.75)}
html body #website .wz-us-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
html body #website .wz-lumi{width:64px;height:64px;flex:none;border-radius:22px;padding:6px;background:#fffaf0;box-shadow:5px 6px 12px rgba(23,63,45,.16),inset -3px -4px 7px rgba(92,70,40,.07),inset 3px 4px 7px rgba(255,255,255,.9);
  filter:drop-shadow(0 0 10px rgba(255,170,60,.35));animation:wzBob 3.4s ease-in-out infinite}
html body #website .wz-us h3{margin:0;font:600 34px/1 Caveat,cursive;color:#173f2d}
html body #website .wz-badge{display:inline-block;margin-top:6px;padding:5px 11px;border-radius:999px;background:#173f2d;color:#fff;font:700 12px/1 Inter,sans-serif;letter-spacing:.03em}
html body #website .wz-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
html body #website .wz-list li{display:grid;grid-template-columns:44px minmax(0,1fr) 30px;gap:12px;align-items:center;padding:10px 12px;border-radius:22px;background:rgba(255,255,255,.62);
  box-shadow:4px 5px 12px rgba(23,63,45,.08),inset -2px -3px 6px rgba(23,63,45,.04),inset 2px 3px 6px rgba(255,255,255,.9)}
html body #website .wz-ic{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;box-shadow:3px 4px 9px rgba(92,70,40,.13),inset -3px -4px 7px rgba(92,70,40,.08),inset 3px 4px 7px rgba(255,255,255,.75)}
html body #website .wz-ic svg,html body #website .wz-pb svg{width:22px;height:22px;fill:none;stroke:#173f2d;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body #website .wz-ic.mint{background:#f2fbf5}html body #website .wz-ic.butter{background:var(--c-butter)}html body #website .wz-ic.sky{background:var(--c-sky)}
html body #website .wz-ic.lilac{background:var(--c-lilac)}html body #website .wz-ic.peach{background:var(--c-peach)}
html body #website .wz-pt b{display:block;font:700 15px/1.3 Inter,sans-serif;color:#1d2a22}
html body #website .wz-pt span{display:block;margin-top:2px;font:400 13.5px/1.35 Inter,sans-serif;color:#3f5246}
html body #website .wz-tick{width:28px;height:28px;border-radius:50%;background:#1f7a4a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2 5 8.3l4.2-4.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow:3px 4px 8px rgba(23,63,45,.28),inset -2px -3px 5px rgba(0,0,0,.18),inset 2px 3px 5px rgba(255,255,255,.3)}
html body #website .wz-price{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:16px;padding:14px 16px;border-radius:26px;background:linear-gradient(180deg,#fff8e2,#ffeec2);
  box-shadow:5px 6px 14px rgba(170,120,30,.14),inset -3px -4px 8px rgba(170,120,30,.08),inset 3px 4px 8px rgba(255,255,255,.85)}
html body #website .wz-price>span{font:500 15px Inter,sans-serif;color:#4a5249}
html body #website .wz-price strong{font:600 28px/1 'Playfair Display',Georgia,serif;color:#173f2d}
html body #website .wz-price small{flex-basis:100%;order:3;font:400 12.5px Inter,sans-serif;color:#6b6450}
html body #website .wz-cta{margin-left:auto;white-space:nowrap}

/* alternative cards */
html body #website .wz-alts{display:grid;gap:14px;align-content:start}
html body #website .wz-key{margin:0 0 -2px!important;max-width:none!important;display:flex;gap:6px 14px;align-items:center;justify-content:flex-end;font:600 12.5px Inter,sans-serif!important;color:#5c6456!important}
html body #website .wz-key .k{display:inline-block;width:14px;height:14px;border-radius:5px;margin-right:-8px;box-shadow:inset -1px -2px 3px rgba(0,0,0,.12)}
html body #website .wz-key .k.yes{background:#5fbf86}html body #website .wz-key .k.part{background:#f2c055}html body #website .wz-key .k.no{background:#ea8a6c}
html body #website .wz-alt{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h pb" "g g" "m c";gap:8px 14px;padding:16px 18px;border-radius:30px;background:var(--c-card);
  box-shadow:12px 14px 30px rgba(92,70,40,.12),-8px -8px 20px rgba(255,255,255,.85),inset -5px -6px 12px rgba(92,70,40,.05),inset 5px 6px 12px rgba(255,255,255,.8);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
html body #website .wz-alt:hover{transform:translateY(-3px) rotate(-.3deg)}
html body #website .wz-alt::before{content:'';position:absolute;left:18px;top:-7px;width:44px;height:14px;border-radius:999px;box-shadow:inset -2px -3px 4px rgba(0,0,0,.08)}
html body #website .wz-alt.lav::before{background:var(--c-lilac)}html body #website .wz-alt.sky::before{background:var(--c-sky)}html body #website .wz-alt.peach::before{background:var(--c-peach)}
html body #website .wz-alt h3{grid-area:h;margin:0;align-self:center;font:700 16px/1.2 Inter,sans-serif;color:#1d2a22}
html body #website .wz-pbs{grid-area:pb;list-style:none;margin:0;padding:0;display:flex;gap:6px}
html body #website .wz-pb{position:relative;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  box-shadow:3px 4px 7px rgba(92,70,40,.14),inset -2px -3px 5px rgba(0,0,0,.1),inset 2px 3px 5px rgba(255,255,255,.55)}
html body #website .wz-pb svg{width:18px;height:18px;stroke-width:2}
html body #website .wz-pb.yes{background:#9fdcb7}html body #website .wz-pb.part{background:#f7d27a}html body #website .wz-pb.no{background:#f2a68d}
html body #website .wz-pb.no svg{opacity:.55}
html body #website .wz-pb.no::after{content:'';position:absolute;left:6px;right:6px;top:50%;height:2px;border-radius:2px;background:#8a3317;transform:rotate(-40deg)}
html body #website .wz-gm{margin:0!important;max-width:none!important;font:400 14px/1.4 Inter,sans-serif!important;color:#3d463c!important}
html body #website .wz-gm:nth-of-type(1){grid-area:g}html body #website .wz-gm:nth-of-type(2){grid-area:m}
html body #website .wz-gm span{display:inline-block;margin-right:8px;padding:3px 9px;border-radius:999px;font:700 11.5px/1.3 Inter,sans-serif;letter-spacing:.02em}
html body #website .wz-gm .g{background:#dff2e6;color:#1f6a43}html body #website .wz-gm .m{background:#ffe3d8;color:#8a3317}
html body #website .wz-cost{grid-area:c;align-self:end;margin:0!important;max-width:none!important;font:500 12.5px/1.3 Inter,sans-serif!important;color:#6b7266!important;text-align:right}
html body #website .wz-fine{max-width:none!important;text-align:center;margin:22px auto 0!important;font:400 12.5px/1.5 Inter,sans-serif!important;color:#6b7266!important}

/* floating clay shapes */
html body #website .wz-shapes{position:absolute;inset:0;z-index:0;pointer-events:none}
html body #website .wz-shapes .sh{position:absolute;display:block;animation:wzFloat 9s ease-in-out infinite}
html body #website .wz-shapes .s1{width:92px;height:92px;left:4%;top:12%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff6d6,#ffd98a 55%,#e9b552);box-shadow:10px 14px 24px rgba(170,120,30,.22)}
html body #website .wz-shapes .s2{width:110px;height:110px;right:5%;top:8%;border-radius:50%;border:22px solid #d9ccff;box-sizing:border-box;box-shadow:8px 12px 22px rgba(110,90,170,.2),inset -4px -6px 10px rgba(80,60,150,.18),inset 4px 6px 10px rgba(255,255,255,.6);animation-delay:-3s}
html body #website .wz-shapes .s3{width:70px;height:150px;left:1.5%;bottom:18%;border-radius:999px;background:linear-gradient(160deg,#d6efe0,#a9d9bc);transform:rotate(28deg);box-shadow:10px 12px 22px rgba(23,63,45,.18),inset -5px -7px 12px rgba(23,63,45,.1),inset 5px 7px 12px rgba(255,255,255,.7);animation-delay:-5s}
html body #website .wz-shapes .s4{width:64px;height:64px;right:3%;bottom:22%;border-radius:20px;background:linear-gradient(160deg,#ffe2d2,#f7b9a0);transform:rotate(18deg);box-shadow:8px 10px 18px rgba(200,100,60,.2),inset -4px -5px 9px rgba(160,70,40,.12),inset 4px 5px 9px rgba(255,255,255,.65);animation-delay:-2s}
html body #website .wz-shapes .s5{width:38px;height:38px;left:20%;top:30%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,#d7ebff 60%,#a9cdef);box-shadow:5px 7px 12px rgba(70,110,170,.2);animation-delay:-6s}
html body #website .wz-shapes .s6{width:0;height:0;right:22%;top:20%;border-left:26px solid transparent;border-right:26px solid transparent;border-bottom:44px solid #ffd6de;filter:drop-shadow(5px 7px 8px rgba(200,90,110,.22));animation-delay:-4s}
html body #website .wz-shapes .s7{width:120px;height:40px;left:43%;bottom:3%;fill:none;stroke:#e9b552;stroke-width:9;stroke-linecap:round;filter:drop-shadow(4px 6px 6px rgba(170,120,30,.2));animation-delay:-1s}
@keyframes wzFloat{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes wzBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){html body #website .wz-shapes .sh,html body #website .wz-lumi{animation:none}}

@media(max-width:900px){
  html body #website .wz-grid{grid-template-columns:1fr}
  html body #website .wz-key{justify-content:center}
}
@media(max-width:560px){
  html body #website .wz-wrap{width:calc(100% - 24px)}
  html body #website .wz-us{padding:20px 14px 16px;border-radius:34px}
  html body #website .wz-list li{grid-template-columns:40px minmax(0,1fr) 26px;gap:10px;padding:9px 10px}
  html body #website .wz-ic{width:40px;height:40px;border-radius:13px}
  html body #website .wz-alt{grid-template-columns:1fr;grid-template-areas:"h" "pb" "g" "m" "c";padding:16px 14px}
  html body #website .wz-cost{text-align:left}
  html body #website .wz-cta{margin-left:0;flex:1;justify-content:center}
  html body #website .wz-shapes .s2{width:70px;height:70px;border-width:14px}
  html body #website .wz-shapes .s1{width:56px;height:56px}
  html body #website .wz-shapes .s3,html body #website .wz-shapes .s6{display:none}
}
html body #website .wz-us h3{font:600 36px/1 Caveat,cursive!important;color:#173f2d!important;letter-spacing:0!important}
html body #website .wz-alt h3{font:700 16px/1.2 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:#1d2a22!important;letter-spacing:0!important}
html body #website .wz-key-t{margin-right:auto;font-weight:700;color:#3d463c}
html body #website .wz-shapes .s7{left:auto;right:7%;bottom:5%}
@media(max-width:900px){html body #website .wz-key{justify-content:flex-start;flex-wrap:wrap}html body #website .wz-key-t{flex-basis:100%;margin-right:0}}
@media(max-width:560px){
  html body #website .wz-shapes .s1{left:-18px;top:auto;bottom:46%}
  html body #website .wz-shapes .s2{right:-22px;top:auto;bottom:30%}
  html body #website .wz-shapes .s5{left:auto;right:10px;top:40px}
}

/* ===== Why Tuuteez v3: five plain clay reason cards + price card (rollback: rollback-before-why-clay3) ===== */
html body #website #how.wq{position:relative;display:block!important;overflow:hidden;padding:clamp(70px,10vh,110px) 0 clamp(56px,8vh,90px)!important}
html body #website .wq-wrap{position:relative;z-index:1;width:min(1120px,calc(100% - 40px));margin:0 auto}
html body #website .wq-head{text-align:center;max-width:740px;margin:0 auto 36px}
html body #website .wq-eyebrow{display:inline-block;padding:7px 16px;border-radius:999px;background:var(--c-card);box-shadow:var(--clay-sm);font:600 21px/1 Caveat,cursive;color:#2f7a4f}
html body #website .wq-h2{margin:16px 0 0!important;font:600 clamp(40px,4.4vw,62px)/1.04 Caveat,cursive!important;color:#16211a!important;letter-spacing:0!important}
html body #website .wq-u{position:relative;display:inline-block;z-index:0;color:#173f2d}
html body #website .wq-u::after{content:'';position:absolute;z-index:-1;left:-3%;right:-3%;bottom:.06em;height:.3em;border-radius:.2em;background:#ffd98a;transform:rotate(-1.5deg)}
html body #website .wq-soft{display:block;font-size:.62em;color:#5c6a5f}
html body #website .wq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
html body #website .wq-card{position:relative;padding:26px 24px 24px;border-radius:36px;
  box-shadow:14px 18px 36px rgba(92,70,40,.13),-8px -8px 22px rgba(255,255,255,.85),inset -6px -8px 16px rgba(92,70,40,.07),inset 6px 8px 16px rgba(255,255,255,.75);
  transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
html body #website .wq-card:hover{transform:translateY(-4px)}
html body #website .wq-card.mint{background:linear-gradient(160deg,#e6f6ec,#d3eedd)}
html body #website .wq-card.butter{background:linear-gradient(160deg,#fff6d8,#ffecb0)}
html body #website .wq-card.sky{background:linear-gradient(160deg,#e6f1ff,#d2e6fb)}
html body #website .wq-card.lilac{background:linear-gradient(160deg,#f0ebff,#e0d6ff)}
html body #website .wq-card.peach{background:linear-gradient(160deg,#ffece2,#ffdac8)}
html body #website .wq-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:20px;background:rgba(255,255,255,.75);margin-bottom:16px;
  box-shadow:5px 6px 12px rgba(92,70,40,.13),inset -3px -4px 7px rgba(92,70,40,.07),inset 3px 4px 7px rgba(255,255,255,.95)}
html body #website .wq-ic svg{width:28px;height:28px;fill:none;stroke:#173f2d;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body #website .wq-card h3{margin:0 0 8px!important;font:700 20px/1.25 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:#16211a!important;letter-spacing:-.01em!important}
html body #website .wq-card p{margin:0!important;max-width:none!important;font:400 15.5px/1.55 Inter,sans-serif!important;color:#3d463c!important}
html body #website .wq-price{background:linear-gradient(160deg,#245c41,#173f2d);display:flex;flex-direction:column;align-items:flex-start;
  box-shadow:14px 18px 36px rgba(23,63,45,.3),-8px -8px 22px rgba(255,255,255,.8),inset -6px -8px 16px rgba(0,0,0,.18),inset 6px 8px 16px rgba(255,255,255,.12)}
html body #website .wq-price h3{color:#fff!important}
html body #website .wq-price h3 strong{font:600 30px/1 'Playfair Display',Georgia,serif;color:#ffd98a}
html body #website .wq-price p{color:#d7e8dd!important}
html body #website .wq-lumi{width:56px;height:56px;margin-bottom:14px;filter:drop-shadow(0 0 12px rgba(255,170,60,.65));animation:wzBob 3.4s ease-in-out infinite}
html body #website .wq-cta{margin-top:auto!important;align-self:stretch;justify-content:center;background:linear-gradient(180deg,#fff7df,#ffe6a6)!important;color:#173f2d!important;
  box-shadow:4px 6px 14px rgba(0,0,0,.2),inset -2px -3px 6px rgba(170,120,30,.15),inset 2px 3px 6px rgba(255,255,255,.9)!important}
html body #website .wq-price p{margin-bottom:18px!important}
html body #website .wq-shapes{position:absolute;inset:0;z-index:0;pointer-events:none}
html body #website .wq-shapes .sh{position:absolute;display:block;animation:wzFloat 9s ease-in-out infinite}
html body #website .wq-shapes .s1{width:86px;height:86px;left:4%;top:9%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff6d6,#ffd98a 55%,#e9b552);box-shadow:10px 14px 24px rgba(170,120,30,.22)}
html body #website .wq-shapes .s2{width:100px;height:100px;right:5%;top:7%;border-radius:50%;border:20px solid #d9ccff;box-sizing:border-box;box-shadow:8px 12px 22px rgba(110,90,170,.2),inset -4px -6px 10px rgba(80,60,150,.18),inset 4px 6px 10px rgba(255,255,255,.6);animation-delay:-3s}
html body #website .wq-shapes .s3{width:60px;height:130px;left:1.5%;bottom:12%;border-radius:999px;background:linear-gradient(160deg,#d6efe0,#a9d9bc);transform:rotate(28deg);box-shadow:10px 12px 22px rgba(23,63,45,.18),inset -5px -7px 12px rgba(23,63,45,.1),inset 5px 7px 12px rgba(255,255,255,.7);animation-delay:-5s}
@media(prefers-reduced-motion:reduce){html body #website .wq-shapes .sh,html body #website .wq-lumi{animation:none}}
@media(max-width:960px){html body #website .wq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  html body #website .wq-wrap{width:calc(100% - 24px)}
  html body #website .wq-grid{grid-template-columns:1fr;gap:14px}
  html body #website .wq-card{padding:20px 18px;border-radius:28px;display:grid;grid-template-columns:52px 1fr;column-gap:14px}
  html body #website .wq-ic{grid-row:span 2;width:52px;height:52px;margin:0;border-radius:18px}
  html body #website .wq-card h3{font-size:18px!important;margin-bottom:4px!important}
  html body #website .wq-card p{font-size:14.5px!important}
  html body #website .wq-price{display:flex}
  html body #website .wq-shapes .s1{width:54px;height:54px;left:-14px;top:auto;bottom:40%}
  html body #website .wq-shapes .s2{width:64px;height:64px;border-width:13px;right:-20px;top:auto;bottom:22%}
  html body #website .wq-shapes .s3{display:none}
}
html body #website :is(#how,#subjects,#parents,#pricing) .wq-price a.button.wq-cta,
html body #website :is(#how,#subjects,#parents,#pricing) .wq-price a.button.wq-cta:hover,
html body #website :is(#how,#subjects,#parents,#pricing) .wq-price a.button.wq-cta:active{background:linear-gradient(180deg,#fff9e6,#ffe3a0)!important;color:#173f2d!important;border:0!important;
  box-shadow:4px 6px 14px rgba(0,0,0,.22),inset -2px -3px 6px rgba(170,120,30,.18),inset 2px 3px 6px rgba(255,255,255,.95)!important}

/* ===== Why Tuuteez v4: simple clay comparison table (rollback: rollback-before-why-compare4) ===== */
html body #website #how.wc2{position:relative;display:block!important;overflow:hidden;padding:clamp(70px,10vh,110px) 0 clamp(56px,8vh,90px)!important}
html body #website .wc2-wrap{position:relative;z-index:1;width:min(1000px,calc(100% - 40px));margin:0 auto}
html body #website .wc2-lede{margin:12px auto 0!important;max-width:none!important;font:400 17px/1.5 Inter,sans-serif!important;color:#4a5249!important}
html body #website .wc2-board{padding:18px 18px 10px;border-radius:40px;background:var(--c-card);
  box-shadow:18px 22px 44px rgba(92,70,40,.14),-10px -10px 28px rgba(255,255,255,.85),inset -6px -8px 16px rgba(92,70,40,.06),inset 6px 8px 16px rgba(255,255,255,.8)}
html body #website .wc2-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
html body #website .wc2-table th,html body #website .wc2-table td{padding:14px 10px;text-align:center;vertical-align:middle;border:0;background:none}
html body #website .wc2-table thead th{font:700 15px/1.25 Inter,sans-serif;color:#4a5249;padding-top:16px;padding-bottom:16px}
html body #website .wc2-table thead th:first-child{width:34%}
html body #website .wc2-table tbody th{text-align:left;font:600 15.5px/1.35 Inter,sans-serif;color:#1d2a22;padding-left:14px}
html body #website .wc2-table tbody tr+tr>*{border-top:1.5px dashed #e6dccd}
/* the raised Tuuteez column */
html body #website .wc2-table .wc2-us{position:relative;background:#dcf1e4;box-shadow:inset 6px 0 10px -8px rgba(23,63,45,.18),inset -6px 0 10px -8px rgba(23,63,45,.18)}
html body #website .wc2-table thead .wc2-us{border-radius:26px 26px 0 0;background:linear-gradient(180deg,#2a6b4b,#173f2d);color:#fff}
html body #website .wc2-table tbody tr:last-child .wc2-us{border-radius:0 0 26px 26px}
html body #website .wc2-table tbody tr+tr>.wc2-us{border-top-color:#c3e3cf}
html body #website .wc2-brand{display:inline-flex;align-items:center;gap:8px;font:700 17px/1 Inter,sans-serif}
html body #website .wc2-brand img{width:28px;height:28px;margin:-6px 0;filter:drop-shadow(0 0 8px rgba(255,180,70,.8))}
/* clay answer chips */
html body #website .wc2-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 8px;border-radius:999px;font:700 14px/1 Inter,sans-serif;
  box-shadow:3px 4px 8px rgba(92,70,40,.12),inset -2px -3px 5px rgba(0,0,0,.06),inset 2px 3px 5px rgba(255,255,255,.75)}
html body #website .wc2-chip::before{content:'';width:20px;height:20px;border-radius:50%;flex:none;background:center/12px no-repeat;box-shadow:inset -1px -2px 3px rgba(0,0,0,.18)}
html body #website .wc2-chip.yes{background:#c4ead2;color:#145233}
html body #website .wc2-chip.yes::before{background-color:#1f7a4a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2 5 8.3l4.2-4.6' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html body #website .wc2-chip.part{background:#ffeec2;color:#7a5410}
html body #website .wc2-chip.part::before{background-color:#d79a21;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")}
html body #website .wc2-chip.no{background:#ffe0d6;color:#8a3317}
html body #website .wc2-chip.no::before{background-color:#d0603d;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.6 3.6l4.8 4.8M8.4 3.6 3.6 8.4' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
html body #website .wc2-us .wc2-chip.yes{background:#fff;box-shadow:3px 4px 9px rgba(23,63,45,.16),inset -2px -3px 5px rgba(23,63,45,.06),inset 2px 3px 5px rgba(255,255,255,.9)}
html body #website .wc2-cost td{font:500 14px/1.3 Inter,sans-serif;color:#5c6456}
html body #website .wc2-cost .wc2-us strong{font:600 24px/1 'Playfair Display',Georgia,serif;color:#173f2d}
html body #website .wc2-cost .wc2-us small{font:500 13px Inter,sans-serif;color:#3f5246}
html body #website .wc2-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:22px}
html body #website .wc2-foot p{margin:0!important;max-width:60ch!important;font:400 12.5px/1.5 Inter,sans-serif!important;color:#6b7266!important}
html body #website .wc2-foot .button{flex:none;white-space:nowrap}
@media(max-width:700px){
  html body #website .wc2-wrap{width:calc(100% - 16px)}
  html body #website .wc2-board{padding:8px 6px 4px;border-radius:26px}
  html body #website .wc2-table thead th:first-child{width:31%}
  html body #website .wc2-table th,html body #website .wc2-table td{padding:11px 3px}
  html body #website .wc2-table thead th{font-size:11.5px;padding-top:12px;padding-bottom:12px}
  html body #website .wc2-table tbody th{font-size:13px;padding-left:8px}
  html body #website .wc2-brand{flex-direction:column;gap:3px;font-size:12px}
  html body #website .wc2-brand img{width:22px;height:22px;margin:0}
  html body #website .wc2-chip{font-size:0;gap:0;padding:4px}
  html body #website .wc2-chip::before{width:22px;height:22px;background-size:13px}
  html body #website .wc2-cost td{font-size:11.5px}
  html body #website .wc2-cost .wc2-us strong{font-size:17px}
  html body #website .wc2-cost .wc2-us small{display:block;font-size:10.5px}
  html body #website .wc2-foot{flex-direction:column-reverse;align-items:stretch;text-align:center}
  html body #website .wc2-foot .button{justify-content:center}
}

/* Why Tuuteez shapes: faint and shallow */
html body #website .wq-shapes .sh{opacity:.38;filter:saturate(.75)}
html body #website .wq-shapes .s1{box-shadow:3px 5px 10px rgba(170,120,30,.08)!important}
html body #website .wq-shapes .s2{box-shadow:3px 5px 10px rgba(110,90,170,.08),inset -2px -3px 5px rgba(80,60,150,.08),inset 2px 3px 5px rgba(255,255,255,.5)!important}
html body #website .wq-shapes .s3{box-shadow:3px 5px 10px rgba(23,63,45,.08),inset -2px -3px 6px rgba(23,63,45,.05),inset 2px 3px 6px rgba(255,255,255,.6)!important}

/* ===== FAQ: clay question cards (rollback: rollback-before-faq-clay) ===== */
html body #website #faq.fq{position:relative;overflow:hidden}
html body #website #faq.fq>*:not(.fq-shapes){position:relative;z-index:1}
html body #website .fq-shapes{position:absolute;inset:0;z-index:0;pointer-events:none}
html body #website .fq-shapes .sh{position:absolute;display:block;opacity:.38;filter:saturate(.75);animation:wzFloat 10s ease-in-out infinite}
html body #website .fq-shapes .s1{width:70px;height:70px;left:5%;bottom:14%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,#d7ebff 60%,#a9cdef);box-shadow:3px 5px 10px rgba(70,110,170,.1)}
html body #website .fq-shapes .s2{width:84px;height:84px;right:4%;top:8%;border-radius:50%;border:17px solid #ffd6de;box-sizing:border-box;box-shadow:inset -2px -3px 5px rgba(200,90,110,.1),inset 2px 3px 5px rgba(255,255,255,.5);animation-delay:-4s}
html body #website .fq-shapes .s3{width:52px;height:52px;left:38%;top:6%;border-radius:16px;background:linear-gradient(160deg,#fff6d8,#ffe39a);transform:rotate(20deg);animation-delay:-2s}
html body #website .fq-shapes .s4{width:46px;height:108px;right:3%;bottom:10%;border-radius:999px;background:linear-gradient(160deg,#ece6ff,#d4c8ff);transform:rotate(-24deg);animation-delay:-6s}

html body #website .fh.fq .faq-list{gap:14px!important}
html body #website .fh.fq .faq-item{border:0!important;border-radius:28px!important;background:var(--c-card)!important;padding:0!important;overflow:hidden;
  box-shadow:10px 12px 26px rgba(92,70,40,.11),-6px -6px 16px rgba(255,255,255,.85),inset -4px -5px 10px rgba(92,70,40,.05),inset 4px 5px 10px rgba(255,255,255,.8)!important;
  transition:transform .3s cubic-bezier(.3,1.3,.5,1),background .3s,box-shadow .3s}
html body #website .fh.fq .faq-item:hover{transform:translateY(-2px)}
html body #website .fh.fq .faq-item::before,html body #website .fh.fq .faq-item::after{display:none!important;content:none!important}
html body #website .fh.fq .faq-item summary{display:grid!important;grid-template-columns:46px minmax(0,1fr) 38px;gap:14px;align-items:center;padding:14px 16px 14px 14px!important;cursor:pointer;list-style:none;
  font:700 16.5px/1.35 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:#1d2a22!important;letter-spacing:0!important}
html body #website .fh.fq .faq-item summary::-webkit-details-marker{display:none}
html body #website .fh.fq .faq-item summary::before,html body #website .fh.fq .faq-item summary::after{display:none!important;content:none!important}
html body #website .fh.fq .faq-item summary:focus-visible{outline:3px solid #d5a14b;outline-offset:-3px;border-radius:28px}
html body #website .fq-ic{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
  box-shadow:3px 4px 9px rgba(92,70,40,.13),inset -3px -4px 7px rgba(92,70,40,.08),inset 3px 4px 7px rgba(255,255,255,.75)}
html body #website .fq-ic svg{width:23px;height:23px;fill:none;stroke:#173f2d;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body #website .fq-ic.mint{background:var(--c-mint)}html body #website .fq-ic.peach{background:var(--c-peach)}html body #website .fq-ic.butter{background:var(--c-butter)}
html body #website .fq-ic.sky{background:var(--c-sky)}html body #website .fq-ic.lilac{background:var(--c-lilac)}
html body #website .fq-pm{position:relative;width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,#fffdf9,#efe8dd);
  box-shadow:3px 4px 8px rgba(92,70,40,.15),inset -2px -3px 5px rgba(92,70,40,.07),inset 2px 3px 5px rgba(255,255,255,.95);transition:transform .4s cubic-bezier(.3,1.3,.5,1),background .3s}
html body #website .fq-pm::before,html body #website .fq-pm::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:2.4px;border-radius:2px;background:#173f2d;transform:translate(-50%,-50%)}
html body #website .fq-pm::after{transform:translate(-50%,-50%) rotate(90deg)}
html body #website .fh.fq .faq-item[open]:not(.fq-closing) .fq-pm{transform:rotate(135deg);background:linear-gradient(180deg,#2a6b4b,#173f2d)}
html body #website .fh.fq .faq-item[open]:not(.fq-closing) .fq-pm::before,html body #website .fh.fq .faq-item[open]:not(.fq-closing) .fq-pm::after{background:#fff}
html body #website .fh.fq .faq-item p{margin:0!important;max-width:none!important;overflow:hidden;padding:0 22px 18px 74px!important;
  font:400 15.5px/1.6 Inter,sans-serif!important;color:#3d463c!important}
/* open card sinks into a soft tinted panel */
html body #website .fh.fq .faq-item[open]:not(.fq-closing){box-shadow:inset 5px 6px 14px rgba(92,70,40,.1),inset -5px -6px 14px rgba(255,255,255,.85),3px 4px 10px rgba(92,70,40,.05)!important;transform:none}
html body #website .fh.fq .faq-item.fq-mint[open]{background:#eaf7ef!important}
html body #website .fh.fq .faq-item.fq-peach[open]{background:#fff1ea!important}
html body #website .fh.fq .faq-item.fq-butter[open]{background:#fff8e2!important}
html body #website .fh.fq .faq-item.fq-sky[open]{background:#edf5ff!important}
html body #website .fh.fq .faq-item.fq-lilac[open]{background:#f4f0ff!important}
@media(max-width:600px){
  html body #website .fh.fq .faq-item summary{grid-template-columns:40px minmax(0,1fr) 34px;gap:11px;font-size:15px!important;padding:12px!important}
  html body #website .fq-ic{width:40px;height:40px;border-radius:14px}
  html body #website .fq-pm{width:34px;height:34px}
  html body #website .fh.fq .faq-item p{padding:0 16px 16px 16px!important;font-size:14.5px!important}
  html body #website .fq-shapes .s3,html body #website .fq-shapes .s4{display:none}
}
@media(prefers-reduced-motion:reduce){html body #website .fq-shapes .sh{animation:none}}
html body #website #faq.fq .faq-item[open]{background:#f6f1e8!important}
html body #website #faq.fq .faq-item.fq-mint[open]{background:#eaf7ef!important}
html body #website #faq.fq .faq-item.fq-peach[open]{background:#fff1ea!important}
html body #website #faq.fq .faq-item.fq-butter[open]{background:#fff8e2!important}
html body #website #faq.fq .faq-item.fq-sky[open]{background:#edf5ff!important}
html body #website #faq.fq .faq-item.fq-lilac[open]{background:#f4f0ff!important}

/* FAQ: a set of different clay shapes (star, heart, triangle, arch, plus, flower, squiggle, dots) */
html body #website .fq-shapes .s1,html body #website .fq-shapes .s2,html body #website .fq-shapes .s3,html body #website .fq-shapes .s4{display:none}
html body #website .fq-shapes .sh{position:absolute;display:block;opacity:.42;filter:drop-shadow(3px 5px 6px rgba(92,70,40,.12)) saturate(.85);animation:wzFloat 11s ease-in-out infinite}
html body #website .fq-shapes .f1{width:74px;height:74px;left:3%;top:10%;rotate:-12deg}
html body #website .fq-shapes .f2{width:58px;height:58px;left:31%;top:58%;rotate:10deg;animation-delay:-3s}
html body #website .fq-shapes .f3{width:66px;height:66px;right:3.5%;top:7%;rotate:14deg;animation-delay:-5s}
html body #website .fq-shapes .f4{width:96px;height:58px;left:4%;bottom:9%;animation-delay:-2s}
html body #website .fq-shapes .f5{width:54px;height:54px;right:2.5%;top:46%;rotate:18deg;animation-delay:-7s}
html body #website .fq-shapes .f6{width:62px;height:62px;right:5%;bottom:8%;animation-delay:-4s;animation-name:wzFloat,fqSpin;animation-duration:11s,40s;animation-timing-function:ease-in-out,linear}
html body #website .fq-shapes .f7{width:120px;height:38px;left:33%;top:5%;opacity:.35;animation-delay:-6s}
html body #website .fq-shapes .f8{left:28%;bottom:6%;display:flex;gap:9px;animation-delay:-1s}
html body #website .fq-shapes .f8 i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#bfe6cf 60%,#8fcfaa)}
html body #website .fq-shapes .f8 i:nth-child(2){background:radial-gradient(circle at 35% 30%,#fff,#ffd98a 60%,#e9b552);transform:translateY(-8px)}
html body #website .fq-shapes .f8 i:nth-child(3){background:radial-gradient(circle at 35% 30%,#fff,#d9ccff 60%,#b3a1f0)}
@keyframes fqSpin{to{rotate:360deg}}
@media(max-width:900px){html body #website .fq-shapes .f2,html body #website .fq-shapes .f7{display:none}}
@media(max-width:600px){
  html body #website .fq-shapes .f1{width:46px;height:46px;left:auto;right:6%;top:2%}
  html body #website .fq-shapes .f3{width:40px;height:40px;right:auto;left:-10px;top:30%}
  html body #website .fq-shapes .f4{width:64px;height:38px;left:6%;bottom:2%}
  html body #website .fq-shapes .f5{width:38px;height:38px;right:-8px;top:55%}
  html body #website .fq-shapes .f6{width:42px;height:42px;right:6%;bottom:2%}
  html body #website .fq-shapes .f8{display:none}
}
@media(prefers-reduced-motion:reduce){html body #website .fq-shapes .sh{animation:none!important}}
@media(min-width:601px){html body #website .fq-shapes .f1{left:1.5%;top:3%;width:62px;height:62px}}
@media(max-width:760px){
  html body header.top .wrap{height:72px!important;padding:0 20px!important;max-width:none!important;width:auto!important;margin:0!important;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}
  html body header.top .wrap>a img{height:51px!important;width:auto!important}
}
@media(max-width:760px){html body header.top .wrap>a{display:flex;align-items:center;height:51px}html body header.top .wrap>a img{display:block}}
@media(max-width:760px){html body header.top .wrap>a{margin-top:-1px}}

/* ===== Footer tweak (rollback: rollback-before-footer-tweak) ===== */
html.in-foot body #website>.lumi-guide{opacity:0!important;pointer-events:none!important;visibility:hidden;transition:opacity .3s}
html body #website #get-tuuteez{position:relative;overflow:hidden}
html body #website #get-tuuteez .gt4{position:relative;z-index:1}
html body #website .ft-shapes{position:absolute;inset:0;z-index:0;pointer-events:none}
html body #website .ft-shapes .sh{position:absolute;display:block;opacity:.45;animation:wzFloat 10s ease-in-out infinite}
html body #website .ft-shapes .a{width:54px;height:54px;left:22%;top:26%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff8dc,#ffd98a 60%,#e9b552)}
html body #website .ft-shapes .b{width:70px;height:70px;right:24%;bottom:10%;border-radius:50%;border:14px solid #d9ccff;box-sizing:border-box;animation-delay:-3s}
html body #website .ft-shapes .c{width:34px;height:80px;left:47%;bottom:6%;border-radius:999px;background:linear-gradient(160deg,#fff,#cfe4fb);transform:rotate(30deg);animation-delay:-5s}
html body #website .ft-shapes .d{width:40px;height:40px;right:6%;top:14%;border-radius:12px;background:linear-gradient(160deg,#fff0f3,#ffc9d4);transform:rotate(16deg);animation-delay:-7s}

/* round clay back-to-top */
html body #website .gv .gv-top.ft-top{display:inline-flex;align-items:center;gap:10px;border:0!important;padding:0!important;font:600 20px/1 Caveat,cursive!important;color:#173f2d!important}
html body #website .ft-top-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font:700 17px/1 Inter,sans-serif;color:#173f2d;background:linear-gradient(180deg,#fffdf9,#efe8dd);
  box-shadow:3px 4px 9px rgba(23,63,45,.16),inset -2px -3px 5px rgba(92,70,40,.07),inset 2px 3px 5px rgba(255,255,255,.95);transition:transform .3s cubic-bezier(.3,1.3,.5,1)}
html body #website .gv-top.ft-top:hover .ft-top-ic{transform:translateY(-4px)}

/* bottom strip as a soft clay bar */
html body #website footer.ft{display:flex!important;flex-direction:column;align-items:center;gap:14px;padding:18px 20px 24px!important;border-top:0!important}
html body #website footer.ft::before{content:'';display:block;width:min(1180px,100%);height:0;border-top:1.5px dashed rgba(23,63,45,.18);margin-bottom:6px}
html body #website footer.ft .legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px!important;margin:0!important}
html body #website footer.ft .legal-links a{padding:8px 14px;border-radius:999px;font:500 14px/1 Inter,sans-serif!important;color:#2f3a32!important;text-decoration:none!important;transition:background .25s,box-shadow .25s}
html body #website footer.ft .legal-links a:hover{background:rgba(255,255,255,.7);box-shadow:3px 4px 8px rgba(23,63,45,.1),inset -2px -2px 4px rgba(92,70,40,.05),inset 2px 2px 4px rgba(255,255,255,.9)}
html body #website .ft-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;font:400 13.5px/1.4 Inter,sans-serif;color:#4a5249}
html body #website .ft-copy a{color:#173f2d}
html body #website .ft-made i{font-style:normal;color:#e0607a;display:inline-block;animation:ftBeat 1.8s ease-in-out infinite}
@keyframes ftBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}}
html body #website footer.ft .ft-replay{display:inline-flex!important;align-items:center;gap:7px;margin:0!important;padding:7px 14px 7px 8px!important;border:0!important;border-radius:999px!important;cursor:pointer;
  background:linear-gradient(180deg,#fffdf9,#f1ebe1)!important;color:#173f2d!important;font:600 13.5px/1 Inter,sans-serif!important;
  box-shadow:3px 4px 9px rgba(23,63,45,.13),inset -2px -3px 5px rgba(92,70,40,.06),inset 2px 3px 5px rgba(255,255,255,.95)!important;position:static!important}
html body #website footer.ft .ft-replay img{width:22px;height:22px;filter:drop-shadow(0 0 5px rgba(255,170,60,.7))}
html body #website footer.ft .ft-replay:hover{transform:translateY(-2px)}
@media(max-width:600px){
  html body #website .ft-shapes .c{display:none}
  html body #website .ft-shapes .a{left:6%;top:8%}
  html body #website .ft-shapes .b{right:4%;bottom:4%;width:50px;height:50px;border-width:10px}
  html body #website .ft-meta{flex-direction:column;gap:10px;text-align:center}
}
@media(prefers-reduced-motion:reduce){html body #website .ft-shapes .sh,html body #website .ft-made i{animation:none}}
html body #website footer.ft .legal-links{order:1}html body #website footer.ft .ft-meta{order:2}
html body #website .ft-shapes .c{display:none}
html body #website .ft-shapes .b{right:3%;bottom:-14px}

/* No focus box around sections that are focused by the menu (keyboard users still see focus on links/buttons) */
html body #website section[tabindex="-1"]:focus,html body #website section[tabindex="-1"]:focus-visible,html body main:focus{outline:none!important}

/* About page: match Home's type — clean Inter for paragraphs, handwriting only for headings and small notes */
html body:has(header.top) .p-hand{font:400 clamp(17px,1.35vw,19px)/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:#3d463c!important;letter-spacing:0!important}
html body:has(header.top) .p-hand :is(.hl,.board){font:inherit!important;font-weight:600!important}
html body:has(header.top) .contact h2{font:600 clamp(38px,3.6vw,52px)/1.05 Caveat,cursive!important;letter-spacing:0!important;color:#16211a!important}
html body:has(header.top) .p-hand{max-width:40ch!important}
html body:has(header.top) main h3{font:700 clamp(18px,1.4vw,21px)/1.3 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;letter-spacing:-.01em!important;color:#16211a!important}