/* KIDA product / secondary pages — chrome matches homepage */
:root {
  --bg: #000;
  --bg-alt: #0a0a0a;
  --surface: #1d1d1f;
  --ink: #f5f5f7;
  --ink-2: #d2d2d7;
  --muted: #a1a1a6;
  --faint: #6e6e73;
  --line: rgba(255,255,255,.12);
  --link: #2997ff;
  --link-hover: #6cb5ff;
  --btn: #f5f5f7;
  --btn-text: #000;
  --max: 980px;
  --max-wide: 1120px;
  --nav-h: 56px;
  --section-y: 96px;
  --section-x: 22px;
  --footer-y: 22px; /* compact band; symmetric, shares --section-x */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.25,.1,.25,1);
  --fs-hero: clamp(36px, 6vw, 56px);
  --fs-section: clamp(28px, 4vw, 40px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-micro: 12px;
  --btn-fs: 17px;
  --btn-fw: 400;
  --btn-lh: 1.17648;
  --btn-ls: -0.022em;
  --btn-pad-y: 12px;
  --btn-pad-x: 22px;
  --btn-radius: 980px;
  --btn-gap: 4px;
  --btn-link-fs: 15px;
  --btn-link-pad-y: 12px;
  --btn-link-pad-x: 8px;
  --btn-underline-offset: 3px;
  --btn-nav-fs: 14px;
  --btn-nav-pad-y: 8px;
  --btn-nav-pad-x: 16px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  /* Anchor jumps were landing under the fixed nav on these pages too. */
  scroll-padding-top:calc(var(--nav-h) + 16px);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body{font-family:var(--font);font-size:var(--fs-body);line-height:1.47;color:var(--ink);background:var(--bg);letter-spacing:-.022em;overflow-x:clip}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;top:-100px;left:16px;z-index:1000;padding:10px 16px;background:#fff;color:#000;font-weight:600;border-radius:980px;font-size:14px}
.skip-link:focus{top:12px}

/* ── Nav (matches homepage) ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  /* Light bar site-wide. Alpha sits high (.9) because these pages are still
     dark-bodied — at .8 the bar greyed out against them. */
  background:rgba(251,251,253,.9);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.09);
}
.nav.scrolled{background:rgba(251,251,253,.96)}
.nav__inner{
  width:min(var(--max-wide),calc(100% - 44px));
  margin-inline:auto;height:100%;display:flex;align-items:center;gap:28px;
}
/* Near-white monochrome PNG cut for a dark bar — invert for the light one. */
.nav__logo img{height:34px;width:auto;filter:invert(1);opacity:.88}
.nav__logo:hover img{opacity:1}
.nav__links{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav__links a{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:400;color:rgba(0,0,0,.72);letter-spacing:-.01em;transition:color .2s;
}
.nav__links a:hover{color:#000}
.nav__ico{width:14px;height:14px;flex-shrink:0;opacity:.85}
.nav__links a:hover .nav__ico{opacity:1}
.nav__cta,.nav__links a.nav__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;
  padding:var(--btn-nav-pad-y) var(--btn-nav-pad-x);
  font-size:var(--btn-nav-fs);font-weight:var(--btn-fw);line-height:var(--btn-lh);
  letter-spacing:var(--btn-ls);border-radius:var(--btn-radius);
  /* Dark pill on the light bar. The `.nav__links a.nav__cta` pair matters: the
     mobile CTA lives in that list and `.nav__links a` (0,2,1) outranks a bare
     `.nav__cta` (0,1,0), leaving dark text on a dark pill on phones. */
  background:#1d1d1f;color:#fff;white-space:nowrap;
  transition:background .2s var(--ease),color .2s;
}
.nav__cta:hover,.nav__links a.nav__cta:hover{background:#0b5ed7;color:#fff}
.nav__cta:focus-visible{outline:2px solid var(--link);outline-offset:3px}
.nav__cta .nav__ico{opacity:1}
a.nav__cta--mobile,.nav__links a.nav__cta--mobile{display:none}
.nav__ham{display:none;width:40px;height:40px;position:relative;flex-shrink:0}
.nav__ham span{
  position:absolute;left:11px;right:11px;height:1px;background:#1d1d1f;
  transition:transform .25s var(--ease),top .25s var(--ease),opacity .2s;
}
.nav__ham span:nth-child(1){top:15px}
.nav__ham span:nth-child(2){top:19.5px}
.nav__ham span:nth-child(3){top:24px}
.nav__ham.open span:nth-child(1){top:19.5px;transform:rotate(45deg)}
.nav__ham.open span:nth-child(2){opacity:0}
.nav__ham.open span:nth-child(3){top:19.5px;transform:rotate(-45deg)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;font-size:17px;font-weight:500;border-radius:980px;
  transition:background .2s,color .2s;
}
.btn--primary{background:var(--btn);color:var(--btn-text)}
.btn--primary:hover{background:var(--link);color:#fff}
.btn--ghost{background:rgba(255,255,255,.08);color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--link{color:var(--link);padding:12px 8px;font-size:15px}
.btn--link:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:3px}

/* hero */
.hero{padding:calc(var(--nav-h) + var(--section-y)) var(--section-x) var(--section-y);background:var(--bg-alt);text-align:center}
.hero__inner{width:min(var(--max),100%);margin:0 auto;display:grid;gap:28px;justify-items:center}
.hero__icon{width:120px;height:120px;border-radius:28px;box-shadow:0 12px 40px rgba(0,0,0,.45);object-fit:cover}
.hero__eyebrow{font-size:13px;font-weight:600;color:var(--link);letter-spacing:.04em;text-transform:uppercase}
.hero__title{font-size:var(--fs-hero);font-weight:700;letter-spacing:-.03em;line-height:1.05;max-width:16em}
.hero__sub{font-size:19px;color:var(--muted);max-width:34em;line-height:1.45}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.hero__chip{padding:6px 12px;border-radius:980px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.section{padding:var(--section-y) var(--section-x);border-top:1px solid var(--line)}
.section--alt{background:var(--bg-alt)}
.section__inner{width:min(var(--max-wide),100%);margin:0 auto}
.section__head{text-align:center;max-width:var(--max);margin:0 auto 40px}
.section__head h2{font-size:var(--fs-section);font-weight:600;letter-spacing:-.02em;margin-bottom:12px;line-height:1.1}
.section__head p{color:var(--muted);font-size:18px;line-height:1.45;max-width:36em;margin:0 auto}

/* download strip */
.download-bar{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}

/*
 * App Store–style screenshot strip:
 * several phone-width tiles visible side-by-side; native horizontal scroll.
 * Stays inside section horizontal padding (no full-bleed).
 */
.carousel{
  --shot-h: 480px;
  --shot-gap: 16px;
  --shot-w: 230px; /* phone default; JS overwrites per image aspect */
  position:relative;
  width:100%;
  max-width:100%;
  margin:0;
  box-sizing:border-box;
}
/* Screenshots section: keep section padding; carousel fills inner width only */
#screenshots.section{
  padding-left:var(--section-x);
  padding-right:var(--section-x);
  overflow-x:clip;
}
#screenshots .section__inner{
  width:min(var(--max-wide),100%);
  max-width:100%;
  box-sizing:border-box;
}
.carousel__status{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;
}
.carousel__viewport{
  display:block;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  border:0;
  border-radius:0;
  background:transparent;
  padding:4px 0 20px;
  margin:0;
  cursor:grab;
  overscroll-behavior-x:contain;
  box-sizing:border-box;
}
.carousel__viewport::-webkit-scrollbar{display:none;width:0;height:0}
.carousel__viewport.is-dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.carousel__track{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  /* Centred, not bottom-aligned: in a mixed carousel (Lookout has 6 phone
     shots and 3 Mac shots) the track is as tall as the portrait tiles, so
     flex-end pinned the shorter landscape shots to the bottom under a big
     dead band. Uniform-orientation strips are unaffected. */
  align-items:center;
  gap:var(--shot-gap);
  width:max-content !important;
  max-width:none !important;
  transform:none !important;
  transition:none !important;
}
.carousel__slide{
  flex:0 0 var(--shot-w) !important;
  width:var(--shot-w) !important;
  min-width:var(--shot-w) !important;
  max-width:var(--shot-w) !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  scroll-snap-align:start;
  box-sizing:border-box;
}
.carousel__slide figure{
  margin:0;
  padding:0;
  line-height:0;
  border-radius:0;
  overflow:hidden;
  background:transparent;
  border:0;
  box-shadow:none;
  /* --slide-h is set per slide by product.js so a width-capped landscape shot
     does not leave a tall empty band; falls back to the uniform strip height. */
  height:var(--slide-h, var(--shot-h));
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
/* <picture> sits between the flex figure and the img. Unstyled it is a block
   flex-item sized to the image's intrinsic dimensions, so the img's height:100%
   resolved against an auto-height parent and was ignored — the image rendered
   at natural size and got cropped by the figure's overflow:hidden. Give it a
   definite box so the img has something to fit inside. */
.carousel__slide figure picture{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
/* Beat the global `img{max-width:100%;height:auto}` rule.
   auto width + auto height + max 100% on both axes keeps the intrinsic aspect
   ratio and guarantees the whole image fits its box — it can never be cropped,
   in either orientation. This replaces the old portrait/landscape split, which
   forced 100% on one axis and `max-width:none` on the other. */
.carousel__slide img,
.carousel .carousel__slide img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.carousel__btn{
  position:absolute;
  top:50%;
  transform:translateY(-55%);
  z-index:2;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(29,29,31,.92);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .2s,border-color .2s,opacity .2s;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.carousel__btn:hover{background:rgba(41,151,255,.28);border-color:rgba(41,151,255,.45)}
.carousel__btn:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.carousel__btn--prev{left:0}
.carousel__btn--next{right:0}
.carousel__btn:disabled{opacity:.28;cursor:default;pointer-events:none}
.carousel__dots{display:none !important}

@media(min-width:900px){
  .carousel{
    --shot-h: 520px;
    --shot-gap: 18px;
    --shot-w: 240px;
  }
}
@media(max-width:768px){
  .carousel{
    --shot-h: 380px;
    --shot-gap: 12px;
    --shot-w: 190px;
  }
  .carousel__btn{width:40px;height:40px;font-size:20px}
  .carousel__btn--prev{left:0}
  .carousel__btn--next{right:0}
}
@media(prefers-reduced-motion:reduce){
  .carousel__viewport{scroll-behavior:auto}
}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px 22px;text-align:center}
.step__n{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(41,151,255,.12);color:var(--link);font-weight:600;font-size:14px;margin-bottom:14px}
.step h3{font-size:18px;font-weight:600;margin-bottom:8px}
.step p{font-size:15px;color:var(--muted);line-height:1.45}

/* guides grid */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.guide-card{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:18px;transition:border-color .2s,background .2s,transform .2s;height:100%}
.guide-card:hover{border-color:rgba(41,151,255,.35);background:#252528;transform:translateY(-2px)}
.guide-card__kw{font-size:12px;font-weight:600;color:var(--link);letter-spacing:.02em;text-transform:uppercase}
.guide-card h3{font-size:18px;font-weight:600;line-height:1.25}
.guide-card p{font-size:14px;color:var(--muted);line-height:1.45;flex:1}
.guide-card span{color:var(--link);font-size:14px;font-weight:500}

/* faq */
.faq{display:grid;gap:10px;max-width:var(--max);margin:0 auto}
.faq__item{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq__item summary{list-style:none;cursor:pointer;padding:22px 28px;font-size:16px;font-weight:600;line-height:1.4}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";float:right;color:var(--link);margin-left:12px}
.faq__item[open] summary::after{content:"–"}
.faq__body{padding:0 28px 24px}
.faq__body p{color:var(--muted);font-size:15px;line-height:1.5;margin-bottom:12px}
.faq__body a{color:var(--link)}
.faq__body a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:3px}

/* cta */
.cta{text-align:center;padding:var(--section-y) var(--section-x);background:var(--bg-alt);border-top:1px solid var(--line)}
.cta h2{font-size:var(--fs-section);margin-bottom:12px}
.cta p{color:var(--muted);margin-bottom:24px;max-width:28em;margin-inline:auto}

/* ── Footer (matches homepage) ── */
.footer{
  background:var(--bg);color:var(--ink-2);
  padding:var(--footer-y) var(--section-x);
  font-size:var(--fs-micro);line-height:1.33337;letter-spacing:-.01em;
  border-top:1px solid var(--line);
}
.footer__inner{width:min(var(--max-wide),100%);margin-inline:auto}
/* Three columns, brand | nav | empty. With the Startup India badge removed the
   row holds only the brand and the links, and under flex the nav would centre in
   the space left over beside the brand — off-centre by half the wordmark. The
   empty third column restores the balance the badge used to provide. */
.footer__row{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"brand nav .";align-items:center;gap:12px 20px}
.footer__brand{grid-area:brand;justify-self:start;display:flex;align-items:center}
.footer__brand img{height:28px;width:auto;display:block}
.footer__nav{
  grid-area:nav;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 14px;flex:1;min-width:0;text-align:center;
}
.footer__nav a{color:var(--muted);transition:color .15s;white-space:nowrap}
.footer__nav a:hover{color:var(--link)}
/* Startup India badge and its rules removed 2026-08-13. */
.footer__copy{
  margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);
  color:var(--faint);font-size:11px;text-align:center;
}
.footer__copy a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.footer__copy a:hover{color:var(--link)}

/* guide article page */
.article{padding:calc(var(--nav-h) + 56px) var(--section-x) var(--section-y);max-width:720px;margin:0 auto}
.article__crumb{font-size:13px;color:var(--faint);margin-bottom:20px}
.article__crumb a{color:var(--link)}
.article h1{font-size:clamp(28px,5vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:14px}
.article__lead{font-size:19px;color:var(--muted);line-height:1.5;margin-bottom:28px}
.article h2{font-size:24px;font-weight:600;margin:32px 0 12px;letter-spacing:-.02em}
.article p,.article li{color:var(--ink-2);line-height:1.6;margin-bottom:14px;font-size:16px}
.article ol,.article ul{padding-left:1.2em;margin-bottom:16px}
.article ol{list-style:decimal}
.article ul{list-style:disc}
.article strong{color:var(--ink)}
.article__cta{margin-top:40px;padding:28px;background:var(--bg-alt);border:1px solid var(--line);border-radius:18px;text-align:center}
.article__cta p{color:var(--muted);margin-bottom:16px}

@media(max-width:900px){
  .steps{grid-template-columns:1fr}
  .hero{text-align:left}
  .hero__inner{justify-items:start}
  .hero__actions,.hero__meta{justify-content:flex-start}
  /* .download-bar only ever sits inside the centred .cta / .article__cta
     boxes, so it keeps justify-content:center at every width */
  .section__head{text-align:left}
  .section__head p{margin-left:0}
}
@media(max-width:768px){
  .nav__links{
    position:fixed;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;margin-left:0;
    padding:8px 22px 20px;
    /* Opaque, not frosted: at .97 over these dark pages the white body text
       ghosted through the sheet as faint light streaks. */
    background:#fbfbfd;
    border-bottom:1px solid rgba(0,0,0,.1);
    transform:translateY(-120%);opacity:0;pointer-events:none;
    transition:transform .3s var(--ease),opacity .3s;
  }
  .nav__links.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav__links a{padding:14px 0;font-size:15px;border-bottom:1px solid rgba(0,0,0,.08)}
  .nav__cta--desktop{display:none}
  a.nav__cta--mobile,.nav__links a.nav__cta--mobile{
    display:inline-flex;justify-content:center;margin-top:14px;border-bottom:none !important;
    padding:var(--btn-pad-y) var(--btn-pad-x) !important;font-size:var(--btn-fs) !important;
  }
  .nav__ham{display:block;margin-left:auto}
  :root{--section-y:72px;--section-x:18px;--footer-y:20px}
}
@media(max-width:480px){
  .nav__inner{width:min(var(--max-wide),calc(100% - 32px))}
  .footer__row{gap:10px 12px}
  .footer__brand img{height:24px}
}

/* ---- Breadcrumbs ---- */
.breadcrumb{margin:0 0 18px}
.breadcrumb__list{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:0;padding:0;list-style:none;
  font-size:13px;line-height:1.4;color:var(--faint);letter-spacing:-.01em;
}
.breadcrumb__list li{display:flex;align-items:center;gap:6px;min-width:0}
.breadcrumb__list li+li::before{content:"›";color:var(--faint);opacity:.7}
.breadcrumb a{color:var(--muted);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--link-hover)}
.breadcrumb a:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}
.breadcrumb [aria-current="page"]{
  color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(52vw,420px);
}
.breadcrumb__updated{margin:0 0 20px;font-size:13px;color:var(--faint)}

/* ---- Inline prose links (article body, ledes, hub copy) ----
   :not(.btn) matters: the "Ready to try" CTA buttons sit inside a <p> within
   .article, so these selectors (0,2,2) outranked .btn--primary (0,1,0) and
   repainted the button label link-blue on its near-white pill — 2.77:1. */
.article p a:not(.btn),
.article li a:not(.btn),
.article .lede a:not(.btn),
.hub .lede a:not(.btn){
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(41,151,255,.45);
  transition:color .2s,text-decoration-color .2s;
}
.article p a:not(.btn):hover,
.article li a:not(.btn):hover,
.article .lede a:not(.btn):hover,
.hub .lede a:not(.btn):hover{color:var(--link-hover);text-decoration-color:currentColor}
.article p a:not(.btn):focus-visible,
.article li a:not(.btn):focus-visible,
.article .lede a:not(.btn):focus-visible,
.hub .lede a:not(.btn):focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:3px}
/* breadcrumb + related rows keep their own muted treatment */
.article .breadcrumb a,
.article .rel a,
.hub .breadcrumb a{
  color:var(--muted);
  text-decoration:none;
  text-decoration-color:transparent;
}
.article .breadcrumb a:hover,
.article .rel a:hover,
.hub .breadcrumb a:hover{color:var(--link-hover)}
.article .rel a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Long-form prose inside the main.section guide template ----
   The reset zeroes margins and this variant never restored them, so
   paragraphs, lists and headings ran together. Matches .article spacing. */
main.section article > h2{font-size:25px;margin:36px 0 12px;letter-spacing:-.02em}
main.section article > h3{font-size:18px;margin:24px 0 8px;letter-spacing:-.01em}
main.section article > p{color:var(--ink-2);margin:0 0 14px;line-height:1.6}
main.section article > ul,
main.section article > ol{color:var(--ink-2);line-height:1.6;padding-left:20px;margin:0 0 16px}
main.section article > ul > li,
main.section article > ol > li{margin-bottom:8px}
main.section article > ul.picks{padding-left:0;list-style:none;display:grid;gap:12px;margin:20px 0 28px}
main.section article > ul.picks > li{
  margin-bottom:0;padding:16px 18px;border:1px solid var(--line);
  border-radius:16px;background:rgba(255,255,255,.03);
}
main.section article > ul.picks > li strong{display:block;font-size:17px;margin-bottom:6px}
main.section article > ul.picks > li p{margin:0;font-size:15px}
main.section article p a,
main.section article li a{
  color:var(--link);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(41,151,255,.45);
}
main.section article p a:hover,
main.section article li a:hover{color:var(--link-hover);text-decoration-color:currentColor}
main.section article .note{
  border-left:2px solid var(--link);padding:2px 0 2px 16px;
  margin:20px 0;color:var(--muted);font-size:15px;
}
main.section article .tbl{
  width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:15px;
  display:block;overflow-x:auto;
}
main.section article .tbl th,
main.section article .tbl td{
  border-bottom:1px solid var(--line);padding:10px 14px;text-align:left;
  color:var(--ink-2);white-space:nowrap;
}
main.section article .tbl th{
  color:var(--ink);font-weight:600;font-size:13px;
  letter-spacing:.02em;text-transform:uppercase;
}

/* The global reset sets `ul,ol{list-style:none}` for nav/chip lists.
   Restore real markers for prose lists in both guide templates. */
main.section article > ul,
.article > ul,
.article ul:not(.picks):not(.breadcrumb__list){list-style:disc}
main.section article > ol,
.article > ol,
.article ol:not(.breadcrumb__list){list-style:decimal}
main.section article > ul.picks,
.article ul.picks{list-style:none}
main.section article > ul > li::marker,
main.section article > ol > li::marker,
.article li::marker{color:var(--faint)}
.article .breadcrumb__list,
main.section .breadcrumb__list{list-style:none}

/* ═══ FAQ boxes on guide/blog pages ═══
   .faq__item was designed for <details><summary> markup, where all the padding
   lives on `summary` and `.faq__body`. Guide pages use `<div class="faq__item">
   <h3>…</h3><p>…</p></div>`, which inherited the border and background but no
   padding at all, so text sat flush against the edge.
   Child selectors below never match the <details> variant (its <p> is nested
   inside .faq__body), so the homepage and app pages are unaffected.
   Specificity is .faq > .faq__item > x (0,2,1) to beat the per-page
   `.article p` / `.article h3` rules (0,1,1). */
.faq > .faq__item > h3{
  margin:0;
  padding:20px 24px 0;
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.01em;
  color:var(--ink);
}
.faq > .faq__item > p{
  margin:0;
  padding:8px 24px 20px;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}
/* if an answer ever runs to more than one paragraph */
.faq > .faq__item > p + p{padding-top:0}
.faq > .faq__item > p:not(:last-child){padding-bottom:12px}
.faq > .faq__item > p a{color:var(--link)}
.faq > .faq__item > p a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:3px}

@media(max-width:600px){
  .faq > .faq__item > h3{padding:16px 18px 0;font-size:16px}
  .faq > .faq__item > p{padding:8px 18px 16px}
}

/* ═══ Callout + related-links paragraphs ═══
   Both are <p class="note"> / <p class="rel">, so the per-page `.article p`
   rule (0,1,1) was overriding their own margins (0,1,0). Raise specificity. */
.article p.note{margin:20px 0}
.article p.rel{margin:34px 0 0}
main.section article > p.note{margin:20px 0}

/* ═══ Pick cards ═══
   `.article li{margin-bottom:8px}` was adding 8px on top of the .picks grid
   gap, so cards sat unevenly apart. */
.article ul.picks > li{margin-bottom:0}
main.section article > ul.picks > li{margin-bottom:0}

/* ═══ Comparison tables ═══
   .tbl was only ever declared inside per-page <style> blocks, which the
   main.article template does not have — so its tables rendered with no cell
   padding at all. Declare it globally, and override the per-page version
   (which forced display:block at every width) so columns align on desktop
   and only scroll horizontally when the viewport is genuinely narrow. */
.tbl,
.article .tbl,
main.section article .tbl{
  width:100%;
  border-collapse:collapse;
  margin:18px 0 26px;
  font-size:15px;
  display:table;
  overflow-x:visible;
  white-space:normal;
}
.tbl th,.tbl td,
.article .tbl th,.article .tbl td,
main.section article .tbl th,main.section article .tbl td{
  border-bottom:1px solid var(--line);
  padding:10px 14px;
  text-align:left;
  color:var(--ink-2);
  vertical-align:top;
  white-space:normal;
}
.tbl th,
.article .tbl th,
main.section article .tbl th{
  color:var(--ink);
  font-weight:600;
  font-size:13px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.tbl tr:last-child th,.tbl tr:last-child td,
.article .tbl tr:last-child th,.article .tbl tr:last-child td{border-bottom:0}

/* Narrow screens: let the table scroll rather than crushing columns. */
@media(max-width:680px){
  .tbl,
  .article .tbl,
  main.section article .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl th,.tbl td,
  .article .tbl th,.article .tbl td,
  main.section article .tbl th,main.section article .tbl td{white-space:nowrap}
}


@media (prefers-reduced-motion: reduce) {
  /* styles.css already does this for the homepage; product.css was missing it,
     so anchor jumps still animated for users who asked them not to. */
  html { scroll-behavior: auto; }
}

/* ═════════════════════════════════════════════════════════════
   Footer — light theme
   Mirrors the homepage footer in css/styles.css so all 91 pages
   share one footer treatment. Kept in sync manually: the two
   stylesheets have no shared import.
   ═════════════════════════════════════════════════════════════ */
/* Black footer. Tokens redefined here rather than unpicking `.footer` from the
   shared light block above: every footer rule reads a token, so this flips the
   whole band at once. */
.footer{
  --lt-ink:#f5f5f7;
  --lt-muted:rgba(255,255,255,.66);
  --lt-faint:rgba(255,255,255,.6);
  --lt-link:#6cb5ff;
  --lt-link-hover:#9ccdff;
  --lt-line:rgba(255,255,255,.1);
  background:#000;
  color:var(--lt-muted);
  border-top:1px solid var(--lt-line);
}
/* The wordmark PNG is already white, cut for dark backgrounds. The light footer
   inverted it; on black the invert must come off or it renders black on black. */
.footer .footer__brand img{filter:none;opacity:.9}
/* Brighter than --lt-muted so nav still outranks the copyright line. */
.footer__nav a{color:rgba(255,255,255,.8)}
.footer__nav a:hover{color:var(--lt-link)}
.footer__copy{border-top:1px solid var(--lt-line);color:var(--lt-faint)}
.footer__copy a{color:var(--lt-muted)}
.footer__copy a:hover{color:var(--lt-link)}
.footer a:focus-visible{outline:2px solid var(--lt-link);outline-offset:3px}

/* Footer responsive layout — mirrors css/styles.css. One flex row at every
   width squeezed the link list into a ragged wrap between the brand and the
   Startup India badge; break it into rows instead. */
@media (max-width:900px){
  /* Tablet down: brand centred on its own row, links centred beneath. The old
     three-column arrangement held the brand and the badge at opposite edges;
     with the badge gone there is nothing to balance against. */
  .footer__row{
    grid-template-columns:1fr;
    grid-template-areas:"brand" "nav";
    justify-items:center;row-gap:18px;column-gap:0;
  }
  .footer__brand{justify-self:center}
  .footer__nav{justify-content:center;gap:2px 20px}
  /* Touch territory starts here, not at 600px — bare links are ~16px tall,
     under the 24px minimum target size. */
  .footer__nav a{padding:5px 2px}
}
@media (max-width:600px){
  .footer{padding-top:28px;padding-bottom:24px}
  /* Tighter column gap so the five links still hold one row on a 375px
     phone; the tap padding is inherited from the 900px block above. */
  .footer__nav{gap:2px 12px}
  .footer__copy{margin-top:20px;padding-top:16px;line-height:1.5}
  /* Break the legal links onto their own line; the separator is aria-hidden. */
  .footer__copy > span:first-of-type{display:block;height:6px;font-size:0;line-height:0}
}

@media (max-width:340px){
  /* Was 360px, which fired ~24px early: the five links plus their four 12px
     gaps need 292px and a 360px viewport leaves 324px, so a good single row
     was being broken into three. Below ~340px they genuinely wrap 4+1 with
     "Contact" orphaned; a two-column grid wraps predictably (2/2/1). */
  .footer__nav{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;column-gap:18px}
}

/* Per-platform screenshot groups. Used where one app ships both phone and
   desktop builds (Lookout): the orientations differ enough that a single
   strip had to compromise tile size for both. */
.shot-group + .shot-group{margin-top:44px}
.shot-group__title{
  font-size:18px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.25;
  margin:0 0 14px;
  color:var(--ink);
}
@media(max-width:768px){
  .shot-group + .shot-group{margin-top:32px}
}


/* ═════════════════════════════════════════════════════════════
   MOBILE HEADER — black bar (phones only; desktop is unchanged)
   Flipping the bar is not just a background swap. Four other pieces are
   painted for a LIGHT bar and become invisible or wrong on black:
     - the wordmark PNG is already near-white, so the light bar inverts it;
       that invert must come off or it renders black on black
     - the link and hamburger colours are near-black
     - the open menu sheet is an opaque near-white panel
     - the CTA is a dark pill, which vanishes into a black sheet
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav {
    background: rgba(0, 0, 0, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  .nav.scrolled {
    background: rgba(0, 0, 0, 0.96);
  }

  .nav__logo img {
    filter: none;
    opacity: 0.92;
  }

  .nav__links a {
    color: rgba(255, 255, 255, 0.78);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .nav__links a:hover {
    color: #fff;
  }

  .nav__ham span {
    background: #fff;
  }

  /* The slide-down menu sheet. Opaque, matching the bar. */
  .nav__links {
    background: #000;
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  /* Both selectors: the mobile CTA lives inside .nav__links, where
     `.nav__links a` (0,2,1) outranks a bare `.nav__cta` (0,1,0). */
  .nav__cta,
  .nav__links a.nav__cta {
    background: #fff;
    color: #1d1d1f;
  }

  .nav__cta:hover,
  .nav__links a.nav__cta:hover {
    background: #2997ff;
    color: #fff;
  }
}