/* =========================================================
   Clipio — the home page (/)
   ---------------------------------------------------------
   Layers on css/site.css (base, nav, buttons, footer). The
   first part is the page frame (hero, feature rows, blocks);
   the sections after it each carry their own block, in page
   order.
   ========================================================= */
/* ---------- Page frame ---------- */
.lp{ position:relative; padding-bottom:120px; }
.lp-col{ max-width:1232px; margin:0 auto; padding:0 20px; }
@media (max-width:700px){ .lp{ padding-bottom:60px; } }

/* A soft blue glow low on the page, behind everything. */
.glow{ position:relative; z-index:-1; height:0; }
.glow::before{ content:''; position:absolute; left:50%; top:-850px; width:2271px; height:1198px; transform:translateX(-650px); opacity:.25; pointer-events:none;
               background:radial-gradient(26% 38% at 29% 46%, rgba(26,132,239,.26), transparent 72%),
                          radial-gradient(26% 38% at 70% 50%, rgba(26,132,239,.10), transparent 72%); }

/* ---------- Hero ----------
   The band spans the window; the padding puts its content back in the
   page column (50% is the column's width here). */
.hero{ position:relative; width:100vw; margin-left:calc(50% - 50vw); padding:0 calc(50vw - 50%) 96px; color:#fff;
       background:linear-gradient(180deg, #08080B 0px, #0A0D1C 220px, #0B1A55 430px, #0F3FD6 640px, #2A6BFF 820px, #8DB0FF 1040px, #E4ECFF 1260px, #FFFFFF 1480px, #FFFFFF 100%); }
/* A brighter pool of blue behind the buttons. */
.hero::before{ content:''; position:absolute; left:50%; top:330px; width:min(1000px, 100%); height:440px; transform:translateX(-50%); pointer-events:none;
               background:radial-gradient(closest-side, rgba(58,110,255,.55), transparent); }
.hero > *{ position:relative; }

.hero__badge-row{ display:flex; justify-content:center; padding:49px 0 52px; }
.hero__badge{ display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 16px 8px 11px; border:0; border-radius:999px;
              background:#17171B; color:#fff; font-size:14px; font-weight:550; line-height:1.43; letter-spacing:.01em; cursor:pointer;
              box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 0 24px rgba(26,132,239,.25); }
.hero__badge:hover{ background:#202026; }
.hero__badge:focus-visible{ outline:2px solid #1A84EF; outline-offset:3px; }
.hero__badge svg{ width:16px; height:16px; fill:currentColor; }

.hero__head{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding-bottom:64px; }
/* Headline: always exactly two lines. Each line is unbreakable, and the
   type shrinks with the window so the longer line still fits.
   Subtitle: each sentence starts a line, and wraps inside its width (it is
   too long to shrink onto one line on a phone). */
.hero__line{ display:block; white-space:nowrap; }
.hero__title{ margin:0; text-align:center; color:#fff; font-size:min(60px, calc((100vw - 40px) / 14)); font-weight:600; line-height:1.1; letter-spacing:-.02em; }
.hero__lede{ max-width:820px; margin:16px 0 32px; text-align:center; color:rgba(255,255,255,.62); font-size:clamp(15px, calc((100vw - 40px) / 32), 18px); font-weight:450; line-height:1.67; letter-spacing:.01em; text-wrap:balance; }
.hero__lede .hero__line{ white-space:normal; }
@media (max-width:700px){ .hero__title{ line-height:1.14; } }

.hero__cta{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.hero__dl{ display:flex; align-items:center; gap:16px; }
.hero__dl .pill--blue{ box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.hero__note{ margin:0; text-align:center; color:rgba(255,255,255,.55); font-size:15px; font-weight:550; line-height:1.6; letter-spacing:.01em; }
@media (max-width:640px){
  .hero__cta{ width:100%; }
  .hero__dl{ flex-direction:column; align-items:stretch; width:100%; }
  .hero__dl .pill{ width:100%; }
}

.hero__media{ position:relative; width:100%; margin-top:88px; }

/* "Record anything you work in": tool logos sliding left, two copies of
   the row so the loop has no seam, faded at the edges. */
.tools-strip{ padding-top:25px; }
.tools-strip__label{ margin:0 0 30px; text-align:center; color:#7C8794; font-size:15px; font-weight:450; line-height:1.6; letter-spacing:.01em; }
.tools-strip__track{ display:flex; overflow:hidden; padding:8px 0 8px 10%;
                     -webkit-mask-image:linear-gradient(90deg, transparent, #000 10% 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10% 90%, transparent); }
.tools-strip__row{ display:flex; flex:none; align-items:center; gap:44px; padding-right:44px; animation:tools-run 70s linear infinite; }
@keyframes tools-run{ to{ translate:-100%; } }
.tools-strip__item{ display:inline-flex; flex-shrink:0; align-items:center; gap:10px; color:#8A94A1; font:600 17px/1 Inter, system-ui, sans-serif; letter-spacing:-.02em; white-space:nowrap; transition:color .2s; }
.tools-strip__item svg{ width:24px; height:24px; flex:none; fill:currentColor; }
.tools-strip__item:hover{ color:#4B5563; }
@media (prefers-reduced-motion:reduce){ .tools-strip__row{ animation:none; } }

/* ---------- Feature rows and blocks ---------- */
.rows{ display:flex; flex-direction:column; gap:200px; padding:120px 0; }
@media (max-width:640px){ .rows{ gap:100px; } }

/* A row: copy on one side, the illustration on the other. */
.row{ display:flex; align-items:center; gap:80px; max-height:480px; }
.row--flip{ flex-direction:row-reverse; }
.row__copy{ width:432px; }
.row__title{ margin:0 0 12px; font-size:40px; font-weight:600; line-height:1.2; letter-spacing:-.02em; }
.row__text{ margin:0; color:#161618a3; font-size:18px; font-weight:450; line-height:1.67; letter-spacing:.01em; }
.row__art{ flex:1; min-width:0; }
@media (max-width:1000px){
  .row{ gap:40px; }
  .row__copy{ flex:1; width:auto; }
}
@media (max-width:850px){
  .row{ max-height:none; flex-direction:column; gap:35px; }
  /* These two scenes size themselves from their width (size containers),
     so the stacked column must be full width or they collapse. */
  .row--scroll .row__art, .row--ocr .row__art{ width:100%; align-self:stretch; }
}
@media (max-width:700px){ .row__title{ font-size:32px; line-height:1.25; } }

/* A block: heading, an intro line with an optional action, then media. */
.block__head{ display:flex; align-items:center; gap:20px; }
.block__title{ margin:0; font-size:40px; font-weight:600; line-height:1.2; letter-spacing:-.02em; }
.block__intro{ display:flex; justify-content:space-between; gap:40px; margin:12px 0 64px; }
.block__text{ max-width:736px; margin:0; color:#161618a3; font-size:18px; font-weight:450; line-height:1.67; letter-spacing:.01em; }
.block__actions{ display:flex; flex-shrink:0; align-items:flex-end; }
.block .block__media{ display:block; margin-top:24px; color:inherit; }
/* Centred: the video editor block. */
.block--center .block__head{ justify-content:center; flex-wrap:wrap; text-align:center; }
.block--center .block__intro{ flex-direction:column; align-items:center; gap:24px; text-align:center; }
.block--center .block__text{ max-width:680px; }
@media (max-width:840px){ .block__intro{ flex-direction:column; gap:20px; margin-bottom:50px; } }
@media (max-width:700px){ .block__title{ font-size:32px; line-height:1.25; } }
@media (max-width:640px){
  .block__head{ flex-direction:column; align-items:flex-start; }
  .block--center .block__head{ align-items:center; }
  .block__actions, .block__actions .pill{ width:100%; }
}

/* The share tiles: a four-column grid of wide and narrow tiles, text over
   the illustration. */
.tiles{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-rows:418px; gap:24px; }
.tile{ position:relative; display:block; width:100%; min-height:220px; justify-self:center; isolation:isolate; overflow:hidden;
       border-radius:20px; color:inherit; text-decoration:none; }
.tile--wide{ grid-column:span 2; max-width:584px; }
.tile--narrow{ grid-column:span 1; max-width:280px; }
.tile__art{ display:block; width:100%; height:100%; min-height:inherit; }
.tile__copy{ position:absolute; inset:0; z-index:2; padding:30px; }
.tile__title{ margin:0; color:#fff; font-size:20px; font-weight:600; line-height:1.4; letter-spacing:-.02em; }
.tile__text{ margin:12px 0 0; color:#ffffffb8; font-size:15px; font-weight:450; line-height:1.6; letter-spacing:.01em; }
.tile__chip{ display:inline-block; margin-top:12px; padding:7px 12px; border:1px solid #fff6; border-radius:56px; background:#ffffff24;
             -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; font-size:13px; font-weight:550; line-height:1.23; letter-spacing:.01em;
             box-shadow:0 2px 6px -1px #16161833, 0 0 0 1px #16161829; }
@media (max-width:1200px){
  .tile__title{ font-size:18px; }
  .tile__text{ font-size:14px; line-height:1.43; }
}
@media (max-width:1000px){ .tiles{ grid-template-columns:repeat(5, minmax(0, 172px)); justify-content:center; } }
@media (max-width:1000px) and (min-width:625px){
  .tile{ grid-column:span 2; max-width:368px; min-height:0; }
  .tile:nth-child(6n + 1), .tile:nth-child(6n + 4), .tile:nth-child(6n + 5){ grid-column:span 3; max-width:564px; }
}
@media (max-width:624px){
  .tiles{ grid-template-columns:repeat(1, minmax(0, 584px)); justify-content:center; }
  .tile{ grid-column:span 1; max-width:584px; min-height:0; }
}

/* ---------- Sections ---------- */

/* Video editor: Clipio's editor window with the promo playing in its preview. */
.cve{ display:grid; place-items:center; padding:clamp(20px, 4vw, 48px); border-radius:20px; overflow:hidden;
      background:#0B0E14 url('/assets/modes/video-bg.webp') center / cover; }
.cve-ed{ position:relative; width:min(100%, 900px); aspect-ratio:10375 / 6353; filter:drop-shadow(0 30px 50px rgba(0,0,0,.5)); }
.cve-ed img{ display:block; width:100%; height:100%; clip-path:inset(0.95% 0.46% 1.22% 0.63% round 2.08% / 3.4%); }
.cve-vid{ position:absolute; left:29.6%; top:7.72%; width:65.7%; height:auto; border-radius:4px; }
/* Testimonials: initials where the photos were. */
.cl-ini{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#EDF5FE; color:#0B4C8F; font:650 15px/1 Inter, system-ui, sans-serif; letter-spacing:.02em; flex:none; }

/* Bento illustrations, on the tools row's dark backgrounds. */
.cb{ position:relative; overflow:hidden; background-color:#05070B; font-family:Inter, system-ui, sans-serif; }
.cb *{ box-sizing:border-box; } .cb p{ margin:0; }
.cb-g1{ background-image:radial-gradient(70% 55% at 0% 105%, rgba(16,185,170,.85), transparent 70%), radial-gradient(65% 50% at 100% 105%, rgba(249,115,22,.8), transparent 70%), radial-gradient(70% 45% at 55% 115%, rgba(37,99,235,.95), transparent 72%); }
.cb-g2{ background-image:radial-gradient(60% 55% at 100% 0%, rgba(59,130,246,.75), transparent 70%), radial-gradient(60% 55% at 0% 105%, rgba(20,184,166,.75), transparent 70%), radial-gradient(55% 45% at 75% 115%, rgba(236,72,153,.55), transparent 70%); }
.cb-g3{ background-image:radial-gradient(60% 55% at 100% 105%, rgba(251,146,60,.85), transparent 70%), radial-gradient(65% 50% at 25% 115%, rgba(14,165,233,.9), transparent 72%), radial-gradient(50% 40% at 0% 0%, rgba(99,102,241,.45), transparent 70%); }
.cb svg{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.cb .cb-chart{ display:block; width:100%; height:100%; stroke:none; }
.cb code{ font:500 11px/1.3 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.cb-ok{ display:inline-grid; place-items:center; flex:none; width:18px; height:18px; border-radius:50%; background:#DCFCE7; color:#16A34A; }
.cb-ok svg{ width:12px; height:12px; stroke-width:2.8; }
.cb-panel{ position:absolute; background:#fff; border-radius:14px; box-shadow:0 16px 36px -14px rgba(0,0,0,.6); color:#374151; font-size:12.5px; }
/* one click to a link */
.cb-qc{ position:absolute; left:32px; bottom:42px; width:200px; height:160px; border-radius:14px; overflow:hidden; border:1px solid #323232; box-shadow:0 18px 36px -12px rgba(0,0,0,.6); }
@supports (corner-shape: squircle){ .cb-qc{ border-radius:36px; corner-shape:squircle; } }
.cb-side{ position:absolute; left:244px; bottom:42px; height:160px; display:flex; flex-direction:column; justify-content:center; gap:8px; }
.cb-side b{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.92); color:#1a1a1a; }
.cb-side b.on{ background:#1A84EF; color:#fff; box-shadow:0 0 0 4px rgba(26,132,239,.3); } .cb-side svg{ width:13px; height:13px; }
.cb-toast{ position:absolute; left:296px; right:24px; bottom:96px; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; background:#fff; box-shadow:0 16px 36px -12px rgba(0,0,0,.6); }
.cb-toast p{ font-size:13.5px; font-weight:650; color:#111827; } .cb-toast code{ display:block; margin-top:2px; color:#6B7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-toast > div{ min-width:0; }
/* saved in your Drive */
.cb-drive{ left:24px; right:-14px; bottom:-14px; height:58%; padding:16px 18px; }
.cb-ph{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:650; color:#111827; margin-bottom:6px !important; }
.cb-ph svg{ width:16px; height:16px; color:#F59E0B; }
.cb-file{ display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid #F0F2F5; white-space:nowrap; }
.cb-file svg{ width:14px; height:14px; color:#9CA3AF; flex:none; } .cb-file span{ flex:1; overflow:hidden; text-overflow:ellipsis; } .cb-file em{ font-style:normal; color:#9CA3AF; font-size:11.5px; padding-right:14px; }
/* sees only its own files */
.cb-perm{ left:20px; right:20px; bottom:28px; padding:16px; }
.cb-pt{ font-size:13px; font-weight:650; color:#111827; } .cb-pr{ display:flex; gap:9px; margin-top:10px !important; line-height:1.45; font-size:12px; }
.cb-pbtns{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px !important; } .cb-pbtns span, .cb-pbtns b{ padding:6px 12px; border-radius:8px; font-size:12px; font-weight:600; }
.cb-pbtns span{ color:#4B5563; box-shadow:inset 0 0 0 1px #E5E7EB; } .cb-pbtns b{ background:#1A84EF; color:#fff; }
/* everything else stays local */
.cb-local{ position:absolute; left:30px; right:30px; bottom:28px; display:grid; gap:7px; }
.cb-local p{ display:flex; align-items:center; gap:9px; padding:7px 12px; border-radius:10px; background:#fff; color:#111827; font-size:13px; font-weight:550; box-shadow:0 8px 20px -10px rgba(0,0,0,.5); }
.cb-local code{ margin-top:4px; color:rgba(255,255,255,.7); text-align:center; }
/* sensitive info */
.cb-acct{ left:32px; width:330px; bottom:-14px; height:56%; padding:18px 20px; }
.cb-at{ font-size:14px; font-weight:650; color:#111827; margin-bottom:6px !important; }
.cb-ar{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-top:1px solid #F0F2F5; }
.cb-px{ height:12px; border-radius:3px; background-color:#C9CED6; background-image:linear-gradient(90deg, rgba(255,255,255,.55) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.08) 50%, transparent 50%); background-size:12px 12px, 12px 12px; }
.cb-found{ position:absolute; left:384px; bottom:120px; display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:99px; background:#fff; color:#111827; font-size:12.5px; font-weight:650; white-space:nowrap; box-shadow:0 12px 28px -10px rgba(0,0,0,.6); }
.cb-found svg{ width:15px; height:15px; color:#1A84EF; }
/* offline captions */
.cb-caps{ position:absolute; left:16px; right:16px; bottom:22px; display:grid; gap:8px; }
.cb-caps p{ display:flex; gap:10px; padding:10px 12px; border-radius:12px; color:rgba(255,255,255,.75); font-size:12.5px; line-height:1.45; }
.cb-caps p.on{ background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); color:#fff; }
.cb-caps code{ flex:none; height:fit-content; padding:2px 6px; border-radius:6px; background:#fff; color:#1A84EF; font-weight:600; }
/* library */
.cb-chips{ position:absolute; left:0; right:0; top:150px; display:flex; justify-content:center; gap:8px; }
.cb-chips span{ padding:5px 12px; border-radius:99px; background:rgba(255,255,255,.12); color:#fff; font-size:13px; font-weight:550; }
.cb-chips span.on{ background:#1A84EF; }
.cb-thumbs{ position:absolute; left:-30px; right:-30px; top:196px; display:flex; justify-content:center; gap:18px; }
.cb-th{ position:relative; flex:none; width:190px; height:128px; border-radius:14px; overflow:hidden; box-shadow:0 14px 30px -12px rgba(0,0,0,.6); }
.cb-th em{ position:absolute; z-index:1; right:8px; bottom:8px; padding:2px 7px; border-radius:6px; background:rgba(0,0,0,.6); color:#fff; font:600 11px/1.3 Inter, sans-serif; font-style:normal; }
.cb-th--a{ background:#fff linear-gradient(#F3F4F6, #F3F4F6) 16px 18px / 60% 10px no-repeat; }
.cb-th--a::after{ content:''; position:absolute; left:16px; right:16px; top:40px; bottom:16px; border-radius:8px; background:linear-gradient(135deg,#FDB98A,#F77FA5); }
.cb-th--b.on{ box-shadow:0 0 0 3px #1A84EF, 0 14px 30px -12px rgba(0,0,0,.6); }
.cb-th--c{ background:linear-gradient(135deg,#0EA5E9,#6366F1); }
.cb-open{ position:absolute; left:50%; top:342px; transform:translateX(-50%); padding:5px 14px; border-radius:8px; background:#1A84EF; color:#fff; font-size:13px; font-weight:600; }
/* pin */
.cb-pin{ position:absolute; left:28px; right:-20px; bottom:30px; height:150px; border-radius:12px; overflow:visible; box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 16px 36px -12px rgba(0,0,0,.6); }
.cb-pin > .cb-chart{ border-radius:12px; }
.cb-pinbar{ position:absolute; left:16px; top:-18px; display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:99px; background:#fff; box-shadow:0 8px 20px -8px rgba(0,0,0,.5); }
.cb-pinbar b{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#374151; } .cb-pinbar b.on{ background:#1A84EF; color:#fff; } .cb-pinbar svg{ width:13px; height:13px; }
.cb-pinbar > i{ position:relative; width:56px; height:4px; border-radius:99px; background:#E5E7EB; } .cb-pinbar > i > i{ position:absolute; left:0; top:0; bottom:0; width:70%; border-radius:99px; background:#1A84EF; }
/* self-timer */
.cb-timer{ position:absolute; left:50%; top:52%; width:150px; height:150px; transform:translate(-50%, -30%); display:grid; place-items:center; }
.cb-timer svg{ position:absolute; inset:0; width:100%; height:100%; } .cb-timer b{ color:#fff; font:700 64px/1 Inter, sans-serif; letter-spacing:-.04em; }
.cb-tl{ position:absolute; left:0; right:0; bottom:40px; text-align:center; color:rgba(255,255,255,.75); }
/* native */
.cb-os{ position:absolute; left:28px; right:28px; bottom:30px; display:grid; gap:10px; }
.cb-os > div{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:#fff; box-shadow:0 10px 24px -10px rgba(0,0,0,.55); }
.cb .cb-os svg{ width:24px; height:24px; fill:currentColor; stroke:none; color:#111827; } .cb-os > div:first-child svg{ color:#1A84EF; }
.cb-os p{ font-size:14px; font-weight:600; color:#111827; }
/* effect packs */
.cb-fx{ position:absolute; left:28px; right:28px; bottom:30px; display:grid; gap:12px; }
.cb-cur{ display:flex; justify-content:center; gap:14px; padding:14px; border-radius:14px; background:#fff; box-shadow:0 10px 24px -10px rgba(0,0,0,.55); }
.cb-cur i{ display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:#F3F4F6; }
.cb-dot::after{ content:''; width:12px; height:12px; border-radius:50%; background:#1A84EF; }
.cb-ring::after{ content:''; width:20px; height:20px; border-radius:50%; border:3px solid #1A84EF; box-sizing:border-box; }
.cb-ptr svg{ width:20px; height:20px; fill:#111827; stroke:#fff; stroke-width:1.2; }
.cb-wall{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; } .cb-wall i{ aspect-ratio:4 / 3; border-radius:8px; box-shadow:0 0 0 1px rgba(255,255,255,.3); }
/* tray */
.cb-task{ position:absolute; left:0; right:0; bottom:0; height:44px; display:flex; align-items:center; gap:10px; padding:0 18px; background:rgba(20,22,30,.82); border-top:1px solid rgba(255,255,255,.08); }
.cb-task > i{ width:22px; height:22px; border-radius:6px; background:rgba(255,255,255,.18); }
.cb-tray{ margin-left:auto; display:flex; align-items:center; gap:10px; } .cb-tray > i{ width:14px; height:14px; border-radius:4px; background:rgba(255,255,255,.3); }
.cb-tray b{ display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.cb-tray b img{ width:18px; height:18px; } .cb-tray code{ color:rgba(255,255,255,.8); }
.cb-menu{ position:absolute; right:30px; bottom:56px; width:200px; padding:6px; border-radius:12px; background:#fff; box-shadow:0 18px 40px -12px rgba(0,0,0,.6); }
.cb-menu p{ padding:7px 10px; border-radius:7px; font-size:13px; color:#111827; } .cb-menu p:first-child{ background:#1A84EF; color:#fff; }
.cb-menu hr{ border:0; height:1px; background:#EEF0F3; margin:4px 2px; }
@media (max-width:1000px){ .cb-toast{ left:24px; right:24px; bottom:auto; top:180px; } .cb-found{ left:auto; right:20px; } .cb-acct{ width:auto; right:-14px; } }

.tm{ width:100vw; margin-left:calc(50% - 50vw); padding:110px 0 120px; background:#F3F4F6; font-family:Inter, system-ui, sans-serif; color:#0C1116; overflow:hidden; }
.tm *{ box-sizing:border-box; } :where(.tm) :where(h2, p, ul){ margin:0; }
.tm-head{ max-width:860px; margin:0 auto; padding:0 24px; text-align:center; }
.tm-head h2{ font-size:52px; line-height:1.1; letter-spacing:-.03em; font-weight:500; }
.tm-head h2 span{ display:block; }   /* one line each: "Built with care." / "Loved by early users." */
.tm-head p{ margin-top:18px; font-size:17px; line-height:1.6; color:#4B5563; }
.tm-btns{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:30px; }
.tm-btn{ display:inline-flex; align-items:center; height:48px; padding:0 22px; font-size:16px; font-weight:550; text-decoration:none; transition:background .15s, border-color .15s; }
.tm-btn--dark{ background:#0C0C0E; color:#fff; } .tm-btn--dark:hover{ background:#2A2A30; }
.tm-btn--line{ background:#fff; color:#0C1116; box-shadow:inset 0 0 0 1px #D9DCE1; } .tm-btn--line:hover{ background:#F8F9FA; }
.tm-rail{ margin-top:64px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tm-track{ list-style:none; padding:0; display:flex; gap:24px; width:max-content; animation:tm-run 48s linear infinite; }
.tm-rail:hover .tm-track, .tm-track:focus-within{ animation-play-state:paused; }
@keyframes tm-run{ to{ transform:translateX(calc(-50% - 12px)); } }
.tm-card{ position:relative; flex:none; width:416px; height:500px; display:flex; flex-direction:column; padding:30px 28px 28px; border-radius:22px; background:#fff;
          box-shadow:0 1px 2px rgba(12,17,22,.04), 0 0 0 1px rgba(12,17,22,.04); }
.tm-qm{ font:700 44px/1 Georgia, serif; color:#C9CDD3; height:30px; }
.tm-q{ margin-top:26px !important; font-size:19px; line-height:1.62; color:#6B7280; }
.tm-q mark{ color:#0C1116; font-weight:500; padding:1px 0; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.tm-g{ background:#E7F9B5; } .tm-b{ background:#DCEBFE; }
.tm-by{ margin-top:auto; display:flex; align-items:center; gap:12px; }
.tm-by b{ display:block; font-size:16px; font-weight:550; } .tm-by span{ display:block; margin-top:2px; font-size:14px; color:#8A929D; }
.tm-av{ flex:none; display:grid !important; place-items:center; width:46px; height:46px; margin:0 !important; border-radius:50%; background:#0C1116; color:#fff !important; font-size:15px !important; font-weight:650; letter-spacing:.02em; }
.tm-video{ color:#fff; cursor:pointer; overflow:hidden; background:#0B2A9E url('/assets/promo-poster.jpg') right -190px top -560px / auto 230% no-repeat; }
.tm-video::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,30,120,.15) 30%, rgba(20,60,255,.92) 100%); }
.tm-video > *{ position:relative; } .tm-video .tm-qm{ color:rgba(255,255,255,.75); }
.tm-video .tm-by span{ color:rgba(255,255,255,.75); }
.tm-play{ position:absolute !important; left:50%; top:46%; display:grid; place-items:center; width:72px; height:72px; transform:translate(-50%, -50%); border-radius:50%;
          background:rgba(255,255,255,.22); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); transition:transform .2s; }
.tm-play svg{ width:26px; height:26px; margin-left:3px; fill:#fff; }
.tm-video:hover .tm-play{ transform:translate(-50%, -50%) scale(1.08); }
.tm-video:focus-visible{ outline:3px solid #1A84EF; outline-offset:3px; }
@media (max-width:760px){ .tm{ padding:80px 0; } .tm-head h2{ font-size:34px; } .tm-card{ width:300px; height:430px; padding:24px 22px; } .tm-q{ font-size:17px; } }
@media (prefers-reduced-motion:reduce){ .tm-track{ animation:none; } .tm-rail{ overflow-x:auto; } }

/* "Three capture tools" section. */
.cm{ padding:120px 0 40px; font-family:Inter, system-ui, sans-serif; color:var(--ink); }
.cm [hidden]{ display:none !important; }
.cm-wrap{ max-width:1192px; margin:0 auto; text-align:center; }   /* its container already pads the sides */
.cm-title{ margin:0; font-size:clamp(32px, 4.4vw, 48px); line-height:1.08; letter-spacing:-.035em; font-weight:650; }
.cm-lede{ max-width:620px; margin:16px auto 0; font-size:17px; line-height:1.6; color:var(--ink-2); }
.cm-tabs{ display:inline-flex; gap:4px; margin:36px auto 28px; padding:5px; border:1px solid var(--line); border-radius:999px; background:var(--page-alt); }
.cm-tab{ display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border:0; border-radius:999px; background:transparent; color:var(--ink-2); font:560 15px/1 Inter, system-ui, sans-serif; letter-spacing:-.01em; cursor:pointer; transition:background .15s, color .15s, box-shadow .15s; }
.cm-tab svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cm-tab:hover{ color:var(--ink); }
.cm-tab[aria-selected="true"]{ background:var(--page); color:var(--ink); box-shadow:0 1px 3px rgba(12,17,22,.08), 0 0 0 1px var(--line); }
.cm-tab[aria-selected="true"] svg{ color:var(--brand); }
.cm-tab:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
/* Panels laid out like the "Always one drag away" feature rows below:
   no card box, text 432px wide on the left, the image fills the rest
   (680x480 frame, 20px corners). */
.cm-card{ display:flex; align-items:center; gap:80px; text-align:left; }
/* Scroll-driven tabs (script after main.js): the track gets its height
   from the script, the pin holds tabs + panel on screen meanwhile. A
   panel fades in when it becomes the active one. */
.cm-pin{ background:#fff; }
/* Title, tabs and panel pin together; on shorter windows the image frame
   shrinks (keeping its shape) so the whole block still fits under the nav. */
.cm-pin .cm-art{ max-width:min(680px, calc((100vh - 370px) * 680 / 480)); margin-left:auto; }
/* Crossfade: the three panels share one grid cell, so the block keeps
   its height. main.js still sets [hidden]; here that means faded out
   (and hidden from screen readers once the fade ends), not display:none. */
.cm-stack{ display:grid; }
.cm-stack > .cm-card{ grid-area:1 / 1; transition:opacity .45s ease .12s, transform .45s ease .12s, visibility 0s linear 0s; }
.cm .cm-stack > .cm-card[hidden]{ display:flex !important; opacity:0; transform:translateY(10px); visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s; }
@media (prefers-reduced-motion:reduce){ .cm-stack > .cm-card, .cm .cm-stack > .cm-card[hidden]{ transition:none; transform:none; } }
.cm-card:focus-visible{ outline:2px solid var(--brand); outline-offset:4px; }
.cm-copy{ width:432px; flex:none; }
.cm-copy h3{ margin:0 0 12px; font-size:40px; line-height:1.2; letter-spacing:-.02em; font-weight:600; color:#161618; }
.cm-copy > p{ margin:0; font-size:18px; line-height:1.67; letter-spacing:.01em; font-weight:450; color:#161618a3; }
.cm-tags{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.cm-tags li{ padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--page); font-size:13.5px; font-weight:500; color:var(--ink-2); }
.cm-art{ flex:1; min-width:0; max-width:680px; aspect-ratio:680 / 480; border-radius:20px; overflow:hidden; }
.cm-art{ display:grid; place-items:center; background-size:cover; background-position:center; }
.cm-clip{ position:relative; width:86%; overflow:hidden; border-radius:12px; box-shadow:0 20px 50px -14px rgba(0,0,0,.45); }
.cm-art__video{ display:block; width:100%; height:auto; }
@media (max-width:1000px){ .cm-card{ gap:40px; } .cm-copy{ width:auto; flex:1; } }
@media (max-width:850px){
  .cm{ padding-top:80px; }
  .cm-card{ flex-direction:column; align-items:stretch; gap:35px; }
  .cm-copy{ width:auto; }
  .cm-copy h3{ font-size:32px; line-height:1.25; }
  .cm-art{ max-width:none; }
  .cm-tab{ padding:9px 14px; font-size:14px; }
}
/* Scroll into the editor (see the script below). The stage's height is
   set by the script: the editor's height plus the scroll distance the
   move takes, while the pin holds the editor in view. The editor is capped
   so the whole window fits on screen under the nav. */
.clipio-stage{ position:relative; }
.clipio-stage__pin{ position:sticky; top:72px; }
.clipio-editor{ position:relative; width:100%; max-width:calc((100vh - 104px) * 10375 / 6353); margin-inline:auto; aspect-ratio:10375 / 6353; }
.clipio-editor__frame{ position:absolute; inset:0; opacity:0; pointer-events:none; filter:drop-shadow(0 24px 48px rgba(12,17,22,.16)); }
/* The screenshot carries macOS's window shadow in its outer ~15px, cut
   square at the image edge. Clip to the window itself (measured: 15/11px
   sides, 14px top, 18px bottom, 50px corners at 2400x1470); the wrapper's
   drop-shadow then draws a soft one. */
.clipio-editor__frame img{ display:block; width:100%; height:100%; clip-path:inset(0.95% 0.46% 1.22% 0.63% round 2.08% / 3.4%); }
.clipio-editor__video{ position:absolute; left:0; top:0; display:block; width:100%; height:auto; aspect-ratio:2106 / 1184; object-fit:cover; border-radius:20px; transform-origin:0 0; will-change:transform;
                       box-shadow:0 9px 26px -6px rgba(22,22,24,.04), 0 29px 47px -4px rgba(22,22,24,.05), 0 50px 63px -8px rgba(22,22,24,.02), 0 0 0 1px rgba(22,22,24,.08); }

#features, #feedback, #download, #share, #privacy, #modes{ scroll-margin-top:80px; }

.qd{ position:relative; width:100%; max-width:680px; aspect-ratio:680 / 480; border-radius:20px; overflow:hidden;
     background:#0A3BB8 url('/assets/modes/dragdrop-bg.webp') center / cover; --t:10s; }
.qd *{ box-sizing:border-box; }
.qd-win{ position:absolute; border-radius:11px; overflow:hidden; }
.qd-bar{ display:flex; align-items:center; gap:5px; height:8%; padding:0 3.5%; }
.qd-bar i{ width:7px; height:7px; border-radius:50%; }
.qd-bar i:nth-child(1){ background:#FF5F57; } .qd-bar i:nth-child(2){ background:#FEBC2E; } .qd-bar i:nth-child(3){ background:#28C840; }
.qd-bar b{ margin:0 auto; width:34%; height:44%; border-radius:99px; }
.qd-mini{ display:block; width:100%; height:100%; }
/* Dark dashboard (front at first), light chat (behind, peeking out right). */
.qd-src{ left:6%; top:6%; width:54%; height:71%; background:#1C1C21; box-shadow:0 22px 44px -16px rgba(0,6,30,.75), 0 0 0 1px rgba(255,255,255,.08); }
.qd-src .qd-bar{ border-bottom:1px solid #2A2A30; } .qd-src .qd-bar b{ background:#2A2A30; }
.qd-region{ position:absolute; left:6%; top:16%; width:62%; height:46%; }
.qd-region .qd-mini{ border-radius:6px; }
.qd-lines{ position:absolute; left:6%; bottom:9%; width:88%; display:grid; gap:7px; }
.qd-lines span{ display:block; height:6px; border-radius:99px; background:#2E2E35; }
.qd-chat{ left:18%; top:18%; width:52%; height:75%; background:#fff; box-shadow:0 22px 44px -16px rgba(0,6,30,.6), 0 0 0 1px rgba(12,17,22,.06); }
.qd-chat .qd-bar{ border-bottom:1px solid #EEF0F4; } .qd-chat .qd-bar b{ background:#F1F3F7; }
.qd-chat__head{ display:flex; align-items:center; gap:7px; height:10%; padding:0 5%; }
.qd-chat__head i{ width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, #FFB86B, #FF6B9A); flex:none; }
.qd-chat__head span{ width:26%; height:6px; border-radius:99px; background:#E3E7EE; }
.qd-msg{ position:absolute; height:6.5%; display:flex; align-items:center; padding:0 3%; border-radius:99px; }
.qd-msg span{ display:block; width:100%; height:5px; border-radius:99px; }
.qd-msg--in{ left:5%; background:#F1F3F7; } .qd-msg--in span{ background:#D5DAE3; }
.qd-msg--out{ right:5%; background:#1A84EF; } .qd-msg--out span{ background:rgba(255,255,255,.6); }
.qd-drop{ position:absolute; left:3%; right:3%; top:20%; bottom:3%; border:1.5px dashed #1A84EF; border-radius:10px; background:rgba(26,132,239,.08); opacity:0; }
.qd-sent{ position:absolute; right:5%; top:58%; width:36%; height:26%; padding:3px; border-radius:10px; background:#1A84EF; opacity:0; transform:scale(.9); transform-origin:100% 0; }
.qd-sent .qd-mini{ border-radius:7px; }
.qd-chat__input{ position:absolute; left:4%; right:4%; bottom:4%; height:8%; display:flex; align-items:center; gap:6px; padding:0 3.5%; border-radius:99px; background:#F4F6FA; }
.qd-chat__input span{ flex:1; height:6px; border-radius:99px; background:#E3E7EE; } .qd-chat__input b{ width:13px; height:13px; border-radius:50%; background:#1A84EF; }
/* Area capture over the dark chart. */
.qd-shade, .qd-sel{ position:absolute; left:9.2%; top:17.4%; width:33.5%; height:32.7%; border-radius:4px; }
.qd-shade{ box-shadow:0 0 0 999px rgba(0,6,30,.4); opacity:0; }
.qd-sel{ border:1.5px solid #fff; outline:1px solid rgba(26,132,239,.9); transform-origin:0 0; transform:scale(0); opacity:0; }
.qd-sel em{ position:absolute; left:0; top:-22px; padding:2px 6px; border-radius:5px; background:#1A84EF; color:#fff; font:600 10px/1.3 Inter, system-ui, sans-serif; font-style:normal; white-space:nowrap; }
.qd-sel i{ position:absolute; width:7px; height:7px; border:1.5px solid #1A84EF; background:#fff; border-radius:2px; }
.qd-sel i:nth-of-type(1){ left:-4px; top:-4px; } .qd-sel i:nth-of-type(2){ right:-4px; top:-4px; }
.qd-sel i:nth-of-type(3){ left:-4px; bottom:-4px; } .qd-sel i:nth-of-type(4){ right:-4px; bottom:-4px; }
.qd-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
/* Quick cards, bottom-right, the new one stacked above the older one. */
.qd-card{ position:absolute; left:76%; width:20%; height:22.7%; border-radius:10px; overflow:hidden; background:#1A1A1A;
          border:1px solid #323232; box-shadow:0 14px 30px -10px rgba(0,0,0,.6); }
@supports (corner-shape: squircle){ .qd-card{ border-radius:25px; corner-shape:squircle; } }
.qd-old{ top:73%; }
.qd-new{ top:47.8%; transform:translateX(140%); opacity:0; overflow:visible; }
.qd-new .qd-mini{ border-radius:inherit; }
.qd-new u{ position:absolute; left:-7px; bottom:-7px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
           background:#22C55E; color:#fff; font:700 15px/1 Inter, system-ui, sans-serif; text-decoration:none; box-shadow:0 2px 6px rgba(0,0,0,.3); opacity:0; }
.qd-btns{ position:absolute; left:69.6%; top:47.8%; width:5%; height:22.7%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; opacity:0; }
.qd-btns b{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.92); }
.qd-btns svg{ width:11px; height:11px; fill:none; stroke:#1a1a1a; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.qd-cursor{ position:absolute; left:9.2%; top:17.4%; width:22px; height:22px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

/* Stacking: windows below the capture overlay; the chat swaps in front of
   the dark window after the capture and back out at the end of the loop. */
.qd-src{ z-index:2; } .qd-chat{ z-index:1; }
.qd-shade, .qd-sel, .qd-flash{ z-index:5; } .qd-card, .qd-btns, .qd-cursor{ z-index:6; }
.qd-chat{ animation:qd-front var(--t) infinite; }
.qd-sel{ animation:qd-sel var(--t) infinite; } .qd-shade{ animation:qd-shade var(--t) infinite; } .qd-flash{ animation:qd-flash var(--t) infinite; }
.qd-new{ animation:qd-new var(--t) infinite; } .qd-new u{ animation:qd-plus var(--t) infinite; }
.qd-btns{ animation:qd-btns var(--t) infinite; } .qd-cursor{ animation:qd-cursor var(--t) infinite; }
.qd-drop{ animation:qd-drop var(--t) infinite; } .qd-sent{ animation:qd-sent var(--t) infinite; }
@keyframes qd-front{ 0%,23.9%{ z-index:1; } 24%,93.9%{ z-index:3; } 94%,100%{ z-index:1; } }
@keyframes qd-sel{ 0%,3%{ transform:scale(0); opacity:1; } 13%{ transform:scale(1); opacity:1; } 17%{ opacity:1; } 19%,100%{ transform:scale(1); opacity:0; } }
@keyframes qd-shade{ 0%,2%{ opacity:0; } 5%,17%{ opacity:1; } 19%,100%{ opacity:0; } }
@keyframes qd-flash{ 0%,16.5%{ opacity:0; } 17.5%{ opacity:.8; } 21%,100%{ opacity:0; } }
@keyframes qd-new{
  0%,20%{ transform:translateX(140%); opacity:0; left:76%; top:47.8%; width:20%; height:22.7%; }
  27%,38%{ transform:none; opacity:1; left:76%; top:47.8%; width:20%; height:22.7%; }
  41%{ transform:scale(1.05) rotate(3deg); opacity:1; left:76%; top:47.8%; width:20%; height:22.7%; }
  58%{ transform:scale(1.05) rotate(3deg); opacity:1; left:48.7%; top:61.5%; width:18.7%; height:19.5%; }
  61%{ transform:none; opacity:1; left:48.7%; top:61.5%; width:18.7%; height:19.5%; }
  64%,100%{ transform:scale(.97); opacity:0; left:48.7%; top:61.5%; width:18.7%; height:19.5%; } }
@keyframes qd-plus{ 0%,45%{ opacity:0; transform:scale(.6); } 48%,59%{ opacity:1; transform:scale(1); } 61%,100%{ opacity:0; } }
@keyframes qd-btns{ 0%,31%{ opacity:0; } 34%,38%{ opacity:1; } 40%,100%{ opacity:0; } }
@keyframes qd-drop{ 0%,45%{ opacity:0; } 48%,60%{ opacity:1; } 63%,100%{ opacity:0; } }
@keyframes qd-cursor{
  0%,4%{ left:9.2%; top:17.4%; transform:none; }
  13%,19%{ left:42.7%; top:50.1%; transform:none; }
  33%,38%{ left:86%; top:59.2%; transform:none; }
  41%{ left:86%; top:59.2%; transform:scale(.85); }
  58%{ left:58%; top:71.2%; transform:scale(.85); }
  61%{ left:58%; top:71.2%; transform:none; }
  76%,92%{ left:44%; top:92%; transform:none; }
  100%{ left:9.2%; top:17.4%; } }
@keyframes qd-sent{ 0%,60%{ opacity:0; transform:scale(.9); } 64%,93%{ opacity:1; transform:scale(1); } 96%,100%{ opacity:0; transform:scale(1); } }
@media (prefers-reduced-motion:reduce){
  .qd-chat, .qd-sel, .qd-shade, .qd-flash, .qd-new, .qd-new u, .qd-btns, .qd-cursor, .qd-drop, .qd-sent{ animation:none; }
  .qd-new{ transform:none; opacity:1; } .qd-btns{ opacity:1; } .qd-cursor{ left:86%; top:59.2%; } }

.sc{ position:relative; width:100%; max-width:680px; aspect-ratio:680 / 480; border-radius:20px; overflow:hidden; container-type:inline-size;
     background:#1B2333 url('/assets/modes/scroll-bg.webp') center / cover; font-family:Inter, system-ui, sans-serif; --t:11s;
     --mono:ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; }
.sc *{ box-sizing:border-box; }
/* The browser window and the page in it. */
.sc-win{ position:absolute; left:5%; top:5%; width:56%; height:70%; border-radius:1.6cqw; overflow:hidden; background:#fff;
         box-shadow:0 1px 2px rgba(16,24,40,.04), 0 1.6cqw 4cqw -2cqw rgba(16,24,40,.14), 0 0 0 1px #E5E7EB; }
.sc-bar{ height:7.86%; display:flex; align-items:center; gap:.8cqw; padding:0 2cqw; background:#FAFAFB; border-bottom:1px solid #EEF0F3; }
.sc-bar i{ width:1cqw; height:1cqw; border-radius:50%; }
.sc-bar i:nth-child(1){ background:#FF5F57; } .sc-bar i:nth-child(2){ background:#FEBC2E; } .sc-bar i:nth-child(3){ background:#28C840; }
.sc-bar b{ margin:0 auto; width:42%; height:52%; border-radius:99px; background:#fff; box-shadow:inset 0 0 0 1px #E5E8EE; }
/* The page measures itself against its own frame (cqw of the view, the
   preview strip or the quick card), so all three copies are the same
   drawing at different sizes. */
.sc-view{ position:absolute; left:0; right:0; top:7.86%; bottom:0; overflow:hidden; container-type:inline-size; }
.sc-page{ position:absolute; left:0; top:0; width:100%; height:300%; background:#fff; display:flex; flex-direction:column; }
.sc-page span, .sc-page b, .sc-page i{ display:block; }
.sc-page span{ height:1.61cqw; border-radius:99px; background:#EDEFF2; }
.sc-nav{ height:4%; flex:none; display:flex; align-items:center; gap:3.57cqw; padding:0 6%; border-bottom:1px solid #F0F2F5; }
.sc-nav i{ width:3.57cqw; height:3.57cqw; border-radius:1.07cqw; background:#1A84EF; margin-right:auto; }
.sc-nav span{ width:5%; } .sc-nav b{ width:11%; height:3.93cqw; border-radius:1.07cqw; background:#fff; box-shadow:inset 0 0 0 1px #E2E5EA; }
.sc-hero{ height:24%; flex:none; display:flex; flex-direction:column; align-items:center; gap:2.14cqw; padding-top:6.43cqw; }
.sc-hero .sc-h1{ width:62%; height:4.64cqw; background:#D9DDE3; } .sc-hero .sc-h1--b{ width:44%; }
.sc-hero .sc-p{ width:50%; margin-top:1.07cqw; }
.sc-btnrow{ display:flex; gap:1.79cqw; margin-top:1.43cqw; } .sc-btnrow b{ width:16.07cqw; height:4.64cqw; border-radius:1.25cqw; background:#1A84EF; }
.sc-btnrow .sc-ghost{ background:#fff; box-shadow:inset 0 0 0 1px #D6DBE3; }
.sc-shot{ width:78%; flex:1; margin-top:2.86cqw; display:grid; place-items:center; border-radius:2.14cqw 2.14cqw 0 0; background:#F6F7F9; box-shadow:inset 0 0 0 1px #E8EAEE; }
.sc-shot svg, .sc-art svg{ width:9cqw; height:9cqw; fill:none; stroke:#C5CAD3; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.sc-logos{ height:6%; flex:none; display:flex; align-items:center; justify-content:center; gap:5.36cqw; border-top:1px solid #F0F2F5; border-bottom:1px solid #F0F2F5; }
.sc-logos i{ width:10.71cqw; height:2.5cqw; border-radius:99px; background:#E4E7EB; }
.sc-feats{ height:20%; flex:none; display:flex; flex-direction:column; align-items:center; gap:4.29cqw; padding:7.14cqw 6% 0; }
.sc-h2{ width:40% !important; height:3.39cqw !important; background:#D9DDE3 !important; }
.sc-row{ width:100%; display:flex; gap:3.57cqw; }
.sc-feats .sc-row > div{ flex:1; display:grid; gap:1.61cqw; padding:3.21cqw; border:1px solid #ECEFF3; border-radius:2.14cqw; }
.sc-feats .sc-row i{ width:5.36cqw; height:5.36cqw; border-radius:1.43cqw; background:#F3F4F6; box-shadow:inset 0 0 0 1px #E5E7EB; }
.sc-feats .sc-row span:last-child{ width:70%; }
.sc-split{ height:18%; flex:none; display:flex; align-items:center; gap:4%; padding:0 6%; background:#FAFAFB; border-top:1px solid #F0F2F5; border-bottom:1px solid #F0F2F5; }
.sc-split > div:first-child{ flex:1; display:grid; gap:1.96cqw; } .sc-split .sc-h2{ width:80% !important; } .sc-p--s{ width:60%; }
.sc-art{ flex:1; height:70%; display:grid; place-items:center; border-radius:2.14cqw; background:#fff; box-shadow:inset 0 0 0 1px #E8EAEE; }
.sc-price{ height:18%; flex:none; display:flex; flex-direction:column; align-items:center; gap:4.29cqw; padding:7.14cqw 6% 0; }
.sc-price .sc-row > div{ flex:1; height:23.21cqw; display:flex; flex-direction:column; justify-content:space-between; padding:3.21cqw; border:1px solid #ECEFF3; border-radius:2.14cqw; }
.sc-price .sc-row span{ width:50%; } .sc-price .sc-row b{ height:4.29cqw; border-radius:1.07cqw; background:#F1F2F4; }
.sc-price .sc-hi{ border-color:#1A84EF !important; box-shadow:0 0 0 1px #1A84EF; } .sc-price .sc-hi b{ background:#1A84EF; }
.sc-foot{ flex:1; display:flex; gap:6%; padding:7.14cqw 6%; background:#FAFAFB; border-top:1px solid #EEF0F3; }
.sc-foot > div{ flex:1; display:grid; align-content:start; gap:1.96cqw; } .sc-foot i{ width:4.29cqw; height:4.29cqw; border-radius:1.07cqw; background:#D9DDE3; }
.sc-foot span{ background:#E9EBEE !important; }
/* The overlay: dim outside the region (here, the window's page area). */
.sc-dim{ position:absolute; left:5%; top:10.5%; width:0; height:0; box-shadow:0 0 0 999px rgba(6,10,24,.55); outline:1.5px solid #1A84EF; opacity:0; }
.sc-panel{ position:absolute; left:33%; top:77%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.9cqw; opacity:0; }
.sc-status{ position:relative; height:2.2cqw; width:30cqw; }
.sc-status span{ position:absolute; inset:0; text-align:center; font:500 1.5cqw/2.2cqw var(--mono); color:rgba(255,255,255,.78); letter-spacing:-.01em; opacity:0; }
.sc-pill{ display:flex; gap:.59cqw; padding:.44cqw; border-radius:99px; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.06), 0 0 0 1px #E5E7EB; }
.sc-auto, .sc-cancel, .sc-done{ display:inline-flex; align-items:center; justify-content:center; height:3.82cqw; border-radius:99px; font-size:2.06cqw; font-weight:600; white-space:nowrap; }
.sc-auto{ position:relative; gap:1.18cqw; padding:0 3.2cqw; background:#1A84EF; color:#fff; }
.sc-ico{ display:flex; width:2.2cqw; height:2.2cqw; } .sc-ico svg{ width:100%; height:100%; }
.sc-labels{ display:grid; } .sc-l0, .sc-l1{ grid-area:1 / 1; text-align:left; } .sc-l1{ opacity:0; }
.sc-cancel, .sc-done{ width:7.94cqw; background:#F9FAFB; color:#374151; border:1px solid #E5E7EB; }
.sc-done{ width:7.35cqw; }
/* Live preview beside the region. */
.sc-preview{ position:absolute; left:64.5%; top:42.75%; width:31%; height:41%; transform:translateY(-50%); display:flex; flex-direction:column; overflow:hidden;
             border-radius:2.06cqw; background:#fff; border:1px solid #E5E7EB; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 1.6cqw 4cqw -2cqw rgba(16,24,40,.14); opacity:0; }
.sc-preview__head{ flex:none; height:3.8cqw; display:flex; align-items:center; padding:0 2cqw; font:500 1.5cqw/1 var(--mono); color:#6B7280; border-bottom:1px solid #EEF0F3; background:#FAFAFB; }
.sc-preview__body{ position:relative; flex:1; overflow:hidden; }
.sc-preview__strip{ position:absolute; left:0; top:0; width:100%; aspect-ratio:380.8 / 928.8; container-type:inline-size; }
.sc-preview__strip .sc-page{ height:100%; }
/* The finished capture as a quick card (Clipio's: dark 5:4 tile, #323232 hairline). */
.sc-card{ position:absolute; left:74.5%; top:71%; width:21.5%; height:24.4%; overflow:hidden; border-radius:1.5cqw; background:#fff;
          border:1px solid #E5E7EB; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 1.6cqw 4cqw -2cqw rgba(16,24,40,.18); transform:translateX(140%); opacity:0; }
@supports (corner-shape: squircle){ .sc-card{ border-radius:3.7cqw; corner-shape:squircle; } }
.sc-card{ container-type:inline-size; } .sc-card .sc-page{ height:auto; aspect-ratio:380.8 / 928.8; }
.sc-cursor{ position:absolute; left:4.3%; top:9.9%; width:3.2cqw; height:3.2cqw; filter:drop-shadow(0 .2cqw .3cqw rgba(16,24,40,.25)); z-index:5; }

.sc-view .sc-page{ animation:sc-scroll var(--t) infinite; }
.sc-dim{ animation:sc-dim var(--t) infinite; } .sc-panel{ animation:sc-panel var(--t) infinite; }
.sc-auto{ animation:sc-auto var(--t) infinite; } .sc-l0{ animation:sc-l0 var(--t) infinite; } .sc-l1{ animation:sc-l1 var(--t) infinite; }
.sc-ico{ animation:sc-ico-run var(--t) infinite; }
.sc-preview{ animation:sc-preview var(--t) infinite; } .sc-preview__strip{ animation:sc-strip var(--t) infinite; }
.sc-card{ animation:sc-card var(--t) infinite; } .sc-cursor{ animation:sc-cursor var(--t) infinite; }
.sc-s0{ animation:sc-st0 var(--t) infinite; } .sc-s1{ animation:sc-st1 var(--t) infinite; } .sc-s2{ animation:sc-st2 var(--t) infinite; } .sc-s3{ animation:sc-st3 var(--t) infinite; } .sc-s4{ animation:sc-st4 var(--t) infinite; } .sc-s5{ animation:sc-st5 var(--t) infinite; } .sc-s6{ animation:sc-st6 var(--t) infinite; } .sc-s7{ animation:sc-st7 var(--t) infinite; }
/* Six Auto Scroll ticks, 7% apart from 20%: the page moves a third of a screen each. */
@keyframes sc-scroll{ 0%,20%{ transform:translateY(0); } 22.5%,27%{ transform:translateY(-11.11%); } 29.5%,34%{ transform:translateY(-22.22%); }
  36.5%,41%{ transform:translateY(-33.33%); } 43.5%,48%{ transform:translateY(-44.44%); } 50.5%,55%{ transform:translateY(-55.56%); }
  57.5%,97%{ transform:translateY(-66.67%); } 99%,100%{ transform:translateY(0); } }
/* The selection drawn from the region's top-left corner, then the dim stays until Done. */
@keyframes sc-dim{ 0%,2%{ width:0; height:0; opacity:1; } 9%,67%{ width:56%; height:64.5%; opacity:1; } 70%,100%{ width:56%; height:64.5%; opacity:0; } }
@keyframes sc-panel{ 0%,9%{ opacity:0; } 11%,67%{ opacity:1; } 70%,100%{ opacity:0; } }
@keyframes sc-auto{ 0%,17%{ background:#1A84EF; } 17.3%,67%{ background:#1E7BDD; } 67.3%,100%{ background:#1A84EF; } }
@keyframes sc-l0{ 0%,17%{ opacity:1; } 17.3%,67%{ opacity:0; } 67.3%,100%{ opacity:1; } }
@keyframes sc-l1{ 0%,17%{ opacity:0; } 17.3%,67%{ opacity:1; } 67.3%,100%{ opacity:0; } }
@keyframes sc-ico-run{ 0%,17%{ transform:rotate(0); } 17.3%{ transform:rotate(0); } 67%{ transform:rotate(1800deg); } 67.1%,100%{ transform:rotate(0); } }
/* Status: one line per frame count. */
@keyframes sc-st0{ 0%,9%{ opacity:0; } 9.01%,17.3%{ opacity:1; } 17.31%,100%{ opacity:0; } }
@keyframes sc-st1{ 0%,17.3%{ opacity:0; } 17.31%,22.5%{ opacity:1; } 22.51%,100%{ opacity:0; } }
@keyframes sc-st2{ 0%,22.5%{ opacity:0; } 22.51%,29.5%{ opacity:1; } 29.51%,100%{ opacity:0; } }
@keyframes sc-st3{ 0%,29.5%{ opacity:0; } 29.51%,36.5%{ opacity:1; } 36.51%,100%{ opacity:0; } }
@keyframes sc-st4{ 0%,36.5%{ opacity:0; } 36.51%,43.5%{ opacity:1; } 43.51%,100%{ opacity:0; } }
@keyframes sc-st5{ 0%,43.5%{ opacity:0; } 43.51%,50.5%{ opacity:1; } 50.51%,100%{ opacity:0; } }
@keyframes sc-st6{ 0%,50.5%{ opacity:0; } 50.51%,57.5%{ opacity:1; } 57.51%,100%{ opacity:0; } }
@keyframes sc-st7{ 0%,57.5%{ opacity:0; } 57.51%,100%{ opacity:1; } 100.01%,100%{ opacity:0; } }
/* Live preview: appears with the first frame, grows to its cap, then follows the newest rows. */
@keyframes sc-preview{ 0%,17.3%{ opacity:0; height:41%; } 18.5%,22.5%{ opacity:1; height:41%; } 23.5%,29.5%{ opacity:1; height:53.1%; }
  30.5%,67%{ opacity:1; height:57.5%; } 70%,100%{ opacity:0; height:57.5%; } }
@keyframes sc-strip{ 0%,29.5%{ transform:translateY(0); } 30.5%,36.5%{ transform:translateY(-7%); } 37.5%,43.5%{ transform:translateY(-18.1%); }
  44.5%,50.5%{ transform:translateY(-29.2%); } 51.5%,57.5%{ transform:translateY(-40.3%); } 58.5%,100%{ transform:translateY(-51.4%); } }
@keyframes sc-card{ 0%,69%{ transform:translateX(140%); opacity:0; } 74%,94%{ transform:none; opacity:1; } 97%,100%{ transform:none; opacity:0; } }
/* Cursor: drag the selection, click Auto Scroll, wait, click Done, step aside. */
@keyframes sc-cursor{
  0%,2%{ left:4.3%; top:9.9%; transform:none; } 9%{ left:60.3%; top:74.4%; transform:none; }
  15%{ left:32.3%; top:83.5%; transform:none; } 16.3%{ left:32.3%; top:83.5%; transform:scale(.85); } 17.5%{ left:32.3%; top:83.5%; transform:none; }
  22%,60%{ left:52%; top:94%; transform:none; }
  65%{ left:36.6%; top:90.1%; transform:none; } 66.3%{ left:36.6%; top:90.1%; transform:scale(.85); } 67.5%{ left:36.6%; top:90.1%; transform:none; }
  76%,95%{ left:58%; top:93%; transform:none; } 100%{ left:4.3%; top:9.9%; } }
@media (prefers-reduced-motion:reduce){
  .sc *, .sc-view .sc-page{ animation:none !important; }
  .sc-dim{ width:56%; height:64.5%; opacity:1; } .sc-panel{ opacity:1; } .sc-s4{ opacity:1; } .sc-l0{ opacity:0; } .sc-l1{ opacity:1; }
  .sc-preview{ opacity:1; height:57.5%; } .sc-preview__strip{ transform:translateY(-29.2%); } .sc-view .sc-page{ transform:translateY(-44.44%); } .sc-cursor{ left:52%; top:94%; } }

.oc{ position:relative; width:100%; max-width:680px; aspect-ratio:680 / 480; border-radius:20px; overflow:hidden; container-type:inline-size;
     background:#C9B6E8 url('/assets/modes/ocr-bg.webp') center / cover; font-family:Inter, system-ui, sans-serif; --t:10s;
     --mono:ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; }
.oc *{ box-sizing:border-box; }
.oc p, .oc h4, .oc ul{ margin:0; }
/* The document being captured: a white window with real text. */
.oc-win{ position:absolute; left:5%; top:7%; width:62%; height:76%; border-radius:1.6cqw; background:#fff;
         box-shadow:0 1px 2px rgba(16,24,40,.05), 0 1.6cqw 4cqw -2cqw rgba(16,24,40,.22), 0 0 0 1px #E5E7EB; }
.oc-bar{ height:3.9cqw; display:flex; align-items:center; gap:.8cqw; padding:0 1.8cqw; background:#FAFAFB; border-bottom:1px solid #EEF0F3; border-radius:1.6cqw 1.6cqw 0 0; }
.oc-bar i{ width:1cqw; height:1cqw; border-radius:50%; }
.oc-bar i:nth-child(1){ background:#FF5F57; } .oc-bar i:nth-child(2){ background:#FEBC2E; } .oc-bar i:nth-child(3){ background:#28C840; }
.oc-bar b{ margin:0 auto; padding:.35cqw 1.6cqw; border-radius:99px; background:#fff; box-shadow:inset 0 0 0 1px #E5E8EE; font:500 1.25cqw/1.2 var(--mono); color:#6B7280; }
.oc-doc{ padding:3.4cqw 4.4cqw; }
.oc-meta{ font:500 1.3cqw/1 var(--mono); color:#9CA3AF; letter-spacing:.02em; }
.oc-target{ position:relative; margin-top:1.9cqw; }
.oc-ln{ position:relative; width:max-content; font-size:1.95cqw; line-height:1.62; color:#374151; white-space:nowrap; }
.oc-h{ font-size:3.1cqw; line-height:1.25; font-weight:650; letter-spacing:-.02em; color:#111827; margin-bottom:.9cqw; }
.oc-h3{ margin-top:3.2cqw !important; font-size:2.1cqw; font-weight:600; color:#111827; }
.oc-list{ margin-top:1cqw !important; padding-left:2.6cqw; font-size:1.85cqw; line-height:1.7; color:#6B7280; }
/* Recognition: each line gets a soft blue box in turn. */
.oc-ln::after{ content:''; position:absolute; left:-.5cqw; right:-.5cqw; top:.15em; bottom:.1em; border-radius:.6cqw;
               background:rgba(26,132,239,.12); box-shadow:inset 0 0 0 1px rgba(26,132,239,.35); opacity:0; }
/* The selection: dim outside, blue hairline, a mode tag. */
.oc-sel{ position:absolute; left:-1.6cqw; top:-1.2cqw; right:-1.6cqw; bottom:-1cqw; border-radius:.6cqw; outline:1.5px solid #1A84EF;
         box-shadow:0 0 0 999px rgba(12,10,40,.38); transform-origin:0 0; transform:scale(0); opacity:0; pointer-events:none; }
.oc-sel em{ position:absolute; right:0; top:-3.1cqw; padding:.3cqw 1cqw; border-radius:.7cqw; background:#1A84EF; color:#fff; font:600 1.4cqw/1.3 Inter, system-ui, sans-serif; font-style:normal; }
/* Clipio's OCR card. */
.oc-card{ position:absolute; left:47%; top:37%; width:49%; height:58%; display:flex; flex-direction:column; border-radius:1.8cqw; background:#161616;
          border:1px solid #2A2A2A; box-shadow:0 2.4cqw 6cqw -2cqw rgba(20,10,60,.55); opacity:0; transform:translateY(2cqw); z-index:4; }
.oc-head{ flex:none; height:6.8cqw; display:flex; align-items:center; gap:.4cqw; padding:0 1.2cqw 0 2cqw; }
.oc-title{ display:flex; align-items:center; gap:1.1cqw; margin-right:auto; font-size:1.9cqw; font-weight:600; color:rgba(255,255,255,.82); white-space:nowrap; }
.oc svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.oc-title svg{ width:2.5cqw; height:2.5cqw; color:rgba(255,255,255,.6); }
.oc-asimg{ display:inline-flex; align-items:center; gap:.7cqw; height:3.8cqw; padding:0 1.4cqw; margin-right:.6cqw; border-radius:99px; background:#1A84EF; color:#fff; font-size:1.75cqw; font-weight:600; white-space:nowrap; }
.oc-asimg svg{ width:1.9cqw; height:1.9cqw; stroke-width:2.2; }
.oc-btn{ position:relative; display:grid; place-items:center; width:3.8cqw; height:3.8cqw; border-radius:.9cqw; color:rgba(255,255,255,.62); }
.oc-btn svg{ width:2.2cqw; height:2.2cqw; }
.oc-check{ position:absolute; inset:0; display:grid; place-items:center; border-radius:inherit; background:#232323; color:#34C759; opacity:0; }
.oc-check svg{ stroke-width:2.4; }
.oc-body{ position:relative; flex:1; padding:.6cqw 2.6cqw; }
.oc-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:1.2cqw; font-size:1.9cqw; color:rgba(255,255,255,.38); opacity:0; }
.oc-loading i{ width:2.2cqw; height:2.2cqw; border-radius:50%; border:2px solid rgba(255,255,255,.15); border-top-color:rgba(255,255,255,.6); animation:oc-spin .8s linear infinite; }
.oc-out{ width:max-content; font-size:1.95cqw; line-height:1.62; color:rgba(255,255,255,.86); white-space:nowrap; clip-path:inset(0 100% 0 0); }
.oc-out--h{ font-size:2.6cqw; line-height:1.4; font-weight:700; color:#fff; margin-bottom:.5cqw !important; }
.oc-fmt{ flex:none; height:5.4cqw; display:flex; align-items:center; gap:1.5cqw; padding:0 2cqw; border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.55); }
.oc-fmt b{ font:700 1.8cqw/1 Inter, system-ui, sans-serif; } .oc-fmt .oc-it{ font-style:italic; font-weight:500; font-family:Georgia, serif; }
.oc-fmt .oc-un{ font-weight:500; text-decoration:underline; } .oc-fmt .oc-st{ font-weight:500; text-decoration:line-through; }
.oc-fmt svg{ width:2.1cqw; height:2.1cqw; }
.oc-font{ display:inline-flex; align-items:center; gap:.6cqw; padding:.5cqw 1cqw; border-radius:.7cqw; background:rgba(255,255,255,.06); font-size:1.6cqw; font-weight:500; }
.oc-font i{ width:.8cqw; height:.8cqw; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-25%) rotate(45deg); }
.oc-sep{ width:1px; height:2.4cqw; background:rgba(255,255,255,.1); }
.oc-toast{ position:absolute; right:5.6cqw; top:-3.6cqw; padding:.5cqw 1.2cqw; border-radius:.7cqw; background:#0C1116; color:#fff; font-size:1.5cqw; font-weight:600; opacity:0; }
.oc-cursor{ position:absolute; left:7.8%; top:20.2%; width:3.2cqw; height:3.2cqw; filter:drop-shadow(0 .2cqw .3cqw rgba(16,24,40,.3)); z-index:6; }

.oc-sel{ animation:oc-sel var(--t) infinite; }
.oc-ln::after{ animation:oc-hl var(--t) infinite; }
.oc-ln1::after{ animation-delay:.25s; } .oc-ln2::after{ animation-delay:.5s; } .oc-ln3::after{ animation-delay:.75s; }
.oc-card{ animation:oc-card var(--t) infinite; } .oc-loading{ animation:oc-load var(--t) infinite; }
.oc-out{ animation:oc-type var(--t) infinite; }
.oc-o1{ animation-delay:.35s; } .oc-o2{ animation-delay:.7s; } .oc-o3{ animation-delay:1.05s; }
.oc-check{ animation:oc-check var(--t) infinite; } .oc-toast{ animation:oc-toast var(--t) infinite; }
.oc-cursor{ animation:oc-cursor var(--t) infinite; }
@keyframes oc-spin{ to{ transform:rotate(360deg); } }
@keyframes oc-sel{ 0%,3%{ transform:scale(0); opacity:1; } 14%{ transform:scale(1); opacity:1; } 46%{ opacity:1; } 50%,100%{ transform:scale(1); opacity:0; } }
@keyframes oc-hl{ 0%,18%{ opacity:0; } 20%,40%{ opacity:1; } 46%,100%{ opacity:0; } }
@keyframes oc-card{ 0%,24%{ opacity:0; transform:translateY(2cqw); } 28%,90%{ opacity:1; transform:none; } 95%,100%{ opacity:0; transform:none; } }
@keyframes oc-load{ 0%,26%{ opacity:0; } 28%,34%{ opacity:1; } 36%,100%{ opacity:0; } }
@keyframes oc-type{ 0%,35%{ clip-path:inset(0 100% 0 0); opacity:1; } 41%,92%{ clip-path:inset(0 0 0 0); opacity:1; } 95%,100%{ clip-path:inset(0 0 0 0); opacity:0; } }
@keyframes oc-check{ 0%,61%{ opacity:0; } 62%,82%{ opacity:1; } 84%,100%{ opacity:0; } }
@keyframes oc-toast{ 0%,61%{ opacity:0; transform:translateY(.6cqw); } 63%,78%{ opacity:1; transform:none; } 81%,100%{ opacity:0; } }
/* Cursor: drag the selection (7.8,20.2 to 64.2,42.2), wait, click Copy (centre 84.4,42), step aside. */
@keyframes oc-cursor{
  0%,3%{ left:7.8%; top:20.2%; transform:none; } 14%,22%{ left:64.2%; top:42.2%; transform:none; }
  30%,50%{ left:70%; top:28%; transform:none; }
  57%{ left:84%; top:41.5%; transform:none; } 59%{ left:84%; top:41.5%; transform:scale(.85); } 61%{ left:84%; top:41.5%; transform:none; }
  72%,92%{ left:76%; top:28%; transform:none; } 100%{ left:7.8%; top:20.2%; } }
@media (prefers-reduced-motion:reduce){
  .oc *, .oc-ln::after{ animation:none !important; }
  .oc-card{ opacity:1; transform:none; } .oc-out{ clip-path:none; } .oc-cursor{ display:none; } }

.tk{ max-width:1192px; margin:0 auto; padding:120px 0 40px; font-family:Inter, system-ui, sans-serif; color:#161618; }
.tk *{ box-sizing:border-box; } :where(.tk) :where(p, h2, h3, ul){ margin:0; }   /* zero specificity: card rules set their own spacing */
.tk-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; }
.tk-head h2{ font-size:40px; line-height:1.2; letter-spacing:-.02em; font-weight:600; }
.tk-head p{ margin-top:12px; font-size:18px; line-height:1.67; color:#161618a3; }
.tk-nav{ display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.tk-nav button{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid #E5E7EB; background:#fff; color:#161618; cursor:pointer; }
.tk-nav button:hover{ background:#F7F8FA; } .tk-nav button:disabled{ opacity:.35; cursor:default; }
.tk-nav svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* The row runs past the content column to the window's right edge
   (margin-right pulls it out by the side gutter); the padding lets the
   last card scroll fully into view at the content edge. */
.tk-row{ list-style:none; padding:0 calc(50vw - 50%) 8px 0; margin-right:calc(50% - 50vw); display:grid; grid-auto-flow:column; grid-auto-columns:380px; gap:20px;
         overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.tk-row::-webkit-scrollbar{ display:none; }
.tk-card{ scroll-snap-align:start; min-width:0; }
.tk-meta{ display:flex; gap:12px; margin-top:16px; padding-right:12px; }
.tk-ico{ flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:9px; border:1px solid #E5E7EB; background:#fff; color:#1A84EF; }
.tk-ico svg, .tk-chip svg, .tk-bar svg{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.tk-ico svg{ width:17px; height:17px; }
.tk-meta h3{ font-size:17px; line-height:1.3; font-weight:600; letter-spacing:-.01em; }
.tk-meta p{ margin-top:4px; font-size:15px; line-height:1.5; color:#161618a3; }
@media (max-width:1000px){ .tk-row{ grid-auto-columns:320px; } .tk-head h2{ font-size:32px; } }
@media (max-width:640px){ .tk{ padding-top:80px; } .tk-row{ grid-auto-columns:82vw; gap:14px; } .tk-nav{ display:none; } }

/* The image: near-black with soft glows; three mixes. */
.tk-img{ position:relative; aspect-ratio:268 / 170; border-radius:18px; overflow:hidden; container-type:inline-size; background-color:#05070B; }
.tk-g1{ background-image:radial-gradient(65% 80% at 0% 105%, rgba(16,185,170,.9), transparent 70%), radial-gradient(50% 65% at 100% 105%, rgba(249,115,22,.85), transparent 70%), radial-gradient(60% 55% at 55% 115%, rgba(37,99,235,.95), transparent 72%); }
.tk-g2{ background-image:radial-gradient(60% 70% at 100% 0%, rgba(59,130,246,.85), transparent 70%), radial-gradient(55% 65% at 0% 105%, rgba(20,184,166,.8), transparent 70%), radial-gradient(50% 55% at 70% 115%, rgba(236,72,153,.6), transparent 70%); }
.tk-g3{ background-image:radial-gradient(55% 70% at 100% 105%, rgba(251,146,60,.9), transparent 70%), radial-gradient(60% 60% at 30% 115%, rgba(14,165,233,.9), transparent 72%), radial-gradient(45% 50% at 0% 0%, rgba(99,102,241,.45), transparent 70%); }

/* Shared UI bits, in cqw of the image width. */
.tk-ui{ position:absolute; background:#fff; border-radius:2.6cqw; box-shadow:0 1.6cqw 4cqw -1.2cqw rgba(0,0,0,.5); }
.tk-img p{ font-size:2.9cqw; line-height:1.4; color:#374151; }
.tk-l{ display:block; height:2cqw; margin-top:2cqw; border-radius:99px; background:#ECEEF2; }
.tk-dots{ display:flex; gap:1cqw; margin-bottom:2.6cqw; } .tk-dots i{ width:1.6cqw; height:1.6cqw; border-radius:50%; }
.tk-dots i:nth-child(1){ background:#FF5F57; } .tk-dots i:nth-child(2){ background:#FEBC2E; } .tk-dots i:nth-child(3){ background:#28C840; }
.tk-ttl{ font-size:3.6cqw !important; font-weight:650; color:#111827 !important; letter-spacing:-.01em; }
.tk-btn{ display:inline-block; margin-top:3cqw; padding:1.2cqw 3.2cqw; border-radius:1.5cqw; background:#1A84EF; color:#fff; font-size:2.8cqw; font-weight:600; }
.tk-shot{ left:7%; top:16%; width:86%; height:100%; padding:4cqw 5cqw; }
.tk-full{ left:6%; top:11%; width:88%; height:100%; padding:4cqw 5cqw; }
.tk-chip{ position:absolute; display:inline-flex; align-items:center; gap:1.2cqw; padding:1.1cqw 2.2cqw; border-radius:99px; background:#fff; color:#111827; font-size:2.8cqw; font-weight:600; box-shadow:0 1cqw 3cqw -1cqw rgba(0,0,0,.4); }
.tk-chip svg{ width:3.2cqw; height:3.2cqw; color:#F59E0B; }

/* a. Add background */
.tk-bgframe{ position:absolute; left:6%; top:13%; width:56%; height:100%; padding:7cqw 6cqw 0; border-radius:2.6cqw; background:linear-gradient(135deg,#FDB98A,#F77FA5 60%,#C084FC); }
.tk-mini{ height:100%; padding:3.4cqw 4cqw; border-radius:2cqw; background:#fff; box-shadow:0 2cqw 4cqw -1.4cqw rgba(80,20,60,.45); }
.tk-mini .tk-btn{ font-size:2.4cqw; }
.tk-panel{ left:66%; top:11%; width:30%; height:100%; padding:3.4cqw 3cqw; }
.tk-h{ font-size:3cqw !important; font-weight:650; color:#111827 !important; }
.tk-sw{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.3cqw; margin:2.4cqw 0 3.4cqw; }
.tk-sw i{ aspect-ratio:1; border-radius:1.2cqw; } .tk-sw .on{ box-shadow:0 0 0 .5cqw #fff, 0 0 0 .9cqw #1A84EF; }
.tk-k{ display:flex; justify-content:space-between; font-size:2.4cqw !important; color:#6B7280 !important; } .tk-k span{ color:#111827; font-weight:600; }
.tk-sl{ position:relative; height:.9cqw; margin:2.2cqw 1.4cqw 4.2cqw 0; border-radius:99px; background:#E5E7EB; }
.tk-sl i{ position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:#1A84EF; }
.tk-sl i::after{ content:''; position:absolute; right:-1.6cqw; top:50%; width:3.2cqw; height:3.2cqw; border-radius:50%; background:#fff; transform:translateY(-50%); box-shadow:0 0 0 1px #D1D5DB, 0 .4cqw 1cqw rgba(0,0,0,.2); }

/* b. Annotation */
.tk-btn--r{ position:absolute; left:61%; top:58%; margin:0; }
.tk-ink{ position:absolute; inset:0; width:100%; height:100%; }
.tk-bar{ left:50%; top:4.5%; transform:translateX(-50%); display:flex; gap:.8cqw; padding:1cqw; border-radius:99px; }
.tk-bar span{ display:grid; place-items:center; width:6.4cqw; height:6.4cqw; border-radius:50%; color:#4B5563; }
.tk-bar span.on{ background:#1A84EF; color:#fff; } .tk-bar svg{ width:3.4cqw; height:3.4cqw; }

/* c. Crop & Resize */
.tk-cards{ display:flex; gap:2cqw; margin-top:2.6cqw; } .tk-cards i{ flex:1; height:13cqw; border-radius:1.6cqw; background:#F3F4F6; box-shadow:inset 0 0 0 1px #E5E7EB; }
.tk-cards i:nth-child(2){ background:#EAF3FE; box-shadow:inset 0 0 0 1px #C6DFFA; }
.tk-crop{ position:absolute; left:16%; top:24%; width:64%; height:44%; border:1.5px solid #fff; box-shadow:0 0 0 999px rgba(5,7,11,.55); }
.tk-crop i{ position:absolute; width:4.4cqw; height:4.4cqw; border:1.2cqw solid #fff; }
.tk-crop i:nth-child(1){ left:-1.4cqw; top:-1.4cqw; border-right:0; border-bottom:0; } .tk-crop i:nth-child(2){ right:-1.4cqw; top:-1.4cqw; border-left:0; border-bottom:0; }
.tk-crop i:nth-child(3){ left:-1.4cqw; bottom:-1.4cqw; border-right:0; border-top:0; } .tk-crop i:nth-child(4){ right:-1.4cqw; bottom:-1.4cqw; border-left:0; border-top:0; }
.tk-ratio{ left:50%; bottom:6%; transform:translateX(-50%); display:flex; align-items:center; gap:.8cqw; padding:1cqw; border-radius:99px; white-space:nowrap; }
.tk-ratio span{ padding:1cqw 2cqw; border-radius:99px; font-size:2.5cqw; font-weight:600; color:#4B5563; } .tk-ratio span.on{ background:#1A84EF; color:#fff; }
.tk-ratio em{ padding:0 1.6cqw 0 1cqw; font:500 2.4cqw/1 ui-monospace, Menlo, monospace; font-style:normal; color:#6B7280; border-left:1px solid #E5E7EB; margin-left:.6cqw; padding-left:2cqw; }

/* d. Text */
.tk-txt{ position:absolute; left:14%; top:56%; padding:1cqw 1.6cqw; border:1px dashed #1A84EF; border-radius:.8cqw; font-size:4cqw; font-weight:700; color:#FF3B30; white-space:nowrap; letter-spacing:-.01em; }
.tk-txt i{ display:inline-block; width:.35cqw; height:4.4cqw; margin-left:.5cqw; vertical-align:-.7cqw; background:#111827; animation:tk-caret 1s steps(1) infinite; }
@keyframes tk-caret{ 50%{ opacity:0; } }
.tk-fontbar{ left:50%; top:4.5%; transform:translateX(-50%); display:flex; align-items:center; gap:1.6cqw; padding:1.2cqw 2.2cqw; border-radius:99px; white-space:nowrap; font-size:2.7cqw; color:#374151; }
.tk-font{ font-weight:600; color:#111827; } .tk-fontbar b{ font-weight:800; } .tk-fontbar .tk-i{ font-style:italic; font-family:Georgia, serif; font-weight:500; }
.tk-fontbar i{ width:3cqw; height:3cqw; border-radius:50%; } .tk-fontbar i.on{ box-shadow:0 0 0 .5cqw #fff, 0 0 0 .9cqw #1A84EF; }

/* e. Spotlight */
.tk-stats{ display:flex; gap:2cqw; margin-top:2.6cqw; }
.tk-stats > div{ flex:1; padding:2cqw 2.2cqw; border-radius:1.8cqw; box-shadow:inset 0 0 0 1px #E5E7EB; }
.tk-stats span{ display:block; font-size:2.3cqw; color:#6B7280; } .tk-stats b{ display:block; margin-top:.6cqw; font-size:3.6cqw; color:#111827; letter-spacing:-.01em; }
.tk-spot{ position:relative; z-index:2; background:#fff; box-shadow:0 0 0 999px rgba(5,7,11,.6) !important; }
.tk-full:has(.tk-spot){ overflow:visible; }
.tk-img:has(.tk-spot) .tk-chip{ left:6%; bottom:7%; z-index:3; }

/* f. Highlight */
.tk-doc{ left:9%; top:12%; width:82%; height:100%; padding:4.4cqw 5cqw; }
.tk-tx{ margin-top:1cqw; font-size:2.6cqw !important; color:#6B7280 !important; }
.tk-r{ display:flex; justify-content:space-between; margin-top:2.6cqw; padding-top:2.4cqw; border-top:1px solid #F0F2F5; }
.tk-r--t{ font-weight:700; color:#111827 !important; }
.tk-img mark{ padding:0 .6cqw; margin:0 -.6cqw; border-radius:.6cqw; background:rgba(255,214,10,.6); color:inherit; }

/* g. Blur area */
.tk-blur{ filter:blur(.75cqw); color:#111827; }
.tk-blurbox{ position:absolute; left:42%; top:46.5%; width:47%; height:27%; border:1.5px dashed #1A84EF; border-radius:1cqw; }
.tk-blurbox em{ position:absolute; right:-.2cqw; top:-4.4cqw; padding:.6cqw 1.4cqw; border-radius:.8cqw; background:#1A84EF; color:#fff; font-size:2.3cqw; font-weight:600; font-style:normal; white-space:nowrap; }

/* h. Numbering */
.tk-lbl{ margin-top:2.6cqw; font-size:2.4cqw !important; color:#6B7280 !important; }
.tk-inp{ margin-top:1cqw; width:70%; padding:1.4cqw 2cqw; border-radius:1.4cqw; box-shadow:inset 0 0 0 1px #E5E7EB; font-size:2.7cqw !important; color:#111827 !important; }
.tk-inp--s{ width:40%; } .tk-btn--n{ position:absolute; left:63%; top:66%; margin:0; }
.tk-n{ position:absolute; display:grid; place-items:center; width:5.4cqw; height:5.4cqw; border-radius:50%; background:#1A84EF; color:#fff; font-size:3cqw; font-weight:700;
       box-shadow:0 0 0 .7cqw #fff, 0 1cqw 2cqw rgba(0,0,0,.35); transform:translate(-50%, -50%); }

/* i. Magnifier */
.tk-fine{ margin-top:2.4cqw; font-size:2.1cqw !important; color:#9CA3AF !important; }
.tk-lens{ position:absolute; left:42%; top:30%; width:40cqw; height:40cqw; border-radius:50%; overflow:hidden; background:#fff;
          box-shadow:0 0 0 1.2cqw #fff, 0 0 0 1.5cqw rgba(0,0,0,.08), 0 2cqw 5cqw -1cqw rgba(0,0,0,.55); display:grid; place-items:center; }
.tk-lens p{ font-size:5.2cqw !important; font-weight:500; color:#6B7280 !important; white-space:nowrap; }

/* j. Measure */
.tk-boxes{ display:flex; gap:8cqw; margin-top:1.5cqw; } .tk-boxes i{ width:30cqw; height:28cqw; border-radius:2cqw; background:#F3F4F6; box-shadow:inset 0 0 0 1px #E5E7EB; }
.tk-boxes i:nth-child(2){ background:#EAF3FE; box-shadow:inset 0 0 0 1px #C6DFFA; }
.tk-meas{ position:absolute; background:#FF2D78; }
.tk-meas--h{ left:41%; top:48%; width:8%; height:1.5px; } .tk-meas--v{ left:82%; top:26.3%; width:1.5px; height:44%; }
.tk-meas::before, .tk-meas::after{ content:''; position:absolute; background:#FF2D78; }
.tk-meas--h::before, .tk-meas--h::after{ top:-1.2cqw; width:1.5px; height:2.6cqw; } .tk-meas--h::before{ left:0; } .tk-meas--h::after{ right:0; }
.tk-meas--v::before, .tk-meas--v::after{ left:-1.2cqw; height:1.5px; width:2.6cqw; } .tk-meas--v::before{ top:0; } .tk-meas--v::after{ bottom:0; }
.tk-meas em{ position:absolute; padding:.5cqw 1.2cqw; border-radius:.8cqw; background:#FF2D78; color:#fff; font:600 2.3cqw/1.2 ui-monospace, Menlo, monospace; font-style:normal; white-space:nowrap; }
.tk-meas--h em{ left:50%; top:2.2cqw; transform:translateX(-50%); } .tk-meas--v em{ left:2.2cqw; top:50%; transform:translateY(-50%); }

.bd{ width:100%; max-width:1192px; margin:0 auto; align-self:stretch; padding:140px 0 40px; font-family:Inter, system-ui, sans-serif; color:#161618; }
.bd *{ box-sizing:border-box; } :where(.bd) :where(p, h2, h3, ul){ margin:0; }
.bd-head{ text-align:center; margin-bottom:72px; }
.bd-head h2{ font-size:44px; line-height:1.15; letter-spacing:-.025em; font-weight:600; }
.bd-head p{ max-width:440px; margin:14px auto 0; font-size:17px; line-height:1.6; color:#161618a3; }
.bd-grid{ display:grid; grid-template-columns:300px minmax(0, 1fr); gap:80px; align-items:start; }
.bd-side{ position:sticky; top:140px; }
/* The list: a hairline down the left, the active item's segment dark. */
.bd-list{ list-style:none; padding:0; display:grid; gap:6px; }
.bd-item{ position:relative; padding:6px 0 6px 20px; }
.bd-item::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:#E5E7EB; }
.bd-item::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:#161618; transform:scaleY(0); transform-origin:top; transition:transform .45s cubic-bezier(.22,1,.36,1); }
.bd-item.on::after{ transform:scaleY(1); }
.bd-t{ display:block; padding:0; border:0; background:none; font:500 20px/1.35 Inter, system-ui, sans-serif; letter-spacing:-.015em; color:#A3ACB8; cursor:pointer; text-align:left; transition:color .3s; }
.bd-t:hover{ color:#6B7280; } .bd-item.on .bd-t{ color:#161618; }
.bd-t:focus-visible{ outline:2px solid #1A84EF; outline-offset:3px; border-radius:4px; }
.bd-more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1); }
.bd-item.on .bd-more{ grid-template-rows:1fr; } .bd-more > div{ overflow:hidden; }
.bd-more ul, .bd-cap ul{ list-style:none; padding:14px 0 0; display:grid; gap:8px; }
.bd-more li, .bd-cap li{ position:relative; padding-left:16px; font-size:15px; line-height:1.5; color:#4B5563; }
.bd-more li::before, .bd-cap li::before{ content:''; position:absolute; left:2px; top:.7em; width:5px; height:5px; border-radius:50%; background:#C5CAD3; }
.bd-more a{ display:inline-block; margin:16px 0 6px; font-size:15px; font-weight:550; color:#1A84EF; text-decoration:none; }
.bd-more a:hover span{ display:inline-block; transform:translateX(3px); }
/* Cards: tall, full-bleed pictures; the active one sits a touch forward. */
.bd-cards{ display:grid; gap:56px; }
.bd-card{ transition:opacity .5s, transform .6s cubic-bezier(.22,1,.36,1); opacity:.55; transform:scale(.97); }
.bd-card.on{ opacity:1; transform:none; }
.bd-cap{ display:none; }
.bd-art{ position:relative; aspect-ratio:812 / 860; border-radius:22px; overflow:hidden; container-type:inline-size; background:#0B0E14 center / cover; }
.bd-bg1{ background-image:url('/assets/modes/video-bg.webp'); }
.bd-bg2{ background-image:url('/assets/modes/ocr-bg.webp'); }
.bd-bg3{ background-image:url('/assets/modes/scroll-bg.webp'); }
.bd-col{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:3.4cqw; padding:0 6.5cqw; }
.bd-art svg{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.bd-win{ border-radius:2cqw; overflow:hidden; background:#fff; box-shadow:0 3cqw 7cqw -2.5cqw rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
.bd-bar{ height:4.4cqw; display:flex; align-items:center; gap:.9cqw; padding:0 2cqw; background:#F7F8FA; border-bottom:1px solid #ECEEF2; }
.bd-bar i{ width:1.1cqw; height:1.1cqw; border-radius:50%; } .bd-bar i:nth-child(1){ background:#FF5F57; } .bd-bar i:nth-child(2){ background:#FEBC2E; } .bd-bar i:nth-child(3){ background:#28C840; }
.bd-bar span{ margin:0 auto; padding-right:5cqw; font-size:1.55cqw; font-weight:550; color:#6B7280; }
.bd-vid{ display:block; width:100%; height:auto; aspect-ratio:1788 / 1006; object-fit:cover; background:#000; }
/* auto zoom: timeline */
.bd-tl{ position:relative; padding:2cqw 2.4cqw 2.4cqw; border-radius:2cqw; background:rgba(16,18,24,.82); backdrop-filter:blur(8px); box-shadow:0 0 0 1px rgba(255,255,255,.08); }
.bd-ruler{ display:flex; justify-content:space-between; font:500 1.35cqw/1 ui-monospace, Menlo, monospace; color:rgba(255,255,255,.45); }
.bd-track{ position:relative; height:4.2cqw; margin-top:1.4cqw; border-radius:1cqw; }
.bd-track--clip{ background:repeating-linear-gradient(90deg, #3A3F9E 0 7.6%, #2E3283 7.6% 8%); }
.bd-track--zoom{ background:rgba(255,255,255,.05); }
.bd-track--zoom b{ position:absolute; top:0; bottom:0; display:grid; place-items:center; border-radius:1cqw; background:#1A84EF; color:#fff; font-size:1.5cqw; font-weight:600; }
.bd-tl > .bd-playhead{ position:absolute; top:1.2cqw; bottom:1.2cqw; left:2.4cqw; width:2px; background:#FF3B30; animation:bd-play 12s linear infinite; }
.bd-tl > .bd-playhead::before{ content:''; position:absolute; left:-.8cqw; top:-.4cqw; width:1.8cqw; height:1.8cqw; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#FF3B30; }
@keyframes bd-play{ to{ left:calc(100% - 2.4cqw); } }
.bd-chips{ display:flex; justify-content:center; gap:1.2cqw; }
.bd-chips span{ display:inline-flex; align-items:center; gap:.8cqw; padding:1.1cqw 2cqw; border-radius:99px; background:rgba(255,255,255,.12); color:#fff; font-size:1.7cqw; font-weight:550; backdrop-filter:blur(6px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.bd-chips span.on{ background:#fff; color:#111827; } .bd-chips svg{ width:2cqw; height:2cqw; color:#1A84EF; }
/* the screen: Clipio's recording, cropped to the sheet (the original webcam
   sits outside the crop), 1312x894 of the 1788x1006 frame at 79,40. */
.bd-screen{ position:relative; aspect-ratio:1312 / 894; background:#fff url('/assets/promo-poster.jpg') 16.6% 35.7% / 136.28% auto no-repeat; }
/* webcam: the face from the same frame, 332px wide at 1425,640 */
.bd-cam{ position:absolute; overflow:hidden; border:.5cqw solid #fff; box-shadow:0 1.6cqw 3.6cqw -1cqw rgba(0,0,0,.55);
         background:#2A2A2A url('/assets/promo-poster.jpg') 97.9% 94.96% / 538.6% auto no-repeat; animation:bd-cam 10.5s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes bd-cam{
  0%,28%{ left:73%; top:61.8%; width:24%; height:35.2%; border-radius:50%; background-position:97.9% 94.96%; transform:none; }
  33.3%,61%{ left:3%; top:58.8%; width:26%; height:38.2%; border-radius:18%; background-position:97.9% 94.96%; transform:none; }
  66.6%,95%{ left:67%; top:5%; width:30%; height:33%; border-radius:10%; background-position:97.9% 87.2%; transform:scaleX(-1); }
  100%{ left:73%; top:61.8%; width:24%; height:35.2%; border-radius:50%; background-position:97.9% 94.96%; transform:none; } }
.bd-panel{ padding:2.4cqw 2.8cqw; border-radius:2cqw; background:#fff; box-shadow:0 3cqw 7cqw -2.5cqw rgba(30,10,70,.55); }
.bd-ph{ font-size:1.9cqw; font-weight:650; color:#111827; }
.bd-seg{ display:flex; gap:.6cqw; margin-top:1.6cqw !important; padding:.6cqw; border-radius:1.4cqw; background:#F3F4F6; }
.bd-seg span{ flex:1; padding:1.1cqw 0; border-radius:1cqw; text-align:center; font-size:1.65cqw; font-weight:600; color:#6B7280; }
.bd-seg .s1{ animation:bd-s1 10.5s infinite; } .bd-seg .s2{ animation:bd-s2 10.5s infinite; } .bd-seg .s3{ animation:bd-s3 10.5s infinite; }
@keyframes bd-s1{ 0%,31%,98%,100%{ background:#fff; color:#111827; box-shadow:0 1px 2px rgba(0,0,0,.08); } 32%,97%{ background:transparent; color:#6B7280; box-shadow:none; } }
@keyframes bd-s2{ 0%,32%,64.5%,100%{ background:transparent; color:#6B7280; box-shadow:none; } 33%,64%{ background:#fff; color:#111827; box-shadow:0 1px 2px rgba(0,0,0,.08); } }
@keyframes bd-s3{ 0%,65.5%,98%,100%{ background:transparent; color:#6B7280; box-shadow:none; } 66%,97%{ background:#fff; color:#111827; box-shadow:0 1px 2px rgba(0,0,0,.08); } }
.bd-tg{ display:flex; align-items:center; gap:1.2cqw; margin-top:1.8cqw !important; font-size:1.65cqw; color:#374151; }
.bd-tg span:nth-of-type(2){ margin-left:auto; }
.bd-sw{ position:relative; width:4.4cqw; height:2.5cqw; border-radius:99px; background:#D1D5DB; }
.bd-sw::after{ content:''; position:absolute; left:.3cqw; top:.3cqw; width:1.9cqw; height:1.9cqw; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left .3s; }
.bd-sw.on{ background:#1A84EF; } .bd-sw.on::after{ left:2.2cqw; }
.bd-sw--m{ animation:bd-mir 10.5s infinite; } .bd-sw--m::after{ animation:bd-mir2 10.5s infinite; }
@keyframes bd-mir{ 0%,66%,98%,100%{ background:#D1D5DB; } 67%,97%{ background:#1A84EF; } }
@keyframes bd-mir2{ 0%,66%,98%,100%{ left:.3cqw; } 67%,97%{ left:2.2cqw; } }
/* annotation */
.bd-tools{ align-self:center; display:flex; gap:.8cqw; padding:.9cqw; border-radius:99px; background:#fff; box-shadow:0 2cqw 5cqw -2cqw rgba(0,0,0,.6); }
.bd-tools b{ display:grid; place-items:center; width:5.2cqw; height:5.2cqw; border-radius:50%; color:#4B5563; }
.bd-tools svg{ width:2.6cqw; height:2.6cqw; }
.bd-tools .t1{ animation:bd-t1 11s infinite; } .bd-tools .t0{ animation:bd-t0 11s infinite; } .bd-tools .t2{ animation:bd-t2 11s infinite; }
.bd-tools .t3{ animation:bd-t3 11s infinite; } .bd-tools .t4{ animation:bd-t4 11s infinite; } .bd-tools .t5{ animation:bd-t5 11s infinite; }
@keyframes bd-t1{ 0%,0%{ background:transparent; color:#4B5563; } 0.3%,13%{ background:#1A84EF; color:#fff; } 13.3%,100%{ background:transparent; color:#4B5563; } }
@keyframes bd-t0{ 0%,13%{ background:transparent; color:#4B5563; } 13.3%,27%{ background:#1A84EF; color:#fff; } 27.3%,100%{ background:transparent; color:#4B5563; } }
@keyframes bd-t2{ 0%,27%{ background:transparent; color:#4B5563; } 27.3%,34%{ background:#1A84EF; color:#fff; } 34.3%,100%{ background:transparent; color:#4B5563; } }
@keyframes bd-t3{ 0%,34%{ background:transparent; color:#4B5563; } 34.3%,47%{ background:#1A84EF; color:#fff; } 47.3%,100%{ background:transparent; color:#4B5563; } }
@keyframes bd-t4{ 0%,47%{ background:transparent; color:#4B5563; } 47.3%,58%{ background:#1A84EF; color:#fff; } 58.3%,100%{ background:transparent; color:#4B5563; } }
@keyframes bd-t5{ 0%,58%{ background:transparent; color:#4B5563; } 58.3%,95%{ background:#1A84EF; color:#fff; } 95.3%,100%{ background:transparent; color:#4B5563; } }
.bd-ink{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.bd-a1, .bd-a2, .bd-a2b{ fill:none; stroke:#FF3B30; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.bd-a1{ animation:bd-draw1 11s infinite; } .bd-a2{ animation:bd-draw2 11s infinite; } .bd-a2b{ animation:bd-draw2b 11s infinite; }
@keyframes bd-draw1{ 0%,2%{ stroke-dashoffset:1; opacity:1; } 11%,94%{ stroke-dashoffset:0; opacity:1; } 99%,100%{ stroke-dashoffset:0; opacity:0; } }
@keyframes bd-draw2{ 0%,14%{ stroke-dashoffset:1; opacity:1; } 23%,94%{ stroke-dashoffset:0; opacity:1; } 99%,100%{ stroke-dashoffset:0; opacity:0; } }
@keyframes bd-draw2b{ 0%,23%{ stroke-dashoffset:1; opacity:1; } 26%,94%{ stroke-dashoffset:0; opacity:1; } 99%,100%{ stroke-dashoffset:0; opacity:0; } }
.bd-a4{ fill:rgba(255,214,10,.45); transform-box:fill-box; transform-origin:left center; transform:scaleX(0); animation:bd-hl 11s infinite; }
@keyframes bd-hl{ 0%,48%{ transform:scaleX(0); opacity:1; } 56%,94%{ transform:scaleX(1); opacity:1; } 99%,100%{ transform:scaleX(1); opacity:0; } }
.bd-txt{ position:absolute; left:77%; top:88%; padding:.3cqw 1.2cqw; border-radius:.8cqw; background:#FF3B30; color:#fff; font-size:2cqw; font-weight:700; white-space:nowrap; opacity:0; animation:bd-txt 11s infinite; }
@keyframes bd-txt{ 0%,27%{ opacity:0; transform:translateY(.8cqw); } 31%,94%{ opacity:1; transform:none; } 99%,100%{ opacity:0; } }
.bd-n{ position:absolute; display:grid; place-items:center; width:4.4cqw; height:4.4cqw; border-radius:50%; background:#1A84EF; color:#fff; font-size:2.3cqw; font-weight:700;
       box-shadow:0 0 0 .6cqw #fff, 0 1cqw 2cqw rgba(0,0,0,.35); transform:translate(-50%, -50%) scale(0); }
.bd-n1{ left:5.2%; top:29.6%; animation:bd-n1 11s infinite; } .bd-n2{ left:15.5%; top:46.6%; animation:bd-n2 11s infinite; }
@keyframes bd-n1{ 0%,35%{ transform:translate(-50%, -50%) scale(0); } 38%,94%{ transform:translate(-50%, -50%) scale(1); } 99%,100%{ transform:translate(-50%, -50%) scale(0); } }
@keyframes bd-n2{ 0%,40%{ transform:translate(-50%, -50%) scale(0); } 43%,94%{ transform:translate(-50%, -50%) scale(1); } 99%,100%{ transform:translate(-50%, -50%) scale(0); } }
.bd-blur{ position:absolute; left:75.8%; top:39.9%; width:16.6%; height:14.4%; border-radius:.6cqw; backdrop-filter:blur(.7cqw); -webkit-backdrop-filter:blur(.7cqw);
          box-shadow:inset 0 0 0 1.5px #1A84EF; opacity:0; animation:bd-blur 11s infinite; }
@keyframes bd-blur{ 0%,58%{ opacity:0; } 64%,94%{ opacity:1; } 99%,100%{ opacity:0; } }
@media (max-width:1000px){ .bd-grid{ grid-template-columns:240px minmax(0, 1fr); gap:44px; } .bd-head h2{ font-size:36px; } }
@media (max-width:860px){
  .bd{ padding-top:90px; } .bd-head{ margin-bottom:40px; } .bd-head h2{ font-size:32px; }
  .bd-grid{ grid-template-columns:1fr; } .bd-side{ display:none; }
  .bd-card{ opacity:1; transform:none; } .bd-cap{ display:block; margin-bottom:18px; } .bd-cap h3{ font-size:22px; font-weight:600; letter-spacing:-.015em; }
  .bd-cards{ gap:48px; } .bd-art{ aspect-ratio:812 / 900; } }
@media (prefers-reduced-motion:reduce){ .bd *, .bd *::before, .bd *::after{ animation:none !important; transition:none !important; }
  .bd-a1, .bd-a2, .bd-a2b{ stroke-dashoffset:0; } .bd-a4{ transform:none; } .bd-txt, .bd-blur{ opacity:1; } .bd-n{ transform:translate(-50%, -50%); }
  .bd-cam{ left:73%; top:61.8%; width:24%; height:35.2%; border-radius:50%; } }

.cs{ position:relative; width:100vw; margin-left:calc(50% - 50vw); align-self:stretch; background:#000; color:#fff; font-family:Inter, system-ui, sans-serif; }
.cs *{ box-sizing:border-box; } :where(.cs) :where(p, h2){ margin:0; }
.cs-in{ max-width:1192px; margin:0 auto; padding:120px 24px; display:flex; flex-direction:column; align-items:center; gap:48px; text-align:center; }
.cs-copy h2{ font-size:44px; line-height:1.12; letter-spacing:-.025em; font-weight:600; }
.cs-copy p{ max-width:520px; margin:16px auto 0 !important; font-size:18px; line-height:1.6; color:rgba(255,255,255,.55); }
/* The app's panel: --bg-panel #1A1A1A, --border-panel #323232, tiles on --surface-input #202020. */
.cs-panel{ width:100%; max-width:420px; text-align:left; padding:16px 20px 6px; border-radius:16px; background:#1A1A1A; box-shadow:0 0 0 1px #323232, 0 30px 60px -30px rgba(0,0,0,.8); }
.cs-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
.cs-sw{ position:relative; width:34px; height:18px; padding:0; border:0; border-radius:99px; background:#202020; cursor:pointer; transition:background 140ms; }
.cs-sw i{ position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left 140ms; }
.cs-sw[aria-checked="true"]{ background:#1A84EF; } .cs-sw[aria-checked="true"] i{ left:18px; }
.cs-heading{ margin-bottom:8px !important; font-size:11px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; color:rgba(255,255,255,.3); }
.cs-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:7px; margin-bottom:18px; }
.cs-tile{ aspect-ratio:1; min-width:0; padding:0; display:flex; align-items:center; justify-content:center; border-radius:16px; border:1px solid #323232; background:#202020; cursor:pointer; }
@supports (corner-shape: squircle){ .cs-tile{ corner-shape:squircle; border-radius:22px; } }
.cs-tile:hover{ background:#252525; }
.cs-tile[aria-pressed="true"]{ border-color:#1A84EF; background:rgba(26,132,239,.16); }
.cs-tile:focus-visible, .cs-sw:focus-visible{ outline:2px solid #1A84EF; outline-offset:2px; }
.cs-sl{ margin-bottom:14px; }
.cs-sl p{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px !important; font-size:12px; color:rgba(255,255,255,.45); }
.cs-sl b{ font-weight:400; color:rgba(255,255,255,.3); font-variant-numeric:tabular-nums; }
.cs-range{ -webkit-appearance:none; appearance:none; width:100%; height:20px; margin:0; background:transparent; cursor:pointer; --fill:50%; }
.cs-range::-webkit-slider-runnable-track{ height:5px; border-radius:999px; background:linear-gradient(to right, #1A84EF var(--fill), #3A3A3A var(--fill)); }
.cs-range::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:16px; margin-top:-5.5px; border-radius:999px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.45), 0 0 0 .5px rgba(0,0,0,.12); }
.cs-range::-moz-range-track{ height:5px; border-radius:999px; background:#3A3A3A; } .cs-range::-moz-range-progress{ height:5px; border-radius:999px; background:#1A84EF; }
.cs-range::-moz-range-thumb{ width:22px; height:16px; border:0; border-radius:999px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.45); }
@media (max-width:860px){ .cs-in{ gap:36px; padding:88px 20px; } .cs-copy h2{ font-size:32px; } }

/* ---------- Section titles ----------
   One style for every section's title, set by "Built with care. Loved by
   early users.": 52px, medium weight, tight tracking. Last in the file so
   it outranks each section's own heading rule. */
.cm-title, .row__title, .block__title, .tk-head h2, .bd-head h2, .cs-copy h2, .tm-head h2{
  font-size:52px; line-height:1.1; letter-spacing:-.03em; font-weight:500;
}
@media (max-width:760px){
  .cm-title, .row__title, .block__title, .tk-head h2, .bd-head h2, .cs-copy h2, .tm-head h2{ font-size:34px; }
}