/* ============================================================
   Alpha Tec site system
   Light theme is the default. Dark theme: html[data-theme="dark"].
   Type: Bricolage Grotesque (display) + Instrument Sans (body).
   Radius rule: buttons 8px, cards 14px, demo shell 20px.
   ============================================================ */

:root{
  --canvas:#FCFBF8; --band:#F4F1EA; --surface:#FFFFFF; --surface-2:#FAF8F3;
  --ink:#15161B; --ink-2:#3B3D45; --muted:#5C616C;
  --line:#E5E0D5; --line-strong:#D2CBBB;
  --ember:#F4502E; --cta:#D63F20; --cta-hover:#BC3418; --ember-text:#B8341A; --ember-tint:#FCEAE3; --ember-line:rgba(184,52,26,.18);
  --ok:#1E7A45; --ok-tint:#E2F2E8; --info:#2F4F8F; --info-tint:#E9EEF8; --warn:#7F5F01; --warn-tint:#FFF3C4;
  --shadow:0 1px 2px rgba(60,40,20,.05),0 12px 32px -12px rgba(60,40,20,.14);
  --shadow-pop:0 24px 48px -16px rgba(40,30,20,.22);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.3,1.25,.55,1);
  --exit:cubic-bezier(.4,0,1,1);
  --sine:cubic-bezier(.37,0,.63,1);
  --r-btn:8px; --r-card:14px; --r-shell:20px;
  --hdr:68px;
  color-scheme:light;
}
html[data-theme="dark"]{
  --canvas:#121318; --band:#17191F; --surface:#1C1E25; --surface-2:#191B21;
  --ink:#F2F0EB; --ink-2:#CFCCC5; --muted:#9C9FA8;
  --line:#2A2C34; --line-strong:#3B3E47;
  --ember-text:#FF8A6B; --ember-tint:#2E1B16; --ember-line:rgba(255,138,107,.2);
  --ok:#5BC98A; --ok-tint:#15291D; --info:#9DB6EA; --info-tint:#1C2537; --warn:#F2D27A; --warn-tint:#2E2814;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.6);
  --shadow-pop:0 24px 48px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s var(--ease),color .3s var(--ease)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.06;text-wrap:balance}
p{text-wrap:pretty}
button{font:inherit;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:16px;top:-60px;background:var(--ink);color:var(--canvas);padding:10px 14px;border-radius:var(--r-btn);z-index:300}
.skip:focus{top:12px}
i[class^="ph"]{line-height:1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 15.5px/1 var(--body);padding:14px 20px;border-radius:var(--r-btn);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease),transform .38s var(--spring)}
.btn:active{transform:scale(.965);transition-duration:.18s,.18s,.18s,.09s;transition-timing-function:var(--ease)}
.btn-primary{background:var(--cta);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 1px 2px rgba(120,30,10,.25)}
.btn-primary:hover{background:var(--cta-hover);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -6px rgba(188,52,24,.55)}
.btn-primary i{font-size:17px;transition:transform .32s var(--spring)}
.btn-primary:hover i{transform:translateX(3px)}
.btn-primary:active i{transform:translateX(5px)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--line-strong)}
.link{position:relative;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ember-text);transition:transform .32s var(--spring)}
.link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.link:hover::after,.link:focus-visible::after{transform:scaleX(1);transform-origin:left}
.link i{transition:transform .32s var(--spring)}
.link:hover i{transform:translate(2px,-2px)}
.link:active{transform:scale(.97)}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:100;background:var(--canvas);border-bottom:1px solid transparent;transition:border-color .2s var(--ease),background .3s var(--ease)}
.site-header.lined{border-bottom-color:var(--line)}
.bar{height:var(--hdr);display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand svg{width:30px;height:30px}
.brand .stroke{stroke:var(--ink);transition:stroke .3s var(--ease)}
.brand .wm{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em}
.brand .wm b{color:var(--ember);font-weight:700}
.nav-primary{display:flex;align-items:center;gap:4px;flex:1}
.nav-primary > a,.nav-dd > button{position:relative;font-size:14.5px;font-weight:500;color:var(--ink-2);padding:8px 10px;border-radius:6px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:color .15s var(--ease),background .15s var(--ease)}
.nav-primary > a:hover,.nav-dd > button:hover,.nav-dd.open > button{color:var(--ink);background:var(--band)}
.nav-primary > a[aria-current="page"]{color:var(--ink)}
.nav-primary > a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:2px;background:var(--ember)}
.nav-dd{position:relative}
.nav-dd > button i{font-size:13px;transition:transform .3s var(--spring)}
.nav-dd.open > button i{transform:rotate(180deg)}
/* Dropdown: scales in from its trigger */
.dd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);padding:6px;transform-origin:top left;opacity:0;visibility:hidden;transform:translateY(-4px) scale(.97);transition:opacity .15s var(--exit),transform .15s var(--exit),visibility 0s linear .15s}
.nav-dd.open .dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity .22s var(--ease),transform .3s var(--spring),visibility 0s}
.dd-menu a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:8px;transition:background .15s var(--ease)}
.dd-menu a:hover{background:var(--band)}
.dd-menu i{font-size:22px;color:var(--ember);margin-top:2px}
.dd-menu b{display:block;font-size:14.5px;font-weight:600}
.dd-menu span{display:block;font-size:13px;color:var(--muted)}
.bar-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.bar .btn{padding:11px 16px;font-size:14.5px}
/* Language: one indicator slides between the options */
.lang{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:2px;border:1px solid var(--line);border-radius:var(--r-btn)}
.lang::before{content:"";position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);background:var(--ink);border-radius:6px;transition:transform .42s var(--spring),background .3s var(--ease)}
.lang[data-lang="en"]::before{transform:translateX(100%)}
.lang button{position:relative;z-index:1;background:none;border:0;font:600 12.5px var(--body);color:var(--muted);padding:6px 10px;min-width:34px;cursor:pointer;transition:color .25s var(--ease)}
.lang button[aria-pressed="true"]{color:var(--canvas)}
/* Theme toggle */
.icon-btn{position:relative;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r-btn);background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:transform .38s var(--spring),border-color .2s var(--ease)}
.icon-btn:hover{border-color:var(--line-strong)}
.icon-btn:active{transform:scale(.92);transition-duration:.09s}
.icon-btn i{position:absolute;font-size:19px;transition:opacity .25s var(--ease),transform .45s var(--spring),filter .25s var(--ease)}
.theme-btn .ph-sun{opacity:0;transform:rotate(-90deg) scale(.6);filter:blur(2px)}
html[data-theme="dark"] .theme-btn .ph-sun{opacity:1;transform:none;filter:none}
html[data-theme="dark"] .theme-btn .ph-moon{opacity:0;transform:rotate(90deg) scale(.6);filter:blur(2px)}
/* Menu button: two lines that turn into an X */
.menu-btn{display:none}
.menu-btn span{position:absolute;left:11px;right:11px;top:50%;height:1.5px;margin-top:-.75px;background:var(--ink);border-radius:2px;transition:transform .4s var(--spring)}
.menu-btn span:first-child{transform:translateY(-4px)}
.menu-btn span:last-child{transform:translateY(4px)}
.menu-btn[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
/* Mobile panel: drops below the header, inside the page flow (header is not sticky on small screens) */
.mobile-nav{display:none}

/* Desktop: header stays visible while scrolling. Phones/tablets: it scrolls away with the page. */
@media (min-width:1101px){
  .site-header{position:sticky;top:0}
  main [id]{scroll-margin-top:84px}
}
/* Product pages carry seven links; the header CTA steps aside until there is room */
@media (max-width:1259px){
  .nav-long .btn-header{display:none}
}
@media (max-width:1100px){
  .nav-primary{display:none}
  .menu-btn{display:inline-flex}
  .bar{gap:12px}
  .mobile-nav{display:block;position:absolute;top:100%;left:0;right:0;background:var(--canvas);border-bottom:1px solid var(--line);box-shadow:var(--shadow-pop);padding:6px 20px 20px;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .22s var(--exit),visibility 0s linear .22s}
  .mobile-nav.open{visibility:visible;clip-path:inset(0 0 -40px 0);transition:clip-path .42s var(--ease),visibility 0s}
  .mobile-nav a{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;font-size:16.5px;font-weight:500;border-bottom:1px solid var(--line);opacity:0;transform:translateY(-6px);filter:blur(3px);transition:opacity .12s var(--exit),transform .12s var(--exit),filter .12s var(--exit)}
  .mobile-nav.open a{opacity:1;transform:none;filter:none;transition:opacity .36s var(--ease),transform .42s var(--spring),filter .36s var(--ease);transition-delay:calc(60ms + var(--n,0) * 35ms)}
  .mobile-nav a[aria-current="page"]{color:var(--ember-text)}
  .mobile-nav a i{color:var(--muted);font-size:16px}
  .mobile-nav .sub{padding-left:16px;font-size:15px;color:var(--ink-2)}
  .mobile-nav .btn{display:flex;justify-content:center;gap:10px;margin-top:16px;width:100%;border-bottom:0;font-size:15.5px;padding:15px 20px}
  .mobile-nav .btn i{color:inherit}
}
@media (max-width:767px){
  .bar .btn-header{display:none}
  .lang button{padding:6px 8px;min-width:30px}
}

/* ---------- Generic sections ---------- */
section{position:relative}
.sec{padding:104px 0}
.sec-band{background:var(--band)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px}
.h2{font-size:clamp(32px,3.6vw,46px)}
.lead{font-size:18px;color:var(--ink-2);max-width:52ch}
.muted{color:var(--muted)}

/* ---------- Hero (split) ---------- */
.hero{padding:80px 0 96px}
.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(40px,4.4vw,56px);margin-bottom:22px}
.hero h1.hero-xl{font-size:clamp(40px,4.9vw,66px);letter-spacing:-.035em}
.hero .sub{font-size:19px;color:var(--ink-2);max-width:44ch;margin-bottom:34px;line-height:1.55}
.actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* ---------- Inner page hero ---------- */
.page-hero{padding:72px 0 40px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(36px,4.2vw,52px);margin-bottom:12px}
.page-hero p{font-size:18px;color:var(--ink-2);max-width:60ch}
.crumbs,.page-hero .crumbs{font-size:14px;color:var(--muted);margin-bottom:18px;display:flex;gap:8px;align-items:center}
.crumbs a:hover{color:var(--ink)}

/* ---------- Validator demo (home + product hero) ---------- */
.shell{background:rgba(120,100,70,.06);border:1px solid var(--line);border-radius:var(--r-shell);padding:7px}
html[data-theme="dark"] .shell{background:rgba(255,255,255,.03)}
.demo{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r-shell) - 7px);box-shadow:var(--shadow);padding:22px 22px 20px}
.demo-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.demo-head .key{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.demo-head .title{font-weight:600;font-size:15.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status{margin-left:auto;white-space:nowrap;flex-shrink:0;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--info-tint);color:var(--info);transition:background .3s var(--ease),color .3s var(--ease),opacity .2s var(--ease),filter .2s var(--ease),transform .4s var(--spring)}
.status.done{background:var(--ok-tint);color:var(--ok)}
.status.pop{transform:scale(1.08)}
.meter{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.track{flex:1;height:6px;border-radius:6px;background:var(--band);overflow:hidden}
.track span{display:block;height:100%;width:100%;background:var(--ember);border-radius:6px;transform-origin:left;transform:scaleX(.4);transition:transform .55s var(--spring),background .4s var(--ease)}
.demo.is-done .track span{background:var(--ok)}
.meter small{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.items{list-style:none}
.items li+li{border-top:1px solid var(--line)}
.items label{display:flex;align-items:center;gap:12px;padding:12px 4px;cursor:pointer;font-size:15px;border-radius:6px;transition:background .2s var(--ease)}
.items label:hover{background:color-mix(in oklch,var(--band) 60%,transparent)}
.items input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid var(--line-strong);border-radius:5px;flex-shrink:0;display:grid;place-content:center;cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),transform .35s var(--spring)}
.items label:active input[type=checkbox]:not(:disabled){transform:scale(.86);transition-duration:.15s,.15s,.08s}
.items input[type=checkbox]::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.6);opacity:0;margin-top:-2px;transition:transform .16s var(--ease),opacity .16s var(--ease)}
.items input[type=checkbox]:checked{background:var(--ember);border-color:var(--ember)}
.items input[type=checkbox]:checked::after{opacity:1;transform:rotate(45deg) scale(1)}
.items input[type=checkbox]:checked + span:not(.cl-main){color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.req{margin-left:auto;font-style:normal;font-size:12px;font-weight:600;color:var(--ember-text);background:var(--ember-tint);padding:3px 8px;border-radius:5px;white-space:nowrap}
.demo-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
.hint{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px;transition:color .3s var(--ease),opacity .2s var(--ease),filter .2s var(--ease)}
.hint i{font-size:17px}
.hint.ready{color:var(--ok)}
.move{white-space:nowrap;flex-shrink:0;font:600 14.5px var(--body);padding:11px 16px;border-radius:var(--r-btn);border:1px solid var(--ink);background:var(--ink);color:var(--canvas);cursor:pointer;transition:opacity .25s var(--ease),transform .4s var(--spring),box-shadow .25s var(--ease)}
.move:disabled{opacity:.32;cursor:not-allowed}
.move:not(:disabled):hover{box-shadow:0 6px 16px -8px rgba(21,22,27,.55)}
.move:not(:disabled):active{transform:scale(.96);transition-duration:.25s,.09s,.25s}
.move.unlocked{animation:unlock .5s var(--spring)}
@keyframes unlock{0%{transform:scale(.94)}100%{transform:scale(1)}}
.demo-note{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:13.5px;color:var(--muted);padding:0 4px}
.reset{background:none;border:0;font:600 13.5px var(--body);color:var(--ember-text);cursor:pointer}
.reset[hidden]{display:none}
.swap-out{opacity:0!important;filter:blur(3px)!important}
#count{transition:opacity .2s var(--ease),filter .2s var(--ease)}

/* ---------- Facts strip ---------- */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.facts li{display:flex;align-items:center;gap:12px;padding:24px 20px;font-size:15px;color:var(--ink-2)}
.facts li+li{border-left:1px solid var(--line)}
.facts i{font-size:24px;color:var(--ember)}

/* ---------- Bento (home) ---------- */
.bento{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.cell{border:1px solid var(--line);border-radius:var(--r-card);padding:32px;display:flex;flex-direction:column;gap:12px}
.cell > i,.cell > div > i{font-size:34px;color:var(--ember);margin-bottom:6px;display:block}
.cell h3{font-size:23px;letter-spacing:-.02em}
.cell p{color:var(--ink-2);font-size:16px;max-width:46ch}
.c-templates > div{display:grid;gap:12px;justify-items:start}
.c-templates{grid-row:span 2;background:var(--ember-tint);border-color:transparent;justify-content:space-between}
.sample{list-style:none;margin-top:18px;border-top:1px solid var(--ember-line)}
.sample li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--ember-line);font-size:15px}
.sample li span:last-child{color:var(--ember-text);font-size:13px;font-weight:600}
.c-rules{background:var(--surface)}
.rule-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;font-size:14px}
.rule-line code{font-family:var(--body);font-weight:600;background:var(--band);border:1px solid var(--line);padding:5px 9px;border-radius:6px}
.rule-line i{font-size:16px;color:var(--muted)}
.c-validator{background:var(--band);border-color:transparent}
.c-history{grid-column:1 / -1;flex-direction:row;align-items:center;gap:28px;background:var(--surface);background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:18px 18px}
.c-history .txt{display:grid;gap:8px;flex:1;background:var(--surface);padding:4px 8px 4px 0}

/* ---------- Feature list (product) ---------- */
.feature-list{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-top:1px solid var(--line)}
.feature-list article{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:28px 0;border-bottom:1px solid var(--line)}
.feature-list i{font-size:28px;color:var(--ember);margin-top:2px}
.feature-list h3{font-size:20px;letter-spacing:-.015em;margin-bottom:6px}
.feature-list p{color:var(--ink-2);font-size:16px}

/* ---------- Statement + points (Forge) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.points{list-style:none;border-top:1px solid var(--line-strong)}
.points li{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:22px 0;border-bottom:1px solid var(--line-strong)}
.points i{font-size:26px;color:var(--ember);margin-top:2px}
.points b{display:block;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;margin-bottom:4px}
.points span{color:var(--ink-2);font-size:16px}
.checks{list-style:none;display:grid;gap:12px;margin-top:28px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink-2)}
.checks i{font-size:20px;color:var(--ember);margin-top:2px}

/* ---------- Pricing row (home) ---------- */
.price-row{display:grid;grid-template-columns:auto 1fr auto;gap:56px;align-items:center;border:1px solid var(--line);border-radius:var(--r-card);padding:40px 44px;background:var(--surface)}
.amount{font-family:var(--display);font-weight:600;font-size:76px;letter-spacing:-.04em;line-height:.9}
.amount small{display:block;font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:10px}
.price-copy h2{font-size:28px;margin-bottom:8px}
.price-copy p{color:var(--ink-2);font-size:16px;max-width:56ch}

/* ---------- Editions (product) ---------- */
.editions{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.edition{border:1px solid var(--line);border-radius:var(--r-card);padding:30px;background:var(--surface)}
.edition.adv{background:var(--ember-tint);border-color:transparent}
.edition h3{font-size:22px;margin-bottom:4px}
.edition .tag{font-size:14px;color:var(--muted);margin-bottom:18px}
.edition ul{list-style:none;display:grid;gap:10px}
.edition li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.edition li i{color:var(--ember);font-size:18px;margin-top:2px}

/* ---------- Calculator ---------- */
.calc{display:grid;grid-template-columns:1.1fr .9fr;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow:hidden}
.calc-in{padding:36px 40px;border-right:1px solid var(--line)}
.calc-out{padding:36px 40px;background:var(--surface-2);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.field{display:grid;gap:10px;margin-bottom:28px}
.field > span{font-size:14px;font-weight:600}
.users-row{display:flex;align-items:center;gap:16px}
.users-row input[type=number]{width:120px;padding:11px 12px;border:1px solid var(--line-strong);border-radius:var(--r-btn);background:var(--canvas);color:var(--ink);font:600 18px var(--body);text-align:center;font-variant-numeric:tabular-nums;transition:border-color .15s var(--ease)}
.users-row input[type=number]:focus{outline:none;border-color:var(--ember)}
.range{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:linear-gradient(to right,var(--ember) var(--pct,1%),var(--band) var(--pct,1%));cursor:pointer}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--surface);border:2px solid var(--ember);box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .3s var(--spring)}
.range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--surface);border:2px solid var(--ember)}
.range:active::-webkit-slider-thumb{transform:scale(1.15)}
.seg{justify-self:start;min-width:240px;position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--canvas)}
.seg::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:7px;background:var(--ink);transition:transform .42s var(--spring)}
.seg[data-v="annual"]::before{transform:translateX(100%)}
.seg button{position:relative;z-index:1;border:0;background:none;padding:9px 18px;font-weight:600;font-size:14.5px;color:var(--muted);cursor:pointer;transition:color .25s var(--ease)}
.seg button[aria-pressed="true"]{color:var(--canvas)}
.total{font-family:var(--display);font-weight:600;font-size:64px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.total-unit{font-size:15px;color:var(--muted);margin-top:8px}
.breakdown{display:grid;gap:8px;font-size:14.5px;color:var(--ink-2)}
.breakdown b{color:var(--ink)}
.calc-note{font-size:13px;color:var(--muted);line-height:1.55}
.calc-note:empty{display:none}
.tiers{margin-top:24px}
.tiers summary{cursor:pointer;font-weight:600;color:var(--ember-text);list-style:none;display:inline-flex;align-items:center;gap:6px}
.tiers summary::-webkit-details-marker{display:none}
.tiers summary i{transition:transform .3s var(--spring)}
.tiers[open] summary i{transform:rotate(180deg)}
.tiers table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px;font-variant-numeric:tabular-nums}
.tiers th,.tiers td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line)}
.tiers th{font-weight:600;color:var(--muted);font-size:13px}
.tiers td:last-child,.tiers th:last-child{text-align:right}
.tiers tr.on td{color:var(--ember-text);font-weight:600}

/* ---------- Closing CTA ---------- */
.close{padding:40px 0 112px}
.close h2{font-size:clamp(34px,4.2vw,54px);max-width:18ch;margin-bottom:28px}
.next{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:15.5px;max-width:70ch}

/* ---------- Prose (docs, legal, support) ---------- */
.page-body{padding:56px 0 104px}
.prose{max-width:740px}
.prose > *+*{margin-top:16px}
.prose h2{font-size:24px;letter-spacing:-.02em;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.prose h2:first-child,.prose .last-updated + p + h2{margin-top:32px}
.prose h3{font-size:19px;margin-top:28px}
.prose p,.prose li{color:var(--ink-2);font-size:16.5px;line-height:1.75}
.prose ul{padding-left:22px}
.prose li+li{margin-top:6px}
.prose li::marker{color:var(--ember)}
.prose strong{color:var(--ink)}
.prose a{color:var(--ember-text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.last-updated{display:inline-flex;align-items:center;gap:6px;background:var(--band);color:var(--muted);font-size:13px;font-weight:500;padding:5px 12px;border-radius:999px}
.sla-table{width:100%;border-collapse:collapse;margin:20px 0 8px;font-size:15px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sla-table th{background:var(--band);color:var(--ink);font-weight:600;text-align:left;padding:12px 16px;font-size:14px}
.sla-table td{padding:12px 16px;border-top:1px solid var(--line);color:var(--ink-2);vertical-align:top;background:var(--surface)}
.contact-card{border:1px solid var(--line);border-radius:var(--r-card);padding:28px;background:var(--surface);max-width:560px}
.contact-card h3{font-size:19px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.contact-row{display:flex;gap:12px;font-size:15.5px;color:var(--ink-2);margin-top:10px}
.contact-label{font-weight:600;color:var(--ink);min-width:90px}
.portal-card{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:740px;margin-bottom:40px;padding:26px 28px;border:1px solid var(--line);border-left:3px solid var(--ember);border-radius:var(--r-card);background:var(--surface)}
.portal-card h2{font-size:20px;margin-bottom:6px}
.portal-card > div{flex:1 1 300px}
.portal-card p{color:var(--ink-2);font-size:15.5px;max-width:48ch}
.toc{position:sticky;top:96px;font-size:14px}
.toc b{display:block;margin-bottom:10px;font-size:13px;color:var(--muted)}
.toc a{display:block;padding:5px 0 5px 12px;border-left:2px solid var(--line);color:var(--ink-2);transition:border-color .2s var(--ease),color .2s var(--ease)}
.toc a:hover{color:var(--ink);border-left-color:var(--ember)}
.doc-grid{display:grid;grid-template-columns:200px 1fr;gap:64px;align-items:start}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:56px 0 40px;font-size:15px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.foot p{color:var(--muted);margin-top:14px;max-width:34ch}
.foot h4{font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot ul a{color:var(--ink-2);transition:color .15s var(--ease)}
.foot ul a:hover{color:var(--ember-text)}
.legal{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13.5px}

/* ---------- Home: hero stage (company mark + floating cards) ----------
   Drawn at 560x460 and scaled with zoom on smaller screens.
   Slow sine float on a 6-9s loop; each piece has its own period so they never move in step.
   The shadow under the alpha shrinks and fades as it rises, so the mark reads as lifted, not slid. */
.stage{width:100%;max-width:560px;justify-self:end}
.stage-inner{position:relative;width:560px;height:460px}
.stage .disc{position:absolute;right:0;top:18px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#FFF6F2 0%,var(--ember-tint) 58%,#F9DDD2 100%)}
html[data-theme="dark"] .stage .disc{background:radial-gradient(circle at 34% 28%,#3A231C 0%,var(--ember-tint) 60%,#24150F 100%)}
.alpha-wrap{position:absolute;right:38px;top:58px;width:290px;height:290px;animation:bob 7s var(--sine) infinite}
.alpha{width:100%;height:100%;filter:drop-shadow(0 22px 18px rgba(120,45,20,.20)) drop-shadow(0 4px 4px rgba(120,45,20,.12))}
html[data-theme="dark"] .alpha{filter:drop-shadow(0 22px 20px rgba(0,0,0,.55))}
.alpha .stroke{stroke:var(--ink)}
.alpha-shadow{position:absolute;right:92px;top:356px;width:190px;height:22px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(90,40,20,.30),rgba(90,40,20,0) 70%);animation:bob-shadow 7s var(--sine) infinite}
html[data-theme="dark"] .alpha-shadow{background:radial-gradient(ellipse at center,rgba(0,0,0,.6),rgba(0,0,0,0) 70%)}
.stage .floor{position:absolute;left:8%;right:2%;bottom:8px;height:34px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(60,45,30,.14),rgba(60,45,30,0) 72%)}
html[data-theme="dark"] .stage .floor{background:radial-gradient(ellipse at center,rgba(0,0,0,.5),rgba(0,0,0,0) 72%)}
.fl{position:absolute}
.fl-list{left:0;top:110px;width:252px;animation:bob-sm 8.5s var(--sine) infinite -2s}
.fl-block{left:172px;top:0;width:236px;animation:bob-sm 6.5s var(--sine) infinite -4s}
.fl-rule{right:18px;bottom:30px;width:246px;animation:bob-sm 9s var(--sine) infinite -1s}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(60,40,20,.06),0 18px 40px -8px rgba(60,40,20,.18)}
html[data-theme="dark"] .fcard{box-shadow:0 18px 40px -8px rgba(0,0,0,.6)}
.c-list{padding:18px 18px 10px}
.cl-t{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14.5px}
.cl-t em{font-style:normal;font-size:12px;font-weight:600;color:var(--info);background:var(--info-tint);border-radius:6px;padding:2px 8px}
.cl-bar{height:6px;border-radius:6px;background:var(--band);margin:10px 0 8px;overflow:hidden}
.cl-bar i{display:block;height:100%;width:60%;background:var(--ember);border-radius:6px}
.cl-li{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:7px 0;border-top:1px solid var(--line)}
.cl-li .cb{width:17px;height:17px;border-radius:5px;border:1.6px solid var(--line-strong);flex-shrink:0;position:relative}
.cl-li.done .cb{background:var(--ember);border-color:var(--ember)}
.cl-li.done .cb::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cl-li.done span:last-child{color:var(--muted);text-decoration:line-through}
.c-note{display:flex;gap:12px;align-items:center;padding:14px 16px}
.c-note b{display:block;font-size:14px;font-weight:600}
.c-note small{display:block;font-size:12.5px;color:var(--muted)}
.c-note .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:19px;flex-shrink:0}
.c-note .ic.bad{background:var(--ember-tint);color:var(--ember-text)}
.c-note .ic.good{background:var(--ok-tint);color:var(--ok)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes bob-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.8);opacity:.5}}
@keyframes bob-sm{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:1240px){.stage-inner{zoom:.9}}
@media (max-width:1024px){.stage{justify-self:center;max-width:560px}.stage-inner{zoom:1}}
/* Phones: a tighter 470px-wide composition, so it can be shown larger */
@media (max-width:640px){
  .stage-inner{width:470px;height:430px;zoom:.95}
  .stage .disc{width:310px;height:310px;top:34px}
  .alpha-wrap{right:28px;top:66px;width:250px;height:250px}
  .alpha-shadow{right:72px;top:328px;width:160px}
  .fl-list{top:118px;width:232px}
  .fl-block{left:118px;width:226px}
  .fl-rule{right:0;bottom:20px;width:232px}
}
@media (max-width:480px){.stage-inner{zoom:.8}}
@media (max-width:420px){.stage-inner{zoom:.72}}

/* ---------- Home: app catalogue ---------- */
.apps{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:stretch}
.app-card{display:flex;flex-direction:column;gap:18px;border:1px solid var(--line);border-radius:var(--r-card);padding:32px;background:var(--surface)}
.app-card.next-app{background:transparent;border:1.5px dashed var(--line-strong)}
.app-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.app-top h3{font-size:24px;letter-spacing:-.02em}
.app-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--ink);color:var(--canvas);font-size:24px}
.app-card.next-app .app-ic{background:var(--band);color:var(--muted)}
.pill{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--band);color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--ok-tint);color:var(--ok)}
.app-desc{color:var(--ink-2);font-size:16.5px;max-width:52ch}
.app-points{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px}
.app-points li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-2)}
.app-points i{color:var(--ember);font-size:17px}
.app-foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.app-card.next-app .app-foot{border-top-style:dashed;border-top-color:var(--line-strong)}
.app-price{font-family:var(--display);font-weight:600;font-size:18px}
.app-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* ---------- Home: help links ---------- */
.help-links{display:grid;border-top:1px solid var(--line)}
.help-links a{display:grid;grid-template-columns:28px 1fr auto;gap:14px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line);transition:background .2s var(--ease)}
.help-links a:hover{background:var(--band)}
.help-links a > i:first-child{font-size:24px;color:var(--ember)}
.help-links a > i:last-child{font-size:18px;color:var(--muted);transition:transform .32s var(--spring)}
.help-links a:hover > i:last-child{transform:translateX(3px)}
.help-links b{display:block;font-family:var(--display);font-weight:600;font-size:18px}
.help-links small{display:block;font-size:14.5px;color:var(--muted)}

/* ---------- Full demo page (Jira issue replica) ---------- */
.legend{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 40px}
.legend li{display:flex;gap:12px;align-items:baseline;padding:18px 18px;font-size:15px;color:var(--ink-2)}
.legend li+li{border-left:1px solid var(--line)}
.legend .n{font-family:var(--display);font-weight:600;color:var(--ember-text);min-width:14px}
.issue{max-width:780px;margin:0 auto}
.issue .demo{padding:0;overflow:hidden}
.issue-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.issue-key{display:flex;align-items:center;gap:10px;min-width:0}
.issue-key .key{font-size:13px;font-weight:600;color:var(--muted)}
.issue-key strong{font-size:15.5px;font-weight:600}
.issue-act{display:flex;align-items:center;gap:10px}
.issue-body{padding:18px 22px 22px}
.msg{display:flex;gap:10px;align-items:center;font-size:14.5px;border-radius:8px;padding:11px 14px;margin-bottom:16px;transition:opacity .2s var(--ease),filter .2s var(--ease)}
.msg[hidden]{display:none}
.msg i{font-size:18px}
.msg.error{background:var(--ember-tint);color:var(--ember-text)}
.msg.ok{background:var(--ok-tint);color:var(--ok)}
.cl-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.cl-head strong{font-size:15px;font-weight:600}
.items .cl-sep{font-size:12.5px;font-weight:600;color:var(--muted);padding:16px 4px 6px}
.cl-row{display:flex;align-items:center;gap:10px}
.cl-row > label{flex:1;min-width:0}
.cl-main{flex:1;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;min-width:0}
.cl-row.done .txt{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.cl-row.locked input[type=checkbox]{opacity:.45;cursor:not-allowed}
.cl-row.locked label{cursor:not-allowed}
.badge{font-style:normal;font-size:12px;font-weight:600;padding:3px 8px;border-radius:5px;white-space:nowrap}
.badge.req{color:var(--ember-text);background:var(--ember-tint)}
.badge.sla{background:var(--band);color:var(--muted);font-weight:500}
.badge.lock{background:var(--warn-tint);color:var(--warn);font-weight:500;display:inline-flex;gap:5px;align-items:center}
.worklog{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);flex-shrink:0}
.worklog input{width:52px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:6px;font:500 14px var(--body);padding:5px 4px;text-align:center;transition:border-color .15s var(--ease)}
.worklog input:focus{outline:none;border-color:var(--ember)}
.summary{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.summary strong{color:var(--ink)}
.summary .pos{color:var(--ok)}
.summary .neg{color:var(--ember-text)}
.footnote{max-width:780px;margin:18px auto 0;font-size:14px;color:var(--muted)}

/* ---------- Eventos ---------- */
.soon{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ember-text);background:var(--ember-tint);padding:5px 12px;border-radius:6px;margin-bottom:22px}
.plan-price{font-family:var(--display);font-weight:600;font-size:44px;letter-spacing:-.03em;line-height:1;margin:14px 0 6px}
.plan-price small{font-family:var(--body);font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.edition .btn{margin-top:24px}
.edition .flag{float:right;font-size:12.5px;font-weight:600;color:var(--ember-text);background:var(--surface);padding:4px 10px;border-radius:6px}

/* ---------- Page-load sequence (once) ---------- */
.enter{opacity:0;transform:translateY(10px);filter:blur(4px)}
.loaded .enter{opacity:1;transform:none;filter:none;transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
/* Language change: page text fades through a short blur */
html.lang-swap [data-i18n]{transition:opacity .16s var(--ease),filter .16s var(--ease)!important}
html.lang-out [data-i18n]{opacity:0;filter:blur(3px)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-grid,.split{grid-template-columns:minmax(0,1fr);gap:44px}
  .facts ul{grid-template-columns:1fr 1fr}
  .facts li:nth-child(3){border-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--line)}
  .price-row{grid-template-columns:1fr;gap:24px}
  .calc{grid-template-columns:1fr}
  .calc-in{border-right:0;border-bottom:1px solid var(--line)}
  .doc-grid{grid-template-columns:1fr;gap:0}
  .apps{grid-template-columns:1fr}
  .toc{display:none}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .wrap{padding:0 18px}
  .sec{padding:72px 0}
  .hero{padding:40px 0 64px}
  .hero h1{font-size:33px;letter-spacing:-.03em}
  .hero .sub{font-size:17.5px}
  .demo{padding:18px 16px 16px}
  .demo-foot{flex-wrap:wrap;gap:12px}
  .move{margin-left:auto}
  .demo-note{flex-wrap:wrap}
  .facts ul{grid-template-columns:1fr}
  .facts li{border-left:0!important;padding:16px 4px}
  .facts li+li{border-top:1px solid var(--line)}
  .sec-head{flex-direction:column;align-items:flex-start}
  .bento,.feature-list,.editions{grid-template-columns:1fr}
  .c-templates{grid-row:auto}
  .c-history{flex-direction:column;align-items:flex-start}
  .cell{padding:24px}
  .price-row{padding:28px 24px}
  .amount{font-size:60px}
  .calc-in,.calc-out{padding:26px 22px}
  .users-row{flex-wrap:wrap}
  .users-row input[type=number]{width:100%}
  .total{font-size:52px}
  .close{padding:24px 0 80px}
  .page-hero{padding:44px 0 28px}
  .sla-table{display:block;overflow-x:auto}
  .legend{grid-template-columns:1fr 1fr}
  .legend li:nth-child(3){border-left:0}
  .legend li:nth-child(n+3){border-top:1px solid var(--line)}
  .issue-top,.issue-body{padding-left:16px;padding-right:16px}
  .cl-row{flex-wrap:wrap;gap:0 10px;padding-bottom:6px}
  .worklog{margin-left:36px}
  .plan-price{font-size:38px}
  .foot{grid-template-columns:1fr}
  .app-card{padding:24px}
}

/* Reduced motion is respected. html.force-motion is a preview-only override (?motion=1). */
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) *,html:not(.force-motion) *::before,html:not(.force-motion) *::after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  html:not(.force-motion) .enter{opacity:1;transform:none;filter:none}
  /* Hero float: kept, but at half the travel and a slower pace instead of being removed */
  html:not(.force-motion) .stage .alpha-wrap{animation:bob-soft 11s var(--sine) infinite!important}
  html:not(.force-motion) .stage .alpha-shadow{animation:bob-shadow-soft 11s var(--sine) infinite!important}
  html:not(.force-motion) .stage .fl-list{animation:bob-sm-soft 12s var(--sine) -3s infinite!important}
  html:not(.force-motion) .stage .fl-block{animation:bob-sm-soft 10s var(--sine) -6s infinite!important}
  html:not(.force-motion) .stage .fl-rule{animation:bob-sm-soft 13s var(--sine) -1s infinite!important}
}
@keyframes bob-soft{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes bob-shadow-soft{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.9);opacity:.75}}
@keyframes bob-sm-soft{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}