/* Landing page, Variation K: Exploded view. Used only by resources/views/landing/k.blade.php.
   Colour modes follow data-bs-theme on <html>, set by public/theme/austant.js. */
:root,:root[data-bs-theme=light]{color-scheme:light;--bg:#FDFDFF;--panel:#F4F4FD;--card:#FFFFFF;--line:#E6E6EE;--soft:#EEEEF3;--shot:#E6E6EE;--head:#0C243C;--text:#5B5F76;--muted:#696981;--link:#5955D1;--seg:#F1F1F6;--segon:#FFFFFF;--tint:#EEEEFA;--tintfg:#3F3BB0;--th:#F6F6FA;--wire:#9D9AE6;--drop:rgba(40,38,110,.2);--word:#EDEDF7;--mini:#FFFFFF;--num:#0C243C;--oksub:#F0F9F6;--oktx:#00754E;--lostsub:#FFF3F3;--losttx:#B42323;--infosub:#F6F0FE;--infotx:#5A06BA;--secsub:#F2F2F4;--sectx:#484B5E;--prisub:#F5F5FC;--off:#C9C9D6;--cell-ok:#009966;--cell-bad:#F83636;--quote:#5955D1;--quotetx:#F1F0FF;--quotesub:rgba(255,255,255,.18);--ic-pri:#E4E3F9;--ic-pri-fg:#4743B5;--ic-ok:#D6F1E6;--ic-ok-fg:#00754E;--ic-info:#EADDFB;--ic-info-fg:#5A06BA;--ic-warn:#FBECC8;--ic-warn-fg:#8F5E00;--ic-lost:#FCE0E0;--ic-lost-fg:#B42323;--ic-sec:#E4E4EC;--ic-sec-fg:#484B5E}
:root[data-bs-theme=dark]{color-scheme:dark;--bg:#232323;--panel:#1E1E1E;--card:#1E1E1E;--line:rgba(255,255,255,.12);--soft:rgba(255,255,255,.08);--shot:#3A3A3F;--head:#F4F4F6;--text:#C4C4CC;--muted:#A6A6AE;--link:#A9A6F5;--seg:#1E1E1E;--segon:#3A3A40;--tint:#2B2A4D;--tintfg:#C9C7FA;--th:#2A2A2E;--wire:#6F6CC9;--drop:rgba(0,0,0,.55);--word:#2C2C2F;--mini:#2A2A2E;--num:#E4E4E8;--oksub:#001F14;--oktx:#4FD1A5;--lostsub:#320B0B;--losttx:#FF9C9C;--infosub:#16022E;--infotx:#C9A2F7;--secsub:#08080F;--sectx:#C4C4CC;--prisub:#12112A;--off:#55555C;--cell-ok:#2FBF8F;--cell-bad:#F2685F;--quote:#2B2A4D;--quotetx:#DCDBFA;--quotesub:rgba(255,255,255,.12);--ic-pri:#2B2A4D;--ic-pri-fg:#C9C7FA;--ic-ok:#0D3A2A;--ic-ok-fg:#4FD1A5;--ic-info:#2E1A4D;--ic-info-fg:#C9A2F7;--ic-warn:#3D2C08;--ic-warn-fg:#F5C04A;--ic-lost:#451717;--ic-lost-fg:#FF9C9C;--ic-sec:#333338;--ic-sec-fg:#D8D8DE}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg)}
h1,h2,h3{text-wrap:balance}
:root:not([data-bs-theme=dark]) .k-dark-only,:root[data-bs-theme=dark] .k-light-only{display:none}
.k-root{font-family:'Instrument Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.5;overflow:hidden;overflow:clip}
.k-root a{color:var(--link)}
.k-root a:focus-visible,.k-root button:focus-visible,.k-scroll:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:8px}
.k-wrap{max-width:1400px;margin:0 auto;padding-left:clamp(16px,2.4vw,32px);padding-right:clamp(16px,2.4vw,32px)}
.k-h2{margin:0;font-size:clamp(34px,4.4vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:600;color:var(--head)}
.k-h2-parts{max-width:900px}
.k-h2-final{max-width:880px}
.k-lede{margin:12px 0 0;max-width:620px;font-size:clamp(16px,1.3vw,18px);line-height:1.5}
.k-sec{padding-top:clamp(64px,8vw,120px)}
.k-small{font-size:14px;color:var(--muted)}

/* Buttons */
.k-root .k-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:#5955D1;border:1px solid #5955D1;color:#fff;text-decoration:none;font-weight:600;font-size:15px;line-height:1.3;padding:13px 22px;border-radius:8px;text-align:center;box-sizing:border-box}
.k-root .k-btn:hover{background:#4743B5;border-color:#4743B5;color:#fff}
.k-root .k-btn-o{background:transparent;color:var(--link);border-color:var(--link)}
.k-root .k-btn-o:hover{background:var(--tint);color:var(--link);border-color:var(--link)}

/* Hero */
.k-hero{position:relative;min-height:940px;padding-top:clamp(8px,1.4vw,20px)}
.k-h1{position:relative;z-index:1;margin:0;font-size:clamp(58px,10.4vw,150px);line-height:.94;letter-spacing:-.05em;font-weight:600;color:var(--head);text-wrap:wrap}
.k-h1 span{display:block}
.k-intro{position:relative;z-index:3;width:clamp(300px,31vw,430px);margin-top:clamp(20px,2.4vw,34px)}
.k-intro-copy{margin:0;font-size:clamp(17px,1.35vw,19px);line-height:1.45}
.k-intro-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px}
.k-now{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);min-height:92px}
.k-now b{display:block;font-size:18px;font-weight:600;color:var(--head);line-height:1.25}
.k-now span{display:block;margin-top:3px;font-size:15px;line-height:1.45}
.k-stage{position:absolute;z-index:2;left:37%;top:164px;width:880px;height:690px}
.k-iso{position:absolute;left:90px;top:300px;width:720px;height:520px;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-38deg)}
.k-plate{position:absolute;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s}
.k-plate img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 0 0 1px var(--shot)}
.k-base{left:0;top:0;width:720px}
.k-base img{border-radius:10px;box-shadow:0 0 0 1px var(--shot),-24px 34px 60px var(--drop)}
.k-lift{transform:translateZ(var(--z));opacity:.96}
.k-lift img{box-shadow:0 0 0 1px var(--shot),-14px 20px 34px var(--drop)}
.k-lift.k-on{transform:translateZ(calc(var(--z) + 34px));opacity:1}
.k-on img{box-shadow:0 0 0 2px var(--link),-14px 20px 34px var(--drop)}
.k-plate-row{display:flex;gap:12.4px;align-items:flex-start}
.k-wire{position:absolute;width:0;border-left:1px dashed var(--wire);transform-origin:0 0;transform:rotateX(-90deg)}
.k-tag{position:absolute;appearance:none;font:inherit;display:flex;align-items:center;min-height:44px;padding:0 13px;border-radius:8px;background:var(--card);border:1px solid var(--line);color:var(--head);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 2px 10px var(--drop)}
.k-tag:hover{border-color:var(--link);color:var(--link)}
.k-tag:after{content:"";position:absolute;right:100%;top:50%;width:var(--lead,60px);border-top:1px solid var(--wire)}
.k-tag[aria-pressed=true],.k-tag[aria-pressed=true]:hover{background:#5955D1;border-color:#5955D1;color:#FFFFFF}
.k-tabs{display:none;flex-wrap:wrap;gap:6px;margin-top:6px}
.k-tab2{appearance:none;font:inherit;font-size:14px;font-weight:600;min-height:44px;padding:6px 13px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--head);cursor:pointer}
.k-tab2[aria-pressed=true]{background:#5955D1;border-color:#5955D1;color:#FFFFFF}
.k-note{position:relative;z-index:3;width:clamp(300px,31vw,430px);margin:14px 0 0;font-size:13px;color:var(--muted)}

/* "Built to be read in a minute" panels */
.k-mos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-top:clamp(24px,3vw,40px)}
.k-pan{background:var(--panel);border-radius:16px;padding:clamp(18px,2.4vw,34px);min-width:0;box-sizing:border-box;display:flex;flex-direction:column;gap:clamp(16px,2vw,26px);justify-content:space-between;overflow:hidden}
.k-pan h3{margin:0;font-size:clamp(23px,2.2vw,32px);line-height:1.08;letter-spacing:-.024em;font-weight:600;color:var(--head)}
.k-pan p{margin:7px 0 0;max-width:460px;font-size:16px;line-height:1.45}
.k-pan img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px var(--shot)}
.k-pan-mail{background:#FAFAFA}
.k-pan-mail h3{color:#0C243C}
.k-pan-mail p{color:#5B5F76}
.s7{grid-column:span 7}.s5{grid-column:span 5}
/* The phone screenshot sits in a drawn iPhone that rises out of the panel's bottom edge. The status bar is
   coloured to match the dashboard's header in each mode (sampled from the screenshots). */
.k-phone{display:flex;align-items:flex-start;justify-content:center;margin-bottom:calc(clamp(18px,2.4vw,34px) * -1);overflow:hidden;max-height:440px;padding:4px 6px 0}
.k-iphone{--rim:#C9C9D2;--rim-hi:#EDEDF2;--sb:#FDFDFF;--sb-fg:#0B0B0F;position:relative;flex:none;width:min(272px,78%);padding:9px 9px 0;box-sizing:border-box;background:#0B0B0F;border-radius:48px 48px 0 0;box-shadow:0 0 0 2px var(--rim),0 0 0 3px var(--rim-hi),0 26px 60px -12px var(--drop)}
:root[data-bs-theme=dark] .k-iphone{--rim:#4A4A52;--rim-hi:#2E2E34;--sb:#282828;--sb-fg:#FFFFFF}
.k-iphone-screen{position:relative;overflow:hidden;border-radius:39px 39px 0 0;background:var(--sb);container-type:inline-size}
.k-pan .k-iphone-screen img{width:100%;border-radius:0;box-shadow:none}
/* Status bar in iPhone proportions (393pt wide), so the island never crowds the icons at any phone width. */
.k-iphone-bar{position:relative;display:flex;align-items:center;justify-content:space-between;height:13.7cqw;padding:0 6.5cqw 0 9.5cqw;background:var(--sb);color:var(--sb-fg);font:600 4.3cqw/1 -apple-system,BlinkMacSystemFont,'SF Pro Text','Instrument Sans',system-ui,sans-serif;letter-spacing:-.01em}
.k-iphone-time{padding-top:.6cqw}
.k-iphone-island{position:absolute;top:2.8cqw;left:50%;width:31cqw;height:9.2cqw;translate:-50% 0;border-radius:5cqw;background:#000}
.k-iphone-icons{display:flex;align-items:center;gap:1.4cqw;padding-top:.6cqw;fill:currentColor}
.k-iphone-icons svg{display:block;height:auto}
.k-iphone-icons svg:nth-child(1){width:4.4cqw}
.k-iphone-icons svg:nth-child(2){width:4.1cqw}
.k-iphone-icons svg:nth-child(3){width:6.6cqw}
.k-iphone-key{position:absolute;width:3px;background:var(--rim)}
.k-iphone-action{left:-5px;top:96px;height:26px;border-radius:2px 0 0 2px}
.k-iphone-vol-up{left:-5px;top:142px;height:46px;border-radius:2px 0 0 2px}
.k-iphone-vol-down{left:-5px;top:198px;height:46px;border-radius:2px 0 0 2px}
.k-iphone-power{right:-5px;top:160px;height:72px;border-radius:0 2px 2px 0}
.k-sample{margin:10px 2px 0;font-size:13px}

/* Stats */
.k-stats{position:relative;z-index:3;display:flex;margin-top:clamp(20px,2.6vw,36px);background:var(--panel);border-radius:16px;overflow:hidden}
.k-stat{flex:1 1 0;min-width:0;padding:clamp(18px,2.2vw,30px);border-left:1px solid var(--line);box-sizing:border-box}
.k-stat:first-child{border-left:0}
.k-stat .k-ic{width:64px;height:64px}
.k-stat .k-ic svg{width:32px;height:32px}
.k-stat-val{display:block;margin-top:clamp(14px,1.8vw,24px);font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.045em;font-weight:600;color:var(--num)}
.k-stat-label{display:block;margin-top:8px;font-size:17px;line-height:1.25;font-weight:600;color:var(--head)}
.k-stat-note{display:block;margin-top:3px;font-size:14px;line-height:1.35;color:var(--muted)}

/* Icons: the dashboard's stat tile tones, a step stronger so they hold up on the tinted panels. */
.k-ic{display:flex;align-items:center;justify-content:center;border-radius:50%;flex:none}
.k-ic-primary{background:var(--ic-pri);color:var(--ic-pri-fg)}
.k-ic-success{background:var(--ic-ok);color:var(--ic-ok-fg)}
.k-ic-info{background:var(--ic-info);color:var(--ic-info-fg)}
.k-ic-warning{background:var(--ic-warn);color:var(--ic-warn-fg)}
.k-ic-danger{background:var(--ic-lost);color:var(--ic-lost-fg)}
.k-ic-secondary{background:var(--ic-sec);color:var(--ic-sec-fg)}

/* Feature cards */
.k-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-top:clamp(24px,3vw,40px)}
.k-fc{background:var(--panel);border-radius:16px;padding:clamp(18px,1.9vw,26px);min-width:0;box-sizing:border-box;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)}
.k-fc .k-ic{width:56px;height:56px}
.k-fc .k-ic svg{width:28px;height:28px}
.k-fc h3{margin:12px 0 0;font-size:clamp(21px,1.8vw,26px);line-height:1.12;letter-spacing:-.02em;font-weight:600;color:var(--head)}
.k-fc p{margin:6px 0 0;font-size:15.5px;line-height:1.45;max-width:520px}
.k-c3{grid-column:span 3}.k-c4{grid-column:span 4}.k-c5{grid-column:span 5}.k-c7{grid-column:span 7}
.k-r2{grid-row:span 2}
.k-mini{margin-top:auto;background:var(--mini);border:1px solid var(--soft);border-radius:10px;overflow:hidden;font-size:14px}
.k-mini-fill{flex:1;display:flex;flex-direction:column}
.k-mini-fill .k-mrow{flex:1}
.k-mrow{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:7px 14px;border-top:1px solid var(--soft);color:var(--head);box-sizing:border-box}
.k-mrow:first-child{border-top:0}
.k-mrow>span:first-child{min-width:0;overflow-wrap:anywhere}
.k-mhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--soft);font-size:13px;font-weight:600;color:var(--head)}
.k-mhead span:last-child{color:var(--link);font-weight:500;overflow-wrap:anywhere;text-align:right}
.k-mhead+.k-mrow{border-top:0}
.k-badge{display:inline-flex;align-items:center;font-size:13px;font-weight:600;line-height:1.1;padding:6px 9px;border-radius:6px;white-space:nowrap;flex:none}
.k-badge-ok{background:var(--oksub);color:var(--oktx)}
.k-badge-lost{background:var(--lostsub);color:var(--losttx)}
.k-badge-pri{background:var(--prisub);color:var(--tintfg)}
.k-badge-info{background:var(--infosub);color:var(--infotx)}
.k-badge-sec{background:var(--secsub);color:var(--sectx)}
.k-strips{margin-top:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;background:var(--mini);border:1px solid var(--soft);border-radius:10px;padding:14px}
.k-strip-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;font-size:14px;font-weight:600;color:var(--head)}
.k-strip{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:3px;margin-top:8px}
.k-cell{display:block;height:30px;border-radius:4px;background:var(--cell-ok)}
.k-cell-off{background:repeating-linear-gradient(135deg,var(--off) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1.5px var(--off)}
.k-cell-bad{background:transparent;box-shadow:inset 0 0 0 2px var(--cell-bad)}
.k-key{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--text)}
.k-key span{display:inline-flex;align-items:center;gap:6px}
.k-cell-key{display:block;width:13px;height:13px;border-radius:3px;flex:none;background-color:var(--cell-ok)}
.k-cell-key.k-cell-off{background:repeating-linear-gradient(135deg,var(--off) 0 3px,transparent 3px 6px)}
.k-cell-key.k-cell-bad{background:transparent}
.k-digest-seg{display:flex;gap:2px;padding:4px;border-radius:8px;background:var(--seg);margin:12px}
.k-digest-btn{flex:1;appearance:none;border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:600;min-height:44px;padding:0 8px;border-radius:6px;background:transparent;color:var(--muted)}
.k-digest-btn[aria-pressed=true]{background:var(--segon);color:var(--head);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.k-when{padding:0 14px 12px;font-size:15px;font-weight:600;color:var(--head)}
.k-rec{display:flex;align-items:center;padding:10px 14px;border-top:1px solid var(--soft);font-size:13px;color:var(--text)}
.k-ava{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;margin-right:-6px;background:#5955D1;color:#FFFFFF;font-size:12px;font-weight:600;box-shadow:0 0 0 2px var(--mini);flex:none}
.k-rec-text{margin-left:16px}
.k-tags{display:flex;flex-wrap:wrap;gap:6px;padding:14px}
.k-code{margin:0;padding:13px 14px;font:500 13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.k-code b{font-weight:500;color:var(--link)}
.k-code i{font-style:normal;color:var(--muted)}

/* Testimonials */
.k-quotes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-top:clamp(24px,3vw,40px)}
.k-quote{grid-column:span 5;margin:0;border-radius:16px;padding:clamp(20px,2.4vw,34px);box-sizing:border-box;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:24px;background:var(--panel)}
.k-quote blockquote{margin:0;font-size:clamp(19px,1.7vw,24px);line-height:1.28;letter-spacing:-.012em;font-weight:500;color:var(--head)}
.k-quote figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.k-person{flex:1 1 150px;min-width:0;font-size:14px;line-height:1.3;color:var(--text)}
.k-person b{display:block;font-size:15px;font-weight:600;color:var(--head)}
.k-avatar{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--tint);color:var(--tintfg);font-size:14px;font-weight:600;flex:none}
.k-result{display:inline-flex;font-size:13px;font-weight:600;line-height:1.2;padding:7px 10px;border-radius:6px;background:var(--oksub);color:var(--oktx)}
.k-quote-lead{grid-column:span 7;background:var(--quote);color:var(--quotetx)}
.k-quotes-3 .k-quote-lead{grid-row:span 2}
.k-quotes-1 .k-quote-lead{grid-column:span 12}
.k-quote-lead blockquote{font-size:clamp(28px,3.3vw,48px);line-height:1.08;letter-spacing:-.03em;font-weight:600;color:#FFFFFF}
.k-quote-lead .k-person,.k-quote-lead .k-person b{color:#FFFFFF}
.k-quote-lead .k-avatar,.k-quote-lead .k-result{background:var(--quotesub);color:#FFFFFF}

/* Pricing */
.k-pricing-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 32px}
.k-pricing-copy{max-width:760px}
.k-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(24px,3vw,40px);border-top:2px solid var(--head)}
.k-plan{padding:20px clamp(14px,1.6vw,24px) 22px;border-left:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.k-plan:first-child{border-left:0;padding-left:0}
.k-plan-name{font-size:18px;font-weight:600;color:var(--head)}
.k-plan-big{margin-top:18px;font-size:clamp(38px,4.5vw,66px);line-height:1;letter-spacing:-.04em;font-weight:600;color:var(--head)}
.k-plan-unit{margin-top:4px;font-size:15px;color:var(--muted)}
.k-plan-lim{list-style:none;margin:18px 0 22px;padding:0;font-size:15px;line-height:1.35}
.k-plan-lim li{padding:8px 0;border-top:1px solid var(--soft)}
.k-plan-lim strong{font-weight:600;color:var(--head)}
.k-plan-buy{margin-top:auto}
.k-plan-price{font-size:22px;font-weight:600;color:var(--head);letter-spacing:-.01em}
.k-plan-per{font-size:14px;font-weight:400;color:var(--muted)}
.k-plan-billed{font-size:13px;color:var(--muted)}
.k-root .k-btn-plan{display:flex;margin-top:12px;padding:10px 12px;font-size:14px}
.k-plans-note{margin:16px 0 0}

/* FAQ and final call to action */
.k-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);margin-top:clamp(18px,2vw,26px)}
.k-q{border-top:1px solid var(--line);padding:18px 0}
.k-q h3{margin:0;font-size:18px;line-height:1.25;font-weight:600;color:var(--head)}
.k-q p{margin:5px 0 0;font-size:15px}
.k-final{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}

/* Footer */

/* Entrance and scroll reveals. Nothing here applies until the inline script in k.blade.php's <head> adds
   .k-reveal-ready to <html>, so without JavaScript, in print and under reduced motion the page is static.
   The hero plays a CSS entrance from the first paint. landing-k.js adds .k-rv only to blocks that start
   below the fold, then swaps it for .k-rv-in as each scrolls in; the script removes .k-rv-in afterwards, so
   no filter or will-change is left behind. They move with `translate` rather than `transform`, so the
   stage's own scale and the plates' 3D transforms are left alone. */
@media screen and (prefers-reduced-motion:no-preference){
  /* The hero holds the LCP: the stage image, or the heading or intro copy on a phone. Chrome doesn't count
     a paint at opacity 0, which put LCP about 150-200ms later, so the hero starts faint rather than
     invisible, with a lighter blur, and none on the stage, which is one big 3D image. */
  .k-reveal-ready .k-h1 span,.k-reveal-ready .k-intro,.k-reveal-ready .k-note{animation:k-focus .6s cubic-bezier(.16,1,.3,1) backwards}
  .k-reveal-ready .k-h1 span+span{animation-delay:.06s}
  .k-reveal-ready .k-intro{animation-delay:.14s}
  .k-reveal-ready .k-note{animation-delay:.22s}
  .k-reveal-ready .k-stage{animation:k-settle .7s cubic-bezier(.16,1,.3,1) backwards}
  .k-reveal-ready .k-rv{opacity:0;translate:0 12px;filter:blur(8px)}
  .k-reveal-ready .k-rv-in{transition-property:opacity,translate,filter;transition-duration:.6s;transition-timing-function:cubic-bezier(.16,1,.3,1);transition-delay:var(--k-d,0s);will-change:opacity,translate,filter}
}
@keyframes k-focus{from{opacity:.2;translate:0 12px;filter:blur(4px)}}
@keyframes k-settle{from{opacity:.2;translate:0 12px}}

/* Keeps scaled-down labels at a 44px touch target without changing how they look. */
.k-tag:before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
/* The design scales the stage at 1240px only, which clips the plates and "Stat tiles" label
   between 1241-1430px and 1001-1064px. These extra steps keep the whole stage on screen. */
@media (max-width:1430px){
  .k-stage{transform:scale(.9);transform-origin:0 0}
}
@media (max-width:1290px){
  .k-stage{transform:scale(.8);left:36%}
}
@media (max-width:1240px){
  .k-hero{min-height:880px}
}
@media (max-width:1100px){
  .k-stage{transform:scale(.68)}
  .k-hero{min-height:780px}
  .k-c3,.k-c4,.k-c5,.k-c7{grid-column:span 6}
  .k-r2{grid-row:auto}
  .k-wide{grid-column:span 12}
  .k-quote,.k-quote-lead{grid-column:span 12}
  .k-quotes-3 .k-quote-lead{grid-row:auto}
}
@media (max-width:1000px){
  .k-hero{min-height:0;padding-bottom:8px}
  .k-intro{width:auto}
  .k-stage{position:relative;left:50%;top:auto;width:880px;height:560px;margin:6px 0 0 -440px;transform:scale(.72);transform-origin:50% 12%;margin-bottom:44px} /* Design: -120px, which ran the plates over the note and the next heading. */
  .k-tag{display:none}
  .k-tabs{display:flex}
  .k-note{width:auto;margin-top:8px}
  .s7,.s5{grid-column:span 12}
  .k-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .k-plan:nth-child(3){border-left:0;padding-left:0}
  .k-plan:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .k-stats{flex-wrap:wrap}
  .k-stat{flex:1 1 50%;border-left:0;border-top:1px solid var(--line)}
  .k-stat:nth-child(-n+2){border-top:0}
  .k-stat:nth-child(even){border-left:1px solid var(--line)}
  .k-c3,.k-c4,.k-c5,.k-c7{grid-column:span 12}
  .k-strips{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .k-stage{transform:scale(.42);height:350px;margin-bottom:-6px;transform-origin:50% 0;margin-top:14px}
  .k-faq{grid-template-columns:minmax(0,1fr)}
  .k-scroll{overflow-x:auto}
  .k-scroll img{width:760px;max-width:none}
  .k-plan{padding-left:12px;padding-right:12px}
}
@media (max-width:460px){
  .k-stat{padding:14px}
  .k-stat .k-ic{width:52px;height:52px}
  .k-stat .k-ic svg{width:26px;height:26px}
  .k-stat-label{font-size:15px}
  .k-stat-note{font-size:13px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.k-plate{transition:none}}
/* "Built to be read in a minute": the Link History and competitor screenshots fill the height their
   taller neighbour (the phone, the email) sets, cropped from the top and running off the panel's
   bottom edge like the phone, so no panel is left with a gap above its picture. */
.k-fill{position:relative;flex:1 1 0;min-height:260px;margin-bottom:calc(clamp(18px,2.4vw,34px) * -1);overflow:hidden;border-radius:10px 10px 0 0;box-shadow:0 0 0 1px var(--shot)}
.k-fill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;border-radius:0;box-shadow:none}
.k-pan-mail img{margin-bottom:calc(clamp(18px,2.4vw,34px) * -1);border-radius:10px 10px 0 0}
@media (max-width:1000px){
  .k-fill{flex:none;height:clamp(280px,52vw,440px)}
  .k-pan-mail img{max-width:560px}
}
@media (max-width:640px){
  .k-fill{height:auto;max-height:380px;overflow-x:auto;overflow-y:hidden}
  .k-fill img{position:static;width:760px;max-width:none;height:auto}
}