/* Fonts served from this site (SIL Open Font License), latin and latin-ext only. */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/onest-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/onest-400-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;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/onest-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/onest-400-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;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/onest-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/onest-400-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;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/onest-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/onest-400-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;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/spline-sans-mono-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/spline-sans-mono-400-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;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/spline-sans-mono-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/spline-sans-mono-400-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;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/young-serif-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/young-serif-400-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;
}

/* Brand site: one deliberate light world (the app is light too), every colour painted explicitly. */
:root{
  --pine:#0B3D2E; --pine-2:#0F4A36; --leaf:#1C6B4F; --leaf-hover:#175A42;
  --saffron:#F2A30D; --saffron-ink:#8A5A00; --saffron-soft:#FDF3E0;
  --paper:#FAFCFA; --mist:#EEF5F1; --card:#FFFFFF;
  --ink:#1A1F1D; --sage:#5C6B64; --line:#D6E1DA;
  --grad:linear-gradient(120deg,#0B3D2E 0%,#1C6B4F 50%,#2E8A66 80%,#F2A30D 150%);
  --display:"Young Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:14px; --r-lg:22px; --wrap:1180px; --tilt:9deg;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
/* Elements toggled with the hidden attribute stay hidden even when a component sets its own display. */
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--pine);text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(40px,5.2vw,68px);line-height:1.02}
h2{font-size:clamp(32px,3.6vw,48px);line-height:1.08}
h3{font-size:22px;line-height:1.2}
p{margin:0}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.label{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--leaf)}
.lead{font-size:19px;color:var(--sage);max-width:60ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font:600 16px/1 var(--body);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.btn:focus-visible,.tab:focus-visible,summary:focus-visible{outline:3px solid var(--saffron);outline-offset:3px}
.btn-primary{background:var(--leaf);color:#fff}
.btn-primary:hover{background:var(--leaf-hover)}
.btn-ghost{border-color:var(--line);color:var(--pine);background:var(--card)}
.btn-ghost:hover{border-color:var(--leaf)}
section{padding:96px 0}
.head{display:grid;gap:14px;margin-bottom:44px;max-width:720px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:28px;height:72px}
.site-head img{height:34px;width:auto}
.site-nav{display:flex;gap:22px;margin-left:12px}
.site-nav a{text-decoration:none;font-weight:500;color:var(--sage);font-size:15px}
.site-nav a:hover{color:var(--pine)}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
/* Language menu: the flag and code open a list of this page in the other languages. */
.langmenu{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--pine);font:500 13px/1 var(--mono);cursor:pointer}
.lang-btn::after{content:"";width:6px;height:6px;margin:0 2px 0 1px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{border-color:var(--leaf)}
.site-head .langmenu img{width:20px;height:14px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(26,31,29,.14)}
.lang-list{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:184px;display:grid;gap:2px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -18px rgba(11,61,46,.35)}
.lang-list a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:14.5px}
.lang-list a:hover{background:var(--mist);color:var(--pine)}
.lang-list a[aria-current="true"]{font-weight:600;color:var(--pine)}
.lang-list a[aria-current="true"]::after{content:"✓";margin-left:auto;color:var(--leaf)}
.lang-btn:focus-visible,.lang-list a:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}
.foot-langs{display:flex;gap:6px}
.foot-langs a[aria-current="true"]{color:#fff}
.head-actions .btn{min-height:42px;padding:0 18px;font-size:15px}
.link-login{font-weight:600;color:var(--pine);text-decoration:none;font-size:15px}

/* ---------- hero ---------- */
.hero{padding:64px 0 88px;background:radial-gradient(900px 420px at 88% 0%,rgba(242,163,13,.12),transparent 60%),var(--paper)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.hero-copy{display:grid;gap:22px}
.hero h1 em{font-style:normal;color:var(--leaf);background:linear-gradient(transparent 72%,rgba(242,163,13,.35) 72%)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero-points{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:8px;color:var(--sage);font-size:15px}
.hero-points li{display:flex;gap:10px;align-items:center}
.hero-points svg{flex:0 0 18px;color:var(--leaf)}

/* The hero before/after is just an interactive photo. */
.hero-ba{border-radius:var(--r-lg);box-shadow:0 30px 70px -30px rgba(11,61,46,.45);overflow:hidden;isolation:isolate}
.ba{position:relative;aspect-ratio:1280/859;overflow:hidden;cursor:ew-resize;touch-action:pan-y;--split:52%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Only the after photo follows the seam; the "Po" label shares the class name and must not be clipped. */
.ba img.after{clip-path:polygon(calc(var(--split) + 6%) 0,100% 0,100% 100%,calc(var(--split) - 6%) 100%)}
.seam{position:absolute;z-index:1;top:-10%;bottom:-10%;left:var(--split);width:3px;background:#fff;transform:translateX(-50%) rotate(var(--tilt));box-shadow:0 0 0 1px rgba(11,61,46,.15);pointer-events:none}
.knob{position:absolute;z-index:2;top:50%;left:var(--split);width:46px;height:46px;border-radius:50%;background:var(--saffron);color:var(--pine);display:grid;place-items:center;transform:translate(-50%,-50%);box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none}
.ba input{position:absolute;z-index:4;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba input:focus-visible ~ .knob{outline:3px solid #fff;outline-offset:3px}
/* Fixed-size labels above the seam and knob: they never shrink or get covered while dragging. */
.chip{position:absolute;z-index:3;top:14px;width:max-content;white-space:nowrap;font:600 12px/1 var(--body);padding:8px 11px;border-radius:999px;letter-spacing:.02em;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.chip.before{left:14px;right:auto;background:rgba(255,255,255,.94);color:var(--pine)}
.chip.after{right:14px;left:auto;background:var(--pine);color:#fff}
.task-chip{position:absolute;z-index:3;left:14px;bottom:14px;width:max-content;background:var(--card);color:var(--pine);border-radius:12px;padding:10px 12px;display:flex;gap:10px;align-items:center;font-size:14px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.15);pointer-events:none}
.task-chip small{display:block;font:400 12px/1.3 var(--body);color:var(--sage)}
.task-chip i{width:30px;height:30px;border-radius:9px;background:var(--mist);display:grid;place-items:center;color:var(--leaf);font-style:normal}

/* ---------- facts strip ---------- */
.facts{padding:0;border-block:1px solid var(--line);background:var(--card)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:26px 22px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0}
.fact b{display:block;font:400 28px/1.1 var(--display);color:var(--pine);overflow-wrap:anywhere;hyphens:auto}
.fact span{font-size:14px;color:var(--sage)}

/* ---------- transformations ---------- */
.proměny{background:var(--mist)}
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--card);border:1px solid var(--line);margin-bottom:28px}
.tab{border:0;background:transparent;border-radius:999px;padding:10px 18px;font:600 15px/1 var(--body);color:var(--sage);cursor:pointer}
.tab[aria-selected="true"]{background:var(--pine);color:#fff}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tile{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.tile:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(11,61,46,.45)}
.tile .ba{cursor:default;--split:50%}
.tile .seam{width:2px}
.tile-body{padding:14px 16px 16px;display:grid;gap:4px}
.tile-body h3{font-size:19px}
.tile-body p{font-size:14px;color:var(--sage)}
.tile-body .opts{font:400 12px/1.4 var(--mono);color:var(--leaf);margin-top:4px}
.tiles[hidden]{display:none}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:step}
.step{display:grid;gap:12px;align-content:start;padding-top:22px;border-top:2px solid var(--pine)}
.step .n{font:500 13px/1 var(--mono);color:var(--leaf);letter-spacing:.1em}
.step ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:15px;color:var(--sage)}
.step li::before{content:"— ";color:var(--leaf)}
.chain{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.chain figure{margin:0;position:relative}
.chain img{aspect-ratio:4/3;object-fit:cover;width:100%}
.chain figcaption{padding:12px 14px;font-size:14px;font-weight:600;color:var(--pine);border-left:1px solid var(--line)}
.chain figure:first-child figcaption{border-left:0}
.chain figcaption small{display:block;font:400 12px/1.3 var(--mono);color:var(--sage);margin-top:2px}
/* The last step as a short clip: a slow push-in over the finished room, with a progress bar, like a video. */
.chain-motion{position:relative;overflow:hidden}
.chain-motion img{transform-origin:38% 62%;animation:chain-push 8s ease-in-out infinite}
.chain-badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(11,61,46,.85);color:#fff;font:500 11px/1 var(--mono);letter-spacing:.04em}
.chain-bar{position:absolute;left:12px;right:12px;bottom:12px;height:3px;border-radius:3px;background:rgba(255,255,255,.4);overflow:hidden}
.chain-bar::after{content:"";position:absolute;inset:0;background:var(--saffron);transform-origin:left;animation:chain-progress 8s linear infinite}
@keyframes chain-push{from{transform:scale(1)}to{transform:scale(1.16) translate(-2%,-1.5%)}}
@keyframes chain-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- video (the one dark band) ---------- */
.video{background:var(--pine);color:#E6F0EA}
.video h2{color:#fff}
.video .label{color:var(--saffron)}
.video .lead{color:#B9CFC4}
.video .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.video-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.video-points li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:16px}
.video-points svg{color:var(--saffron);margin-top:3px}
.formats{display:grid;gap:10px;margin-top:26px}
.chips-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chips-row small{width:64px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8FB3A2}
.chips-row span{font:500 13px/1 var(--mono);border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:9px 11px;color:#fff;white-space:nowrap}
.devices{position:relative;height:520px}
.phone{position:absolute;right:8%;top:0;width:250px;aspect-ratio:9/19;border-radius:34px;border:10px solid #0A2A20;background:#0A2A20;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.phone img{width:100%;height:100%;object-fit:cover}
.phone .reel-text{position:absolute;left:14px;right:14px;bottom:70px;color:#fff;font:400 22px/1.15 var(--display);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.phone .reel-text small{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.06em;margin-top:6px}
.progress{position:absolute;left:14px;right:14px;top:14px;display:flex;gap:4px}
.progress i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.progress i:first-child,.progress i:nth-child(2){background:#fff}
.landscape{position:absolute;left:0;bottom:24px;width:320px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:6px solid #0A2A20;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.landscape img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;inset:auto auto 12px 12px;background:rgba(255,255,255,.92);color:var(--pine);border-radius:999px;padding:6px 10px;font:600 12px/1 var(--body)}

/* ---------- personas ---------- */
/* The three cards share rows (label, title, text, list), so titles and lists line up
   whatever the wording an editor types in the administration. */
.personas{display:grid;grid-template-columns:repeat(3,1fr);column-gap:22px;row-gap:0}
.persona{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;overflow:hidden;display:grid;gap:12px;align-content:start;grid-row:span 5;grid-template-rows:subgrid}
/* A before/after of the edit each audience needs most, edge to edge on top of the card. */
.persona-media{margin:-26px -26px 8px;aspect-ratio:16/10;cursor:default;--split:50%}
.persona-media img{transition:transform .6s ease}
.persona:hover .persona-media img{transform:scale(1.04)}
.persona-tag{position:absolute;z-index:3;left:14px;bottom:14px;background:rgba(255,255,255,.94);color:var(--pine);font:600 12px/1 var(--body);padding:8px 11px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.persona .label{color:var(--saffron-ink)}
.persona ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.persona li{display:grid;grid-template-columns:18px 1fr;gap:8px;color:var(--ink)}
.persona li svg{color:var(--leaf);margin-top:4px}
/* A call to action, not a footnote: saffron-tinted band, clear border, filled button. */
.team-note{margin-top:22px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;background:var(--saffron-soft);border:1.5px solid rgba(242,163,13,.55);border-radius:var(--r);padding:22px 26px;color:var(--ink)}
.team-note b{display:block;font-family:var(--display);font-weight:400;font-size:24px;line-height:1.2;color:var(--pine)}
.team-note p{margin-top:4px;font-size:16px;color:var(--ink)}
/* Anchored sections clear the sticky header. */
section[id]{scroll-margin-top:84px}

/* ---------- compare ---------- */
.compare{background:var(--mist)}
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
table{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
th,td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sage);background:var(--paper)}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:600;color:var(--pine);width:28%}
td:nth-child(2){color:var(--sage)}
td:nth-child(3){color:var(--ink)}
td:nth-child(3) b{color:var(--leaf)}

/* ---------- pricing ---------- */
.price-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px;margin-bottom:34px}
.period{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--mist);border:1px solid var(--line)}
.period button{border:0;background:transparent;border-radius:999px;padding:9px 16px;font:600 14px/1 var(--body);color:var(--sage);cursor:pointer}
.period button[aria-pressed="true"]{background:var(--card);color:var(--pine);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.period em{font-style:normal;font:500 11px/1 var(--mono);background:var(--saffron);color:var(--pine);border-radius:6px;padding:4px 6px;margin-left:6px}
/* Equal cards: every row as tall as its tallest card, buttons pinned to the bottom edge. */
.plans{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:16px;align-items:stretch}
.plan{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;display:flex;flex-direction:column;gap:14px}
.plan-for{margin:-8px 0 2px;font-size:14px;color:var(--sage)}
.plan .btn{margin-top:auto}
/* The featured border is drawn as a shadow, so Profi keeps exactly the same size as the others. */
.plan.featured{border-color:var(--leaf);background:linear-gradient(180deg,#EAF5EF 0%,var(--card) 42%);box-shadow:0 0 0 1px var(--leaf),0 26px 56px -28px rgba(28,107,79,.65);transform:translateY(-10px)}
.plan .tag{position:absolute;top:-11px;left:18px;background:var(--saffron);color:var(--pine);font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-radius:6px}
.plan h3{font-size:22px}
.amount{font:400 34px/1 var(--display);color:var(--pine);font-variant-numeric:tabular-nums}
.amount small{font:500 13px/1 var(--body);color:var(--sage)}
.credits{font:500 13px/1.3 var(--mono);color:var(--leaf)}
.plan .credits{padding-bottom:16px;border-bottom:1px solid var(--line)}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:14px;color:var(--ink)}
.plan li{display:grid;grid-template-columns:14px 1fr;gap:8px}
.plan li::before{content:"";width:10px;height:5px;border-left:2px solid var(--leaf);border-bottom:2px solid var(--leaf);transform:rotate(-45deg);margin-top:7px}
.plan li.off{color:var(--sage)}
.plan li.off::before{width:9px;height:0;border-left:0;border-bottom:2px solid var(--line);transform:none;margin-top:10px}
.plan .btn{min-height:42px;font-size:14px;width:100%}
/* The office plan stands apart: a slim dark band under the four plans, what it includes as a row of chips. */
.plan-office{position:relative;overflow:hidden;margin-top:22px;display:grid;gap:18px;padding:24px 30px;border-radius:var(--r-lg);background:var(--pine);color:#D5E7DD}
.plan-office::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 180% at 100% 0%,rgba(242,163,13,.22) 0%,rgba(242,163,13,0) 45%),radial-gradient(70% 160% at 0% 100%,rgba(46,138,102,.45) 0%,rgba(46,138,102,0) 60%)}
.plan-office>*{position:relative}
.office-head{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:14px 40px}
.office-kicker{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--saffron)}
.plan-office h3{margin-top:8px;font-size:30px;color:#fff}
.plan-office .amount{font-size:34px;color:#fff}
.plan-office .amount small{color:#B9CFC4}
.plan-office .credits{display:block;margin-top:8px;color:var(--saffron)}
.office-note{margin:0;max-width:40ch;font-size:14.5px;line-height:1.5}
.plan-office .btn{min-height:46px;padding:0 26px;background:var(--saffron);color:var(--pine);white-space:nowrap}
.plan-office .btn:hover{background:#F7B83A}
.office-list{margin:0;padding:18px 0 0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid rgba(255,255,255,.14)}
.office-list li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:13.5px;line-height:1.2;color:#fff}
.office-list li::before{content:"";flex:0 0 auto;width:9px;height:4px;border-left:2px solid var(--saffron);border-bottom:2px solid var(--saffron);transform:translateY(-2px) rotate(-45deg)}
.price-notes{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--sage)}
.price-notes span{font-family:var(--mono);font-size:12.5px}

/* ---------- blog ---------- */
.blog{background:var(--mist)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);text-decoration:none;display:grid;grid-template-rows:auto 1fr}
.post img{aspect-ratio:16/10;object-fit:cover;width:100%}
.post div{padding:18px 18px 22px;display:grid;gap:8px;align-content:start}
.post .label{color:var(--saffron-ink)}
.post h3{font-size:21px}
.post p{font-size:15px;color:var(--sage)}
.post:hover h3{color:var(--leaf)}
.head-row{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:34px}

/* ---------- faq ---------- */
.faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;font-weight:600;font-size:18px;color:var(--pine)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 24px/1 var(--display);color:var(--leaf);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:10px;color:var(--sage);max-width:62ch}

/* ---------- final cta ---------- */
.final{padding:0 0 96px}
.final-box{border-radius:28px;background:var(--grad);color:#fff;padding:64px 56px;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:32px;align-items:center;overflow:hidden;position:relative}
.final-box h2{color:#fff}
.final-box p{color:#D5E7DD;margin-top:12px;max-width:52ch}
.final-box .btn-primary{background:#fff;color:var(--pine)}
.final-box .btn-primary:hover{background:var(--saffron-soft)}
.final-box .btn-ghost{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}

/* ---------- footer ---------- */
footer{background:var(--pine);color:#B9CFC4;padding:64px 0 34px;font-size:15px}
footer .wrap{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
footer img{height:34px;width:auto;margin-bottom:14px}
footer h4{margin:0 0 12px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff}
footer ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
footer a{text-decoration:none}
footer a:hover{color:#fff}
.legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;margin-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px}
.legal-reg{display:inline-block;margin-top:4px;opacity:.85}
.social{display:flex;gap:8px;margin-top:18px}
.social a{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#D5E7DD}
.social a:hover{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.social a:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}
.social svg{width:18px;height:18px}

/* ---------- CMS preview mode ---------- */

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .plans{grid-template-columns:repeat(2,1fr)}
  .plan.featured{transform:none}
  .office-head{grid-template-columns:auto 1fr}
  .office-note{grid-column:1/-1;max-width:none}
  .site-nav{display:none}
}
@media (max-width:900px){
  section{padding:72px 0}
  .hero .wrap,.video .wrap,.faq .wrap{grid-template-columns:1fr;gap:40px}
  .facts .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(3){border-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
  .tiles,.personas,.posts{grid-template-columns:repeat(2,1fr)}
  /* Shared rows only make sense side by side in one row of three. */
  .personas{row-gap:22px}
  .persona{grid-row:auto;grid-template-rows:none}
  .steps{grid-template-columns:1fr}
  .chain{grid-template-columns:repeat(2,1fr)}
  .chain figure:nth-child(3) figcaption{border-left:0}
  .devices{height:460px}
  .final-box{grid-template-columns:1fr;padding:44px 28px}
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .head-actions .link-login{display:none}
  .lang-btn{padding:0 10px}
  .lang-btn span{display:none}
  .tiles,.personas,.posts,.plans{grid-template-columns:1fr}
  .devices{height:420px}
  .phone{width:200px;right:0}
  .landscape{width:240px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.chain-motion img,.chain-bar::after{animation:none}}

@media (max-width:600px){.plan-office{padding:24px 20px}.office-head{grid-template-columns:1fr}.plan-office .btn{width:100%}}

/* ---------- mobile (menu, hero, compare, video) ---------- */
.menu-btn{display:none;position:relative;width:42px;height:42px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--pine);cursor:pointer}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{position:absolute;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,background .2s}
.menu-btn span{left:50%;top:50%;transform:translate(-50%,-50%)}
.menu-btn span::before,.menu-btn span::after{content:"";left:0}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}
.site-head.open .menu-btn span{background:transparent}
.site-head.open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.site-head.open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
.menu-btn:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}
.site-nav .nav-extra{display:none}
@media (max-width:1080px){
  .menu-btn{display:inline-block}
  .site-head.open .site-nav{display:grid;position:absolute;left:0;right:0;top:100%;margin:0;gap:0;padding:6px 24px 24px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 26px 40px -26px rgba(11,61,46,.35)}
  .site-head.open .site-nav a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:17px;color:var(--pine)}
  .site-head.open .site-nav .nav-login{display:block;font-weight:600}
  .site-head.open .site-nav .nav-cta{display:flex;margin-top:18px;padding:0 22px;border-bottom:0;color:#fff}
}
@media (max-width:900px){
  /* The photo comes first on phones: the product before the pitch. */
  .hero{padding:20px 0 56px}
  .hero .wrap{gap:28px}
  .hero-ba{order:-1}
}
@media (max-width:600px){
  .site-head .wrap{gap:10px}
  .site-head .wrap > a img{height:30px}
  .head-actions{gap:8px}
  .head-actions > .btn{display:none}
  .hero-ba{border-radius:18px}
  .hero-points li{align-items:flex-start}
  .hero-points svg{margin-top:3px}
  .task-chip{padding:8px 10px;font-size:13px}
  .fact{padding:22px 16px}
  .fact b{font-size:23px}
  /* Format and pace chips: the label on its own line, the chips below it. */
  .chips-row small{width:100%;margin-top:6px}
  /* Compare: every row a card, the column names above the answers. */
  .compare .table-wrap{overflow:visible}
  .compare table{min-width:0}
  .compare thead{display:none}
  .compare table,.compare tbody,.compare tr,.compare td{display:block;width:auto}
  .compare tr{padding:18px 20px;border-bottom:1px solid var(--line)}
  .compare tr:last-child{border-bottom:0}
  .compare td{padding:0;border:0}
  .compare td:first-child{width:auto;font-size:17px;margin-bottom:10px}
  .compare td + td{margin-top:8px}
  .compare td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
  /* Video: phone and landscape clip overlap without covering the reel's text. */
  .devices{height:auto;display:grid;padding-bottom:8px}
  .phone{position:relative;right:auto;top:auto;width:210px;justify-self:end}
  .phone .reel-text{top:38px;bottom:auto;font-size:19px}
  .landscape{position:relative;left:auto;bottom:auto;z-index:1;width:74%;margin-top:-118px;justify-self:start}
}

/* Consent dialog. A slim strip at the foot of the page is easy to scroll past without deciding,
   so this sits over the page the way Cookiebot's does. Refusing is still one click, so the page is
   not held hostage -- it is a question, not a wall. */
.cookie-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:rgba(11,61,46,.55);backdrop-filter:blur(3px);animation:cookie-in .18s ease-out}
.cookie-card{width:min(560px,100%);max-height:calc(100vh - 40px);overflow-y:auto;background:var(--card);
  border-radius:var(--r-lg);padding:30px 32px;box-shadow:0 30px 70px -20px rgba(11,61,46,.55)}
.cookie-card:focus{outline:none}
.cookie-card h2{margin:0 0 12px;font:600 24px/1.2 var(--display);color:var(--pine)}
.cookie-card p{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.cookie-card ul{margin:16px 0;padding:0;list-style:none;display:grid;gap:10px;
  border-block:1px solid var(--line);padding-block:16px}
.cookie-card li{font-size:14px;line-height:1.5;color:var(--sage)}
.cookie-card li strong{color:var(--ink)}
.cookie-note{font-size:13px;color:var(--sage)}
.cookie-card a{color:var(--leaf);text-decoration:underline}
.cookie-buttons{display:flex;gap:10px;margin-top:22px}
.cookie-buttons .btn{flex:1;min-height:48px;font-size:15px}
/* Same size, same fill, same border weight: only the hue differs, so neither answer is the
   easier one to reach for. */
.btn-consent{background:var(--card);border-color:var(--sage);color:var(--ink)}
.btn-consent:hover{border-color:var(--ink)}
.btn-consent-yes{border-color:var(--leaf);color:var(--leaf)}
.btn-consent-yes:hover{border-color:var(--leaf-hover);color:var(--leaf-hover)}
@keyframes cookie-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.cookie-overlay{animation:none}}
@media (max-width:620px){
  .cookie-card{padding:24px 20px}
  .cookie-card h2{font-size:21px}
  .cookie-buttons{flex-direction:column}
}
.cookie-change{display:inline-block;margin-top:6px;color:inherit;text-decoration:underline;opacity:.85}