/* HOUZY 5 site — light Liquid Glass over the floating-graphite video, the plugin's GRAPHITE sphere in the centre.
   Glass = the plugin's CSS glass (Glass.h, kGlassStyle 1): backdrop saturate 1.6 / brightness 1.12 / contrast 1.05,
   1px white rim, bright top-left edge, inner glow. On a light sky the white film is raised and a soft grey
   shadow is added, otherwise the glass disappears. Accent = the plugin's turquoise, dark variant for text. */
:root{
  --sky:#e7e7ef; --sky-2:#d9d9e4;
  --ink:#16191f; --text:#2a2f38; --sub:#59606c; --dim:#8a909b;
  --accent:#8dcad4; --accent-ink:#1f6f7d; --accent-deep:#14525d;
  --glass:rgba(255,255,255,.42); --glass-strong:rgba(255,255,255,.62);
  --glass-filter:blur(18px) saturate(1.6) brightness(1.12) contrast(1.05);
  --rim:inset 0 0 0 1px rgba(255,255,255,.55),inset 1.5px 1.5px 0 rgba(255,255,255,.85),inset 0 0 12px rgba(255,255,255,.35);
  --shadow:0 1px 2px rgba(30,34,50,.08),0 12px 32px -12px rgba(30,34,50,.28),0 40px 80px -40px rgba(30,34,50,.35);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(16px,4vw,48px); --max:1160px; --radius:28px;
  --font:'Sora','Onest','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* Sora is served from this site (fonts/, variable 100..800): no Google request, so no consent banner is needed */
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/Sora-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/Sora-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Cyrillic: Onest (28.10.2026, geometric, built for Russian; variable weight). Manrope stays as the fallback.
   Sora has no Cyrillic: Russian text used to fall to Manrope (geometric, close in shape and weight), downloaded only when it is needed */
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/Onest-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/Manrope-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
*,*::before,*::after{box-sizing:border-box}
/* the page colour lives on <html>: a background on <body> would paint over the fixed video (z-index −2) */
html{scroll-behavior:smooth;background:radial-gradient(120% 80% at 50% 0%,#f1f1f7,var(--sky) 60%,var(--sky-2)) fixed var(--sky)}
body{margin:0;font-family:var(--font);color:var(--text);line-height:1.6;overflow-x:hidden;background:transparent;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
a{color:inherit;text-decoration:none}
p a,li a,td a{color:var(--accent-ink);text-decoration:underline;text-decoration-color:rgba(31,111,125,.35);text-underline-offset:3px}
p a:hover,li a:hover,td a:hover{text-decoration-color:var(--accent-ink)}
ul{padding:0;margin:0}
img{max-width:100%;height:auto;display:block}
::selection{background:rgba(141,202,212,.45);color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:90;background:#fff;padding:8px 12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- background video (index only) ---------- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--sky)}
.bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2.4px) saturate(.9);transform:scale(1.03)}
.bg .art-b{opacity:0}
.bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(231,231,239,.25),rgba(231,231,239,.1) 40%,rgba(231,231,239,.35))}
/* veil that thickens under the long-text sections (site.js sets --veil 0..1 from scroll) */
.veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgba(236,236,243,.88);opacity:var(--veil,0)}

/* ---------- glass ---------- */
.glass,.card{position:relative;isolation:isolate;border-radius:var(--radius);background:var(--glass);
  -webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:var(--rim),var(--shadow)}
.card{padding:26px}
.card p{margin:0;color:var(--sub);font-size:16px}

/* ---------- buttons: glass, the main one tinted turquoise ---------- */
.btn,.pill,.cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;
  border:0;border-radius:999px;cursor:pointer;white-space:nowrap;font:inherit;font-variation-settings:'wght' 540;color:var(--ink);
  padding:11px 22px;font-size:16px;background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);
  box-shadow:var(--rim),0 1px 2px rgba(30,34,50,.1),0 8px 20px -8px rgba(30,34,50,.3);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .25s}
/* the main button: turquoise LIQUID GLASS - tinted film over the blurred page, a sheen across the top,
   a bright rim lit from the top-left, an inner glow and light bounced up from the bottom edge.
   Kept dense enough (.74/.86) for white text to read; the glass comes from the light, not from clearing it. */
.cta{padding:14px 28px;font-size:16px;color:#fff;text-shadow:0 1px 2px rgba(0,40,50,.45);isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,rgba(40,128,143,.74),rgba(20,84,96,.86));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),inset 1.5px 1.5px 0 rgba(255,255,255,.75),inset 0 0 14px rgba(170,235,245,.28),
    inset 0 -10px 18px -6px rgba(141,222,235,.35),0 1px 2px rgba(20,82,93,.25),0 12px 28px -10px rgba(20,82,93,.6)}
.cta::before{content:'';position:absolute;left:6%;right:6%;top:1px;height:48%;z-index:-1;border-radius:999px 999px 50% 50% / 999px 999px 70% 70%;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12) 55%,rgba(255,255,255,0));pointer-events:none}
.cta:hover{background:linear-gradient(180deg,rgba(48,140,156,.78),rgba(22,92,105,.88))}
.btn:hover,.pill:hover{background:rgba(255,255,255,.78)}
.cta .arrow,.btn .arrow{width:16px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .3s var(--ease-out)}
.cta:hover .arrow,.btn:hover .arrow{transform:translateX(3px)}
.flash{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),rgba(255,255,255,.7),transparent 60%);animation:flash .5s ease-out forwards}
@keyframes flash{from{opacity:1}to{opacity:0}}

/* ---------- header ---------- */
.bar{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:50;width:min(var(--max),calc(100% - 24px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 20px;border-radius:999px;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:var(--rim),var(--shadow)}
.brand{position:relative;display:flex;align-items:center;gap:9px;color:var(--ink)}
.brand .wordmark{position:absolute;pointer-events:none}   /* the vector wordmark over HOUZY (site.js), only while hovered */
.brand svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.brand b{font-size:18px;letter-spacing:.2em;font-weight:normal;font-variation-settings:'wght' 650}
.brand small{font-size:12px;letter-spacing:.18em;color:var(--sub);margin-left:2px}
.navtoggle{position:absolute;top:0;right:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.scrim{display:none;position:fixed;inset:0;z-index:-1}
.burger{display:none}
.navpanel{--nav-gap:22px;display:flex;align-items:center;gap:var(--nav-gap)}
.menu{position:relative;z-index:1;display:flex;gap:var(--nav-gap)}
.menu a,.brand small,.lang-btn{white-space:nowrap}   /* a header item never breaks into two lines (ES / PT words are long) */
@media (min-width:1000px) and (max-width:1099px){.navpanel{--nav-gap:14px}.bar{gap:16px}}   /* 1000-1100 px: ES / PT words fit in one row */
.brand{z-index:1}
/* the selection: a drop of liquid glass that flows between ACRONA AUDIO and the sections (site.js); not on phones (burger menu) */
.bar-drop{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;pointer-events:none;z-index:0;opacity:0;transition:opacity .3s;
  background:linear-gradient(180deg,rgba(214,244,249,.95),rgba(150,214,226,.42));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),inset 1.5px 1.5px 0 rgba(255,255,255,.95),inset 0 -6px 10px -6px rgba(141,222,235,.55),0 0 0 1.5px rgba(31,111,125,.5),0 8px 18px -8px rgba(20,82,93,.5)}
.bar-drop.on{opacity:1}
/* thin dividers between the sections and before the language button (desktop row only; the phone panel is a column) */
@media (min-width:1000px){.menu a{position:relative}
  .menu a+a::before,.navpanel .lang::before{content:'';position:absolute;top:50%;left:calc(var(--nav-gap) / -2 - .5px);width:1px;height:16px;
    transform:translateY(-50%);pointer-events:none;background:linear-gradient(180deg,rgba(22,25,31,0),rgba(22,25,31,.22) 30%,rgba(22,25,31,.22) 70%,rgba(22,25,31,0))}}
.menu a,.login{font-size:14px;color:var(--text);font-variation-settings:'wght' 540;transition:color .2s}
.menu a:hover,.login:hover{color:var(--accent-ink)}
.login{padding:8px 16px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);
  box-shadow:var(--rim),0 1px 2px rgba(30,34,50,.08),0 6px 16px -8px rgba(30,34,50,.25)}
.navpanel .pill,.navpanel .cta{padding:9px 18px;font-size:14px;min-height:40px}
/* the header folds into the burger below 1000 px (900-1000 was a squeezed row); the rest of the page keeps its 900 px step */
@media (max-width:999px){
  .bar{padding:8px 8px 8px 16px}
  .bar-drop{display:none}
  .brand small{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;cursor:pointer;background:var(--glass-strong);box-shadow:var(--rim)}
  .burger svg{width:20px;height:auto;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
  .burger svg path{transform-box:fill-box;transform-origin:center;transition:transform .24s ease,opacity .18s ease}
  .navtoggle:focus-visible ~ .burger{outline:2px solid var(--accent-ink);outline-offset:3px}
  .navtoggle:checked ~ .burger .b1{transform:translateY(6px) rotate(45deg)}
  .navtoggle:checked ~ .burger .b2{opacity:0}
  .navtoggle:checked ~ .burger .b3{transform:translateY(-6px) rotate(-45deg)}
  .navtoggle:checked ~ .scrim{display:block}
  .navpanel{position:absolute;top:calc(100% + 10px);right:0;flex-direction:column;align-items:stretch;gap:2px;width:min(300px,86vw);padding:12px;border-radius:24px;
    background:rgba(255,255,255,.78);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:var(--rim),var(--shadow);
    max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain;   /* tall panel (menu + 7 languages) scrolls on short phones */
    opacity:0;transform:translateY(-8px) scale(.98);transform-origin:100% 0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease-out)}
  .navtoggle:checked ~ .navpanel{opacity:1;transform:none;pointer-events:auto}
  .menu{flex-direction:column;gap:0}
  .menu a,.login{display:flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:14px;font-size:16px}
  .menu a:hover,.login:hover{background:rgba(255,255,255,.6)}
  .menu{gap:10px}   /* each link = the same liquid-glass chip as .login, a hairline between them */
  .menu a{position:relative;background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);
    box-shadow:var(--rim),0 1px 2px rgba(30,34,50,.08),0 6px 16px -8px rgba(30,34,50,.25)}
  .menu a + a::before{content:"";position:absolute;left:22%;right:22%;top:-6px;height:1px;background:linear-gradient(90deg,transparent,rgba(31,111,125,.4),transparent);pointer-events:none}
  .navpanel .pill{margin-top:6px}
}

/* ---------- the sphere stage: reading panel on top, tabs left and right, the sphere between them ----------
   ui-ux-pro-max: hover opens, but click / tap / keys too (hover-vs-tap); fixed panel height (content-jumping);
   two columns of ~60 characters (line-length); spring rotation, cancellable swaps (spring-physics, state-transition). */
.stage{position:relative;height:calc(100vh + 5 * 40vh)}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) var(--orb-box) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
  column-gap:clamp(16px,2.4vw,36px);row-gap:clamp(12px,2vh,22px);
  padding:88px max(var(--pad),calc((100vw - 1280px) / 2)) 22px;--orb:min(30vh,22vw);--orb-box:calc(var(--orb) * 1.45)}

.reader{grid-column:1 / -1;width:min(1060px,100%);justify-self:center;padding:18px clamp(20px,2.6vw,34px) 20px;border-radius:var(--radius);
  background:rgba(255,255,255,.5)}
.reader-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid rgba(22,25,31,.08)}
.reader-top .num{font-size:12px;letter-spacing:.26em;color:var(--accent-ink);font-variation-settings:'wght' 650;text-transform:uppercase}
.reader-top .rt{margin:0;font-weight:normal;font-variation-settings:'wght' 540;font-size:16px;color:var(--ink)}
/* fixed height: switching chapters never moves the sphere or the tabs */
.panels{position:relative;height:clamp(200px,calc(100vh - 88px - 22px - 2 * 2vh - var(--orb) * 1.5 - 70px),340px)}
/* the bottom edge fades: long text shows it scrolls; the padding lets the last line clear the fade */
.panel{position:absolute;inset:0;overflow:auto;opacity:0;visibility:hidden;padding:0 6px 26px 0;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent);mask-image:linear-gradient(#000 calc(100% - 26px),transparent)}
.panel.is-active{opacity:1;visibility:visible}
.panel.is-leaving{visibility:visible}
.panel h2{font-size:clamp(20px,1.9vw,26px);line-height:1.18;margin:0 0 12px;font-variation-settings:'wght' 540;text-wrap:balance}
.cols{columns:2 34ch;column-gap:36px}
.cols>*{break-inside:avoid}
/* the closing line of "The problem": the answer, across both columns */
.solves{column-span:all;margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(31,111,125,.2);color:var(--ink)}
.solves b{color:var(--accent-ink);font-weight:normal;font-variation-settings:"wght" 650}
.panel p{margin:0 0 10px;font-size:16px;line-height:1.6;color:var(--text)}
.panel p.small{font-size:14px;color:var(--sub)}
.panel ul{list-style:none;margin:0;padding:0}
.panel li{position:relative;padding-left:15px;margin:0 0 8px;font-size:14px;color:var(--text);break-inside:avoid}
.panel li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent-ink)}
.panel li b{color:var(--ink);font-variation-settings:'wght' 650;font-weight:normal}

.tabs{grid-row:2;display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:0}
.tabs.left{grid-column:1;align-items:flex-end}
.tabs.right{grid-column:3;align-items:flex-start}
.tab{display:flex;align-items:center;gap:14px;width:min(330px,100%);min-height:60px;padding:12px 18px;border:0;border-radius:20px;font:inherit;color:var(--ink);cursor:pointer;text-align:left;
  opacity:.72;transform:scale(.97);transition:opacity .35s,transform .45s var(--ease-out),box-shadow .35s,background .35s}
.tabs.left .tab{flex-direction:row-reverse;text-align:right}
.tab:hover,.tab:focus-visible{opacity:1}
.tab[aria-current="true"]{opacity:1;transform:none;background:rgba(255,255,255,.66);box-shadow:var(--rim),0 0 0 1.5px rgba(31,111,125,.55),0 16px 40px -14px rgba(20,82,93,.45)}
.tab .n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:12px;letter-spacing:.06em;color:var(--accent-ink);font-variation-settings:'wght' 650;
  background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.tab[aria-current="true"] .n{background:var(--accent-ink);color:#fff}
.tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tt b{font-weight:normal;font-variation-settings:'wght' 540;font-size:16px}
.tt small{font-size:12px;color:var(--sub)}
.tt em{font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:color-mix(in srgb,var(--accent-ink) 82%,#000);padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:2px}
.tabs.left .tt em{margin:0 6px 0 0}

.orb-wrap{grid-column:2;grid-row:2;align-self:center;justify-self:center;position:relative;width:var(--orb);height:var(--orb);touch-action:none;cursor:grab}
.orb-wrap.dragging{cursor:grabbing}
/* the plugin's floating shadow: offset +0.18R/+0.30R, solid to 0.90R, gone at 1.40R — cool grey on the sky */
.orb-wrap::after{content:'';position:absolute;z-index:-1;left:9%;top:15%;width:100%;height:100%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(40,44,60,.42) 64%,rgba(40,44,60,0) 100%);filter:blur(14px)}
.orb-wrap::before{content:'';position:absolute;inset:-34%;z-index:-2;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(232,232,240,.8) 50%,rgba(232,232,240,0))}
.orb{position:absolute;left:50%;top:50%;width:calc(var(--orb) * 1.14);height:calc(var(--orb) * 1.14);transform:translate(-50%,-50%)}
.orb canvas{width:100%;height:100%;display:block}
.orb-ring{position:absolute;inset:-16%;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 0 0 1px rgba(30,34,50,.06);--a:300deg}
.marker{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 30%,var(--accent) 60%);box-shadow:0 0 0 3px rgba(141,202,212,.35),0 0 18px 4px rgba(141,202,212,.7);
  transform:rotate(var(--a)) translateY(calc(var(--orb) * -0.66))}

@media (max-width:900px){
  .stage{height:auto}
  .pin{position:relative;height:auto;overflow:visible;display:flex;flex-direction:column;align-items:center;padding:92px var(--pad) 20px;--orb:min(32vw,128px)}
  /* phones: the reading card opens at the TOP, the smaller sphere stands centred under it and holds its edge
     (the thin arm, site.js drawPhoneArm), the chapters are below; a computer keeps its own layout above */
  .reader{order:1;width:100%;margin:0}
  .orb-wrap{order:2;margin:38px 0 30px}
  /* 3 + 3 chapters = two even rows of three: number on top, title under it; no shrink, so the edges line up */
  .tabs,.tabs.left,.tabs.right{order:3;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
  .tabs.right{order:4;margin-top:8px}
  .tab,.tabs.left .tab{flex-direction:column;justify-content:flex-start;gap:6px;text-align:center;width:auto;min-height:0;padding:10px 6px 12px;transform:none}
  .tt b{font-size:14px;line-height:1.25}
  .tt em,.tabs.left .tt em{display:table;margin:4px auto 0}
  .tt small{display:none}
  /* a fixed height, as on a computer: switching chapters never moves the sphere; long text scrolls inside the card */
  .panels{height:clamp(230px,42svh,360px)}
}

/* ---------- sections under the stage ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section.block{position:relative;padding:clamp(44px,6vw,84px) 0}
.head{max-width:680px;margin-bottom:clamp(28px,4vw,44px)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 14px;font-variation-settings:'wght' 650}
.kicker::before{content:'';width:22px;height:1px;background:currentColor;opacity:.6}
h2{font-weight:normal;font-variation-settings:'wght' 540;font-size:clamp(28px,3.6vw,44px);line-height:1.12;letter-spacing:-.01em;color:var(--ink);margin:0 0 16px;text-wrap:balance}
h3{font-weight:normal;font-variation-settings:'wght' 650;font-size:18px;color:var(--ink);margin:0 0 8px}
.lead{color:var(--sub);font-size:clamp(16px,1.4vw,18px);max-width:60ch;margin:0}
.code{font-family:ui-monospace,Consolas,monospace;font-size:.88em;color:var(--ink);background:rgba(255,255,255,.55);padding:1px 6px;border-radius:6px;word-break:break-all}
.note{font-size:14px;color:var(--sub);margin:18px 0 0}
.about{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(20px,3vw,32px);align-items:stretch}
.about .glass{padding:clamp(24px,3.4vw,40px)}
@media (max-width:860px){.about{grid-template-columns:1fr}}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.dl-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.dl{display:flex;flex-direction:column;gap:10px}
.dl .btn{align-self:flex-start;margin-top:auto}
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,64px);align-items:start}
.faq .head{position:sticky;top:110px;margin:0}
@media (max-width:860px){.faq{grid-template-columns:1fr}.faq .head{position:static}}
.faq-list{padding:6px 26px}
details{border-bottom:1px solid rgba(22,25,31,.08)}
details:last-child{border-bottom:0}
summary{cursor:pointer;font-size:16px;font-variation-settings:'wght' 540;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:'';flex:none;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(var(--accent-ink),var(--accent-ink)) center/10px 1.6px no-repeat,linear-gradient(var(--accent-ink),var(--accent-ink)) center/1.6px 10px no-repeat,rgba(255,255,255,.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 2px 6px rgba(30,34,50,.12);transition:transform .35s var(--ease-out)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--sub);margin:-6px 0 20px;max-width:62ch}
.contact-panel{padding:clamp(32px,5vw,64px);text-align:center}
.contact-panel .lead{margin:0 auto 28px}
.contact{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.prose h2[id],section[id]{scroll-margin-top:100px}
.reveal-ready [data-reveal]{opacity:0}

/* ---------- footer ---------- */
.foot{position:relative;margin:0 auto 16px;width:min(var(--max),calc(100% - 24px));padding:36px clamp(20px,3vw,36px) 24px;border-radius:var(--radius);
  background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:var(--rim),var(--shadow);color:var(--sub);font-size:14px}
.foot .wrap{display:grid;gap:26px;grid-template-columns:2fr 1fr 1fr;padding:0;max-width:none}
.foot h2{margin:0 0 12px;font-weight:normal;color:var(--ink);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-variation-settings:'wght' 650}
.foot ul{list-style:none;display:grid;gap:8px}
.foot a:hover,.linkbtn:hover{color:var(--accent-ink)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.copy{grid-column:1/-1;font-size:12px;opacity:.8;margin:0}
@media (max-width:699px){.foot .wrap{grid-template-columns:1fr}}

/* ---------- legal + manual pages ---------- */
.legal{padding:120px 0 70px}
.legal .wrap{max-width:860px}
.legal h1{font-weight:normal;font-variation-settings:'wght' 540;font-size:clamp(32px,4.4vw,48px);color:var(--ink);margin:0 0 8px}
.legal .meta{color:var(--sub);font-size:14px;margin:0 0 28px}
.legal .toc{display:block;padding:22px 26px;margin:0 0 32px}
.legal .toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px;font-size:14px}
@media (max-width:599px){.legal .toc ol{columns:1}}
.prose{padding:clamp(22px,3.4vw,44px);border-radius:var(--radius);background:rgba(255,255,255,.55);box-shadow:var(--rim),var(--shadow)}
.prose h2{font-size:26px;margin:36px 0 10px}
.prose h2:first-of-type{margin-top:8px}
.prose h3{font-size:18px;margin:22px 0 8px}
.prose p,.prose li{color:var(--text);font-size:16px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 16px}
.prose li{margin:4px 0}
.prose table{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0 20px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(22,25,31,.08);vertical-align:top}
.prose th{color:var(--ink);font-weight:normal;font-variation-settings:'wght' 650}
.prose .box{padding:18px 22px;margin:18px 0;border-radius:20px}


/* page transitions: <html class="pt"> hides content until site.js fades it in; failsafe after 1.2 s.
   ponytail: motion runs for everyone, including the OS "reduce motion" setting (owner's decision, 12.10.2026). */
.pt main,.pt .foot{opacity:0;animation:pt-failsafe 0s linear .6s forwards}   /* 18.10.2026: 1.2 -> .6 s, the worst case for LCP on a slow phone */
@keyframes pt-failsafe{to{opacity:1}}

/* ---------- the live plugin window (plugin.js): on plugin.html and under the sphere on index.html ---------- */
.try{padding:110px var(--pad) 60px;max-width:1240px;margin:0 auto}
.try .head{text-align:center;margin:0 auto 24px}
/* liquid glass card under the heading: the site glass (.glass = the plugin's CSS glass), sized to the text */
.try .head.glass{width:fit-content;max-width:min(760px,100%);margin:0 auto clamp(28px,4vw,44px);padding:clamp(20px,2.4vw,30px) clamp(22px,3.4vw,44px)}
.try .head.glass .lead{margin:0 auto}
.try .head.glass h2{margin-top:0}
.try .note{text-align:center}
/* chrome baked by the plugin (3x), live parts on top in base 740x500 coordinates */
/* depth: a glass bezel round the window (white film + hairline), then contact, mid and long ambient shadows;
   ::after adds the lit top edge and a dark bottom lip over the baked chrome */
.plugin{position:relative;width:100%;aspect-ratio:740 / 500;border-radius:20px;overflow:hidden;user-select:none;-webkit-user-select:none;
  box-shadow:0 0 0 1px rgba(20,24,36,.35),0 0 0 7px rgba(255,255,255,.5),0 0 0 8px rgba(30,34,50,.08),
    0 2px 3px rgba(20,24,36,.35),0 12px 24px -6px rgba(20,24,36,.4),0 40px 80px -20px rgba(20,24,36,.6),0 90px 160px -40px rgba(30,34,60,.6),0 140px 220px -70px rgba(30,34,60,.45)}
.plugin::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 1px 0 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 -18px 30px -14px rgba(0,0,0,.6),inset 0 0 60px -20px rgba(0,0,0,.45)}
.plugin>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.plugin .porb{position:absolute}
.plugin .porb canvas{width:100%;height:100%;display:block}
/* the plugin's tooltips (plugin.js, texts from the plugin): smoked glass as drawTooltip; in = settles like a drop
   (rises 6 px, 0.86 tall -> 1 with a light overshoot, 240 ms), out = dissolves like vapour (swells 6 %, drifts up, 200 ms) */
.plugin .ptip{position:absolute;z-index:6;max-width:min(62%,430px);padding:5px 11px;border-radius:5px;pointer-events:none;
  font:500 12px/1.4 Sora,system-ui,sans-serif;color:#d9e8eb;text-align:center;white-space:pre-line;
  background:rgba(12,18,20,.62);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  border:1px solid rgba(255,255,255,.15);box-shadow:inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.4),inset 0 0 12px rgba(255,255,255,.07),0 8px 22px rgba(0,0,0,.5)}
.plugin .ptip.in{animation:ptip-in .24s both}
.plugin .ptip.out{animation:ptip-out .2s both}
@keyframes ptip-in{0%{opacity:0;transform:translateY(6px) scale(1.04,.86);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  70%{opacity:1;transform:translateY(.4px) scale(.995,1.025)}100%{opacity:1;transform:none}}
@keyframes ptip-out{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.plugin .ptip.in,.plugin .ptip.out{animation-duration:.01s}}
.plugin canvas#live{position:absolute;inset:0;width:100%;height:100%;touch-action:none}

/* ---------- live demo over the plugin window (houzy-live.js): upload, progress, transport ---------- */
.live{width:min(820px,100%);margin:clamp(28px,4vw,44px) auto 0;padding:18px clamp(16px,2.6vw,26px);display:grid;gap:12px;justify-items:center;text-align:center}
.live-pick{cursor:pointer}
.live-pick svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.live-pick:focus-within{outline:2px solid var(--accent-ink);outline-offset:3px}
.live-note{margin:0;font-size:14px;color:var(--sub);max-width:60ch}
.live-progress{position:relative;width:100%;height:30px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.45);box-shadow:var(--rim)}
.live-progress i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,rgba(141,202,212,.55),rgba(31,111,125,.55));transition:width .15s linear}
.live-progress.busy i{width:35%;animation:live-busy 1.1s ease-in-out infinite alternate}
@keyframes live-busy{from{transform:translateX(-20%)}to{transform:translateX(220%)}}
.live-progress span{position:relative;display:block;line-height:30px;font-size:14px;color:var(--ink)}
.live-row{display:flex;align-items:center;gap:10px;width:100%}
.live-row[hidden],.live-progress[hidden]{display:none}
.live-row .pill{min-height:40px;padding:8px 16px;font-size:14px}
.live-ab[aria-pressed="true"]{background:rgba(255,255,255,.85);box-shadow:var(--rim),0 0 0 1.5px rgba(31,111,125,.55)}
.live-track{flex:1;min-width:0;display:grid;gap:4px;text-align:left}
.live-name{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-bar{position:relative;height:8px;border-radius:999px;background:rgba(22,25,31,.1);cursor:pointer;touch-action:none}
.live-bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--accent-ink)}
.live-time{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.live-toast{position:absolute;left:50%;bottom:7%;z-index:3;transform:translate(-50%,8px);max-width:86%;padding:10px 18px;border-radius:999px;
  font-size:14px;color:#fff;background:rgba(18,25,27,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 30px -10px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease-out)}
.live-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:640px){.live-row{flex-wrap:wrap}.live-track{flex-basis:100%;order:-1}}
/* PRESETS list over the panel (plugin.js): glass, picking does not close it, like PresetMenu */
.live-menu{position:absolute;left:1.6%;top:8.4%;z-index:3;display:grid;gap:2px;min-width:16%;padding:6px;border-radius:10px;
  background:rgba(18,25,27,.72);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 1px 1px 0 rgba(255,255,255,.35),0 14px 34px -12px rgba(0,0,0,.7)}
.live-menu[hidden]{display:none}
.live-menu button{all:unset;cursor:pointer;padding:6px 10px;border-radius:6px;font:700 clamp(8px,1vw,12px)/1.2 Sora,system-ui,sans-serif;letter-spacing:.04em;color:#d9e8eb;transition:background .2s,transform .2s}
.live-menu button:hover{background:rgba(141,202,212,.14);transform:scale(1.04)}
.live-menu button.on{background:rgba(141,202,212,.22);color:#fff}
.live-menu button:focus-visible{outline:1px solid #8dcad4}
/* the page opens with the claim; the try-it text sits in the upload card in body type */
.try .head .hero-title{margin:0 0 12px;font-weight:normal;font-variation-settings:'wght' 540;font-size:clamp(28px,3.6vw,44px);line-height:1.08;color:var(--ink);text-wrap:balance}
.live-intro{margin:0;font-size:16px;line-height:1.6;color:var(--text);max-width:62ch}
.live-intro .kicker{display:flex;justify-content:center;margin:0 0 6px}

/* ---------- LIQUID GLASS EVERYWHERE (12.10.2026): every card and button is the same material ----------
   A thin film over the blurred page (the video shows through), a sheen across the top, a bright rim lit
   from the top-left, an inner glow and light bounced up from the bottom edge. The veil under the long
   texts is lighter, otherwise the glass over it reads as plain white paper. */
.veil{background:rgba(236,236,243,.42)}
.glass,.card{background:linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,.16) 36%,rgba(255,255,255,.22) 80%,rgba(255,255,255,.30));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.62),inset 1.5px 1.5px 0 rgba(255,255,255,.92),inset 0 0 18px rgba(255,255,255,.32),
    inset 0 -16px 28px -20px rgba(255,255,255,.75),var(--shadow)}
.btn,.pill{isolation:isolate;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(255,255,255,.18) 55%,rgba(255,255,255,.30));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.66),inset 1.5px 1.5px 0 rgba(255,255,255,.95),inset 0 0 12px rgba(255,255,255,.38),
    inset 0 -8px 14px -8px rgba(255,255,255,.75),0 1px 2px rgba(30,34,50,.1),0 8px 20px -8px rgba(30,34,50,.3)}
.btn::before,.pill::before{content:'';position:absolute;left:8%;right:8%;top:1px;height:46%;z-index:-1;pointer-events:none;
  border-radius:999px 999px 50% 50% / 999px 999px 70% 70%;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.18) 60%,rgba(255,255,255,0))}
.btn:hover,.pill:hover{background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.30) 55%,rgba(255,255,255,.42))}
.live-ab[aria-pressed="true"]{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.45));box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 1.5px rgba(31,111,125,.55)}
/* text that sat straight on the page gets the same glass: section heads, the long texts, the notes */
.block .head,.prose,.note{position:relative;isolation:isolate;border-radius:var(--radius);
  -webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);
  background:linear-gradient(180deg,rgba(255,255,255,.44),rgba(255,255,255,.20) 36%,rgba(255,255,255,.26) 80%,rgba(255,255,255,.34));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.62),inset 1.5px 1.5px 0 rgba(255,255,255,.92),inset 0 0 18px rgba(255,255,255,.32),
    inset 0 -16px 28px -20px rgba(255,255,255,.75),var(--shadow)}
.block .head{width:fit-content;max-width:min(720px,100%);padding:clamp(20px,2.6vw,30px) clamp(22px,3vw,34px)}
.prose{padding:clamp(22px,3.2vw,40px)}
.note{width:fit-content;max-width:100%;padding:10px 18px;border-radius:16px}
.try .note{margin:22px auto 0}

/* ---------- motion + layout pass (framer-motion dom.js in site.js, ui-ux-pro-max) ---------- */
.hero-title .w{display:inline-block}
.plug-ready .plugin{opacity:0}
.try{perspective:1600px}
/* the light that follows the pointer over any glass (site.js sets --mx / --my / --lit) */
.glass::after,.card::after,.btn::after,.pill::after,.cta::after,.block .head::after,.prose::after,.note::after{
  content:;position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 62%);
  opacity:var(--lit,0);transition:opacity .4s var(--ease-out)}
.cta::after{background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(200,245,252,.45),rgba(200,245,252,0) 65%)}
/* rhythm: the hero, the window and the upload card read as one group; sections a step apart */
.try{padding-top:clamp(96px,11vw,128px);padding-bottom:clamp(36px,5vw,64px)}
.try .head.glass{margin-bottom:clamp(28px,3.6vw,44px)}
.try .head .lead{max-width:52ch;margin:0 auto}
/* the HOUZY 5 card beside About: its content sits in the middle instead of leaving the bottom half empty */
.about > .glass:last-child{display:flex;flex-direction:column;justify-content:center}
/* the chapter tabs read as buttons, not as greyed-out ones */
.tab{opacity:.88}
/* the plugin window at about half the screen, not the whole of it; the upload card matches its width */
.try .plugin{max-width:760px;margin-inline:auto}
.try .live{width:min(760px,100%)}
/* the upload card as a compact capsule (about a third of the old card); it opens to the window's width
   while a track is loading or loaded, so the transport row has room */
.try .live{width:fit-content;max-width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 14px;padding:8px 18px 8px 8px;border-radius:999px;transition:border-radius .3s}
.try .live .live-pick{min-height:40px;padding:9px 20px;font-size:14px}
.try .live .live-note{font-size:12px;line-height:1.35;text-align:left;color:var(--sub)}
.try .live .live-progress,.try .live .live-row{flex-basis:100%}
.try .live.has-track,.try .live:has(.live-progress:not([hidden])){width:min(760px,100%);border-radius:24px;padding:12px 14px}
/* the capsule floats over the rocks of the video: a denser film so its small caption always reads */
.try .live{background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.58) 55%,rgba(255,255,255,.70))}
.try .live .live-note{color:var(--text)}
/* capsule: a small Upload button, then what it is for in two lines */
.try .live{gap:14px;padding:7px 22px 7px 7px}
.try .live .live-pick{min-height:36px;padding:7px 16px 7px 13px;font-size:14px;gap:7px}
.try .live .live-pick svg{width:15px;height:15px}
.try .live .live-note{display:grid;gap:1px;font-size:12px;line-height:1.35;color:var(--sub)}
.try .live .live-note b{font-weight:normal;font-variation-settings:'wght' 650;font-size:14px;color:var(--ink)}
.live-menu-head{margin:2px 10px 4px;font:700 clamp(7px,.8vw,10px)/1.2 Sora,system-ui,sans-serif;letter-spacing:.08em;color:#8a9ca1}
/* menus sized to the panel's own captions (the window is now near its native 740 px) */
.live-menu{padding:5px;gap:1px;border-radius:9px;min-width:0}
.live-menu button{padding:5px 12px 5px 9px;font-size:9px;border-radius:5px}
.live-menu-head{margin:3px 9px 3px;font-size:7.5px}
/* the Upload button: GREY liquid glass - the same film, sheen and rim as the turquoise one, neutral tint */
.try .live .live-pick{background:linear-gradient(180deg,rgba(118,124,136,.78),rgba(68,73,84,.88));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.40),inset 1.5px 1.5px 0 rgba(255,255,255,.75),inset 0 0 14px rgba(230,234,242,.25),
    inset 0 -10px 18px -6px rgba(220,226,238,.32),0 1px 2px rgba(30,34,50,.25),0 10px 24px -10px rgba(30,34,50,.55)}
.try .live .live-pick:hover{background:linear-gradient(180deg,rgba(132,138,150,.82),rgba(76,81,93,.9))}
.try .live .live-pick::after{background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),rgba(255,255,255,0) 65%)}

/* ---------- user agreement (site.js): a card in the bottom-left corner on the first visit, until "I agree";
   the site stays usable. The cookie card (bottom-right) follows once it is accepted. ---------- */
.terms-gate{position:fixed;left:16px;bottom:calc(env(safe-area-inset-bottom) + 16px);z-index:80;width:min(400px,calc(100% - 32px));
  animation:terms-card .55s var(--ease-out) both}
.terms-gate.out{animation:terms-out .28s ease-in both}
.terms-card{padding:20px 22px;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.62) 55%,rgba(255,255,255,.74))}
.terms-card h2{margin:0 0 6px;font-weight:normal;font-variation-settings:'wght' 540;font-size:18px;color:var(--ink)}
.terms-card p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--text)}
.terms-card .kicker{margin-bottom:6px}
.terms-card .cta{padding:10px 22px;font-size:16px;min-height:40px}
/* wide screens: a low strip at the bottom centre (text left, button right) instead of a tall card over the hero */
@media (min-width:1000px){
  .terms-gate{left:0;right:0;margin:0 auto;width:min(860px,calc(100% - 32px))}
  .terms-card{display:grid;grid-template-columns:1fr auto;column-gap:28px;align-items:center;padding:16px 18px 16px 24px;background:rgba(255,255,255,.92)}   /* over the plugin picture the text needs a solid ground */
  .terms-card .kicker{display:none}
  .terms-card h2{font-size:16px;margin:0 0 2px}
  .terms-card p{margin:0;font-size:13px;line-height:1.5}
  .terms-card .cta{grid-column:2;grid-row:1 / span 2}
}
@keyframes terms-out{to{opacity:0;transform:translateY(10px)}}
@keyframes terms-card{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- arms of liquid graphite from the sphere to the open chapter (site.js drawArms) ----------
   The same material as the GRAPHITE sphere: tinted body, white specular on the lit side, dark rim, travelling glints. */
.arms{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.pin > :not(.arms){position:relative;z-index:1}
.arms path{stroke-linecap:round;stroke-linejoin:round}
.arms .arm-body,.arms .arm-up-body{fill:url(#armBody);stroke:rgba(12,16,16,.55);stroke-width:1;
  filter:drop-shadow(0 6px 8px rgba(30,34,50,.35))}
.arms .arm-ghost{fill:url(#armBody);stroke:none}
.arms .arm-hl,.arms .arm-up-hl{fill:none;stroke:rgba(255,255,255,.78);filter:blur(.4px)}
.arms .arm-hl2{fill:none;stroke:rgba(210,226,226,.22);stroke-width:1}
.arms .arm-glint{fill:none;stroke:#fff;stroke-width:2.6;filter:drop-shadow(0 0 4px rgba(255,255,255,.95));transition:opacity .3s}
.arms .arm-finger{fill:none;stroke:#3b4747;opacity:0;filter:drop-shadow(0 2px 3px rgba(30,34,50,.35))}
/* the card that is held gives a little, like something caught */
.tab.grabbed{animation:tab-grab .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes tab-grab{0%{translate:0 0}35%{translate:var(--pull,0) 0}100%{translate:0 0}}
.tabs.left .tab.grabbed{--pull:5px}
.tabs.right .tab.grabbed{--pull:-5px}
/* the thin ring round the sphere and its glowing marker are gone: the graphite arm shows the chosen chapter now */
.orb-ring{display:none}

/* ---------- demo extras: the AMOUNT slider is for phones only ---------- */
.live-amount{display:none;align-items:center;gap:12px;flex-basis:100%;font:600 12px/1 var(--font);letter-spacing:.14em;color:var(--sub)}
.live-amount input{flex:1;accent-color:var(--accent-ink);height:32px}
.live-amount output{min-width:2.5ch;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:0}

/* ---------- BUY: no shop yet, a click says "Coming soon" (buy.js). Liquid glass key; on hover the licence window's
   Neon Border is drawn on .buy-fx, and a tendril in the sphere's colour (.buy-arm) wraps it ---------- */
.buy,.cta.dl{overflow:visible}
.buy .buy-fx,.dl .buy-fx{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);pointer-events:none;z-index:-1}
.buy-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px;margin-top:clamp(18px,2.4vw,26px)}
.cta.trial{white-space:nowrap;text-decoration:none}   /* the free-trial download next to Buy (15.10.2026) */
.buy-row .cta.trial,.buy-big{min-height:56px;min-width:260px;padding:15px 44px;font-size:18px;font-variation-settings:'wght' 650;letter-spacing:.01em}   /* Buy and Download: one size (17.10.2026) */
/* Buy and Download: CLEAR liquid glass (18.10.2026) - a thin turquoise tint over the blurred page instead of the dense fill */
.buy-row .cta{background:linear-gradient(180deg,rgba(60,150,165,.22),rgba(20,84,96,.34));
  -webkit-backdrop-filter:blur(14px) saturate(1.8) brightness(1.05);backdrop-filter:blur(14px) saturate(1.8) brightness(1.05);
  text-shadow:0 1px 3px rgba(0,30,40,.6),0 0 12px rgba(0,30,40,.35)}
.buy-row .cta:hover{background:linear-gradient(180deg,rgba(70,165,180,.30),rgba(22,92,105,.42))}
/* the SEO kicker over the claim: a small accent line, the same voice as the reader's "HOUZY 5 · Coming soon" */
.hero-title .kick{display:block;margin:0 0 12px;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-ink);font-variation-settings:'wght' 650;line-height:1.4}
.hero-title .t{display:block}
.buy-tip{position:fixed;z-index:200;transform:translate(-50%,-4px);padding:7px 14px;border-radius:999px;font-size:14px;
  font-variation-settings:'wght' 540;color:var(--ink);white-space:nowrap;pointer-events:none;opacity:0;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);
  box-shadow:var(--rim),0 10px 24px -10px rgba(30,34,50,.4);transition:opacity .25s,transform .35s var(--ease-out)}
.buy-tip.on{opacity:1;transform:translate(-50%,0)}
.buy-tip.long{white-space:normal;width:max-content;max-width:min(380px,calc(100vw - 32px));padding:11px 18px;border-radius:16px;text-align:center;line-height:1.45}
.buy-arm{position:fixed;inset:0;width:100vw;height:100vh;z-index:150;pointer-events:none;overflow:visible;opacity:0;transition:opacity .2s}
.buy-arm path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.buy-arm .b-body{stroke:rgba(8,20,22,.22);stroke-width:.8}
.buy-arm .b-core{stroke:rgba(255,255,255,.7);stroke-width:1.3}
.buy-arm .b-glint{stroke:#fff;stroke-width:2.2;filter:drop-shadow(0 0 3px #fff);transition:opacity .3s}

/* ---------- UI audit 13.10.2026 (ui-refactor) ---------- */
/* (2) the film under text is denser: dark rocks of the video no longer swallow grey text on the glass */
.glass,.card,.block .head{background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.52) 36%,rgba(255,255,255,.56) 80%,rgba(255,255,255,.64))}
.foot{background:rgba(255,255,255,.62)}
/* (7) one column grid: header, sections and footer share the content edges; About and FAQ split the same way */
.bar,.foot{width:min(calc(var(--max) - 2 * var(--pad)),calc(100% - 2 * var(--pad)))}
.about,.faq{grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)}
@media (max-width:860px){.about,.faq{grid-template-columns:1fr}}
/* (8) both About cards start at the top; the HOUZY 5 card keeps its button at the bottom instead of floating mid-card */
.about > .glass:last-child{justify-content:flex-start}
.about > .glass:last-child .links{margin-top:auto;padding-top:18px}
/* (8) the kicker is a block line: inline, it sat on the parent's 1.6 line box, 9 px lower in block cards than in flex ones */
.kicker{display:flex;width:fit-content}
.lead-sm{font-size:16px}   /* was an inline style: the CSP allows no inline styles */
/* the FAQ heading sticks while the list scrolls: ".block .head{position:relative}" (glass) came later and turned top:110px into a 110 px drop */
.block .faq .head{position:sticky}
@media (max-width:860px){.block .faq .head{position:static}}
/* (9) "Cookie settings" is a link like its neighbours */
.foot .linkbtn{color:var(--accent-ink);text-decoration:underline;text-decoration-color:rgba(31,111,125,.35);text-underline-offset:3px}
/* (1) the BUY key is the page's primary action: turquoise like .cta, but no overflow clip (its neon sits outside) */
.cta.buy{overflow:visible}
/* (11) touch: every target at least 44 px tall */
@media (pointer:coarse){
  .foot a,.foot .linkbtn,.brand{display:inline-flex;align-items:center;min-height:44px}
  .foot ul{gap:0}
  .navpanel .pill,.navpanel .cta,.try .live .live-pick,.live-amount{min-height:44px}
}

/* ---------- phones ---------- */
@media (max-width:999px){
  /* the open menu reads over anything: almost opaque */
  .navpanel{background:rgba(250,250,253,.95)!important}
}
@media (max-width:700px){
  :root{--glass-filter:blur(10px) saturate(1.3)}          /* lighter glass: blur is the costliest thing on a phone */
  .try{padding-left:var(--pad);padding-right:var(--pad)}   /* the same 16 px edges as the header */
  .try .head.glass{padding:18px 16px}
  /* the panel spans the screen; a vertical swipe over it scrolls the page, a sideways drag turns a knob */
  .try .plugin{max-width:none;border-radius:12px}
  .plugin canvas#live{touch-action:pan-y}
  /* the capsule becomes a card: upload on one line, the note and the AMOUNT slider below */
  .try .live{width:100%;border-radius:22px;padding:12px 14px;justify-content:flex-start}
  .try .live .live-note{flex-basis:100%;order:3}
  .live-amount{display:flex;order:4}
  .try .live .live-progress,.try .live .live-row{order:5}
  .live-row .pill{min-height:44px}
  .live-menu button{padding:8px 12px;font-size:12px}
}

/* ---------- language switch (i18n.js): one glass button, a click opens a glass menu with the four languages ---------- */
.lang{position:relative;z-index:5}
.lang-btn{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px 0 14px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:12px;letter-spacing:.08em;color:var(--ink);font-variation-settings:'wght' 650;
  background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(31,111,125,.26),0 1px 2px rgba(30,34,50,.06);transition:background .25s,box-shadow .25s}
.lang-globe{width:14px;height:14px;fill:none;stroke:var(--accent-ink);stroke-width:1.3;flex:none}
.lang-name{display:none}
.lang-btn:hover,.lang.open .lang-btn{background:rgba(214,244,249,.75);box-shadow:inset 0 0 0 1px rgba(31,111,125,.45),0 2px 8px -3px rgba(20,82,93,.35)}
.lang-chev{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.lang.open .lang-chev{transform:translateY(2px) rotate(225deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;padding:6px;border-radius:16px;display:flex;flex-direction:column;gap:2px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 1.5px 1.5px 0 rgba(255,255,255,.9),0 18px 40px -16px rgba(20,40,60,.45),0 2px 6px rgba(20,40,60,.08);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.94);transform-origin:top right;
  transition:opacity .2s,transform .3s cubic-bezier(.3,1.3,.5,1),visibility 0s .3s}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .35s cubic-bezier(.3,1.3,.5,1)}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;font-size:14px;color:var(--text);
  opacity:0;transform:translateY(-4px);transition:background .2s,color .2s,opacity .25s,transform .3s}
.lang.open .lang-menu a{opacity:1;transform:none}
.lang.open .lang-menu a:nth-child(2){transition-delay:0s,0s,.04s,.04s}
.lang.open .lang-menu a:nth-child(3){transition-delay:0s,0s,.08s,.08s}
.lang.open .lang-menu a:nth-child(4){transition-delay:0s,0s,.12s,.12s}
.lang-menu a b{min-width:24px;font-size:11px;letter-spacing:.08em;color:var(--sub);font-weight:inherit;font-variation-settings:'wght' 650}
.lang-menu a:hover{background:rgba(141,202,212,.22);color:var(--ink)}
.lang-menu a[aria-current="true"]{background:linear-gradient(180deg,rgba(214,244,249,.95),rgba(150,214,226,.5));color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 0 0 1px rgba(31,111,125,.3)}
.lang-menu a[aria-current="true"] b{color:var(--accent-ink)}
@media (prefers-reduced-motion:reduce){.lang-menu,.lang-menu a,.lang-chev{transition:none}}
/* phone (inside the burger panel): the button spans the panel, the list unfolds under it in the flow, not over the links */
@media (max-width:999px){.lang{align-self:stretch;margin:8px 0 2px}
  .lang-btn{width:100%;min-height:44px;gap:10px;padding:0 16px;font-size:16px;letter-spacing:0;font-variation-settings:'wght' 540}
  .lang-btn .lang-chev{margin-left:auto}.lang-globe{width:16px;height:16px}
  .lang-code{display:none}.lang-name{display:inline}
  .lang-menu{position:static;min-width:0;margin-top:0;padding:0 2px;max-height:0;overflow:hidden;transform:none;background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;transition:max-height .35s cubic-bezier(.3,1,.5,1),opacity .2s,padding .35s,visibility 0s .35s}
  .lang.open .lang-menu{max-height:400px;padding:6px 2px 2px;transition:max-height .4s cubic-bezier(.3,1,.5,1),opacity .2s,padding .35s}
  .lang-menu a{min-height:44px;font-size:16px}}
/* ---------- DOWNLOAD page (17.10.2026): head left, two platform cards right; one language at a time ---------- */
.dl [hidden]{display:none!important}
.dl .wrap{max-width:var(--max);width:100%;min-width:0}   /* main is flex: a flex child would grow to its content */
.dl-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(16px,2.4vw,28px);align-items:stretch;margin:0 0 clamp(20px,3vw,32px)}
.dl-head{display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,3.4vw,48px)}
.dl-head .kicker{margin:0 0 14px}
.dl-head h1{margin:0 0 18px;line-height:1.02}
.dl-ver{display:inline-flex;white-space:nowrap;align-self:flex-start;align-items:center;gap:8px;margin:0 0 16px;padding:7px 14px;border-radius:999px;
  font-size:14px;color:var(--accent-deep);background:rgba(141,202,212,.22);box-shadow:inset 0 0 0 1px rgba(31,111,125,.22)}
.dl-ver::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent-ink);box-shadow:0 0 0 4px rgba(31,111,125,.15)}
.dl-req{margin:0;color:var(--sub);font-size:14px;line-height:1.6}
.dl-platforms{display:grid;gap:clamp(14px,2vw,20px)}
.dl-card{display:grid;grid-template-columns:1fr auto;grid-template-areas:'head key' 'alt alt';align-items:center;gap:14px 20px;padding:clamp(20px,2.4vw,28px)}
.dl-card-head{grid-area:head;display:flex;align-items:center;gap:14px}
.dl-card-head h2{margin:0;font-size:22px;line-height:1.1}
.dl-card-head p{margin:2px 0 0;color:var(--sub);font-size:14px}
.dl-ico{flex:none;width:40px;height:40px;padding:9px;border-radius:12px;fill:none;stroke:var(--accent-ink);stroke-width:1.5;stroke-linejoin:round;
  background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(31,111,125,.18)}
.dl-card .cta.dl{grid-area:key;min-width:0;min-height:52px;padding:13px 26px;font-size:16px}
.dl-alt{grid-area:alt;display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid rgba(31,111,125,.12)}
.dl-alt .pill{min-height:36px;padding:7px 16px;font-size:14px;text-decoration:none}
.dl a[aria-disabled]{cursor:default}
.dl-news,.dl-lang{margin:0 0 clamp(16px,2.4vw,24px)}
.dl-news h2{margin-top:0}
.dl-news h3{display:flex;align-items:baseline;gap:10px}
.dl-news h3:first-of-type::after{content:'NEW';font-size:11px;letter-spacing:.14em;padding:3px 8px;border-radius:999px;color:#fff;background:var(--accent-ink)}
.dl-lang > :first-child{margin-top:0}
.dl-lang pre{overflow-x:auto}
.dl-steps{list-style:none;counter-reset:step;padding:0}
.dl-steps li{counter-increment:step;position:relative;padding:2px 0 14px 48px}
.dl-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  font-size:15px;font-variation-settings:'wght' 650;color:#fff;background:linear-gradient(180deg,rgba(48,140,156,.85),rgba(22,92,105,.92))}
.dl-steps li:not(:last-child)::after{content:'';position:absolute;left:15.5px;top:36px;bottom:4px;width:1px;background:rgba(31,111,125,.2)}
@media (max-width:860px){.dl-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.dl-ver{white-space:normal}.dl-head h1{overflow-wrap:anywhere}}
@media (max-width:520px){.dl-card{grid-template-columns:minmax(0,1fr);grid-template-areas:'head' 'key' 'alt'}.dl-card .cta.dl{width:100%}}
/* MANUAL page (17.10.2026): the Download page's head and one-language section */
.man .dl-head{width:fit-content;max-width:100%;margin:0 0 clamp(20px,3vw,32px);padding-right:clamp(32px,5vw,72px)}
.man-lead{font-size:clamp(18px,1.6vw,21px);color:var(--ink)}
.man .dl-lang .box{margin-top:clamp(20px,3vw,32px)}
/* HERO "4 technologies" (17.10.2026, frontend-design-pro): the announcement as a glass strip under the lead -
   a big turquoise 4, the sentence beside it, and one slow light sweep across the glass (off with reduced motion) */
.tech4{position:relative;display:flex;align-items:center;gap:clamp(14px,2vw,22px);max-width:640px;margin:clamp(18px,2.4vw,26px) auto 0;
  padding:clamp(14px,1.8vw,18px) clamp(18px,2.4vw,26px);border-radius:22px;text-align:left;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,rgba(141,202,212,.30),rgba(255,255,255,.42) 55%,rgba(141,202,212,.22));
  box-shadow:inset 0 0 0 1px rgba(31,111,125,.22),0 10px 30px rgba(20,82,93,.14)}
.tech4::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.65) 48%,transparent 66%);transform:translateX(-110%);
  animation:tech4-sweep 7s cubic-bezier(.4,0,.2,1) 1.2s infinite}
@keyframes tech4-sweep{0%{transform:translateX(-110%)}38%,100%{transform:translateX(110%)}}
.tech4-n{flex:none;font-size:clamp(46px,6vw,64px);line-height:.9;font-variation-settings:'wght' 700;letter-spacing:-.04em;
  background:linear-gradient(180deg,#3fb5c4,var(--accent-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.tech4-t{font-size:clamp(15px,1.25vw,17px);line-height:1.5;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.tech4::after{animation:none;opacity:0}}
@media (max-width:520px){.tech4{gap:12px}.tech4-n{font-size:44px}}
/* Download page: macOS not out yet - a quiet, non-clickable key */
.dl-soon{cursor:default;pointer-events:none;opacity:.55;filter:saturate(.4)}
.dl .dl-alt span.pill{cursor:default;pointer-events:none;opacity:.5}
/* HEADER (18.10.2026, frontend-design-pro): no Buy / Download in the bar - three columns: brand | menu in the TRUE
   centre of the bar | the language as a glass chip in the right corner, a twin of the ACRONA AUDIO chip on the left.
   The panel is display:contents on desktop, so the menu and the language are columns of the bar itself. */
@media (min-width:1000px){
  .bar{display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;padding-right:12px}   /* menu centred in the room between HOUZY and the language: equal gaps in every language */
  .navpanel{display:contents}
  /* min-height = the language button's: i18n.js builds that button AFTER the first paint, and until then the row was
     only as tall as the brand (29 px) - the bar grew 45 -> 52 px on page load and everything in it jumped 3-4 px */
  .brand{justify-self:start;min-height:36px}
  .navpanel .lang{justify-self:end}
  .navpanel .lang::before{display:none}
  .lang-btn{min-height:36px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 1px 2px rgba(30,34,50,.08)}
}
.live-tip{display:block;margin-top:6px;font-size:13px;color:var(--sub)}
.live-tip a{color:var(--accent-ink)}
a.tech4-n{text-decoration:none;cursor:pointer;transition:transform .25s}
a.tech4-n:hover{transform:scale(1.08)}
/* HEADER, sleek liquid glass (18.10.2026, by the user's brief: frosted, soft light, muted palette, subtle gradients,
   minimal, high clarity; no harsh shadows, no neon). Denser frost with a top-to-bottom sheen, one hairline highlight
   on the top edge, a soft diffuse shadow; the selection drop and the language chip are neutral frosted glass,
   turquoise only on the hovered word; no dividers - air between the words instead. */
.bar{background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(246,247,250,.44) 55%,rgba(240,242,247,.52));
  -webkit-backdrop-filter:blur(24px) saturate(1.35) brightness(1.06);backdrop-filter:blur(24px) saturate(1.35) brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -1px 0 rgba(22,25,31,.04),
    0 1px 2px rgba(30,34,50,.05),0 16px 40px -22px rgba(30,34,50,.28)}
.bar-drop{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,246,249,.62));
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 1px rgba(22,25,31,.07),0 4px 12px -6px rgba(30,34,50,.25)}
@media (min-width:1000px){
  .bar{padding-top:8px;padding-bottom:8px}
  .navpanel{--nav-gap:30px}
  .menu a+a::before{display:none}
  .menu a{color:var(--sub);letter-spacing:.01em}
  .menu a:hover{color:var(--accent-ink)}
  .lang-btn{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(244,246,249,.6));
    box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 1px rgba(22,25,31,.07),0 4px 12px -6px rgba(30,34,50,.22)}
  .lang-btn:hover,.lang.open .lang-btn{background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px rgba(31,111,125,.25),0 6px 16px -8px rgba(20,82,93,.3)}
}
/* THE WHOLE SITE, sleek liquid glass (18.10.2026) - the header's recipe on every surface: frosted film with a soft
   top-to-bottom gradient, one hairline highlight on the top edge, a hairline rim, soft diffuse shadows, muted colour.
   The film under text stays dense enough (.72 / .56) for grey text over the dark rocks of the video. */
:root{--shadow:0 1px 2px rgba(30,34,50,.05),0 18px 44px -24px rgba(30,34,50,.26),0 48px 90px -50px rgba(30,34,50,.22)}
.glass,.card,.block .head,.prose,.note{
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(248,249,251,.56) 45%,rgba(244,246,249,.62));
  -webkit-backdrop-filter:blur(24px) saturate(1.35) brightness(1.06);backdrop-filter:blur(24px) saturate(1.35) brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -1px 0 rgba(22,25,31,.04),var(--shadow)}
.btn,.pill{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(244,246,249,.62));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 1px rgba(22,25,31,.07),0 6px 16px -8px rgba(30,34,50,.24)}
.btn::before,.pill::before{opacity:.5}
.btn:hover,.pill:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px rgba(31,111,125,.25),0 8px 20px -10px rgba(20,82,93,.3)}
/* the turquoise keys keep their density (white text must read) but lose the saturation and the heavy glow */
.cta{background:linear-gradient(180deg,rgba(58,130,142,.84),rgba(34,96,108,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.22),0 1px 2px rgba(20,60,70,.18),0 10px 24px -12px rgba(20,60,70,.42)}
.cta:hover{background:linear-gradient(180deg,rgba(66,142,154,.88),rgba(38,104,116,.92))}
.foot{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(244,246,249,.58));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),var(--shadow)}
.tech4{background:linear-gradient(135deg,rgba(141,202,212,.18),rgba(255,255,255,.5) 55%,rgba(141,202,212,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(31,111,125,.12),0 8px 24px -14px rgba(20,82,93,.22)}
/* footer: the demo link and the four languages as plain links (18.10.2026, SEO: crawlers without JS reach every version) */
.foot-langs{margin-top:10px;font-size:13px;line-height:1.9;color:var(--sub)}
.foot-langs a{color:var(--text)}
/* the language offer (i18n.js, 18.10.2026): instead of redirecting, a small glass card under the header offers the
   visitor's browser language; "x" or a pick in the menu remembers the answer */
.lang-offer{position:fixed;top:76px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;
  max-width:calc(100% - 32px);padding:8px 8px 8px 20px;border-radius:999px;font-size:14px;color:var(--ink);animation:lang-offer-in .55s var(--ease-out) both}
@keyframes lang-offer-in{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.lang-offer{animation:none}}
.lang-offer .cta{min-height:36px;padding:7px 18px;font-size:14px;white-space:nowrap}
.lang-offer-x{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--sub);font:inherit;font-size:20px;line-height:1;cursor:pointer}
.lang-offer-x:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.lang-offer-x:focus-visible,.lang-offer .cta:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
@media (max-width:520px){.lang-offer{top:68px;flex-wrap:wrap;justify-content:center;border-radius:22px;padding:12px 12px 10px;text-align:center}}
/* Why HOUZY page (18.10.2026): the comparison table and the two keys at the end; the link to it from the Problem chapter */
.why .prose h2{margin-top:28px}
.why .prose table th[scope="row"]{color:var(--ink);white-space:normal}
.why .prose thead th:last-child,.why .prose tbody td:last-child{color:var(--accent-ink)}
.why-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.why-link{margin-top:12px}
.why-link a{color:var(--accent-ink);text-decoration:underline;text-decoration-color:rgba(31,111,125,.35);text-underline-offset:3px}
/* the price on the Buy key and the trial under Download (18.10.2026): the visitor sees the cost before the click */
.buy-row .cta.trial{flex-direction:column;gap:1px;line-height:1.15}
.buy-row .cta.trial small{font-size:12px;letter-spacing:.02em;opacity:.85;font-variation-settings:'wght' 540}
.buy-row{align-items:stretch}   /* both keys the same height when Download has its second line */
@media (min-width:1000px){.navpanel .menu{justify-self:center}}
/* the demo page's guide (18.10.2026): two cards under the demo, as wide as the plugin window - four numbered steps
   (the Download page's step style), then "What's in the demo" (two short columns) beside "Questions" (collapsed) */
.demo-guide{width:min(760px,100%);margin:clamp(28px,4vw,44px) auto 0;display:grid;gap:16px;text-align:left}
.demo-guide .prose{padding:clamp(20px,2.6vw,30px)}
.demo-guide h2{margin:0 0 14px;font-size:clamp(19px,1.6vw,22px)}
.demo-steps{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;margin:0}
.demo-steps li::after{display:none}
.demo-steps li b{color:var(--ink);font-weight:normal;font-variation-settings:'wght' 650}
.demo-more{display:grid;grid-template-columns:1fr;gap:16px}   /* stacked: the lists need the full width */
.demo-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.demo-cols h3{margin:0 0 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:normal;font-variation-settings:'wght' 650;color:var(--accent-ink)}
.demo-cols ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:14px}
.demo-in li::before{content:'✓ ';color:var(--accent-ink)}
.demo-full li::before{content:'+ ';color:var(--sub)}
.demo-full li{color:var(--sub)}
.demo-faq details summary{font-size:15px}

@media (max-width:560px){.demo-steps{grid-template-columns:1fr}}
.demo-steps li{padding-bottom:10px}
@media (max-width:520px){.demo-cols{grid-template-columns:1fr}}   /* phones: the two lists one under the other */
/* the closing sales card beside About (18.10.2026): the price large, what you get, the keys, "new in 5" small */
.about > .glass.sale{justify-content:flex-start}
.sale-price{margin:6px 0 0;font-size:clamp(52px,6vw,72px);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variation-settings:'wght' 650}
.sale-once{margin:6px 0 18px;color:var(--sub);font-size:15px}
.sale-list{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}
.sale-list li{position:relative;padding-left:30px;color:var(--text);font-size:16px;line-height:1.45}
.sale-list li::before{content:'';position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(180deg,rgba(58,130,142,.9),rgba(34,96,108,.95));box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.sale-list li::after{content:'';position:absolute;left:6px;top:7px;width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.sale-keys{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.sale-keys .cta{min-height:50px;padding:12px 26px;font-size:16px;overflow:visible}
.sale-keys .pill{min-height:50px;padding:12px 22px;font-size:16px}
.sale-note{margin:16px 0 0;font-size:13px;line-height:1.55;color:var(--sub)}
.demo-man{margin:18px 0 0}.demo-man a{color:var(--accent-ink);text-decoration:underline;text-decoration-color:rgba(31,111,125,.35);text-underline-offset:3px}
/* the sales card: the four own technologies (18.10.2026) */
.sale .sale-list{margin-bottom:18px}
.sale-tech-h{margin:0 0 10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);font-variation-settings:'wght' 650}
.sale-tech{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}
.sale-tech li{position:relative;padding-left:16px;font-size:15px;line-height:1.45;color:var(--sub)}
.sale-tech li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent-ink)}
.sale-tech li b{color:var(--ink);font-weight:normal;font-variation-settings:'wght' 650}
/* the manual's section subheadings (18.10.2026): real <h2> for crawlers, sized like the bold starts they replaced */
.man .dl-lang h2{margin:24px 0 6px;font-size:18px;line-height:1.3;color:var(--ink);font-variation-settings:'wght' 650}
.man .dl-lang h2:first-of-type{margin-top:8px}
.man-end{margin-top:16px;padding:clamp(20px,2.6vw,30px)}
.man-end h2{margin:0 0 4px;font-size:clamp(20px,1.8vw,24px)}
/* VIDEO (18.10.2026, owner's brief: sleek glassmorphism, frosted panels, soft light, dark palette with neon accents) -
   Plyr 3.7.8 themed through its own CSS variables: a dark frame, the control bar as a floating frosted pill, the big
   play key as a glass disc with a turquoise glow. */
.video-card{padding:clamp(18px,2.6vw,30px)}
.video-card h2{margin:0 0 clamp(14px,1.8vw,20px);font-size:clamp(22px,2.4vw,30px);line-height:1.2;color:var(--ink);text-wrap:balance}
.video-frame{position:relative;border-radius:22px;overflow:hidden;background:#0a0e12;aspect-ratio:16/9;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 1px 2px rgba(10,14,18,.2),0 24px 60px -24px rgba(10,14,18,.55)}
.video-frame video{display:block;width:100%;height:100%;object-fit:cover}
.video-frame .plyr{--plyr-color-main:#5fd4e4;--plyr-video-background:#0a0e12;--plyr-font-family:inherit;--plyr-control-radius:12px;
  --plyr-video-control-color:#e8f7fa;--plyr-video-control-color-hover:#fff;--plyr-video-control-background-hover:rgba(95,212,228,.22);
  --plyr-range-fill-background:#5fd4e4;--plyr-range-thumb-background:#fff;--plyr-range-thumb-shadow:0 0 0 1px rgba(10,14,18,.25),0 0 12px rgba(95,212,228,.8);
  --plyr-video-range-track-background:rgba(255,255,255,.22);--plyr-video-progress-buffered-background:rgba(255,255,255,.32);
  --plyr-tooltip-background:rgba(14,20,26,.78);--plyr-tooltip-color:#e8f7fa;--plyr-tooltip-radius:10px;
  --plyr-video-controls-background:transparent;border-radius:22px;height:100%}
/* the control bar: a floating frosted pill, not the stock dark gradient */
.video-frame .plyr--video .plyr__controls{left:14px;right:14px;bottom:14px;padding:6px 10px;border-radius:999px;
  background:linear-gradient(180deg,rgba(30,40,48,.46),rgba(12,18,24,.58));
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),0 12px 30px -14px rgba(0,0,0,.7)}
.video-frame .plyr__control{border-radius:999px}
/* the big play key: a glass disc with a soft turquoise glow */
.video-frame .plyr__control--overlaid{padding:28px;color:#fff;background:rgba(18,26,32,.38);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 6px rgba(95,212,228,.12),0 0 40px rgba(95,212,228,.45);
  transition:transform .3s var(--ease-out),background .25s,box-shadow .3s}
.video-frame .plyr__control--overlaid:hover,.video-frame .plyr__control--overlaid:focus-visible{background:rgba(95,212,228,.32);transform:translate(-50%,-50%) scale(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.2),0 0 0 8px rgba(95,212,228,.16),0 0 56px rgba(95,212,228,.6)}
.video-frame .plyr__control--overlaid svg{width:22px;height:22px}
.video-frame .plyr__poster{background-size:cover}
@media (max-width:560px){.video-frame,.video-frame .plyr{border-radius:16px}.video-frame .plyr--video .plyr__controls{left:8px;right:8px;bottom:8px}
  .video-frame .plyr__control--overlaid{padding:20px}}
@media (prefers-reduced-motion:reduce){.video-frame .plyr__control--overlaid{transition:none}}
/* VIDEO, liquid glass (18.10.2026, frontend-design-pro): a centred glass head with a turquoise "Video · 0:49" kicker,
   the player a third smaller (780 px, near the plugin window above) in a light glass bezel - white film, top sheen,
   hairline rim - with a soft turquoise glow under it, as if the screen lit the page. Controls: light frosted pill. */
.video-block .wrap{display:flex;flex-direction:column;align-items:center}
.video-head{text-align:center;margin:0 auto clamp(18px,2.4vw,26px)}
.video-head h2{margin:0;font-size:clamp(22px,2.4vw,30px);line-height:1.2;text-wrap:balance}
.video-kick{justify-content:center;margin-bottom:10px}
.video-dot{width:16px;height:16px;border-radius:50%;flex:none;position:relative;
  background:linear-gradient(180deg,rgba(58,130,142,.95),rgba(34,96,108,1));box-shadow:0 0 0 4px rgba(95,212,228,.16)}
.video-dot::after{content:'';position:absolute;left:6px;top:4.5px;border-left:6px solid #fff;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.video-stage{position:relative;width:min(780px,100%);padding:10px;border-radius:28px;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(246,248,251,.34) 50%,rgba(240,243,248,.46));
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.6),0 1px 2px rgba(30,34,50,.06),0 26px 60px -28px rgba(30,34,50,.42)}
.video-stage::before{content:'';position:absolute;left:8%;right:8%;bottom:-34px;height:70px;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(95,212,228,.38),rgba(95,212,228,0));filter:blur(8px)}
.video-stage .video-frame,.video-stage .video-frame .plyr{border-radius:19px}
.video-stage .video-frame{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
/* controls: light frosted glass with white icons (the video under it is dark) */
.video-stage .video-frame .plyr--video .plyr__controls{left:12px;right:12px;bottom:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.12));
  -webkit-backdrop-filter:blur(20px) saturate(1.6) brightness(.9);backdrop-filter:blur(20px) saturate(1.6) brightness(.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.22),0 10px 28px -14px rgba(0,0,0,.55)}
.video-stage .video-frame .plyr__controls .plyr__control,.video-stage .video-frame .plyr__time{filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.video-stage .video-frame .plyr__control--overlaid{background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.3),0 0 0 7px rgba(255,255,255,.08),0 0 38px rgba(95,212,228,.4)}
.video-stage .video-frame .plyr__control--overlaid:hover,.video-stage .video-frame .plyr__control--overlaid:focus-visible{background:rgba(95,212,228,.38)}
@media (max-width:560px){.video-stage{padding:6px;border-radius:20px}.video-stage .video-frame,.video-stage .video-frame .plyr{border-radius:15px}}
/* the frame round the player: clear white glass (owner, 18.10.2026) - a thin white film over the page, the rim and sheen
   carry the shape; no milky fill */
.video-stage{background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.10) 50%,rgba(255,255,255,.18));
  -webkit-backdrop-filter:blur(14px) saturate(1.3) brightness(1.08);backdrop-filter:blur(14px) saturate(1.3) brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(255,255,255,.75),inset 0 -10px 22px -16px rgba(255,255,255,.9),
    0 1px 2px rgba(30,34,50,.06),0 26px 60px -28px rgba(30,34,50,.38)}
.video-head h2{margin:0}
/* the video's title plate: the same clear white glass as the frame round the player (owner, 18.10.2026) */
.block .head.video-head{background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.10) 50%,rgba(255,255,255,.18));
  -webkit-backdrop-filter:blur(14px) saturate(1.3) brightness(1.08);backdrop-filter:blur(14px) saturate(1.3) brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(255,255,255,.75),inset 0 -10px 22px -16px rgba(255,255,255,.9),
    0 1px 2px rgba(30,34,50,.06),0 18px 44px -26px rgba(30,34,50,.32)}
/* layout pass (18.10.2026, ui-ux-pro-max, measured): only what the measurements showed */
/* the video is as wide as the plugin window above it (760 px, edges 332…1092 at 1440 px) */
.video-stage{width:min(760px,100%)}
/* lines no longer than ~75 characters (was ~121 in the Problem chapter, ~89 in Contact) */
.panel .solves{max-width:41em}   /* ~75 characters per line at Sora 16 px (measured: 1ch = 11.9 px here, so ch units overshoot) */
#contact .lead{max-width:62ch;margin-left:auto;margin-right:auto}
/* touch screens: the player's keys, its seek bar, the AMOUNT slider and the "4" link reach 44 px */
@media (pointer:coarse){
  .video-frame .plyr__controls .plyr__control{min-width:44px;min-height:44px}
  .video-frame .plyr__progress input[type=range],.video-frame .plyr__volume input[type=range]{height:44px}
  .live-amount input{height:44px}
  a.tech4-n{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
}
/* phones: no volume slider (the phone's own keys set the volume; the mute key stays) - the seek bar gets the room */
@media (pointer:coarse){.video-frame .plyr__volume input[type=range]{display:none}.video-frame .plyr__volume{min-width:0;max-width:none;width:auto}}
/* About + the sales card, half the height (owner, 18.10.2026: 714 px -> ~half, the two the same): tighter padding and
   type, the price with its line beside it, the two checks on one row, the four technologies as a 2 x 2 grid */
@media (min-width:861px){
  .about > .glass{padding:26px 28px}
  .about > .glass .kicker{margin-bottom:8px}
  .about > .glass h2{font-size:30px;line-height:1.15;margin:0 0 10px}
  .about > .glass .lead{font-size:15px;line-height:1.55}
  .about > .glass .links{padding-top:12px}
  .sale{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-content:start}
  .sale > *{grid-column:1 / -1}
  .sale .sale-price{grid-column:1;font-size:46px;margin:0}
  .sale .sale-once{grid-column:2;align-self:end;margin:0 0 6px;font-size:13px;line-height:1.35}
  .sale .sale-list{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 14px}
  .sale .sale-list li{font-size:14px;padding-left:26px}
  .sale .sale-list li::before{width:18px;height:18px;top:1px}
  .sale .sale-list li::after{left:5px;top:6px}
  .sale .sale-tech-h{margin:0 0 8px;font-size:11px}
  .sale .sale-tech{grid-template-columns:1fr 1fr;gap:8px 18px;margin:0 0 16px}
  .sale .sale-tech li{font-size:13px;line-height:1.4}
  .sale .sale-keys .cta,.sale .sale-keys .pill{min-height:44px;padding:10px 20px;font-size:15px}
  .sale .sale-note{margin-top:10px;font-size:12px;line-height:1.45}
}
@media (min-width:861px){.sale .sale-once{justify-self:start;text-align:left;max-width:22em}}   /* the line sits right after the price */
/* header (owner, 18.10.2026): the menu back in the TRUE centre of the bar - one axis with the hero and the plugin window;
   22 px between the words so the long Russian menu keeps air beside HOUZY + ACRONA AUDIO */
@media (min-width:1000px){.bar{grid-template-columns:1fr auto 1fr}.navpanel{--nav-gap:22px}}
@media (min-width:1000px) and (max-width:1199px){.bar .brand small{display:none}}   /* narrow desktops: room for the centred menu (ru: 12 px gap with ACRONA AUDIO shown) */
/* the demo toast with a long message (the AMOUNT hint, 18.10.2026): left:50% capped it at half the panel, so the text
   wrapped into a tall column and the 999 px radius made it a circle over the whole window - size it to the text instead */
.live-toast{width:max-content;max-width:86%;border-radius:16px;text-align:center;line-height:1.35}
@media (max-width:640px){.live-toast{max-width:92%;bottom:4%;padding:7px 12px;font-size:12px;border-radius:12px}}

/* 20.10.2026: launch price - the old price struck through, FIRST20 offer under the hero keys and in the sales card, /upgrade.html */
.sale-price .was{font-size:.42em;color:var(--dim);text-decoration:line-through;text-decoration-thickness:2px;margin-right:.28em;vertical-align:.38em;font-variation-settings:'wght' 500}
.promo{width:fit-content;max-width:min(46em,100%);margin:16px auto 0;padding:10px 20px;border-radius:18px;background:var(--glass-strong);box-shadow:var(--rim);
  -webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);text-align:center;font-size:15px;line-height:1.5;color:var(--text)}
.promo a,.sale-promo a{color:var(--accent-deep);font-weight:600;text-decoration:underline;text-decoration-color:rgba(20,82,93,.35);text-underline-offset:3px}
.sale-promo{margin:-8px 0 16px;font-size:14px;line-height:1.45;color:var(--text)}
@media (min-width:861px){.sale .sale-promo{margin:6px 0 0}}
.up-card{max-width:680px;margin:0 auto}
.up-lead{margin:0 0 20px;font-size:17px;line-height:1.55;color:var(--text)}
.up-code{margin:8px 0 20px;font-size:15px;color:var(--sub)}
.was-btn{text-decoration:line-through;text-decoration-thickness:2px;opacity:.6;font-variation-settings:'wght' 500}

/* ---- Partner programme page (26.10.2026): hero + big 30%, steps, who it fits, FAQ; Liquid Glass cards, scroll reveal from site.js ---- */
.aff-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(16px,2.4vw,28px);align-items:stretch;margin:0 0 clamp(26px,4vw,44px)}
@media (max-width:860px){.aff-hero{grid-template-columns:1fr}}
.aff-pct{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:clamp(26px,3.4vw,48px);overflow:hidden}
.aff-pct b{position:relative;padding:0 .1em .06em;font-weight:normal;font-size:clamp(88px,12vw,164px);line-height:.9;letter-spacing:-.045em;font-variation-settings:'wght' 680;
  background:linear-gradient(110deg,var(--ink) 0%,var(--accent-ink) 45%,var(--ink) 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:affShine 7s ease-in-out infinite alternate}
.aff-pct span{position:relative;font-size:17px;color:var(--text)}
.aff-pct small{position:relative;font-size:14px;color:var(--sub)}
.aff-orb{position:absolute;left:50%;top:46%;width:78%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,rgba(190,240,248,.75),rgba(96,190,206,.30) 45%,rgba(96,190,206,0) 70%);filter:blur(6px);animation:affFloat 9s ease-in-out infinite}
.aff-h{margin:clamp(26px,4vw,44px) 0 16px;font-weight:normal;font-variation-settings:'wght' 540;font-size:clamp(24px,3vw,32px);color:var(--ink)}
.aff-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.aff-steps li,.aff-grid > div{padding:clamp(20px,2.4vw,28px);transition:transform .45s var(--ease-out)}
.aff-steps li:hover,.aff-grid > div:hover{transform:translateY(-5px)}
.aff-steps li > b{display:grid;place-items:center;width:38px;height:38px;margin:0 0 14px;border-radius:50%;font-weight:normal;font-size:17px;color:var(--accent-ink);
  background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(31,111,125,.28),0 6px 16px -8px rgba(31,111,125,.5)}
.aff-steps h3,.aff-grid h3{margin:0 0 6px;font-size:19px;font-weight:normal;font-variation-settings:'wght' 560;color:var(--ink)}
.aff-steps p,.aff-grid p{margin:0;font-size:15px;line-height:1.55;color:var(--sub)}
.aff-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.aff-faq{padding:6px clamp(20px,2.6vw,30px)}
.aff-faq details{border-top:1px solid rgba(31,111,125,.14)}
.aff-faq details:first-child{border-top:0}
.aff-faq details p{margin:0 0 18px;font-size:15px;line-height:1.6;color:var(--sub)}
.aff-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(26px,4vw,44px);padding:clamp(22px,3vw,34px)}
.aff-end p{margin:0;font-size:clamp(19px,2.2vw,24px);color:var(--ink)}
.aff-end .cta{min-height:50px;overflow:visible}
@keyframes affShine{to{background-position:100% 0}}
@keyframes affFloat{50%{translate:-50% -54%;scale:1.06}}
@media (prefers-reduced-motion:reduce){.aff-pct b,.aff-orb{animation:none}.aff-steps li,.aff-grid > div{transition:none}}
@media (max-width:860px){   /* phones: the hero column may shrink below its content (it was wider than the screen), smaller type, buttons stacked */
  .aff-hero{grid-template-columns:minmax(0,1fr)}
  .aff-hero > *,.aff-steps > *,.aff-grid > *{min-width:0}
  .aff-lead{padding:24px 20px}
  .aff-lead h1{font-size:clamp(26px,7.4vw,34px);overflow-wrap:anywhere}
  .aff-lead .up-lead{font-size:16px}
  .aff-lead .sale-keys{flex-direction:column;align-items:stretch}
  .aff-lead .sale-keys .cta,.aff-lead .sale-keys .pill{justify-content:center;text-align:center;white-space:normal}
  .aff-pct{padding:26px 20px}
  .aff-pct b{font-size:clamp(72px,22vw,104px)}
  .aff-end{flex-direction:column;align-items:stretch;text-align:center}
  .aff-end .cta{justify-content:center}
}

/* vertical 9:16 video (Why HOUZY): centred, never taller than the screen, no fullscreen so no black side bars */
.video-vert{width:min(360px,100%,calc((100svh - 160px) * 9 / 16));margin:0 auto clamp(18px,2.4vw,26px)}
.video-vert .video-frame{aspect-ratio:9/16}
/* header symmetry (28.10.2026): the brand + ACRONA AUDIO chip was wider than its 1fr share, so it pushed the menu right of the bar's centre
   (menu 35 px off in RU). Tighter menu gaps and chip tracking let both side columns stay equal: the menu is centred again. */
@media (min-width:1000px){.navpanel{--nav-gap:14px}.brand small{letter-spacing:.1em}.bar{column-gap:8px;padding-left:16px;padding-right:16px}}
/* header dividers (28.10.2026): thin fading hairlines between the menu items and at both ends of the menu */
@media (min-width:1000px){
  .menu a+a::before{display:block}
  .menu a:first-child::before,.menu a:last-child::after{content:'';position:absolute;top:50%;width:1px;height:16px;transform:translateY(-50%);pointer-events:none;
    background:linear-gradient(180deg,rgba(22,25,31,0),rgba(22,25,31,.22) 30%,rgba(22,25,31,.22) 70%,rgba(22,25,31,0))}
  .menu a:first-child::before{left:calc(var(--nav-gap) / -2 - .5px)}
  .menu a:last-child::after{right:calc(var(--nav-gap) / -2 - .5px)}}
/* RU header (28.10.2026): Cyrillic words are long, the row was glued to the ACRONA AUDIO chip - a touch smaller type, wider gaps */
@media (min-width:1000px){html[lang="ru"] .navpanel{--nav-gap:18px}html[lang="ru"] .menu a{font-size:13px}html[lang="ru"] .brand small{font-size:11px}}
/* Manual page (28.10.2026): the cards rise in one after another, softly (CSS only - the language sections are toggled by i18n.js, so no JS reveal here) */
@keyframes man-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .man>.wrap>.glass{animation:man-rise .8s cubic-bezier(.16,1,.3,1) both}
  .man>.wrap>.glass:nth-child(2){animation-delay:.1s}
  .man>.wrap>.glass:nth-child(n+3){animation-delay:.2s}}
.dl-head h1,.hero-title .t{text-wrap:balance}   /* no lone word on the last line (Onest sets Russian a little wider) */
/* Japanese (28.10.2026): no web font - the system's own Japanese faces (Hiragino on Mac, Yu Gothic / Meiryo on Windows); Sora still sets the Latin.
   Strict line breaking, no letter-spacing on headings (it pulls kana apart), and a calmer weight so kanji do not clot. */
html[lang="ja"]{--font:'Sora','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic','Meiryo','Noto Sans JP',system-ui,sans-serif}
html[lang="ja"] body{line-break:strict;word-break:normal;overflow-wrap:anywhere;line-height:1.75}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] .brand small,html[lang="ja"] .kicker{letter-spacing:0;font-variation-settings:'wght' 600}
html[lang="ja"] .menu a{font-size:13px}
html[lang="fr"] .menu a{font-size:13px}   /* French labels are long: same step as Russian so the chip and the menu keep a gap */
html[lang="ja"]{word-break:auto-phrase}   /* Chrome / Edge / Safari break Japanese at phrase boundaries, not mid-word */
/* Technology scene reveal (28.10.2026): hidden until site.js lifts it in (only when scripts run) */
.pin-ready .stage .pin{opacity:0}
@media (prefers-reduced-motion:reduce){.pin-ready .stage .pin{opacity:1}}
/* AI-search pass (28.10.2026): FAQ subheadings, the visible update date */
.why .prose h3{margin:20px 0 4px;font-size:1.05em;line-height:1.35;color:var(--ink);font-variation-settings:'wght' 650}
.why-upd{margin:10px 0 0}
.foot-updated{grid-column:1/-1;margin:0;font-size:12px;color:var(--sub)}
/* product shot under the video (Why HOUZY) and on the comparison page: the same glass frame as the player */
.why-shot{width:min(780px,100%);margin:0 auto clamp(18px,2.4vw,26px)}
.why-shot img{display:block;width:100%;height:auto;border-radius:19px}
/* Quick start beside the home video (28.10.2026): a short liquid-glass column, inset from the player's top and bottom so it reads as
   an extension of the same field; three numbered steps and a link to the manual. Under 1000 px it drops below the video. */
.video-row{display:flex;align-items:stretch;justify-content:center;gap:clamp(16px,2vw,24px);width:100%}
.video-row .video-stage{flex:0 1 780px}
.qs{flex:0 0 232px;align-self:center;margin:clamp(48px,8vw,120px) 0;padding:24px 22px 22px;border-radius:28px;display:flex;flex-direction:column;gap:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.42),rgba(255,255,255,.14) 55%,rgba(220,240,246,.22));
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5),inset 0 -14px 26px -18px rgba(95,212,228,.45),0 22px 50px -26px rgba(30,34,50,.42)}
.qs-kick{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);font-variation-settings:'wght' 650}
.qs-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.qs-steps li{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.35;color:var(--text)}
.qs-steps b{display:block;font-size:13px;letter-spacing:.08em;color:var(--ink);font-variation-settings:'wght' 700}
.qs-n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:#fff;font-variation-settings:'wght' 700;
  background:linear-gradient(180deg,#7fe0ec,#2f9fb1);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 10px -4px rgba(20,110,125,.6)}
.qs-link{align-self:flex-start;font-size:13px;color:var(--accent-ink);text-decoration:underline;text-decoration-color:rgba(31,111,125,.35);text-underline-offset:3px}
.qs-link::after{content:' →'}
@media (max-width:999px){.video-row{flex-direction:column;align-items:center}.qs{align-self:stretch;margin:0;flex-basis:auto;width:min(780px,100%)}}
/* Why HOUZY (28.10.2026): the vertical video and the product shot share one glass frame, side by side, same height */
.why-duo{display:flex;gap:10px;width:min(1000px,100%);margin:0 auto clamp(18px,2.4vw,26px)}
.why-duo .video-frame{flex:0 0 min(300px,34%);aspect-ratio:9/16}
.why-duo-shot{flex:1 1 auto;min-width:0;width:100%;height:auto;object-fit:cover;border-radius:19px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
@media (max-width:700px){.why-duo{flex-direction:column}.why-duo .video-frame{flex-basis:auto;width:min(320px,100%);align-self:center}.why-duo-shot{height:auto}}
/* Quick start: the video stays centred as before; the column only sits beside it on the right (wide screens), else below */
.video-row{position:relative;display:block}
.video-row .video-stage{margin:0 auto}
.qs{width:232px;margin:0}
@media (min-width:1360px){.qs{position:absolute;top:50%;left:calc(50% + 390px + 24px);transform:translateY(-50%)}}
@media (max-width:1359px){.qs{width:min(780px,100%);margin:20px auto 0}}