/* Hemvik v17 design layer.
   Layout: one 1200px column for every section, a forest-green band at the top (header + hero) and at the
   bottom (call to action + footer), calm sage-grey surfaces in between.
   Colour: Hemvik green is the signature. The background is a cool sage grey (Zenframe is warm beige),
   the secondary accent is heather (Syncka is orange). Orange appears only as the dot in the logo.
   Loaded after the fingerprinted bundle and after interior stylesheets, so equal-specificity rules win. */

:root{
  color-scheme:light;
  --bg:#EAEFE7;--surface:#FAFBF7;--sunken:#DFE7DE;--soft:#DFE7DE;
  --ink:#1D2A24;--body:#45524B;--muted:#56625C;
  --line:#CBD5CB;--control-border:#7E8C84;
  --green:#2F5443;--green-hover:#264537;--on-green:#F4F7F2;
  --band:#22392D;--band-2:#1B2F25;--on-band:#EEF3EE;--on-band-2:#C9D8CD;--band-line:rgba(238,243,238,.16);--band-accent:#BFE0CB;
  --heather:#6A4A85;--heather-soft:#ECE6F2;
  --sage:#DCE9DF;--sage-ink:#2B5A41;--peach:#F1DECB;--peach-ink:#7A4A1C;--lilac:#ECE6F2;--lilac-ink:#6A4A85;
  --accent:#D9945A;--focus:#6A4A85;--white:#FAFBF7;
  --radius:22px;--radius-button:999px;--radius-badge:999px;
  --gutter:clamp(16px,4vw,48px);--page:1200px;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-heading:"Inter Tight","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#111814;--surface:#19221D;--sunken:#212C26;--soft:#212C26;
  --ink:#E8EFE9;--body:#C2CDC6;--muted:#A3B0A8;
  --line:#2E3A33;--control-border:#71807A;
  --green:#A9D2B8;--green-hover:#C2E2CD;--on-green:#10221A;
  --band:#172A20;--band-2:#122219;--on-band:#EEF3EE;--on-band-2:#BCCFC2;--band-line:rgba(238,243,238,.14);--band-accent:#BFE0CB;
  --heather:#CDB6E6;--heather-soft:#2A2333;
  --sage:#2C4434;--sage-ink:#C0DCCB;--peach:#4A3B2C;--peach-ink:#F1C8A2;--lilac:#3B3349;--lilac-ink:#DCD0EC;
  --focus:#CDB6E6;--white:#E8EFE9;
}
/* Interior pages re-declared the old palette on .blog-page; follow the same tokens there. */
html .blog-page{--bg:#EAEFE7;--surface:#FAFBF7;--ink:#1D2A24;--body:#45524B;--muted:#56625C;--green:#2F5443;--line:#CBD5CB;--soft:#DFE7DE;--control-border:#7E8C84;
  --paper:#FAFBF7;--white:#FFFFFF;--sub:#56625C;--forest:#2F5443;--forest-deep:#22392D;--lavender:#ECE6F2;background:var(--bg);color:var(--ink)}
html[data-theme=dark] .blog-page{--bg:#111814;--surface:#19221D;--ink:#E8EFE9;--body:#C2CDC6;--muted:#A3B0A8;--green:#A9D2B8;--line:#2E3A33;--soft:#212C26;--control-border:#71807A;
  --paper:#19221D;--white:#212C26;--sub:#A3B0A8;--forest:#A9D2B8;--forest-deep:#122219;--lavender:#2A2333}

body{background:var(--bg);color:var(--body)}
::selection{background:var(--heather-soft);color:var(--ink)}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* One column for every section. */
.container{width:min(var(--page),calc(100% - 2*var(--gutter)))}

/* ---------- Type: nothing below 12px, body copy at least 15px ---------- */
.eyebrow,.hero-copy .eyebrow,.promise-intro .eyebrow,.connection-copy .eyebrow,.final-card .eyebrow,.languages-grid .eyebrow{font-size:12px;letter-spacing:.14em;font-weight:600;color:var(--heather)}
.section-heading>p:last-child:not(.eyebrow),.display-copy>p:not(.eyebrow),.connection-copy>p:not(.eyebrow),.start-strip p,.setup-grid p,.faq-grid .section-heading>p:last-of-type,.features-intro>p{font-size:16px;line-height:1.65;color:var(--body)}
.promise p,.feature-card p{font-size:15px;line-height:1.6;color:var(--body)}
.setup-grid h3,.promise h3,.feature-card h3{color:var(--ink)}
.section-heading h2,.display-copy h2,.connection-copy h2,.features-intro h2,.editorial-head h2,.faq-grid h2,.languages-grid h2{color:var(--ink);letter-spacing:-.02em}

/* ---------- Buttons: every state passes 4.5:1 for text and 3:1 for the outline ---------- */
.btn{border-radius:var(--radius-button);min-height:48px;padding:12px 22px;font-size:15px;font-weight:600;background:var(--green);border:1.5px solid var(--green);color:var(--on-green);text-decoration:none}
.btn:hover{background:var(--green-hover);border-color:var(--green-hover);color:var(--on-green)}
.btn-secondary{background:transparent;border:1.5px solid var(--control-border);color:var(--ink)}
.btn-secondary:hover{background:var(--sunken);border-color:var(--ink);color:var(--ink)}
.text-link{color:var(--green);font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;min-height:44px}
.text-link:hover{color:var(--green-hover)}
.pill{background:var(--sunken);color:var(--body)}
.demo-shell-bar .pill{font-size:12px;background:var(--sage);color:var(--sage-ink)}

/* ---------- Header: forest band ---------- */
.site-header{color:var(--on-band)}
.site-header .brand,.site-header .desktop-nav a,.site-header .header-login,.site-header .icon-button,.site-header .language-menu summary,.site-header .mobile-menu summary{color:var(--on-band)}
.site-header .desktop-nav a:hover,.site-header .header-login:hover{color:#FFFFFF}
.site-header .icon-button,.site-header .language-menu summary,.site-header .mobile-menu summary{border:1px solid rgba(238,243,238,.42);background:transparent}
.site-header .icon-button:hover,.site-header .language-menu summary:hover,.site-header .mobile-menu summary:hover{background:rgba(238,243,238,.12)}
.site-header .header-actions>.btn{background:var(--on-band);border-color:var(--on-band);color:var(--band)}
.site-header .header-actions>.btn:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--band)}
.site-header .dropdown{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(10,24,16,.24)}
.site-header .dropdown a{color:var(--ink)}
.site-header .dropdown a:hover,.site-header .dropdown a[aria-current=page]{background:var(--sunken);color:var(--ink)}
.site-header .mobile-menu .dropdown a:last-child{color:var(--ink)}
.site-header .desktop-nav a,.site-header .header-login{font-size:15px}
/* Interior pages: the same band, but in the document flow. */
.blog-page>.site-header{position:sticky!important;top:0;background:var(--band)!important;color:var(--on-band);border-bottom:1px solid var(--band-line)}
.blog-page>.site-header :is(.brand,.desktop-nav a,.header-login,.icon-button,.language-menu summary,.mobile-menu summary){color:var(--on-band)}
.blog-page>.site-header :is(.icon-button,.language-menu summary,.mobile-menu summary){background:transparent;border-color:rgba(238,243,238,.42)}
.blog-page>.site-header :is(.icon-button,.language-menu summary,.mobile-menu summary):hover{background:rgba(238,243,238,.12)}
.blog-page>.site-header .header-actions>.btn,html[data-theme=dark] .blog-page>.site-header .header-actions>.btn{background:var(--on-band);border-color:var(--on-band);color:var(--band)}
.blog-page>.site-header .header-actions>.btn:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--band)}
.blog-page>.site-header .dropdown a{color:var(--ink)}
.blog-page .site-header :is(a,button,summary):focus-visible,.blog-page .site-footer a:focus-visible,.site-header :is(a,button,summary):focus-visible{outline:3px solid var(--band-accent);outline-offset:3px}
.site-header .dropdown a:focus-visible{outline-color:var(--focus)}

/* ---------- Hero: the forest band continues behind the real room photo ---------- */
.hero{background:var(--band);color:var(--on-band)}
.hero::before{background:linear-gradient(90deg,rgba(27,47,37,.95) 0%,rgba(27,47,37,.88) 30%,rgba(27,47,37,.56) 55%,rgba(27,47,37,.24) 80%,rgba(27,47,37,.36) 100%),linear-gradient(0deg,rgba(18,34,25,.6),transparent 34%)}
:root[data-theme=dark] .hero::before{background:linear-gradient(90deg,rgba(18,34,25,.96) 0%,rgba(18,34,25,.9) 30%,rgba(18,34,25,.62) 55%,rgba(18,34,25,.34) 80%,rgba(18,34,25,.46) 100%),linear-gradient(0deg,rgba(12,24,17,.66),transparent 34%)}
.hero-copy .eyebrow,.hero .eyebrow{color:var(--on-band-2)}
.hero-copy .eyebrow .dot{background:var(--band-accent)}
.hero-copy h1,.hero h1{color:var(--on-band)}
.hero-copy h1 span{color:var(--band-accent)}
.hero-lead,.hero .hero-lead{color:var(--on-band-2);font-size:clamp(17px,1.35vw,19px)}
.hero-copy .btn,.hero .button-row .btn{font-size:15px;min-height:50px;padding-inline:22px}
.hero .button-row .btn:not(.btn-secondary){background:var(--on-band);border-color:var(--on-band);color:var(--band)}
.hero .button-row .btn:not(.btn-secondary):hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--band)}
.hero .button-row .btn-secondary,.hero-copy .btn-secondary{background:transparent;border:1.5px solid rgba(238,243,238,.6);color:var(--on-band)}
.hero .button-row .btn-secondary:hover,.hero-copy .btn-secondary:hover{background:rgba(238,243,238,.12);border-color:var(--on-band);color:#FFFFFF}
.floating-message{background:var(--surface);color:var(--ink);box-shadow:0 18px 40px rgba(8,20,13,.28)}
.floating-message small{font-size:12px;color:var(--muted)}
.floating-message b{font-size:14px;color:var(--ink)}
.visual-caption,.visual-caption small{color:var(--on-band-2);font-size:12px}

/* ---------- Promises ---------- */
.promise-section{background:var(--surface);border-bottom:1px solid var(--line)}
.promise-intro h2{color:var(--ink)}
.promise>.icon{color:var(--heather)}
.promise+.promise{border-left-color:var(--line)}

/* ---------- Interactive preview ---------- */
.demo-tabs{background:var(--sunken)}
.demo-tabs button{color:var(--body);font-size:15px;font-weight:600}
.demo-tabs button:hover{color:var(--ink);background:rgba(255,255,255,.5)}
.demo-tabs button[aria-selected=true]{background:var(--green);color:var(--on-green)}
:root[data-theme=dark] .demo-tabs button:hover{background:rgba(255,255,255,.06)}
.demo-shell{background:var(--surface);border:1px solid var(--line)}
.demo-hint{color:var(--muted);font-size:14px}
.reset-button{color:var(--green);font-weight:600}
.task-status{color:var(--ink)}
.example-note{color:var(--muted);font-size:13px}

/* ---------- Steps ---------- */
.setup-section{background:var(--surface);border-block:1px solid var(--line)}
.step-number span{background:var(--green);color:var(--on-green);font-weight:600}
.step-number{color:var(--green)}

/* ---------- Features ---------- */
.feature-card{background:var(--surface);border:1px solid var(--line)}
.feature-card>.rounded-icon{background:var(--sage);color:var(--sage-ink)}
.feature-card:nth-child(3n+2)>.rounded-icon{background:var(--heather-soft);color:var(--heather)}
.feature-card:nth-child(3n)>.rounded-icon{background:var(--peach);color:var(--peach-ink)}

/* ---------- Family connection: real family photo on the band ---------- */
.connection-section{color:var(--on-band)}
.connection-section>.container{background:var(--band)}
.connection-copy .eyebrow{color:var(--on-band-2)}
.connection-copy h2{color:var(--on-band)}
.connection-copy>p:not(.eyebrow),.connection-section .check-list li{color:var(--on-band-2)}
.connection-section .check-list .icon{color:var(--band-accent)}
.connection-copy .text-link{color:var(--on-band);font-size:15px}
.connection-copy .text-link:hover{color:#FFFFFF}
.memory-photo{background:var(--surface);color:var(--ink)}
.memory-photo figcaption{color:var(--muted);font-size:13px}
.postcard{background:var(--peach);color:var(--ink)}
.postcard-top>.rounded-icon{background:var(--surface);color:var(--peach-ink)}
.postcard-top b{font-size:14px;color:var(--ink)}
.postcard-top small{font-size:12px;color:var(--body)}
.postcard>p{font-size:14px;color:var(--ink)}
.call-pill{background:var(--sage);color:var(--sage-ink);font-size:13px}
.connection-end{border-top-color:var(--band-line);color:var(--on-band-2);font-size:14px}
/* Optional strip of family photos from Sanity (landingPage.familyPhotos). */
.hv-family-photos{margin:clamp(28px,4vw,44px) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.hv-family-photos figure{margin:0;display:grid;gap:8px}
.hv-family-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;background:var(--band-2)}
.hv-family-photos figcaption{font-size:13px;color:var(--on-band-2)}

/* ---------- Hemvik Display ---------- */
.display-visual{background:linear-gradient(180deg,var(--surface),var(--sunken));border:1px solid var(--line)}
.display-visual figcaption{color:var(--muted);font-size:12px}
.product-tags .pill{font-size:12px;background:var(--surface);color:var(--body);border:1px solid var(--line)}
.price-note{color:var(--muted);font-size:14px}
.check-list li{color:var(--body)}
.check-list .icon{color:var(--green)}
.start-strip{background:var(--surface);border:1px solid var(--line)}
.start-strip h3{color:var(--ink)}

/* ---------- Optional pricing from Sanity (landingPage.pricing*) ---------- */
.hv-pricing .section-heading{margin-bottom:clamp(24px,3vw,40px)}
.hv-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;list-style:none;margin:0;padding:0}
.hv-plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,32px);display:grid;gap:14px;align-content:start}
.hv-plan[data-highlighted=true]{border:2px solid var(--green)}
.hv-plan h3{font-size:20px;color:var(--ink)}
.hv-plan-price{font-family:var(--font-heading);font-size:clamp(30px,3vw,38px);line-height:1.1;color:var(--ink);letter-spacing:-.02em}
.hv-plan-note{font-size:14px;color:var(--muted)}
.hv-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hv-plan li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:15px;color:var(--body)}
.hv-plan li .icon{width:18px;height:18px;margin-top:3px;color:var(--green)}
.hv-plan .btn{justify-self:start}
.hv-pricing-footnote{margin-top:16px;font-size:14px;color:var(--muted)}

/* ---------- Languages, articles, FAQ ---------- */
.language-links a{background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:14px;border-radius:var(--radius-button)}
.language-links a:hover{border-color:var(--green)}
.language-links a[aria-current=page]{background:var(--green);border-color:var(--green);color:var(--on-green)}
.editorial-card{background:var(--surface);border:1px solid var(--line)}
.editorial-card .tag{color:var(--heather);background:var(--heather-soft);font-weight:600;font-size:12px;padding:5px 10px;border-radius:999px;justify-self:start;width:fit-content}
.editorial-card .more,.editorial-link{color:var(--green);font-weight:600}
.editorial-link{border-color:var(--control-border)}
.faq-list summary{font-size:16px;font-weight:600;color:var(--ink)}
.faq-list details p{font-size:15px;color:var(--body)}
.faq-list summary .icon{color:var(--green)}
.faq-grid .text-link{color:var(--green);font-size:15px}

/* ---------- Final call to action + footer: one forest band ---------- */
.final-section{background:var(--band);padding:clamp(56px,8vw,96px) 0 0;margin-top:clamp(40px,6vw,80px)}
.final-card,:root[data-theme=dark] .final-card{background:transparent;color:var(--on-band);padding:0 0 clamp(44px,6vw,72px);border-radius:0}
.final-card h2{color:var(--on-band)}
.final-card .eyebrow,:root[data-theme=dark] .final-card .eyebrow{color:var(--on-band-2)}
.final-card>p:not(.eyebrow),:root[data-theme=dark] .final-card>p:not(.eyebrow){color:var(--on-band-2);font-size:16px}
.final-card>.brand-mark{color:var(--on-band)}
.final-card .btn,:root[data-theme=dark] .final-card .btn{background:var(--on-band);border-color:var(--on-band);color:var(--band);font-size:15px}
.final-card .btn:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--band)}
.final-card .btn-secondary,:root[data-theme=dark] .final-card .btn-secondary{background:transparent;border-color:rgba(238,243,238,.6);color:var(--on-band)}
.final-card .btn-secondary:hover{background:rgba(238,243,238,.12);border-color:var(--on-band);color:#FFFFFF}
main+.hv-app-section,.blog-page>.hv-app-section{background:var(--band);color:var(--on-band)}
.hv-app-section h2{color:var(--on-band)}
.hv-app-section p,.hv-app-section .hv-shop-eyebrow{color:var(--on-band-2)}

.site-footer,.blog-page>.site-footer{background:var(--band);color:var(--on-band-2);border-top:0;padding:0 0 calc(28px + env(safe-area-inset-bottom,0px))}
.site-footer>.container{border-top:1px solid var(--band-line);padding-top:clamp(36px,5vw,56px)}
.site-footer .brand,.blog-page>.site-footer .brand{color:var(--on-band)}
.footer-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.footer-brand p,.blog-page>.site-footer p{color:var(--on-band-2);font-size:15px;line-height:1.6;max-width:22rem}
.footer-column h3,.footer-languages h3,.blog-page>.site-footer h3{font:600 12px/1.3 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--on-band);margin:0 0 14px}
.footer-column ul,.footer-languages ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.footer-column a,.blog-page>.site-footer .footer-column a{font-size:15px;color:var(--on-band-2);text-decoration:none;display:inline-flex;align-items:center;min-height:36px}
.footer-column a:hover,.footer-languages a:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:4px}
.footer-languages ul{display:flex;flex-wrap:wrap;gap:6px}
.footer-languages a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid rgba(238,243,238,.3);border-radius:999px;font-size:14px;color:var(--on-band-2);text-decoration:none}
.footer-languages a[aria-current=page]{background:var(--on-band);border-color:var(--on-band);color:var(--band)}
.footer-languages a[aria-current=page]:hover{color:var(--band);text-decoration:none}
.footer-bottom{border-top:1px solid var(--band-line);margin-top:clamp(32px,5vw,52px);padding-top:20px;font-size:14px;color:var(--on-band-2);flex-wrap:wrap;gap:10px 24px}
.footer-bottom a{color:var(--on-band-2);font-size:14px;display:inline-flex;align-items:center;min-height:36px}
.footer-bottom a:hover{color:#FFFFFF}
.site-footer a:focus-visible{outline:3px solid var(--band-accent);outline-offset:3px}

/* ---------- Mobile action bar ---------- */
.mobile-bar{background:var(--surface);border-top:1px solid var(--line)}
.mobile-bar .btn{font-size:15px;min-height:48px}

/* ---------- Interior page details ---------- */
.blog-page main :is(p,li,dd,td) a:not(.btn):not([class*=btn]){color:var(--green)}
.blog-page main :is(p,li,dd,td) a:not(.btn):not([class*=btn]):hover{color:var(--green-hover)}
.blog-cta a,html[data-theme=dark] .blog-cta a{background:var(--on-band);color:var(--band);font-size:15px}
.blog-cta a:hover{background:#FFFFFF;color:var(--band)}
.editorial-chip{font-size:12px;color:var(--heather);background:var(--heather-soft)}
.hv-seo-button,html[data-theme=dark] .hv-seo-button{background:var(--green);border-color:var(--green);color:var(--on-green)!important}
.hv-seo-button:hover,html[data-theme=dark] .hv-seo-button:hover{background:var(--green-hover);border-color:var(--green-hover)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:720px){
  .eyebrow,.hero-copy .eyebrow,.promise-intro .eyebrow,.connection-copy .eyebrow,.final-card .eyebrow{font-size:12px}
  .hero-copy .btn{font-size:15px;min-height:50px}
  .section-heading>p:last-child:not(.eyebrow),.display-copy>p:not(.eyebrow),.connection-copy>p:not(.eyebrow),.start-strip p,.setup-grid p,.faq-list details p{font-size:15px}
  .faq-list summary{font-size:15px}
  .display-copy .btn,.start-strip .btn,.final-card .btn{font-size:15px}
  .floating-message small{font-size:12px}.floating-message b{font-size:13px}
  .demo-tabs button{font-size:14px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .footer-languages{grid-column:1/-1}
  .footer-bottom{font-size:13px}
  .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
@media print{.final-section,.site-footer{background:none;color:#000}}

/* ---------- v17.1: solid header band on every page; nav never sits on top of the photo ---------- */
.site-header{position:sticky;top:0;inset:auto;z-index:40;background:var(--band);border-bottom:1px solid var(--band-line)}
.site-header .header-inner{min-height:72px}
.hero{min-height:0;padding:clamp(44px,6vw,96px) 0 clamp(48px,6vw,96px)}
.visual-caption{background:rgba(18,34,25,.72);border-radius:999px;padding:6px 12px;width:fit-content;left:auto;right:0;color:var(--on-band)}
.visual-caption>span{color:var(--on-band)}
.visual-caption small{display:none}
.languages-grid p,.editorial-card p{font-size:15px;line-height:1.6;color:var(--body)}
@media (max-width:940px){.hero{padding:32px 0 40px}}
@media (max-width:940px){
  .hero::before,:root[data-theme=dark] .hero::before{background:linear-gradient(180deg,rgba(27,47,37,.5) 0%,rgba(27,47,37,.86) 34%,rgba(27,47,37,.95) 52%,rgba(27,47,37,.97) 100%)}
  .hero .button-row{flex-direction:column;align-items:stretch;gap:10px}
  .hero .button-row .btn{width:100%}
}

/* ---------- v17.2: details found in the dark-mode and interior review ---------- */
.floating-message,:root[data-theme=dark] .floating-message{background:var(--surface);color:var(--ink)}
:root[data-theme=dark] .floating-message b{color:var(--ink)}
:root[data-theme=dark] .floating-message small{color:var(--muted)}
.editorial-hero .editorial-btn,html[data-theme=dark] .editorial-hero .editorial-btn{background:var(--on-band);color:var(--band)!important;font-size:15px}
.editorial-hero .editorial-btn:hover{background:#FFFFFF}
.editorial-dot{background:var(--band-accent)}

.blog-page .artikler-btn,html[data-theme=dark] .blog-page .artikler-btn{background:var(--green);color:var(--on-green)}
.blog-page .artikler-btn:hover{background:var(--green-hover);color:var(--on-green)}
.article-aside-card a,html[data-theme=dark] .article-aside-card a{background:var(--on-band);color:var(--band)!important;font-size:14px}
/* Demo calendar chips follow the theme instead of fixed light colours. */
.event-detail{background:var(--lilac);color:var(--lilac-ink)}
.event-detail.sage{background:var(--sage);color:var(--sage-ink)}
.event-detail.peach{background:var(--peach);color:var(--peach-ink)}
.event-detail small,.event-detail.sage small,.event-detail.peach small{color:inherit;opacity:.85}

/* ---------- v17.3: homepage structure from the approved prototype ---------- */
.section{padding-block:clamp(56px,8vw,104px)}
.section-heading{max-width:46rem;margin:0 0 clamp(28px,4vw,44px);text-align:left}
.section-heading.center{text-align:left;margin-inline:0}
.section-heading h2,.features-intro h2{font-size:clamp(30px,1.2rem + 2.4vw,46px);line-height:1.08;font-weight:400;margin:10px 0 0}
.section-heading>p:not(.eyebrow){margin-top:16px;max-width:40rem;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--body)}
.section-heading .eyebrow{margin:0}

/* Situations */
.v17-situations{padding-bottom:clamp(32px,4vw,48px)}
.v17-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.v17-cards .promise{display:grid;gap:12px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,2.5vw,28px);margin:0;min-width:0}
.v17-cards .promise+.promise{border-left:1px solid var(--line);padding-left:clamp(22px,2.5vw,28px)}
.v17-cards .promise .tag{justify-self:start;font-size:13px;font-weight:600;color:var(--heather);background:var(--heather-soft);padding:5px 11px;border-radius:999px}
.v17-cards .promise h3{font-size:20px;line-height:1.25;font-weight:500;margin:0;color:var(--ink)}
.v17-cards .promise p{font-size:16px;line-height:1.6;color:var(--body);margin:0}
.v17-cards .promise .text-link{gap:8px;align-self:end;font-size:15px}
.text-link .icon{width:16px;height:16px;flex:none}

/* Example week */
.demo-section{padding-top:clamp(24px,3vw,40px)}
.demo-section .section-heading{margin-bottom:24px}
.demo-tabs{margin:0 0 18px;justify-content:flex-start}
.demo-shell{border-radius:28px}
.v17-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:18px 0}
.v17-day{background:var(--bg);border-radius:12px;padding:12px 6px;display:grid;gap:8px;text-align:center}
.v17-day b{font-size:14px;color:var(--ink);font-weight:600}
.v17-home{border-radius:8px;padding:7px 2px;font-size:13px;font-weight:600}
.v17-home.is-a{background:var(--peach);color:var(--peach-ink)}
.v17-home.is-b{background:var(--sage);color:var(--sage-ink)}
#panel-week .event-list{max-width:560px}
.v17-demo-foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:20px}
.v17-demo-foot p{font-size:14px;color:var(--muted);margin:0}
.demo-hint{display:none}

/* Steps */
.setup-section{background:var(--surface);border-block:1px solid var(--line)}
.setup-grid{margin-top:0;gap:clamp(20px,3vw,40px);counter-reset:none}
.setup-grid li{border-top:2px solid var(--green);padding-top:18px}
.step-number{margin-bottom:12px}
.step-number:after{display:none}
.step-number span{width:auto;height:auto;background:none;color:var(--green);border-radius:0;font-size:13px;letter-spacing:.08em;font-weight:700}
.setup-grid h3{font-size:20px;font-weight:500;color:var(--ink);margin-bottom:8px}
.setup-grid p{font-size:16px}
.v17-after{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:clamp(28px,3vw,40px)}
.v17-after p,.v17-closing-act p{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:15px;color:var(--body)}
.v17-after p .icon{width:18px;height:18px;color:var(--green)}

/* Features in three groups */
.features-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:clamp(28px,4vw,44px);max-width:46rem}
.features-intro .section-heading{margin:0}
.features-intro>p{font-size:clamp(16px,1.2vw,18px)}
.v17-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.v17-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,2.5vw,28px);display:grid;gap:18px;align-content:start}
.v17-group-title{font:600 13px/1.3 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--heather);margin:0}
.v17-group .feature-card{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:4px;background:none;border:0;padding:0;border-radius:0}
.v17-group .feature-card>.rounded-icon{grid-row:span 2;width:40px;height:40px;margin:0}
.v17-group .feature-card>.rounded-icon .icon{width:18px;height:18px}
.v17-group .feature-card h3{font-size:17px;font-weight:600;line-height:1.35;margin:0}
.v17-group .feature-card p{font-size:15px;line-height:1.55;margin:0}
.v17-more-links{display:flex;flex-wrap:wrap;gap:4px 28px;margin:24px 0 0}

/* Family section sits in the flow with the same spacing as the rest */
.connection-section{padding-block:clamp(24px,3vw,40px)}

/* Pricing */
.hv-pricing{background:var(--sunken)}
.hv-plans{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.hv-plan-price--text{font-size:clamp(20px,1.8vw,24px);line-height:1.3}
.hv-plan--display{background:var(--bg)}
.hv-plan .text-link{justify-self:start;gap:8px}

/* Trust */
.v17-trust{background:var(--surface);border-block:1px solid var(--line)}
.v17-trust-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:18px}
.v17-trust-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.v17-trust-list li{background:var(--bg);border-radius:16px;padding:18px 20px;display:grid;gap:6px;justify-items:start}
.v17-trust-list b{color:var(--ink);font-size:17px}
.v17-trust-list span{font-size:15px;line-height:1.55;color:var(--body)}
.v17-trust-list .text-link{min-height:36px;gap:8px;font-size:15px}
.v17-company{background:var(--sunken);border-radius:var(--radius);padding:24px;display:grid;gap:12px;align-content:start}
.v17-company h3{font-size:20px;font-weight:500;color:var(--ink);margin:0}
.v17-company p{font-size:15px;line-height:1.55;color:var(--body);margin:0}
.v17-company dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:15px}
.v17-company dt{color:var(--muted)}
.v17-company dd{margin:0;color:var(--ink)}
.v17-company-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.v17-company-links a{color:var(--green);font-weight:600;min-height:36px;display:inline-flex;align-items:center}

/* Questions: two columns like the prototype */
.faq-section .container{display:block}
.faq-grid{display:block}
.faq-section .section-heading{position:static;max-width:46rem}
.faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.faq-list details,.faq-list details:first-child{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0 20px}
.faq-list summary{padding:18px 0;min-height:60px}
.faq-list details p{margin:0 0 20px}

/* Closing band */
.final-section{margin-top:0;padding:clamp(56px,7vw,88px) 0 0}
.final-card.v17-closing{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;text-align:left;padding:0 0 clamp(44px,6vw,72px)}
.v17-closing h2{font-size:clamp(30px,1.2rem + 2.4vw,46px);line-height:1.08;margin:0 0 14px;max-width:22ch;color:var(--on-band)}
.v17-closing p{margin:0;max-width:38rem;color:var(--on-band-2);font-size:17px}
.v17-closing-act{display:grid;gap:12px;justify-items:end}
.v17-closing-act .button-row{justify-content:flex-end;margin:0}
.v17-closing-act p{color:var(--on-band-2)}
.v17-closing-act p .icon{width:18px;height:18px;color:var(--band-accent)}

@media (max-width:900px){
  .v17-cards,.v17-groups,.hv-plans,.v17-trust-grid,.faq-list{grid-template-columns:minmax(0,1fr)}
  .final-card.v17-closing{grid-template-columns:minmax(0,1fr)}
  .v17-closing-act{justify-items:start}
  .v17-closing-act .button-row{justify-content:flex-start}
}
@media (max-width:560px){
  .v17-week{gap:4px}.v17-day{padding:8px 2px}.v17-home{font-size:11px;padding:6px 1px}.v17-day b{font-size:12px}
  .v17-after .btn,.v17-demo-foot .btn,.v17-closing-act .btn{width:100%}
  .v17-after,.v17-demo-foot,.v17-closing-act,.v17-closing-act .button-row{width:100%}
}
.setup-grid li{border-radius:0;background:none;box-shadow:none}
.features-intro .section-heading,.features-intro{max-width:46rem}
.features-intro .section-heading h2{max-width:none}
.demo-shell{max-width:none;width:100%;margin-inline:0}
.display-copy .check-list li{font-size:15px}
.display-copy .price-note{font-size:14px}
.display-copy h2{font-size:clamp(30px,1.2rem + 2.4vw,46px);line-height:1.08}

/* ---------- Interactive preview: Tun look (real screen modules) ---------- */
/* The example preview mirrors the actual Tun display skin: a sage wash behind
   white module cards, uppercase muted labels and a white pill tab bar with a
   green active tab, like the bottom navigation on the real screen. */
.demo-shell{background:var(--sage);border:0}
.demo-shell-bar{background:transparent;border-bottom:1px solid var(--line)}
.demo-tabs{background:var(--surface);box-shadow:0 2px 14px rgba(30,50,40,.08)}
.demo-panel .person-card,.demo-panel .day-column,.demo-panel .task-form,.demo-panel .meal-card{background:var(--surface);border:0}
.demo-panel .day-column h4{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.demo-panel .day-column{border-radius:18px}
.demo-panel .person-card{border-radius:16px}
:root[data-theme=dark] .demo-shell{background:#1E2A23}
:root[data-theme=dark] .demo-shell-bar{border-bottom-color:var(--line)}

.hv-wrap { position: relative; width: 100%; height: 100dvh; overflow: hidden; background: rgb(234, 239, 231); }

.hv { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%,-50%) scale(var(--hv-scale,1)); visibility: var(--hv-vis,hidden); transform-origin: center center; box-sizing: border-box; background: rgb(234, 239, 231); color: rgb(69, 82, 75); font-family: Inter, system-ui, sans-serif; line-height: 1.35; padding: 44px 56px 36px; display: grid; grid-template-rows: auto minmax(0px, 1fr) auto; gap: 26px; overflow: hidden; -webkit-font-smoothing: antialiased; }

.hv { --card: #FAFBF7; --ink: #1D2A24; --soft: #45524B; --faint: #56625C; --deep: #22392D; --deep-ink: #EEF3EE; --deep-soft: #C9D8CD; --accent: #2F5443; --purple: #6A4A85; }

.hv[data-mode="evening"] .hv-dock, .hv[data-mode="night"] .hv-dock { background: rgb(29, 38, 32); }

.hv * { box-sizing: border-box; }

.hv button { font: inherit; color: inherit; }

.hv-lbl { display: flex; align-items: center; gap: 10px; margin: 0px; font: 600 17px / 1.2 Inter, system-ui, sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }

.hv-lbl svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; }

.hv-card { background: var(--card); border-radius: 24px; padding: 26px 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0px; min-height: 0px; overflow: hidden; }

.hv-scroll { flex: 1 1 0%; min-height: 0px; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; }

.hv-scroll::-webkit-scrollbar { display: none; }

.hv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }

.hv-greet { margin: 0px; font: 400 56px / 1 "Inter Tight", Inter, sans-serif; letter-spacing: -0.02em; color: var(--ink); }

.hv-greet.big { font-size: 60px; }

.hv-sub { margin: 8px 0px 0px; font-size: 22px; color: var(--soft); }

.hv-wx { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; }

.hv-wx svg { width: 44px; height: 44px; color: var(--accent); }

.hv-wx-temp { font: 500 30px / 1 "Inter Tight", Inter, sans-serif; color: var(--ink); }

.hv-wx-note { font-size: 18px; color: var(--soft); }

.hv-clock { margin: 0px; font-style: normal; font-variant: tabular-nums; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 300; font-stretch: normal; font-size: 56px; line-height: 1; font-family: "Inter Tight", Inter, sans-serif; letter-spacing: -0.02em; color: var(--ink); }

.hv-clock.big { font-size: 112px; line-height: 0.9; letter-spacing: -0.03em; }

.hv-navbtn { width: 72px; height: 72px; border-radius: 50%; border: 1px solid rgb(203, 213, 203); background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--ink); flex: 0 0 auto; }

.hv-navbtn svg { width: 28px; height: 28px; }

.hv-legend { display: flex; align-items: center; gap: 22px; font-size: 18px; color: var(--ink); }

.hv-legend i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: -1px; }

.hv-main { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 24px; min-height: 0px; }

.hv-col7 { grid-column: span 7; display: grid; grid-template-rows: auto minmax(0px, 1fr) auto; gap: 24px; min-height: 0px; overflow: hidden; }

.hv-col5 { grid-column: span 5; display: grid; grid-template-rows: auto auto minmax(0px, 1fr); gap: 24px; min-height: 0px; overflow: hidden; }

.hv-dark { background: var(--deep); color: var(--deep-ink); border-radius: 28px; padding: 30px 34px; display: grid; grid-template-columns: minmax(0px, 1.25fr) minmax(0px, 1fr); gap: 32px; min-height: 0px; }

.hv-dark .hv-lbl { color: var(--deep-soft); }

.hv-next-col { display: flex; flex-direction: column; gap: 12px; min-width: 0px; justify-content: center; }

.hv-next-title { margin: 0px; font: 400 52px / 1.02 "Inter Tight", Inter, sans-serif; letter-spacing: -0.02em; }

.hv-next-sub { margin: 0px; font-size: 24px; color: var(--deep-soft); }

.hv-then { background: rgba(255, 255, 255, 0.07); border-radius: 20px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }

.hv-then-lbl { margin: 0px; font: 600 16px / 1.2 Inter, sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: var(--deep-soft); }

.hv-then-rows { display: grid; grid-template-columns: 70px minmax(0px, 1fr); gap: 8px 14px; font-size: 20px; font-variant-numeric: tabular-nums; }

.hv-transit { display: flex; flex-direction: column; gap: 12px; justify-content: center; background: rgba(255, 255, 255, 0.07); border-radius: 20px; padding: 20px 22px; }

.hv-transit-go { display: flex; align-items: center; gap: 12px; font: 500 34px / 1 "Inter Tight", Inter, sans-serif; }

.hv-transit-go svg { width: 30px; height: 30px; }

.hv-transit-line { margin: 0px; font-size: 19px; color: var(--deep-soft); }

.hv-transit-bar { position: relative; height: 6px; background: rgba(255, 255, 255, 0.18); border-radius: 3px; margin-top: 6px; }

.hv-transit-bar i { position: absolute; left: 0px; top: 0px; bottom: 0px; border-radius: 3px; background: rgb(169, 210, 184); }

.hv-transit.soon { background: rgba(214, 158, 46, 0.16); box-shadow: rgba(214, 158, 46, 0.45) 0px 0px 0px 1.5px inset; }

.hv-transit.soon .hv-transit-bar i { background: rgb(214, 158, 46); }

.hv-transit.urgent { background: rgba(197, 60, 60, 0.18); box-shadow: rgba(197, 60, 60, 0.55) 0px 0px 0px 1.5px inset; }

.hv-transit.urgent .hv-transit-bar i { background: rgb(224, 105, 95); }

.hv-transit.urgent .hv-transit-go { color: rgb(243, 179, 173); }

.hv-tl { position: relative; display: grid; grid-template-columns: 152px minmax(0px, 1fr); row-gap: 10px; align-items: center; font-variant-numeric: tabular-nums; flex: 1 1 0%; align-content: center; }

.hv-tl-hours { display: flex; justify-content: space-between; font-size: 15px; color: var(--faint); }

.hv-tl-name { display: flex; align-items: center; gap: 10px; min-width: 0px; font: 600 20px / 1 Inter, sans-serif; color: var(--ink); }

.hv-tl-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hv-tl-row { position: relative; height: 62px; background: rgb(234, 239, 231); border-radius: 14px; }

.hv[data-mode="evening"] .hv-tl-row, .hv[data-mode="night"] .hv-tl-row { background: rgb(20, 26, 22); }

.hv-tl-now { position: absolute; top: 26px; bottom: 0px; width: 3px; border-radius: 2px; background: var(--purple); z-index: 2; }

.hv-ev { position: absolute; top: 8px; bottom: 8px; border-radius: 12px; padding: 0px 12px; display: flex; align-items: center; font: 600 17px / 1.15 Inter, sans-serif; color: rgb(29, 42, 36); overflow: hidden; white-space: nowrap; }

.hv-ev span { font-weight: 400; color: rgb(69, 82, 75); margin-left: 8px; overflow: hidden; text-overflow: ellipsis; }

.hv-ev-icon { width: 20px; height: 20px; flex-shrink: 0; margin-right: 7px; }

.hv-ev.done { opacity: 0.45; }

.hv-family-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 12px; }

.hv-person { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; border: 0px; background: transparent; cursor: pointer; padding: 0px; }

.hv-av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 600 22px / 1 Inter, sans-serif; color: rgb(29, 42, 36); flex: 0 0 auto; overflow: hidden; }

.hv-av img { width: 100%; height: 100%; display: block; object-fit: cover; }

.hv-av.big { width: 96px; height: 96px; font-size: 42px; font-weight: 500; font-family: "Inter Tight", Inter, sans-serif; }

.hv-av.mini { width: 38px; height: 38px; font-size: 16px; }

.hv-av.tiny { width: 26px; height: 26px; font-size: 11px; }

.hv-person b { font-size: 19px; color: var(--ink); }

.hv-person i { font-style: normal; font-size: 16px; color: var(--soft); }

.hv-task-row { display: flex; align-items: center; gap: 14px; min-height: 52px; font-size: 21px; color: var(--ink); }

.hv-chk { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; box-sizing: border-box; display: grid; place-items: center; color: transparent; }

.hv-task-row.done .hv-chk { background: var(--accent); color: rgb(244, 247, 242); }

.hv-bar { position: relative; height: 8px; background: rgb(223, 231, 222); border-radius: 4px; overflow: hidden; }

.hv-bar i { position: absolute; left: 0px; top: 0px; bottom: 0px; border-radius: 4px; background: var(--accent); }

.hv-note { margin: 0px; font-size: 20px; color: var(--ink); line-height: 1.35; }

.hv-note-sub { margin: 0px; font-size: 17px; color: var(--soft); }

.hv-tavla-note { margin: 0px; border-radius: 14px; padding: 14px 16px; font-size: 18px; line-height: 1.3; color: rgb(29, 42, 36); background: rgb(251, 243, 230); }

.hv-tavla-note:nth-child(3n) { background: rgb(233, 227, 240); }

.hv-week { display: grid; grid-template-columns: repeat(7, minmax(0px, 1fr)); gap: 14px; min-height: 0px; }

.hv-day { background: var(--card); border-radius: 22px; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0px; min-height: 0px; overflow: hidden; }

.hv-day.today { box-shadow: inset 0 0 0 3px var(--accent); }

.hv-dh { display: flex; align-items: baseline; justify-content: space-between; }

.hv-dh b { font: 500 26px / 1 "Inter Tight", Inter, sans-serif; color: var(--ink); }

.hv-dh span { font-size: 17px; color: var(--faint); }

.hv-dh span.today { color: var(--accent); font-weight: 600; }

.hv-home { display: flex; align-items: center; gap: 8px; border-radius: 12px; padding: 10px 12px; font: 600 16px / 1.2 Inter, sans-serif; color: rgb(29, 42, 36); }

.hv-sr { border-radius: 12px; padding: 10px 12px; font: 600 16px / 1.25 Inter, sans-serif; background: rgb(236, 230, 242); color: var(--purple); }

.hv-it { display: grid; grid-template-columns: 26px minmax(0px, 1fr); gap: 10px; align-items: start; font-size: 18px; line-height: 1.3; color: var(--ink); }

.hv-it i { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; display: block; }

.hv-it small { display: block; font-size: 15px; color: var(--faint); }

.hv-cols { display: grid; gap: 20px; min-height: 0px; }

.hv-col-card { background: var(--card); border-radius: 24px; padding: 24px 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0px; min-height: 0px; overflow: hidden; }

.hv-col-head { display: flex; align-items: center; gap: 16px; }

.hv-col-head b { font: 600 24px / 1 Inter, sans-serif; color: var(--ink); display: block; }

.hv-col-head span { font-size: 17px; color: var(--soft); font-variant-numeric: tabular-nums; }

.hv-task { width: 100%; min-height: 76px; border: 0px; border-radius: 18px; background: rgb(234, 239, 231); display: flex; align-items: center; gap: 16px; padding: 0px 18px; font: 500 21px / 1.25 Inter, sans-serif; color: var(--ink); text-align: left; cursor: pointer; }

.hv[data-mode="evening"] .hv-task, .hv[data-mode="night"] .hv-task { background: rgb(20, 26, 22); }

.hv-task .box { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; box-sizing: border-box; display: grid; place-items: center; border: 3px solid rgb(126, 140, 132); color: transparent; }

.hv-task.done .box { background: var(--accent); border-color: var(--accent); color: rgb(244, 247, 242); }

.hv-task.done .hv-task-label { color: var(--faint); text-decoration: line-through; }

.hv-tag { font: 600 14px / 1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }

.hv-dinner-grid { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 24px; min-height: 0px; }

.hv-price-cell { background: rgba(255, 255, 255, 0.07); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }

.hv-price-cell span { font-size: 17px; color: var(--deep-soft); }

.hv-price-cell b { font-style: normal; font-variant: tabular-nums; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 500; font-stretch: normal; font-size: 34px; line-height: 1; font-family: "Inter Tight", Inter, sans-serif; }

.hv-dayrow { width: 100%; min-height: 86px; border: 0px; border-radius: 18px; display: grid; grid-template-columns: 110px minmax(0px, 1fr) 170px 130px; align-items: center; gap: 16px; padding: 0px 24px; font-style: normal; font-variant: tabular-nums; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 500; font-stretch: normal; font-size: 22px; line-height: 1.2; font-family: Inter, sans-serif; color: var(--ink); text-align: left; cursor: pointer; background: transparent; }

.hv-dayrow.active { background: rgb(223, 231, 222); box-shadow: inset 0 0 0 3px var(--accent); }

.hv-dayrow.muted { opacity: 0.6; }

.hv-dayrow small { display: block; font-size: 16px; font-weight: 400; color: var(--faint); margin-top: 4px; }

.hv-dayrow-head { display: grid; grid-template-columns: 110px minmax(0px, 1fr) 170px 130px; gap: 16px; padding: 0px 24px 4px; font: 600 15px / 1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

.hv-num { text-align: right; }

.hv-budget-big { font-style: normal; font-variant: tabular-nums; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 500; font-stretch: normal; font-size: 40px; line-height: 1; font-family: "Inter Tight", Inter, sans-serif; color: var(--ink); }

.hv-lav { background: rgb(236, 230, 242); }

.hv-lav .hv-lbl { color: var(--purple); }

.hv-photos { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 24px; min-height: 0px; }

.hv-photo-col { grid-column: span 7; display: grid; grid-template-rows: minmax(0px, 1fr) auto; gap: 18px; min-height: 0px; }

.hv-figure { margin: 0px; border-radius: 28px; overflow: hidden; position: relative; display: grid; place-items: center; min-height: 0px; background: rgb(221, 229, 220); }

.hv-figure img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }

.hv-figure .hv-hero-video { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: contain; background: rgb(29, 42, 36); }

.hv-figure blockquote { margin: 0px; padding: 0px 80px; font: 400 52px / 1.2 "Inter Tight", Inter, sans-serif; letter-spacing: -0.01em; color: var(--ink); text-align: center; max-width: 900px; }

.hv-play { position: absolute; width: 112px; height: 112px; border-radius: 50%; border: 0px; background: rgba(34, 57, 45, 0.88); display: grid; place-items: center; cursor: pointer; color: rgb(244, 247, 242); }

.hv .hv-act { min-height: 76px; padding: 0px 28px; border-radius: 999px; border: 0px; background: var(--accent); color: rgb(244, 247, 242); font: 600 20px / 1 Inter, sans-serif; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }

.hv-act svg { width: 24px; height: 24px; }

.hv-act.line { background: var(--card); color: var(--ink); border: 1px solid rgb(203, 213, 203); }

.hv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); grid-template-rows: repeat(3, minmax(0px, 1fr)); gap: 12px; min-height: 0px; flex: 1 1 0%; }

.hv-tile { border: 0px; border-radius: 18px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 8px; text-align: left; cursor: pointer; min-height: 0px; min-width: 0px; color: rgb(29, 42, 36); font-family: Inter, sans-serif; overflow: hidden; position: relative; }

.hv-tile img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }

.hv-tile-in { position: relative; z-index: 1; background: rgba(250, 251, 247, 0.9); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; max-width: 100%; }

.hv-tile svg { width: 30px; height: 30px; color: rgb(29, 42, 36); opacity: 0.7; position: relative; z-index: 1; }

.hv-tile b { font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }

.hv-tile span { font-size: 15px; color: rgb(69, 82, 75); }

.hv-member-grid { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 24px; min-height: 0px; }

.hv-dayline { display: grid; grid-template-columns: 96px minmax(0px, 1fr); gap: 18px 16px; font-size: 26px; color: var(--ink); font-variant-numeric: tabular-nums; }

.hv-sleep { background: var(--deep); color: var(--deep-ink); border-radius: 26px; padding: 28px 30px; display: flex; flex-direction: column; gap: 18px; }

.hv-sleep .hv-lbl { color: var(--deep-soft); }

.hv-sleep p.big { margin: 0px; font: 400 40px / 1.1 "Inter Tight", Inter, sans-serif; }

.hv-sleep p.sub { margin: 0px; font-size: 22px; color: var(--deep-soft); }

.hv-mtask { width: 100%; min-height: 96px; border: 0px; border-radius: 22px; background: rgb(234, 239, 231); display: flex; align-items: center; gap: 22px; padding: 0px 26px; font: 500 28px / 1.2 Inter, sans-serif; color: var(--ink); text-align: left; cursor: pointer; }

.hv[data-mode="evening"] .hv-mtask, .hv[data-mode="night"] .hv-mtask { background: rgb(20, 26, 22); }

.hv-mtask .box { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; box-sizing: border-box; display: grid; place-items: center; border: 3px solid rgb(126, 140, 132); color: transparent; }

.hv-mtask.done .box { background: var(--accent); border-color: var(--accent); color: rgb(244, 247, 242); }

.hv-mtask.done .hv-task-label { color: var(--faint); text-decoration: line-through; }

.hv-callbtn { min-height: 84px; border-radius: 999px; border: 0px; background: var(--accent); color: rgb(244, 247, 242); font: 600 22px / 1 Inter, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0px 30px; cursor: pointer; }

.hv-callbtn svg { width: 26px; height: 26px; }

.hv-callbtn.soft { background: rgb(223, 231, 222); color: rgb(29, 42, 36); }

.hv-callbtn:disabled { opacity: 0.4; }

.hv-back { min-height: 84px; padding: 0px 30px; border-radius: 999px; background: var(--card); color: var(--ink); font: 600 22px / 1 Inter, sans-serif; display: inline-flex; align-items: center; gap: 12px; border: 1px solid rgb(203, 213, 203); cursor: pointer; }

.hv-back svg { width: 26px; height: 26px; }

.hv-bar12 { height: 12px; border-radius: 6px; }

.hv-dock { display: flex; justify-content: space-between; align-items: center; background: var(--card); border-radius: 999px; padding: 10px; }

.hv-dock-group { display: flex; gap: 6px; }

.hv-dockbtn { min-height: 76px; min-width: 150px; padding: 0px 26px; border-radius: 999px; border: 0px; background: transparent; color: var(--soft); font: 600 20px / 1 Inter, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; }

.hv-dockbtn svg { width: 26px; height: 26px; }

.hv-dockbtn.active { background: var(--accent); color: rgb(244, 247, 242); }

.hv-dockbtn.hv-ringbtn { background: var(--accent); color: rgb(244, 247, 242); }

.hv-ringbackdrop { position: absolute; inset: 0px; background: rgba(20, 26, 22, 0.35); z-index: 55; }

.hv-ringsheet { position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%); width: min(760px, 84%); background: var(--card); border-radius: 36px 36px 0px 0px; padding: 30px 34px 34px; display: flex; flex-direction: column; gap: 10px; box-shadow: rgba(0, 0, 0, 0.22) 0px -20px 60px; z-index: 56; }

.hv-ringsheet .hv-lbl { margin-bottom: 8px; }

.hv-ringrow { display: flex; align-items: center; gap: 20px; width: 100%; border: 0px; background: transparent; text-align: left; padding: 14px 18px; border-radius: 22px; font: 600 30px / 1 Inter, sans-serif; color: var(--ink); cursor: pointer; }

.hv-ringrow:hover { background: rgba(47, 84, 67, 0.08); }

.hv-ringrow svg { width: 30px; height: 30px; color: var(--accent); margin-left: auto; flex: 0 0 auto; }

.hv-ringrow .hv-av { width: 64px; height: 64px; font-size: 26px; }

.hv-rewardsheet { position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%); width: min(860px, 86%); max-height: 74%; background: var(--card); border-radius: 36px 36px 0px 0px; padding: 30px 34px 34px; display: flex; flex-direction: column; gap: 16px; box-shadow: rgba(0, 0, 0, 0.22) 0px -20px 60px; z-index: 56; overflow: hidden; }

.hv-rewardsheet-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.hv-rewardsheet-balance { font-style: normal; font-variant: tabular-nums; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 600; font-stretch: normal; font-size: 26px; line-height: 1; font-family: Inter, sans-serif; color: var(--accent); }

.hv-rewardsheet-rows { overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 12px; min-height: 0px; }

.hv-rewardsheet-rows::-webkit-scrollbar { display: none; }

.hv-rewardrow { display: flex; align-items: center; gap: 20px; width: 100%; border: 0px; background: rgba(47, 84, 67, 0.06); text-align: left; padding: 16px 20px; border-radius: 22px; font: 600 26px / 1.2 Inter, sans-serif; color: var(--ink); cursor: pointer; }

.hv-rewardrow:disabled { opacity: 0.55; cursor: default; }

.hv-rewardrow img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; flex: 0 0 auto; }

.hv-rewardrow .hv-av { width: 64px; height: 64px; font-size: 26px; flex: 0 0 auto; display: grid; place-items: center; color: var(--accent); }

.hv-reward-feedback { margin: 0px; font: 600 22px / 1.3 Inter, sans-serif; color: var(--accent); }

.hv-quiet { position: fixed; inset: 0px; z-index: 30; width: 100%; border: 0px; background: rgb(14, 20, 17); color: rgb(194, 205, 198); padding: 56px; display: grid; grid-template-columns: minmax(0px, 1.55fr) minmax(0px, 1fr); gap: 56px; overflow: hidden; text-align: left; cursor: pointer; font-family: Inter, system-ui, sans-serif; }

.hv-quiet-photo { position: relative; margin: 0px; border-radius: 28px; overflow: hidden; background: rgb(24, 34, 29); display: grid; place-items: center; }

.hv-quiet-photo img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }

.hv-quiet-photo svg { width: 64px; height: 64px; color: rgb(142, 156, 148); }

.hv-quiet-cap { position: absolute; left: 28px; bottom: 28px; display: flex; align-items: center; gap: 14px; background: rgba(14, 20, 17, 0.72); border-radius: 999px; padding: 12px 22px 12px 12px; font-size: 19px; color: rgb(232, 239, 233); }

.hv-quiet-cap .hv-av { width: 40px; height: 40px; font-size: 16px; }

.hv-quiet-side { display: flex; flex-direction: column; justify-content: space-between; min-width: 0px; }

.hv-quiet-clock { margin: 0px; font-style: normal; font-variant: tabular-nums; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 300; font-stretch: normal; font-size: 184px; line-height: 0.88; font-family: "Inter Tight", Inter, sans-serif; letter-spacing: -0.04em; color: rgb(232, 239, 233); }

.hv-quiet-date { margin: 10px 0px 0px; font-size: 26px; color: rgb(163, 176, 168); }

.hv-quiet-rows { display: flex; flex-direction: column; gap: 22px; border-top: 1px solid rgb(37, 48, 42); padding-top: 32px; }

.hv-quiet-lbl { margin: 0px; font: 600 16px / 1.2 Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(142, 156, 148); }

.hv-qrow { display: grid; grid-template-columns: 28px minmax(0px, 1fr); gap: 16px; align-items: start; font-size: 22px; line-height: 1.35; color: rgb(194, 205, 198); }

.hv-qrow svg { width: 24px; height: 24px; margin-top: 3px; color: rgb(169, 210, 184); }

.hv-qrow b { color: rgb(232, 239, 233); font-weight: 600; }

.hv-quiet-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

.hv-quiet-hint { margin: 0px; font-size: 18px; color: rgb(142, 156, 148); }

.hv-quiet-btn { min-height: 72px; padding: 0px 28px; border-radius: 999px; border: 1px solid rgb(46, 58, 51); color: rgb(232, 239, 233); font: 600 19px / 1 Inter, sans-serif; display: inline-flex; align-items: center; }/* ---------- Interactive preview: real Tun modules inside demo ---------- */
.demo-panel{overflow:hidden}
.demo-panel .hv{position:static;left:auto;top:auto;width:1024px;height:auto;transform-origin:top left;visibility:visible;padding:0;display:block;background:transparent;overflow:visible;color:inherit;font-family:inherit}
.demo-panel .hv-main{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;min-height:0}
.demo-panel .hv-col7{grid-column:span 7}.demo-panel .hv-col5{grid-column:span 5}
.demo-panel .hv-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
.demo-panel .hv-dinner-grid{gap:16px}
.demo-panel .hv-col7,.demo-panel .hv-col5{display:flex;flex-direction:column;gap:16px;overflow:visible}
.demo-panel .hv-card{padding:20px 22px;gap:12px;box-shadow:0 2px 14px rgba(30,50,40,.08)}
.demo-panel .hv-dark{padding:20px 22px;border-radius:20px;grid-template-columns:1fr;gap:14px}
.demo-panel .hv-greet.big{font-size:30px}.demo-panel .hv-clock.big{font-size:30px}
.demo-panel .hv-sub{font-size:15px}
.demo-panel .hv-tl{grid-template-columns:88px minmax(0,1fr);row-gap:8px}
.demo-panel .hv-tl-row{height:44px}
.demo-panel .hv-tl-name{font-size:14px}
.demo-panel .hv-tl-hours{font-size:10px}
.demo-panel .hv-av{width:40px;height:40px;font-size:16px}
.demo-panel .hv-av.mini{width:28px;height:28px;font-size:12px}
.demo-panel .hv-person b{font-size:14px}.demo-panel .hv-person i{font-size:12px}
.demo-panel .hv-ev{font-size:12px;padding:0 8px}
.demo-panel .hv-task-row{min-height:40px;font-size:15px}
.demo-panel .hv-chk{width:26px;height:26px}
.demo-panel .hv-transit{padding:14px 16px}
.demo-panel .hv-next-title{font-size:20px}
.demo-panel .hv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px}
.demo-panel .hv-lbl svg{width:16px;height:16px}
.demo-panel .hv-lbl{font-size:11px;letter-spacing:.12em}
.demo-panel .hv{--card:#FAFBF7;--ink:#1D2A24;--soft:#45524B;--faint:#56625C;--deep:#22392D;--deep-ink:#EEF3EE;--deep-soft:#C9D8CD;--accent:#2F5443;--purple:#6A4A85}
:root[data-theme=dark] .demo-panel .hv{--card:#1a231d;--ink:#EEF3EE;--soft:#C9D8CD;--faint:#9fb0a5;--deep:#131c16;--deep-ink:#EEF3EE;--deep-soft:#9fb0a5}
.demo-panel .hv-fan{display:flex;justify-content:center;align-items:center;gap:32px;padding:56px 32px;min-height:440px;flex-wrap:nowrap}
.demo-panel .hv-fan .hv-day{flex:0 0 280px;box-shadow:0 12px 34px rgba(30,50,40,.12)}
.demo-panel .hv-fan .hv-task{flex:0 0 300px;min-height:96px;box-shadow:0 12px 34px rgba(30,50,40,.14)}

.demo-panel.hv-stack .hv-fan{flex-direction:column;align-items:stretch;gap:24px;padding:32px 8px;min-height:0}
.demo-panel.hv-stack .hv-fan .hv-day,.demo-panel.hv-stack .hv-fan .hv-task{flex:1 1 auto;max-width:520px;margin:0 auto;width:100%}
.demo-panel .hv-fan .hv-task{background:var(--card);box-shadow:0 12px 34px rgba(30,50,40,.12)}
.demo-panel .hv-fan .hv-task .box{width:28px;height:28px;border-width:2px}
.demo-panel .hv-fan .hv-task .box svg{width:16px;height:16px}
.demo-panel .hv-fan .hv-it{grid-template-columns:minmax(0,1fr) 26px;align-items:center}
.demo-panel .hv-fan-card{transition:transform .6s cubic-bezier(.22,.9,.28,1)}
.demo-panel .hv-fan-card.is-straight{transform:rotate(0deg)!important}

/* Demo polish: week items, meals table, mobile tabs, foot note */
.demo-panel .hv-fan .hv-it .hv-av{width:20px;height:20px;font-size:9px}
.demo-panel .hv-dayrow{grid-template-columns:minmax(52px,.5fr) minmax(0,1.4fr) minmax(0,.7fr) minmax(56px,.45fr);font-size:18px;min-height:64px;padding:0 16px;gap:10px}
.demo-panel .hv-dayrow-head{grid-template-columns:minmax(52px,.5fr) minmax(0,1.4fr) minmax(0,.7fr) minmax(56px,.45fr);font-size:12px;padding:0 16px 4px;gap:10px}
.demo-panel .hv-dayrow small{font-size:13px}
.v17-demo-foot p{flex:1 0 100%;text-align:center}
@media (max-width:640px){
  .demo-section .demo-tabs{display:flex;flex-wrap:nowrap;gap:6px;padding:6px;border-radius:999px;width:100%;max-width:100%;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
  .demo-section .demo-tabs::-webkit-scrollbar{display:none}
  .demo-section .demo-tabs button{flex:0 0 auto;min-height:44px;border-radius:999px;font-size:14px;padding:10px 16px}
}