/* Inter (SIL OFL 1.1, The Inter Project Authors), hosted on our own domain: no request to Google */
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/inter-latin-ext-opsz-normal.woff2) format("woff2-variations");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/inter-latin-opsz-normal.woff2) format("woff2-variations");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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Layout: Attio marketing grammar. White page framed by two vertical hairlines, sections cut by horizontal
   hairlines into cells, quiet two-tone headlines, the product itself (Candora app, Attio look) as the hero image. */
:root{
  --bg:#FFFFFF; --bg-2:#FAFAFB; --bg-3:#F3F4F6;
  --line:#EEEFF1; --line-2:#E6E7EA;
  --ink:#1C1D1F; --ink-2:#626C7A; --ink-3:#7D8695;
  --btn:#202124; --btn-h:#000000; --on-btn:#FAFAFB;
  --acc:#0055CC; --acc-soft:#E6EEFB; --acc-row:rgb(0 85 204/.06);
  --ok:#167540; --ok-soft:#E3F4EA; --warn:#A85808; --warn-soft:#FCEFE0; --bad:#C42B22; --info:#0055CC;
  --foot:#101010; --foot-2:#232529; --foot-ink:#FAFAFB; --foot-mut:#8F99A8;
  --f:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:10px; --r-lg:14px;
  --ring:0 0 0 1px rgb(28 40 64/.12);
  --sh-btn:0 0 2px rgb(28 40 64/.18),0 1px 3px rgb(0 0 0/.04);
  --float:0 0 0 1px rgb(28 40 64/.06),0 4px 8px -4px rgb(28 40 64/.12),0 12px 32px -8px rgb(24 41 75/.18);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:500 16px/22px var(--f);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;letter-spacing:inherit}
img{max-width:100%;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
.tnum{font-variant-numeric:tabular-nums}
svg.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* frame */
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.frame{max-width:1368px;margin-inline:auto;position:relative}
@media (min-width:900px){
  .gut{padding-left:max(36px,env(safe-area-inset-left,0px));padding-right:max(36px,env(safe-area-inset-right,0px))}
  .frame{border-inline:1px solid var(--line)}
}
.band{border-top:1px solid var(--line)}
.pad{padding:clamp(48px,7vw,96px) clamp(20px,4vw,58px)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgb(255 255 255/.86);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.top .frame{border-inline:0;height:64px;display:flex;align-items:center;gap:28px}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:650;font-size:20px;letter-spacing:-.035em;color:var(--ink)}
.logo img{display:block;height:22px;width:auto}
.mnu{display:flex;gap:4px}
.mnu a{text-decoration:none;font-size:15px;height:34px;display:inline-flex;align-items:center;padding:0 10px;border-radius:8px;color:var(--ink)}
.mnu a:hover{background:var(--bg-3)}
.mnu a[aria-current="page"]{background:var(--bg-3)}
.top .act{margin-left:auto;display:flex;gap:8px;align-items:center}
.burger{display:none}
@media (max-width:899px){
  .mnu{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px max(16px,env(safe-area-inset-left,0px)) 16px}
  .mnu a{height:44px;font-size:17px}
  .top.open .mnu{display:flex}
  .burger{display:inline-flex}
  .top .act .b.ghostline{display:none}
}

/* buttons */
.b{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 12px;border-radius:var(--r);font:500 14px/20px var(--f);letter-spacing:-.07px;cursor:pointer;white-space:nowrap;transition:background .15s,box-shadow .15s,transform .15s var(--ease)}
.b:active{transform:scale(.98)}
.b.dark{background:var(--btn);color:var(--on-btn)}
.b.dark:hover{background:var(--btn-h)}
.b.line{background:var(--bg);color:var(--ink);box-shadow:var(--ring),var(--sh-btn)}
.b.line:hover{background:var(--bg-2)}
.b.sm{height:32px;padding:0 10px;border-radius:9px}
.b .i{width:14px;height:14px}
.b.wide{width:100%}
.b:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* type */
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:7px;background:var(--acc-soft);color:var(--acc);font-size:13px;line-height:18px;font-weight:500}
.chipln{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 12px;border-radius:999px;box-shadow:var(--ring),var(--sh-btn);font-size:13px;text-decoration:none;color:var(--ink);background:var(--bg)}
.chipln .i{width:12px;height:12px;color:var(--ink-2)}
.h1{font-size:clamp(40px,6vw,64px);line-height:.95;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.h2{font-size:clamp(28px,3.3vw,40px);line-height:1.1;font-weight:500;letter-spacing:-.01em;text-wrap:balance;max-width:24ch}
.h2 .mut,.h3 .mut{color:var(--ink-3)}
.h3{font-size:clamp(20px,2vw,24px);line-height:1.15;font-weight:500;letter-spacing:-.01em;text-wrap:pretty;max-width:30ch}
.h4{font-size:17px;line-height:22px;font-weight:500;letter-spacing:-.01em}
.lead{font-size:18px;line-height:26px;color:var(--ink-2);max-width:36em;text-wrap:pretty}
.txt{color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.txt a,.lead a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.txt a:hover,.lead a:hover{text-decoration-color:var(--ink)}
.small{font-size:13px;line-height:18px;color:var(--ink-3)}
.eyl{font-size:13px;line-height:18px;color:var(--ink-3)}
.stack{display:flex;flex-direction:column;gap:16px}
.stack.s8{gap:8px}
.stack.s24{gap:24px}
.ctas{display:flex;gap:8px;flex-wrap:wrap}
.law{color:var(--ink-3);font-size:13px;line-height:18px}

/* scroll word reveal (always readable, words deepen from grey to ink) */
.wr .w{color:var(--ink-3);transition:color .5s var(--ease)}
.wr .w.on{color:var(--ink)}
.no-js .wr .w,.rm .wr .w{color:inherit}

/* hero */
.hero{text-align:center;padding-top:clamp(56px,8vw,104px)}
.hero .stack{align-items:center}
.hero .lead{margin-inline:auto}
.hero .ctas{justify-content:center;margin-top:8px}
.stage{position:relative;margin-top:clamp(40px,5vw,64px);padding:0 clamp(12px,4vw,58px);
  background:
    linear-gradient(to bottom,var(--bg) 0%,transparent 30%),
    repeating-linear-gradient(90deg,rgb(0 85 204/.045) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#FFFFFF 0%,#EEF3FD 55%,#E3EBFB 100%);
}
.stage::after{content:"";display:block;height:clamp(32px,5vw,72px)}
.win{position:relative;max-width:1080px;margin:0 auto;border-radius:12px;background:var(--bg);box-shadow:var(--float);overflow:hidden;text-align:left;font-size:14px;line-height:20px;letter-spacing:-.07px}
.win .chrome{height:34px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.win .chrome i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.win .chrome .url{margin-left:12px;font-size:12px;color:var(--ink-3)}
.rise{animation:rise .9s var(--ease) both}
@keyframes rise{from{transform:translateY(28px) scale(.985);opacity:.4}to{transform:none;opacity:1}}

/* mini app (mirrors 05-app-attio) */
.app{display:grid;grid-template-columns:208px 1fr;min-height:420px}
.side{background:var(--bg-2);border-right:1px solid var(--line);padding:10px 8px;display:flex;flex-direction:column;gap:1px}
.side .ws{display:flex;align-items:center;gap:8px;height:32px;padding:0 6px;font-weight:600;font-size:14px}
.side .ws .lg{width:20px;height:20px;border-radius:6px;background:var(--ink);display:grid;place-items:center}
.side .ws .lg svg{width:12px;height:12px;stroke:#fff;stroke-width:2.4}
.side .sec{font-size:12px;color:var(--ink-3);padding:12px 6px 4px}
.side .it{display:flex;align-items:center;gap:8px;height:28px;padding:0 6px;border-radius:8px;color:var(--ink)}
.side .it.on{background:rgb(0 0 0/.045)}
.side .it .ico{width:16px;height:16px;border-radius:4px;display:grid;place-items:center}
.side .it .ico svg{width:10px;height:10px;stroke:#fff;stroke-width:2.2}
.side .it .n{margin-left:auto;font-size:12px;color:var(--ink-3)}
.main{min-width:0;display:flex;flex-direction:column}
.main .tb{height:44px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--line)}
.main .tb .t{display:flex;align-items:center;gap:8px;font-weight:500}
.main .tb .sp{flex:1}
.main .bar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mb{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px;border-radius:8px;box-shadow:var(--ring),var(--sh-btn);font-size:13px;background:var(--bg)}
.mb .l{color:var(--ink-3)}
.mb.pri{background:var(--acc);color:#fff;box-shadow:0 0 0 1px var(--acc) inset}
.mb .i{width:13px;height:13px}
.grid{overflow-x:auto}
table.g{border-collapse:separate;border-spacing:0;width:100%;min-width:640px}
.g th,.g td{height:38px;padding:0 12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:left;white-space:nowrap}
.g th{height:36px;color:var(--ink-2);font-weight:500;font-size:13px}
.g th .h{display:flex;align-items:center;gap:6px}
.g th .h .i{width:13px;height:13px;color:var(--ink-3)}
.g td:last-child,.g th:last-child{border-right:0}
.g tr.sel td{background:var(--acc-row)}
.g .who{display:flex;align-items:center;gap:10px}
.cb{width:15px;height:15px;border-radius:5px;border:1px solid rgb(0 0 0/.12);display:inline-grid;place-content:center;flex:none;background:var(--bg)}
.cb.on{background:var(--acc);border-color:var(--acc)}
.cb.on::after{content:"";width:7px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.av{width:20px;height:20px;border-radius:50%;background:var(--bg-2);box-shadow:0 0 0 1px var(--line);display:inline-grid;place-items:center;font-size:9px;font-weight:600;color:var(--ink-2);flex:none}
.chipv{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:rgb(0 0 0/.04);font-size:13px}
.m{color:var(--ink-2)}
.st{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.st+.st{margin-left:12px}
.st .i{width:14px;height:14px;stroke-width:1.9}
.st.ok .i{color:var(--ok)}.st.wa .i{color:var(--warn)}.st.ba .i{color:var(--bad)}.st.in .i{color:var(--info)}.st.nn .i{color:var(--ink-3)}
.st.run .i{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.flt{position:absolute;right:clamp(10px,2.4vw,28px);bottom:clamp(10px,2.4vw,28px);width:min(330px,calc(100% - 20px));background:var(--bg);border-radius:12px;box-shadow:var(--float);padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:18px}
.flt .hd{display:flex;align-items:center;justify-content:space-between;color:var(--ink-2)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px}
.kv dt{color:var(--ink-3)}
.kv dd{color:var(--ink)}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .flt{position:static;width:auto;margin:10px;box-shadow:0 0 0 1px var(--line)}
  .g .hm{display:none}
  table.g{min-width:0}
}

/* sources strip */
.srcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.srcs li{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:96px;padding:16px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.srcs li:nth-child(4n){border-right:0}
.srcs li:nth-last-child(-n+4){border-bottom:0}
.srcs b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.srcs span{font-size:13px;color:var(--ink-3)}
.srcnote{padding:14px 20px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
@media (max-width:760px){
  .srcs{grid-template-columns:1fr 1fr}
  .srcs li{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
  .srcs li:nth-child(2n){border-right:0!important}
  .srcs li:nth-last-child(-n+2){border-bottom:0!important}
}

/* scroll-spy feature (Attio "Build pipeline" pattern) */
.spy{display:grid;grid-template-columns:minmax(220px,300px) 1fr}
.spy-nav{border-right:1px solid var(--line)}
.spy-nav ol{position:sticky;top:calc(64px + env(safe-area-inset-top,0px) + 48px);padding:48px 0 48px;display:flex;flex-direction:column;gap:4px}
.spy-nav a{display:flex;gap:10px;align-items:baseline;text-decoration:none;font-size:18px;line-height:26px;color:var(--ink-3);padding:4px 24px 4px 57px;position:relative;transition:color .2s}
.spy-nav a .no{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;width:18px}
.spy-nav a:hover{color:var(--ink-2)}
.spy-nav a.on{color:var(--ink)}
.spy-nav a.on::before{content:"";position:absolute;left:-1px;top:4px;bottom:4px;width:2px;background:var(--acc);border-radius:2px}
.spy-body{min-width:0}
.pane{border-bottom:1px solid var(--line);scroll-margin-top:72px}
.pane:last-child{border-bottom:0}
.pane .hd{padding:clamp(40px,5vw,72px) clamp(20px,4vw,58px) clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:14px}
.pane .demo{border-top:1px solid var(--line);background:var(--bg-2);background-image:radial-gradient(rgb(0 0 0/.07) 1px,transparent 1px);background-size:14px 14px;padding:clamp(20px,4vw,56px)}
.pane .two{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.pane .two>div{padding:24px clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:6px}
.pane .two>div+div{border-left:1px solid var(--line)}
.pane .two b{font-weight:500}
.pane .two p{color:var(--ink-2)}
@media (max-width:899px){
  .spy{grid-template-columns:1fr}
  .spy-nav{display:none}
  .pane .two{grid-template-columns:1fr}
  .pane .two>div+div{border-left:0;border-top:1px solid var(--line)}
}

/* product cards (inserts) */
.card{background:var(--bg);border-radius:12px;box-shadow:var(--float);overflow:hidden;font-size:14px;line-height:20px;letter-spacing:-.07px;max-width:760px;margin-inline:auto}
.card .ch{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.card .ch .t{font-weight:500}
.card .ch .sp{flex:1}
.card .ch .m{font-size:12px}
.rows>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:12px 16px;border-top:1px solid var(--line);align-items:start}
.rows>li:first-child{border-top:0}
.rows .s{font-size:12px;line-height:16px;color:var(--ink-3)}
.rows .d{grid-column:1/-1;font-size:13px;line-height:18px;color:var(--ink-2)}
.cardfoot{padding:10px 16px;border-top:1px solid var(--line);font-size:12px;line-height:16px;color:var(--ink-3)}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px;margin-inline:auto;align-items:start}
@media (max-width:760px){.cards2{grid-template-columns:minmax(0,1fr)}}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px;grid-column:1/-1;margin-top:6px}
.cmp div{background:var(--bg-2);border-radius:8px;padding:8px 10px;box-shadow:0 0 0 1px var(--line) inset}
.cmp small{display:block;font-size:12px;line-height:16px;color:var(--ink-3)}
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.wa{background:var(--warn-soft);color:var(--warn)}
.badge.nn{background:var(--bg-3);color:var(--ink-2)}
.badge.in{background:var(--acc-soft);color:var(--acc)}
.badge .i{width:12px;height:12px;stroke-width:2}

/* document drawing (VZOR) */
.doc{background:#FFFFFF;border-radius:6px;box-shadow:var(--float);padding:22px 24px;font:400 11.5px/1.5 "Times New Roman",Times,serif;color:#222;position:relative;max-width:440px;margin-inline:auto;letter-spacing:0}
.doc h5{font:700 13px/1.3 "Times New Roman",Times,serif;margin:0 0 10px;text-transform:uppercase}
.doc table{width:100%;border-collapse:collapse;margin:8px 0}
.doc td,.doc th{border:1px solid #bbb;padding:3px 5px;text-align:left;font-weight:400}
.doc .hl{background:rgb(0 85 204/.10);box-shadow:0 0 0 1.5px var(--acc) inset;border-radius:2px}
.doc .hx{background:repeating-linear-gradient(135deg,#eee 0 4px,#fff 4px 8px);color:#999}
.doc .vz{position:absolute;right:18px;top:16px;font:700 10px/1 var(--f);letter-spacing:.12em;color:#b33;border:1.5px solid #b33;padding:3px 5px;border-radius:3px}
.docnum{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--acc);color:#fff;font:600 10px/1 var(--f);margin-right:4px;vertical-align:1px}
.reads{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;max-width:960px;margin-inline:auto}
@media (max-width:860px){.reads{grid-template-columns:minmax(0,1fr)}}
.seg{display:inline-flex;padding:2px;border-radius:10px;background:var(--bg-3);gap:2px;flex-wrap:wrap}
.seg button{all:unset;box-sizing:border-box;height:30px;padding:0 12px;border-radius:8px;font-size:13px;cursor:pointer;color:var(--ink-2);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:var(--ring),var(--sh-btn)}
.seg button:focus-visible{outline:2px solid var(--acc)}

/* rules */
.rl>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:12px 16px;border-top:1px solid var(--line)}
.rl>li:first-child{border-top:0}
.rl .why{grid-column:1/-1;font-size:13px;line-height:18px;color:var(--ink-2)}
.rl>li.in{animation:fadeup .35s var(--ease) both}
@keyframes fadeup{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}
.legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line)}
.legend>div{padding:18px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.legend>div:last-child{border-right:0}
.legend p{font-size:13px;line-height:18px;color:var(--ink-2)}
@media (max-width:899px){.legend{grid-template-columns:1fr 1fr}.legend>div{border-bottom:1px solid var(--line)}}

/* log */
.log>li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 14px;padding:10px 16px;border-top:1px solid var(--line);font-size:13px;line-height:18px}
.log>li:first-child{border-top:0}
.log .tm{color:var(--ink-3);font-variant-numeric:tabular-nums}
.log .by{grid-column:2;color:var(--ink-3);font-size:12px}
.log li.x{background:var(--bg-2)}
.log li.x .what{color:var(--ink-3);text-decoration:line-through}

/* decision */
.dec{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px}
.dec .b{height:34px}
.dec .b[aria-pressed="true"]{box-shadow:0 0 0 1.5px var(--ink) inset}
.decnote{padding:0 16px 14px;font-size:12px;color:var(--ink-3);min-height:30px}

/* cells */
.cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cells>*{padding:28px clamp(20px,3vw,32px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-width:0}
.cells>*:last-child{border-right:0}
.cells.c2{grid-template-columns:1fr 1fr}
.cells.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cells p{color:var(--ink-2)}
a.cell{text-decoration:none;transition:background .2s}
a.cell:hover{background:var(--bg-2)}
a.cell .go{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink)}
a.cell .go .i{transition:transform .2s var(--ease)}
a.cell:hover .go .i{transform:translateX(3px)}
@media (max-width:899px){
  .cells,.cells.c2,.cells.c4{grid-template-columns:1fr}
  .cells>*{border-right:0;border-bottom:1px solid var(--line)}
  .cells>*:last-child{border-bottom:0}
}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split>*{min-width:0}
.split>.l{padding:clamp(40px,5vw,72px) clamp(20px,4vw,58px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.split>.r{background:var(--bg-2);background-image:radial-gradient(rgb(0 0 0/.07) 1px,transparent 1px);background-size:14px 14px;padding:clamp(20px,4vw,56px);display:flex;align-items:center}
.split>.r>*{width:100%}
@media (max-width:899px){.split{grid-template-columns:minmax(0,1fr)}.split>.l{border-right:0;border-bottom:1px solid var(--line)}}

/* big number */
.big{font-size:clamp(56px,8vw,104px);line-height:.9;font-weight:600;letter-spacing:-.04em}
.big small{font-size:.32em;letter-spacing:-.01em;font-weight:500;color:var(--ink-2);margin-left:6px}

/* tables */
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.t th,.t td{text-align:left;padding:12px 16px;border-top:1px solid var(--line);vertical-align:top}
.t thead th{border-top:0;color:var(--ink-3);font-weight:500;font-size:13px}
.t td.m,.t td .m{color:var(--ink-2)}
.t .grp td{background:var(--bg-2);font-weight:500}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 clamp(20px,4vw,58px) clamp(48px,6vw,80px);max-width:1080px;margin-inline:auto}
.plan{border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line-2) inset;padding:20px;display:flex;flex-direction:column;gap:14px;background:var(--bg)}
.plan.hi{box-shadow:0 0 0 1px #B9CCF0 inset,0 0 0 4px var(--acc-soft)}
.plan .nm{display:flex;align-items:center;gap:8px;font-size:17px}
.plan .pr{font-size:44px;line-height:1;font-weight:600;letter-spacing:-.03em}
.plan .per{font-size:12px;color:var(--ink-3);margin-top:-6px}
.plan ul{display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:20px;color:var(--ink-2)}
.plan li{display:grid;grid-template-columns:16px 1fr;gap:8px}
.plan li .i{width:14px;height:14px;margin-top:3px;color:var(--ink)}
.plan .b{margin-top:auto}
@media (max-width:860px){.plans{grid-template-columns:1fr}}

/* faq */
.faq{max-width:760px;margin-inline:auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:500;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"[+]";color:var(--ink-3);font-weight:400;font-size:14px;flex:none}
.faq details[open] summary::after{content:"[−]"}
.faq .a{padding:0 0 20px;color:var(--ink-2);display:flex;flex-direction:column;gap:10px;max-width:62ch}
.faq .a a{color:var(--ink)}

/* phone */
.phones{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.phone{width:280px;max-width:100%;border-radius:34px;background:var(--bg);box-shadow:var(--float),0 0 0 6px #F0F1F3;padding:14px 14px 18px;font-size:13px;line-height:18px;display:flex;flex-direction:column;gap:10px}
.phone .sb{display:flex;justify-content:space-between;font-size:11px;font-weight:600;padding:0 8px;color:var(--ink)}
.phone .pc{border-radius:12px;box-shadow:0 0 0 1px var(--line) inset;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.phone .pc .s{font-size:12px;color:var(--ink-3)}
.phone .b{height:38px;border-radius:10px}
.prog{height:6px;border-radius:3px;background:var(--bg-3);overflow:hidden}
.prog i{display:block;height:100%;background:var(--acc);border-radius:3px}

/* steps list (kandidát) */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.steps button{all:unset;box-sizing:border-box;padding:18px 20px;border-right:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;gap:4px;position:relative}
.steps button:last-child{border-right:0}
.steps button .no{font-size:12px;color:var(--ink-3)}
.steps button b{font-weight:500;color:var(--ink-3);transition:color .2s}
.steps button[aria-selected="true"] b{color:var(--ink)}
.steps button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--acc)}
.steps button:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
@media (max-width:760px){.steps{grid-template-columns:1fr 1fr}.steps button{border-bottom:1px solid var(--line)}}
.stp[hidden]{display:none!important}

/* CTA + footer */
.cta{text-align:center;padding:clamp(64px,9vw,120px) clamp(20px,4vw,58px)}
.cta .stack{align-items:center}
.cta .ctas{justify-content:center}
.copy{display:inline-flex;align-items:center;gap:8px;font-size:15px}
.copy code{font:inherit;background:var(--bg-3);border-radius:7px;padding:4px 8px;user-select:all}
footer{background:var(--foot);color:var(--foot-ink)}
footer .frame{border-inline-color:var(--foot-2)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding:56px clamp(20px,4vw,58px) 40px}
.fgrid h4{font-size:13px;font-weight:500;color:var(--foot-mut);margin-bottom:12px}
.fgrid ul{display:flex;flex-direction:column;gap:8px;font-size:14px}
.fgrid a{text-decoration:none;color:var(--foot-ink)}
.fgrid a:hover{text-decoration:underline}
footer .logo{color:var(--foot-ink)}
.fine{display:flex;gap:24px;flex-wrap:wrap;padding:20px clamp(20px,4vw,58px) 28px;border-top:1px solid var(--foot-2);font-size:13px;color:var(--foot-mut)}
@media (max-width:760px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}}

/* page head (sub pages) */
.ph{padding:clamp(56px,8vw,104px) clamp(20px,4vw,58px) clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.ph.c{align-items:center;text-align:center}
.ph.c .lead{margin-inline:auto}

/* legal */
.legal{display:grid;grid-template-columns:260px minmax(0,1fr)}
.legal nav{border-right:1px solid var(--line)}
.legal nav ol{position:sticky;top:calc(64px + env(safe-area-inset-top,0px) + 24px);padding:32px 24px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.legal nav button{all:unset;cursor:pointer;display:flex;gap:8px;padding:5px 8px;border-radius:7px;color:var(--ink-2)}
.legal nav button:hover{background:var(--bg-3);color:var(--ink)}
.legal nav button span{color:var(--ink-3);font-variant-numeric:tabular-nums;width:20px}
.legal .body{padding:32px clamp(20px,4vw,58px) 72px;display:flex;flex-direction:column;gap:0;max-width:820px}
.legal .body .intro{color:var(--ink-2);padding-bottom:24px}
.legal section{padding:24px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;scroll-margin-top:84px}
.legal section h2{font-size:20px;line-height:26px;font-weight:500;display:flex;gap:10px}
.legal section h2 span{color:var(--ink-3);font-variant-numeric:tabular-nums}
.legal section p,.legal section li{color:var(--ink-2);max-width:66ch}
.legal section ul{list-style:disc;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.legal .tags{display:flex;gap:8px;flex-wrap:wrap}
.legal .tags .badge{gap:6px}
@media (max-width:899px){.legal{grid-template-columns:1fr}.legal nav{display:none}}

/* views */
.view[hidden]{display:none!important}
.view{animation:vin .35s var(--ease) both}
@keyframes vin{from{opacity:.4}to{opacity:1}}
.mnote{position:fixed;left:max(12px,env(safe-area-inset-left,0px));bottom:max(10px,env(safe-area-inset-bottom,0px));z-index:40;font-size:11px;color:var(--ink-3);background:rgb(255 255 255/.9);padding:4px 8px;border-radius:6px;box-shadow:0 0 0 1px var(--line)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.stack>*,.split>.r>*,.cards2>*,.reads>*{min-width:0;max-width:100%}
.card{min-width:0}
.split>.r{min-width:0}

.b.burger{display:none}
@media (max-width:899px){.b.burger{display:inline-flex}}
.doc h5{padding-right:56px}
.faq{width:100%}
.legend .badge{align-self:flex-start}
@media (max-width:640px){
  .tw{overflow-x:visible}
  table.t,.t tbody,.t tr,.t td{display:block;width:auto}
  .t thead{display:none}
  .t tr{border-top:1px solid var(--line);padding:10px 0}
  .t tr:first-child{border-top:0}
  .t td{border:0;padding:3px 16px;min-width:0!important;white-space:normal!important}
  .t td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font-size:12px;line-height:16px;color:var(--ink-3)}
  .t td:first-child{font-weight:500}
}

/* ---------- mobil, audit 23. 10. 2026 ---------- */
@media (max-width:640px){
  /* typografie: menší nadpisy, aby sekce nezabrala celou obrazovku */
  .h1{font-size:38px;line-height:1.02}
  .h2{font-size:24px;line-height:1.22}
  .h3{font-size:19px;line-height:1.25}
  .lead{font-size:16px;line-height:24px}
  .ph{padding:40px 20px 28px}
  .pad{padding:40px 20px}
  .pane .hd{padding:32px 20px 20px;gap:12px}
  .pane .demo{padding:16px 12px}
  .split>.l{padding:32px 20px}
  .split>.r{padding:16px 12px}
  .cta{padding:56px 20px}

  /* hero: zarovnání vlevo, ukázka aplikace výš */
  .hero{text-align:left;padding-top:36px}
  .hero .stack{align-items:flex-start;padding-inline:20px!important}
  .hero .lead{margin-inline:0}
  .hero .ctas{justify-content:flex-start}
  .ctas .b{flex:1 1 auto}
  .stage{margin-top:28px;padding:0 10px}
  .stage::after{height:24px}

  /* ukázka aplikace: jen kandidát a první výsledek kontrol, bez lišty filtrů */
  .win .main .bar{display:none}
  .win .g th:nth-child(3),.win .g td:nth-child(3){display:none}
  .win .g td[data-cv] .st+.st{display:none}
  .win .g th,.win .g td{padding:0 10px;height:40px}
  .win .chrome .url{font-size:11px}

  /* telefon u kandidáta: pevná šířka, ne roztažený přes celou obrazovku */
  .phone{width:min(292px,100%);margin-inline:auto}

  /* kroky kandidáta: vodorovná řada místo dlaždic 2x2 */
  .steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .steps button{flex:0 0 auto;scroll-snap-align:start;border-bottom:0;padding:14px 18px;flex-direction:row;align-items:baseline;gap:8px}

  /* tabulky: řádek jako karta, název přes celou šířku, ostatní hodnoty ve dvou sloupcích */
  .t tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px;padding:12px 16px}
  .t td{padding:0}
  .t td:first-child{grid-column:1/-1;font-weight:500}
  .t-wide-last td:last-child{grid-column:1/-1}
  .t-one tr{grid-template-columns:minmax(0,1fr)}
  .t-one td .stack>div{gap:12px}
  .t td[data-label]:not(:first-child)::before{margin-bottom:2px}

  /* krátké tabulky se 3 sloupci zůstávají tabulkou */
  .t-keep,.t-keep tbody{display:table-row-group}
  table.t.t-keep{display:table;width:100%}
  .t-keep thead{display:table-header-group}
  .t-keep tr{display:table-row;padding:0}
  .t-keep td,.t-keep th{display:table-cell;padding:10px 12px;border-top:1px solid var(--line)}
  .t-keep td:first-child{font-weight:500}
  .t-keep td[data-label]::before{content:none!important}
}