/* Kapcal public pages (home, features, example, FAQ, guides). The app's world: cool grey paper, white panels on 1px
   hairlines, navy ink for text and the one main action, category colours only on schedule content, Geist only.
   The pages are generated by docs/site/build.py; this file is written by hand. */
:root{
  color-scheme:light;
  --bg:#f4f6fa; --panel:#ffffff; --ink:#14213d; --muted:#586277; --line:#dde2ea; --danger:#b42318;
  --k0:#2b6cb0; --k1:#2f855a; --k2:#b83280; --k3:#b7791f; --k4:#6b46c1; --k5:#0987a0; --k6:#718096; --k7:#c53030; --k8:#c05621; --k9:#68771f;
  --body:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  --wrap:1180px; --gut:clamp(16px,4vw,40px);
  --paper-shadow:0 6px 18px rgba(20,33,61,.12);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0e1320; --panel:#161d2d; --ink:#eef1f7; --muted:#a9b3c7; --line:#2a3348; --danger:#ff8a80;
    --k0:#63a4ff; --k1:#4fc48a; --k2:#f072c0; --k3:#f0b84a; --k4:#a58bff; --k5:#4cc9e0; --k6:#98a4b8; --k7:#ff7b7b; --k8:#ff9f5a; --k9:#b5c85a;
    --paper-shadow:0 6px 18px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0e1320; --panel:#161d2d; --ink:#eef1f7; --muted:#a9b3c7; --line:#2a3348; --danger:#ff8a80;
  --k0:#63a4ff; --k1:#4fc48a; --k2:#f072c0; --k3:#f0b84a; --k4:#a58bff; --k5:#4cc9e0; --k6:#98a4b8; --k7:#ff7b7b; --k8:#ff9f5a; --k9:#b5c85a;
  --paper-shadow:0 6px 18px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:color-mix(in srgb,var(--ink) 18%,transparent)}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* Header: the lockup, four places, language, Sign in and the one ink action. */
.nav{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.navin{display:flex;align-items:center;gap:6px;height:64px}
.brand{display:flex;align-items:center;margin-right:18px;border-radius:6px}
.flogo{display:block;height:28px;width:auto;--fltile:#14213d;--flline:transparent;--flb1:#63a4ff;--flb2:#4fc48a;--flb3:#f072c0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .flogo{--fltile:#161d2d;--flline:#2a3348;--flkap:#a3b6d8}}
:root[data-theme="dark"] .flogo{--fltile:#161d2d;--flline:#2a3348;--flkap:#a3b6d8}
.links{display:flex;gap:2px}
.links a{padding:8px 12px;border-radius:8px;text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap}
.links a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.links a[aria-current="page"]{font-weight:650;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.sp{flex:1}
.lang{font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px}
.lang:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--ink);font:600 15px/1.2 var(--body);text-decoration:none;white-space:nowrap;transition:border-color .15s,background-color .15s}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.primary:hover{background:color-mix(in srgb,var(--ink) 86%,var(--bg))}
.btn.lg{min-height:48px;padding:0 22px;font-size:16px}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:18px;height:18px}
.menupop{position:absolute;right:0;top:46px;width:min(280px,86vw);background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.25);padding:8px;display:grid;gap:2px}
.menupop a{padding:10px 12px;border-radius:8px;text-decoration:none;font-weight:500}
.menupop a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.menupop hr{border:0;border-top:1px solid var(--line);margin:6px 4px}

/* Clips and stills: the product at work, framed like a panel. */
.shot{margin:0}
.clip{position:relative;margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.clip video,.clip img{width:100%;height:auto;aspect-ratio:1280/1038}
.clip.still img{aspect-ratio:auto}
/* The agenda clip has room to spare at the top: it's cut. */
.c-agenda video{aspect-ratio:1280/920;object-fit:cover;object-position:bottom}
.clip video{cursor:pointer}
.cap{font-size:14px;color:var(--muted);margin-top:10px}
/* Each clip's pause / play button (it shows on pointing or with the keyboard; always on touch screens). */
.pp{position:absolute;right:12px;bottom:12px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);color:var(--ink);cursor:pointer;opacity:0;transition:opacity .15s}
.clip:hover .pp,.pp:focus-visible,.clip.paused .pp{opacity:1}
.pp svg{width:14px;height:14px}
.pp .i-play,.clip.paused .pp .i-pause{display:none}
.clip.paused .pp .i-play{display:block}
.still .pp{display:none}
@media (hover:none){.pp{opacity:1}}
.syncbox{padding:clamp(24px,4vw,48px);border:1px solid var(--line);border-radius:12px;background:var(--panel)}

/* Crossed out: a straight line drawn across, left to right (the home page's "before" loop sets the timing). */
.x{position:relative;white-space:nowrap}
.x::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:.11em;min-height:1.5px;background:currentColor;pointer-events:none;
  clip-path:inset(0 100% 0 0);transition:clip-path .3s cubic-bezier(.16,1,.3,1)}

/* Home: the opening. The heading on one line, the promise and the action under it, then the two halves of the story. */
.hero{padding-top:clamp(28px,4.5vw,52px)}
.hero h1{font-size:clamp(34px,4.3vw,60px);line-height:1.04;letter-spacing:-.035em}
.herosub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;margin-top:14px}
.herosub>p{font-size:20px;line-height:1.4;font-weight:500}
.act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.act .ctas{margin-top:0}
.note{font-size:14px;color:var(--muted)}
.ctas+.note{margin-top:12px}
.act .note{margin-top:0}
.stage{display:grid;grid-template-columns:minmax(0,.65fr) 64px minmax(0,1fr);margin-top:clamp(24px,3.2vw,36px)}
.stage figure{margin:0}
.stage figcaption{font-size:14px;color:var(--muted);margin-top:10px;display:flex;gap:8px;align-items:center}
.stage figcaption i{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.stage .after figcaption i{background:var(--ink)}
/* The scattered schedule: pieces of other tools, level and overlapping on a 4:5 desk, their text scaled with it (cqw), white
   arrows between them, at 70% so the board beside it leads. It plays on a 5-second loop while on screen (site.js): arrows
   drawn in, dates crossed out, a pause, a fade, again. The spreadsheet keeps its own white page and garish fills. */
.desk{position:relative;aspect-ratio:4/5;container-type:inline-size;border:1px dashed color-mix(in srgb,var(--ink) 28%,transparent);border-radius:12px;overflow:hidden;
  background:color-mix(in srgb,var(--panel) 45%,var(--bg));opacity:.7;--shade:rgba(20,33,61,.8)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .desk{--shade:rgba(0,0,0,.95)}}
:root[data-theme="dark"] .desk{--shade:rgba(0,0,0,.95)}
.frag{position:absolute;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:5px;box-shadow:var(--paper-shadow);font-size:3cqw;line-height:1.3;color:var(--ink)}
.xcal{display:grid;grid-template-columns:5.5% repeat(5,1fr);grid-template-rows:10% 6.4% 7.3% 6.4% repeat(4,1fr);border-radius:3px;border-color:#bfbfbf;
  background:#fff;color:#1f1f1f;font-family:Calibri,Carlito,"Liberation Sans",Arial,sans-serif;font-size:2.35cqw;line-height:1.15}
.xcal .xt{grid-column:1/-1;display:flex;align-items:center;gap:.5em;padding:0 .6em;background:#217346;color:#fff;font-size:2.5cqw;white-space:nowrap;overflow:hidden}
.xcal .xt i{width:.9em;height:.9em;border:1.5px solid #fff;border-radius:2px;flex:none}
.xcal b,.xcal span{border-right:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4;overflow:hidden;min-width:0}
.xcal .xh,.xcal .xr{background:#f2f2f2;color:#666;font-weight:400;font-size:2cqw;display:grid;place-items:center}
.xcal .xm{grid-column:2/-1;background:#ffff00;font-weight:700;padding:.15em .4em;font-size:2.4cqw}
.xcal .xd{background:#d9d9d9;font-weight:700;display:grid;place-items:center}
.xcal .xc{padding:.15em .3em;word-break:break-word}
.xcal .xc em{display:block;font-style:normal;font-size:1.9cqw;color:#7f7f7f}
.xcal .fg{background:#c6efce;color:#006100}.xcal .fy{background:#ffeb9c;color:#9c5700}.xcal .fr{background:#ffc7ce;color:#9c0006}
.xcal .fo{background:#f8cbad;color:#843c0c}.xcal .fb{background:#ddebf7;color:#1f4e78}
.xcal .xc:nth-last-child(-n+5):nth-child(n){border-bottom:0}
.sheet .fn{display:flex;align-items:center;gap:.6em;padding:.45em .7em;border-bottom:1px solid var(--line);font-size:2.5cqw;color:var(--muted);white-space:nowrap;overflow:hidden}
.sheet .fn span{overflow:hidden;text-overflow:ellipsis}
.sheet .fn i{width:.9em;height:.9em;border-radius:2px;background:#217346;flex:none}
.sheet table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:2.6cqw}
.sheet td{padding:.4em .6em;border-top:1px solid var(--line);white-space:nowrap}
.sheet tr:first-child td{border-top:0;font-weight:600;color:var(--muted)}
.sheet td+td{border-left:1px solid var(--line)}
.sheet .ref{color:var(--danger);font-weight:600}
.mail{padding:.6em .8em}
.mail b{display:block;margin-bottom:.25em}
.mail span{color:var(--muted)}
.chat{padding:.5em .7em;font-size:2.7cqw}
.chat .ch{font-weight:700;margin-bottom:.35em}
.chat p{margin:.25em 0 0}
.chat b{font-weight:700}.chat .u0{color:#2b6cb0}.chat .u1{color:#b83280}.chat .u2{color:#2f855a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chat .u0{color:#63a4ff}:root:not([data-theme="light"]) .chat .u1{color:#f072c0}:root:not([data-theme="light"]) .chat .u2{color:#4fc48a}}
.ping{display:flex;align-items:center;gap:.45em;padding:0 .8em;border-radius:999px;font-size:2.6cqw;white-space:nowrap}
.ping i{width:1.1em;height:1.1em;border-radius:.3em;background:#34c759;flex:none}
.wk{padding:.55em}
.wk .d{font-size:2.6cqw;font-weight:600;color:var(--muted);margin-bottom:.4em}
.wk .ev{display:flex;align-items:center;gap:.45em;padding:.2em .55em;border-radius:4px;margin-top:.3em;font-size:2.6cqw;--c:var(--k2);background:color-mix(in srgb,var(--c) 17%,var(--panel))}
.wk .ev::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--c);flex:none}
.wk .ev.b{margin-left:1.1em;--c:var(--k0)}
.stick{padding:.7em .8em;background:#fff3a3;color:#3d3500;border-color:#e6d77a;font-weight:600;font-family:"Comic Sans MS","Chalkboard SE","Segoe Print",var(--body)}
.marks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;
  filter:drop-shadow(0 0 1.2px var(--shade)) drop-shadow(0 1px 2px var(--shade))}
.marks path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.marks path.hd{stroke-dasharray:none;stroke-dashoffset:0;opacity:0}
.desk.on .marks path{animation:draw .45s cubic-bezier(.3,.6,.3,1) forwards}
.desk.on .marks path.hd{animation:pop .1s forwards}
.desk.on .marks path:nth-of-type(1){animation-delay:.2s}.desk.on .marks path:nth-of-type(2){animation-delay:.65s}
.desk.on .marks path:nth-of-type(3){animation-delay:.5s}.desk.on .marks path:nth-of-type(4){animation-delay:.95s}
.desk.on .marks path:nth-of-type(5){animation-delay:.8s}.desk.on .marks path:nth-of-type(6){animation-delay:1.25s}
.desk.on .marks path:nth-of-type(7){animation-delay:1.1s}.desk.on .marks path:nth-of-type(8){animation-delay:1.55s}
.desk.on .x::after{clip-path:inset(0 0 0 0);transition-delay:calc(1.6s + var(--i,0) * .2s)}
.desk.fade .marks,.desk.fade .x::after{opacity:0;transition:opacity .35s}
.desk.reset .marks,.desk.reset .marks path,.desk.reset .x::after{transition:none!important;animation:none!important}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}
.link{display:grid;place-items:center}
.link svg{width:64px;height:60px;overflow:visible}
.link path{fill:none;stroke:var(--ink);stroke-opacity:.55;stroke-width:2;stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1) .2s}
.link .head{fill:var(--ink);fill-opacity:.55;stroke:none;opacity:0;transition:opacity .2s .95s}
.go .link path{stroke-dashoffset:0}.go .link .head{opacity:1}

/* Home: each everyday problem, cancelled by the clip that fixes it. */
.pains{grid-template-columns:minmax(0,1fr);padding-top:clamp(72px,9vw,128px);display:grid;gap:clamp(72px,9vw,120px)}
.pain h2{font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.028em}
.pain p{margin-top:16px;max-width:52ch}
.more{display:inline-block;margin-top:16px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.nw{white-space:nowrap}
.more svg{display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-2px;transition:transform .2s}
.more:hover svg{transform:translateX(3px)}
.pain.wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(24px,5vw,72px);align-items:end}
.pain.wide .clip{grid-column:1/-1;margin-top:clamp(12px,2vw,24px)}

.pain.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px clamp(28px,5vw,80px);align-items:center}
.pain.split.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.pain.split.flip .ptext{order:2}
.pain.band{display:grid;gap:clamp(28px,3.4vw,40px);padding:clamp(28px,4vw,48px);border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.pain.band .ptext{max-width:60ch}

/* The sync picture: Kapcal in the middle, two-way services on one side, one-way calendars on the other. */
.sync{display:grid;grid-template-columns:1fr auto 1fr;gap:14px 18px;align-items:center;font-size:15px}
.sync .svc{display:flex;align-items:center;gap:12px;padding:8px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-weight:600;white-space:nowrap}
.sync .svc>span{display:flex;flex-direction:column;line-height:1.25}
.sync .svc small{font-weight:500;color:var(--muted);font-size:13px}
.sync .col{display:grid;gap:12px}
.sync .two .svc::after,.sync .one .svc::before{content:"";flex:none;width:34px;height:12px;background:var(--muted);
  -webkit-mask:var(--arr) no-repeat center/contain;mask:var(--arr) no-repeat center/contain}
.sync .two .svc{justify-content:space-between}
.sync .two{--arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M4 6h26M26 2l4 4-4 4M8 2 4 6l4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sync .one{--arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M4 6h26M26 2l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.hub{width:112px;height:112px;border-radius:24px;background:#14213d;display:grid;align-content:center;gap:9px;padding:0 18px}
.hub i{display:block;height:13px;border-radius:7px}
.hub i:nth-child(1){width:52%;background:#63a4ff}.hub i:nth-child(2){width:86%;margin-left:12%;background:#4fc48a}.hub i:nth-child(3){width:68%;margin-left:6%;background:#f072c0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hub{background:#161d2d;box-shadow:inset 0 0 0 1.5px #2a3348}}
:root[data-theme="dark"] .hub{background:#161d2d;box-shadow:inset 0 0 0 1.5px #2a3348}

/* Home: the worked example, plans, questions, and the close. */
.example{margin-top:clamp(80px,10vw,136px);padding:clamp(48px,6vw,80px) 0;background:var(--panel);border-block:1px solid var(--line)}
.exin{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center}
.exin h2,.plans h2,.qs h2,.close h2,.related h2{font-size:clamp(26px,2.8vw,36px);line-height:1.12;letter-spacing:-.024em}
.exin p{margin-top:14px;color:var(--muted);max-width:46ch}
.exin .btn{margin-top:22px}
.plans{display:flex;flex-wrap:wrap;gap:20px 48px;align-items:end;justify-content:space-between;padding:clamp(64px,8vw,104px) var(--gut) 0}
.plans p{margin-top:12px;color:var(--muted);max-width:56ch}
.qs{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,72px);padding-top:clamp(64px,8vw,104px)}
.qs .all{margin-top:14px}
.faq{border-top:1px solid var(--line)}
.faq details{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:600;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:16px;height:16px;flex:none;margin-top:5px;transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .a{padding:0 0 20px;color:var(--muted);max-width:56ch}
.close{padding-top:clamp(80px,10vw,136px);padding-bottom:clamp(64px,8vw,104px)}
.close h2{font-size:clamp(34px,4.2vw,56px);line-height:1.04;letter-spacing:-.032em;max-width:18ch}
.close .ctas{margin-top:24px}

/* Feature pages: a heading and the case, the clip, then label-and-value rows like the app's Details. */
.phero{padding:clamp(36px,6vw,72px) 0 0;max-width:calc(var(--wrap) - 2*var(--gut))}
.phero h1{font-size:clamp(36px,4.4vw,58px);line-height:1.04;letter-spacing:-.034em;max-width:17ch}
.phero .lead{font-size:19px;line-height:1.5;color:var(--muted);margin-top:18px;max-width:54ch}
.pclip{margin-top:clamp(28px,4vw,44px)}
.rows{margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:16px clamp(24px,5vw,64px);padding:clamp(26px,3.4vw,40px) 0;border-bottom:1px solid var(--line)}
.row h2{font-size:21px;line-height:1.25;letter-spacing:-.012em}
.row .val p{max-width:52ch}
.row .val p+p{margin-top:12px}
.row .val .shot{margin-top:24px}
.related{padding-top:clamp(64px,8vw,96px)}
.rel{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 32px;border-top:1px solid var(--line)}
.rel a{display:block;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none}
.rel a b{display:block}
.rel a b svg{display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-1px;transition:transform .2s}
.rel a:hover b svg{transform:translateX(3px)}
.rel a>span{display:block;font-size:15px;color:var(--muted);margin-top:2px}
.rel a:hover b{text-decoration:underline}
.qa{border-top:1px solid var(--ink);margin-top:clamp(40px,6vw,64px)}
.qa .row h2{font-size:19px}

/* Guides: the reading column (about 68 characters) beside the contents, the short answer in a panel, steps chained
   like linked items on the board (an ink-outlined number, a line down to the next), other ways as label-and-value
   rows, tables in a panel. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding-top:clamp(24px,3.5vw,40px);font-size:14px;color:var(--muted)}
.crumbs a{text-decoration:none;border-radius:4px}.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs svg{width:14px;height:14px;flex:none}
.gpage{display:grid;grid-template-columns:minmax(0,46rem) minmax(0,14rem);justify-content:space-between;gap:clamp(32px,5vw,80px);align-items:start}
.ghead{padding-top:14px}
.ghead h1{font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.03em;max-width:24ch}
.gmeta{margin-top:14px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.answer{margin-top:28px;padding:22px clamp(18px,3vw,28px) 24px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.answer h2{font-size:16px;line-height:1.3}
.answer p{margin-top:8px;font-size:18.5px;line-height:1.55;max-width:66ch}
.gsec{margin-top:clamp(52px,6vw,72px)}
.gsec>h2{font-size:clamp(24px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em}
.prose p,.prose ul{margin-top:14px;max-width:68ch}
.prose ul{padding-left:1.2em}
.prose li+li{margin-top:8px}
.prose li::marker{color:var(--muted)}
.steps{list-style:none;margin:24px 0 0;padding:0;counter-reset:step}
.steps>li{position:relative;padding:0 0 36px 52px;counter-increment:step}
.steps>li::before{content:counter(step);position:absolute;left:0;top:-3px;width:32px;height:32px;display:grid;place-items:center;border:1.5px solid var(--ink);
  border-radius:9px;background:var(--panel);font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}
.steps>li::after{content:"";position:absolute;left:15.25px;top:35px;bottom:5px;width:1.5px;background:color-mix(in srgb,var(--ink) 22%,transparent)}
.steps>li:last-child{padding-bottom:0}
.steps>li:last-child::after{display:none}
.steps h3{font-size:19px;line-height:1.3;letter-spacing:-.01em}
.steps .prose p:first-child{margin-top:8px}
.gfig{margin:20px 0 0}
.gfig .frame{display:inline-block;max-width:100%;vertical-align:top;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.gfig .syncbox{padding:clamp(18px,3vw,28px)}
.gfig .sync{font-size:14px}
.grows{margin-top:22px;border-top:1px solid var(--ink)}
.grow{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:6px clamp(20px,3vw,36px);padding:18px 0;border-bottom:1px solid var(--line)}
.grow h3{font-size:17px;line-height:1.4}
.grow p{max-width:60ch}
.gtable{margin-top:22px;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.gtable table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums}
.gtable th,.gtable td{padding:11px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.gtable thead th{border-top:0;font-size:13px;font-weight:600;color:var(--muted)}
.gtable tbody th{font-weight:600}
.gtable .num{text-align:right;white-space:nowrap}
.gsec .faq{margin-top:18px}
.gtoc{position:sticky;top:96px;padding-top:20px}
.gtoc h2{font-size:13px;font-weight:600;margin-bottom:10px}
.gtoc ol{list-style:none;margin:0;padding:0 0 0 14px;border-left:1px solid var(--line);display:grid;gap:2px}
.gtoc li a{display:block;padding:5px 0;font-size:14px;line-height:1.35;color:var(--muted);text-decoration:none}
.gtoc li a:hover{color:var(--ink)}
.gtoc .all{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:14px;font-weight:600;text-decoration:none}
.gtoc .all svg{width:14px;height:14px;flex:none;transition:transform .2s}
.glist a b svg{display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-1px;transition:transform .2s}
.gtoc .all:hover svg,.glist a:hover b svg{transform:translateX(3px)}
.glist{list-style:none;margin:0;padding:0}
.glist li+li{border-top:1px solid var(--line)}
.glist a{display:block;padding:14px 0;text-decoration:none}
.glist li:first-child a{padding-top:2px}
.glist li:last-child a{padding-bottom:2px}
.glist a b{display:block;font-size:18px;line-height:1.35}
.glist a:hover b{text-decoration:underline}
.glist a>span{display:block;margin-top:2px;font-size:15px;color:var(--muted)}

/* Footer. */
.foot{margin-top:0;border-top:1px solid var(--line);padding:40px 0 48px;font-size:14px;color:var(--muted)}
.footin{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:28px}
.foot h2{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:10px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{text-decoration:none}.foot a:hover{color:var(--ink);text-decoration:underline}
.foot .flogo{height:24px}
.foot .tag{margin-top:12px;max-width:30ch}

@media (max-width:1240px){
  .brand{margin-right:10px}
  .links a{padding:8px 9px}
}
@media (max-width:1060px){
  .links,.nav .lang,.nav .signin{display:none}
  .menu{display:block}
  .gpage{grid-template-columns:minmax(0,1fr)}
  .gtoc{display:none}
}
@media (max-width:900px){
  .stage{grid-template-columns:minmax(0,1fr);gap:0}
  .link svg{transform:rotate(90deg);height:56px}
  .pain.wide,.pain.split,.pain.split.flip,.exin,.qs{grid-template-columns:minmax(0,1fr)}
  .pain.split.flip .ptext{order:0}
  .row{grid-template-columns:minmax(0,1fr)}
  .footin{grid-template-columns:1fr 1fr}
  .sync{grid-template-columns:1fr;justify-items:stretch}
  .hub{justify-self:center}
}
@media (max-width:560px){
  body{font-size:16px}
  .answer p{font-size:17px}
  .steps>li{padding-left:44px}
  .grow{grid-template-columns:minmax(0,1fr)}
  .gtable table{font-size:14px}
  .gtable th,.gtable td{padding:10px 12px}
  .navin{height:58px}
  .flogo{height:24px}
  .nav .btn.primary{min-height:36px;padding:0 12px;font-size:14px}
  .phero .lead{font-size:17px}
  /* Clips run edge to edge on phones (a tap opens one full screen). */
  .pain .clip,.shot .clip,.after .clip{margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));border-radius:0;border-left:0;border-right:0}
  .herosub>p{font-size:18px}
  .sync .svc{white-space:normal}
}
@media (max-width:420px){
  .nav .btn.primary{display:none}
  .menupop .signup{font-weight:650}
  .footin{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .x::after,.link path,.link .head{transition:none}
  .marks path{animation:none!important;stroke-dashoffset:0}.marks path.hd{opacity:1}
}