/* ============================================================
   Goodfriend Solutions - one stylesheet for the whole site.
   Edit the tokens in :root to restyle everything in one place.
   Fully fluid: clamp() + auto-fit grids, no fixed widths.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --ink:        #201F1E;   /* primary text / dark buttons text */
  --ink-muted:  #5D5B58;   /* body copy on light */
  --ink-faint:  #8A8884;   /* captions, fine print */
  --bg:         #FFFFFF;   /* page background */
  --soft:       #F1F1F0;   /* cards / panels */
  --soft-2:     #E9E9E7;   /* detail-row cards */
  --line:       #E1E0DE;   /* hairlines / borders */

  --accent:      #E9915E;  /* primary buttons, highlights */
  --accent-hi:   #F2A470;  /* button hover */
  --link:        #B65C36;  /* text links */
  --link-hi:     #8F4526;  /* link hover */
  --coral-deep:  #C8663C;  /* headline accent, gradient end */
  --coral-light: #E98A6B;  /* gradient start */
  --on-dark-hi:  #F7C39F;  /* links/bullets on dark glass */

  --dark:        #26211C;  /* footer bg */
  --panel-dark:  #0a0a0c;  /* behind products image */

  /* ---- Type ---- */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-slogan:  'Inter', system-ui, sans-serif;

  /* ---- Radius / shadow ---- */
  --r-pill:  999px;
  --r-panel: clamp(20px, 2.4vw, 38px);
  --r-card:  22px;
  --r-box:   clamp(18px, 2vw, 30px);
  --sh-panel: 0 40px 90px -40px rgba(38,33,28,.5);
  --sh-card:  0 20px 40px -20px rgba(0,0,0,.5);
  --sh-soft:  0 24px 54px -34px rgba(35,35,40,.20);
  --sh-glass: 0 30px 60px -28px rgba(0,0,0,.55);

  /* ---- Layout ---- */
  --maxw: 1500px;
  --pad:  clamp(14px, 2.2vw, 34px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: clamp(15px, 1vw, 17px); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hi); }
input, textarea, button { font-family: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.shell { min-height: 100vh; padding: var(--pad); }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; }
.eyebrow { font-size: clamp(11px,.9vw,13px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: var(--pad); top: var(--pad); z-index: 100; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 8px; }

@keyframes gfRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ============ FLOATING BUBBLE NAV ============ */
.nav {
  position: sticky; top: clamp(10px,1.4vw,20px); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  max-width: var(--maxw); margin-inline: auto; pointer-events: none;
}
.pill {
  pointer-events: auto; display: flex; align-items: center;
  border-radius: var(--r-pill); background: rgba(30,26,22,.5);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.45);
}
.pill--brand { gap: 11px; padding: clamp(9px,1vw,13px) clamp(14px,1.5vw,24px); min-width: 0; }
.pill--brand .chip {
  flex: none; width: clamp(26px,2.2vw,30px); height: clamp(26px,2.2vw,30px); border-radius: 9px;
  background: linear-gradient(140deg,#E39A5C,#C8663C); display: grid; place-items: center;
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: clamp(13px,1.2vw,16px);
}
.pill--brand .brand-logo { flex: none; height: clamp(24px,2.2vw,30px); width: auto; filter: brightness(0) invert(1); }
.pill--brand .name { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px,1.4vw,19px); letter-spacing: -.01em; color: #fff; white-space: nowrap; }
.pill--brand .name .tag { color: rgba(255,255,255,.62); font-weight: 600; }
.pill--links { gap: clamp(4px,.6vw,10px); padding: clamp(8px,.9vw,11px) clamp(10px,1vw,14px); font-size: clamp(13px,1vw,15px); font-weight: 600; }
.pill--links a { color: #F0E9DD; padding: 6px 12px; border-radius: var(--r-pill); }
.pill--links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.pill--links a.is-cta { color: var(--ink); background: #EFE0CF; padding: 7px 15px; }
.pill--links a.is-cta:hover { background: #fff; }
/* hamburger (shown on phones) */
.pill--burger { display: none; padding: clamp(10px,1.1vw,13px) clamp(12px,1.3vw,15px); cursor: pointer; }
.burger { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.burger span { height: 2px; width: 100%; background: #F0E9DD; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav.is-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .burger span:nth-child(2) { opacity: 0; }
.nav.is-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* keep inline icons (explore arrow, os icons) on the same line */
.pcard__explore svg, .drow a.more svg, .os svg { display: inline-block; vertical-align: middle; }

/* ============ HERO PANEL ============ */
.hero {
  position: relative; max-width: var(--maxw); margin: clamp(-46px,-3vw,-30px) auto 0;
  border-radius: var(--r-panel); overflow: hidden; min-height: clamp(440px,64vh,720px);
  display: flex; box-shadow: var(--sh-panel);
}
.hero__bg {
  position: absolute; inset: -8% 0 0 0; height: 118%; will-change: transform;
  background: radial-gradient(120% 80% at 50% -10%, #4a4a4e 0%, #2a2a2d 26%, #17171a 55%, #0c0c0e 100%);
}
.hero__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.hero__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.12) 45%, rgba(10,10,12,.42) 100%); }
.hero__inner {
  position: relative; width: 100%; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%,340px), 1fr));
  gap: clamp(28px,4vw,64px); align-items: end;
  padding: clamp(36px,3.5vw,60px) clamp(20px,3vw,56px) clamp(28px,3vw,52px);
}
.hero__slogan { align-self: center; animation: gfRise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero__slogan h1 { font-family: var(--font-slogan); font-weight: 600; color: #fff;
  font-size: clamp(26px,3.2vw,44px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.hero__slogan h1 .accent { color: var(--accent); }
.hero__slogan p { margin: clamp(16px,1.8vw,26px) 0 0; max-width: 44ch; font-size: clamp(14px,1.15vw,17px); line-height: 1.55; color: rgba(255,255,255,.72); }

.hero__form {
  animation: gfRise .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: .12s;
  padding: clamp(20px,2.2vw,34px); border-radius: 24px;
  background: linear-gradient(158deg, rgba(22,24,32,.50), rgba(12,13,18,.58));
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(26px) saturate(1.2); -webkit-backdrop-filter: blur(26px) saturate(1.2);
  box-shadow: var(--sh-glass);
}
.hero__form h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px,1.8vw,26px); color: #fff; margin-bottom: 6px; }
.hero__form p { margin: 0 0 clamp(14px,1.6vw,20px); font-size: clamp(13px,1vw,15px); line-height: 1.45; color: rgba(255,255,255,.78); }
.hero__form form { display: flex; flex-direction: column; gap: 11px; }
.hero__form input, .hero__form textarea {
  padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1); color: #fff; font-size: 14px; outline: none; resize: vertical; width: 100%;
}
.hero__form input::placeholder, .hero__form textarea::placeholder { color: rgba(255,255,255,.55); }
.hero__form input:focus, .hero__form textarea:focus { border-color: rgba(255,255,255,.5); }
.btn-accent { border: none; border-radius: 12px; background: var(--accent); color: var(--ink);
  font-weight: 700; font-size: 15px; cursor: pointer; padding: 14px 20px; transition: background .25s; }
.btn-accent:hover { background: var(--accent-hi); color: var(--ink); }
.hero__form .alert { margin-top: 10px; font-size: 13px; color: #fff; }
.hero__form .alert--err { color: #FFD9CC; }

/* ============ PRODUCTS PANEL (glass cards over image) ============ */
.products {
  position: relative; max-width: var(--maxw); margin: clamp(14px,1.6vw,22px) auto 0;
  border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--sh-panel);
}
.products__bg { position: absolute; inset: 0; background: var(--panel-dark); }
.products__bg img { width: 100%; height: 100%; object-fit: cover; }
.products__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(10,10,12,.42) 0%, rgba(10,10,12,.18) 50%, rgba(10,10,12,.42) 100%); }
.products__grid {
  position: relative; display: grid; gap: clamp(12px,1.4vw,20px); padding: clamp(16px,2vw,34px);
  /* exactly two columns that fill the panel width - never three */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) { .products__grid { grid-template-columns: 1fr; } }
.pcard {
  position: relative; overflow: hidden; min-height: clamp(260px,22vw,320px); border-radius: var(--r-card);
  background: rgba(255,255,255,.13); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: var(--sh-card); padding: clamp(20px,2vw,30px); display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s;
}
.pcard:hover { transform: translateY(-6px); background: rgba(255,255,255,.2); }
/* card art: hard against the right edge, tall - up to about the bottom of the logo line */
.pcard__art { position: absolute; right: calc(-1 * clamp(20px,2vw,30px)); bottom: 0; top: auto;
  height: 88%; width: 72%; z-index: 0; opacity: .6; }
.pcard__art img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
/* PTA group photo is wide - give it more width so it's tall enough to reach the logo line */
.pcard--pta .pcard__art { width: 88%; }
/* Deducto is a wide scene - fill height & truncate right, but keep the top below the title */
.pcard--deducto .pcard__art { height: 78%; width: 60%; }
.pcard--deducto .pcard__art img { object-fit: cover; object-position: 40% bottom; }
.pcard__body { position: relative; z-index: 1; width: 66%; min-width: 0; display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(16px,1.8vw,24px); }
/* fixed-height logo row so the platform pills line up across every card + a little padding below the logo */
.pcard__head { display: flex; align-items: center; gap: 11px; min-height: 46px; margin-bottom: 8px; }
.pcard__chip { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.pcard__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px,1.6vw,23px); color: #fff; }
.pcard__os { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 2px; }
.os { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; line-height: 1;
  color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill); padding: 3px 9px; }
.os svg { opacity: .9; }
.pcard__blurb { font-size: clamp(12.5px,1vw,14px); line-height: 1.5; color: rgba(255,255,255,.8); }
.pcard__bullets { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pcard__bullets li { display: flex; gap: 9px; align-items: baseline; font-size: clamp(12.5px,1vw,14px); color: rgba(255,255,255,.9); }
.pcard__bullets .dot { flex: none; }
.pcard__foot {
  position: relative; z-index: 2; margin-top: auto; margin-inline: calc(-1 * clamp(20px,2vw,30px)) ; margin-bottom: calc(-1 * clamp(20px,2vw,30px));
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: clamp(13px,1.4vw,18px) clamp(20px,2vw,30px); background: rgba(24,20,17,.82); backdrop-filter: blur(6px);
}
.pcard__explore { font-weight: 600; font-size: 13.5px; color: var(--on-dark-hi); white-space: nowrap; }
.pcard__meta { display: flex; align-items: center; gap: clamp(10px,1vw,16px); }
.pcard__rating { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); white-space: nowrap; }
.pcard__rating .star { color: var(--on-dark-hi); }
.pcard__dl { padding: 8px 15px; border-radius: var(--r-pill); background: var(--accent); color: var(--ink); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.pcard__dl:hover { background: var(--accent-hi); color: var(--ink); }
/* real app logo used in place of a lettered chip (transparent, no box) */
.pcard__head .logo-img { flex: none; width: 44px; height: 44px; object-fit: contain; }
.drow__name .logo-img { width: 34px; height: 34px; object-fit: contain; }
/* full wordmark logo (contains the app name) - shown alone, no chip/name text */
.pcard__head .app-wordmark { height: clamp(24px,2.6vw,34px); width: auto; max-width: 68%; object-fit: contain; object-position: left center; }
.drow__name .app-wordmark { height: clamp(28px,2.8vw,38px); width: auto; object-fit: contain; filter: brightness(0); }
/* "in development" note (replaces the download bar on developing apps) */
.pcard__foot--dev { justify-content: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: rgba(255,255,255,.9); }
.pcard__foot--dev svg { display: inline-block; vertical-align: middle; opacity: .95; }
.drow__dev { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: clamp(13.5px,1vw,15px); color: var(--ink-faint); }
.drow__dev svg { display: inline-block; vertical-align: middle; color: var(--accent); }
.foot__brand .brand-logo { height: 34px; width: auto; filter: brightness(0) invert(1); }

/* ============ ABOUT ============ */
.about { position: relative; overflow: hidden; max-width: var(--maxw);
  margin: clamp(20px,3vw,44px) auto; padding: clamp(52px,8vw,120px) clamp(24px,5vw,80px);
  text-align: center; border-radius: var(--r-panel); border: 1px solid rgba(255,255,255,.08);
  background: #14161a url("/assets/img/image-background-dark-mountain.png") center/cover no-repeat;
  box-shadow: var(--sh-panel); }
.about::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(10,12,16,.58) 0%, rgba(10,12,16,.22) 45%, rgba(10,12,16,.62) 100%); }
.about > * { position: relative; }
.about .eyebrow { color: var(--on-dark-hi); }
.about__statement { margin: clamp(18px,2vw,30px) auto 0; max-width: 900px; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px,3.4vw,48px); line-height: 1.24; letter-spacing: -.015em; color: #F4EFE7; text-wrap: balance;
  text-shadow: 0 1px 24px rgba(0,0,0,.35); }
.about__statement .accent { color: var(--on-dark-hi); }
.about__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); gap: clamp(16px,2vw,32px); margin-top: clamp(36px,4vw,64px); text-align: left; }
.about__stat { border-top: 2px solid #DBCBB4; padding-top: 16px; }
.about__stat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px,2.4vw,34px); color: var(--ink); }
.about__stat span { display: block; font-size: clamp(13px,1vw,15px); color: var(--ink-muted); margin-top: 6px; }

/* ============ PRODUCT DETAIL ROWS ============ */
.detail { max-width: 1300px; margin: 0 auto; padding: 0 clamp(4px,1.5vw,20px); display: flex; flex-direction: column; gap: clamp(28px,3vw,52px); }
.drow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: clamp(20px,2.5vw,44px);
  align-items: center; background: var(--soft-2); border: 1px solid var(--line); border-radius: var(--r-box); padding: clamp(20px,2.4vw,40px); }
.drow__name { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px,2vw,28px); color: var(--ink); }
.drow__name .chip { width: 32px; height: 32px; border-radius: 9px; display: inline-grid; place-items: center; color: #fff; font-size: 15px; font-family: var(--font-display); font-weight: 800; }
.drow__text .pcard__os { margin: 12px 0 0; }
.drow .os { color: var(--ink-muted); background: rgba(38,33,28,.05); border-color: rgba(38,33,28,.12); }
.drow p { margin: 16px 0 20px; font-size: clamp(14px,1.15vw,17px); line-height: 1.55; color: #544B42; max-width: 46ch; }
.drow ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.drow li { display: flex; gap: 10px; align-items: baseline; font-size: clamp(13.5px,1vw,15.5px); color: #3E362E; }
.drow a.more { font-weight: 600; font-size: clamp(13.5px,1vw,15px); }
.drow__media { aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(38,33,28,.5); background: var(--soft); }
.drow__media img { width: 100%; height: 100%; object-fit: cover; }
.drow--flip .drow__text { order: 2; }
.drow--flip .drow__media { order: 1; }

/* ============ FOOTER ============ */
.foot { max-width: var(--maxw); margin: clamp(60px,8vw,120px) auto 0; border-radius: var(--r-panel); overflow: hidden;
  background: linear-gradient(rgba(15,15,18,.74), rgba(15,15,18,.80)), #14141a url("/assets/img/image-background-dark-3.jpg?v=40") center/cover no-repeat;
  color: #EDE4D6; padding: clamp(36px,5vw,80px) clamp(20px,3vw,60px); }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); gap: clamp(28px,3vw,56px); align-items: end; }
.foot h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px,3.4vw,50px); line-height: 1.05; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.foot__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(20px,2.4vw,32px); background: var(--accent); color: var(--ink); font-weight: 700; padding: 14px 26px; border-radius: var(--r-pill); font-size: clamp(14px,1.1vw,16px); }
.foot__cta:hover { background: var(--accent-hi); color: var(--ink); }
.foot__brand { display: flex; align-items: center; gap: 12px; }
.foot__brand .chip { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(140deg,#C8663C,#E39A5C); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800; }
.foot__brand .name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; }
.foot__links { display: flex; flex-direction: column; gap: 10px; color: #B9AF9F; margin-top: 14px; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.foot__sep { color: #6E665B; user-select: none; }
.foot__links a { color: #B9AF9F; } .foot__links a:hover { color: #fff; }
.foot__copy { color: #7E756A; margin-top: 14px; font-size: clamp(13px,1vw,15px); }

/* ============ Fluid reflow for small screens ============ */
@media (max-width: 640px) {
  /* nav becomes a hamburger menu on phones */
  .nav { position: relative; }
  .pill--burger { display: inline-flex; }
  .pill--links {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 45;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; min-width: 210px;
    border-radius: 18px; background: rgba(26,22,18,.86);
    display: none;
  }
  .nav.is-open .pill--links { display: flex; animation: gfRise .18s ease both; }
  .pill--links a { width: 100%; padding: 11px 14px; border-radius: 12px; }
  .pill--links a.is-cta { text-align: center; margin-top: 2px; }
}
@media (max-width: 560px) {
  .pill--brand .name .tag { display: none; }
  .pcard__body { width: 100%; }
  .pcard__art { opacity: .28; width: 78%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__slogan, .hero__form { animation: none; }
  .pcard { transition: none; }
}

/* ============================================================
   KeepClose product page (/keepclose/) - same box style as landing
   ============================================================ */
.btn-appstore { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: var(--ink);
  font-weight: 700; font-size: clamp(15px,1.1vw,17px); padding: 14px 24px; border-radius: 14px; transition: background .25s; }
.btn-appstore:hover { background: var(--accent-hi); color: var(--ink); }
.btn-appstore svg { width: 20px; height: 20px; flex: none; }

/* ============================================================
   KeepClose product page (/keepclose/) - clean, light redesign
   ============================================================ */

/* Light nav overrides */
.nav--light .pill { background: rgba(255,255,255,.82); border: 1px solid rgba(38,33,28,.10); box-shadow: 0 12px 30px -20px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav--light .pill--brand .brand-logo { filter: none; }
.nav--light .pill--brand .name, .nav--light .pill--brand .name .tag { color: var(--ink); }
.nav--light .pill--links a { color: #4A4038; }
.nav--light .pill--links a:hover { color: var(--ink); background: rgba(38,33,28,.06); }
.nav--light .pill--links a.is-cta { color: #fff; background: var(--coral-deep); }
.nav--light .pill--links a.is-cta:hover { background: var(--link-hi); }
.nav--light .burger span { background: var(--ink); }

/* Hero - light, bold, no app image */
.kc2-hero { max-width: var(--maxw); margin: clamp(22px,3.5vw,60px) auto clamp(24px,3vw,48px); padding: 0 clamp(20px,4vw,40px);
  display: grid; grid-template-columns: 1fr 1.04fr; gap: clamp(28px,5vw,72px); align-items: center; }
.kc2-eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 700; color: var(--link); }
.kc2-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px,4.6vw,62px); line-height: 1.0;
  letter-spacing: -.035em; color: var(--ink); margin: clamp(12px,1.4vw,18px) 0 0; text-wrap: balance; }
.kc2-hero h1 .accent { color: var(--coral-deep); }
.kc2-sub { max-width: 44ch; margin: clamp(16px,1.8vw,24px) 0 0; font-size: clamp(16px,1.3vw,19px); line-height: 1.55; color: var(--ink-muted); }
.kc2-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: clamp(22px,2.6vw,34px); }
.kc2-price { font-size: 14px; color: var(--ink-faint); }
.kc2-hero__media { position: relative; border-radius: clamp(18px,2vw,28px); overflow: hidden; aspect-ratio: 4 / 3;
  box-shadow: var(--sh-soft); background: var(--soft); }
.kc2-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.kc2-hero__media img.is-on { opacity: 1; }
@media (max-width: 860px) {
  .kc2-hero { grid-template-columns: 1fr; gap: clamp(20px,4vw,30px); }
  .kc2-hero__media { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) { .kc2-hero__media img { transition: none; } }

/* Star glyphs */
.stars { display: inline-flex; gap: 3px; line-height: 0; }
.stars svg { width: 18px; height: 18px; fill: var(--ink); }
.stars svg.is-empty { fill: #D7D1C6; }

/* Reviews showcase - light panel, white flip cards */
.kc2-reviews { max-width: var(--maxw); margin: clamp(34px,5vw,70px) auto; padding: clamp(30px,4vw,58px) clamp(20px,3vw,52px); background: #EAEAE8; border-radius: clamp(22px,2.4vw,34px); }
.kc2-reviews__head { max-width: 760px; margin-bottom: clamp(26px,3vw,42px); }
.kc2-rating { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.kc2-rating .stars svg { width: 19px; height: 19px; }
.kc2-rating__num { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); }
.kc2-rating__count { font-size: 15px; color: var(--ink-faint); }
.kc2-reviews__head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px,4.6vw,58px); line-height: 1.0; letter-spacing: -.032em; color: var(--ink); margin-bottom: 22px; text-wrap: balance; }
.kc2-reviews__head h2 .accent { color: var(--coral-deep); }
.kc2-seeall { display: inline-block; padding: 11px 22px; border-radius: var(--r-pill); background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; box-shadow: 0 8px 20px -12px rgba(0,0,0,.3); }
.kc2-seeall:hover { background: var(--ink); color: #fff; }
.kc2-flipwrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,1.6vw,22px); perspective: 1600px; }
.kc2-review { background: #fff; border-radius: 20px; padding: clamp(20px,2vw,28px); box-shadow: 0 20px 44px -28px rgba(0,0,0,.32); transform-origin: center top; backface-visibility: hidden; min-height: clamp(210px,20vw,240px); display: flex; flex-direction: column; }
.kc2-review .stars { margin-bottom: 14px; }
.kc2-review .stars svg { width: 15px; height: 15px; }
.kc2-review__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 8px; letter-spacing: -.01em; }
.kc2-review__text { font-size: 15.5px; line-height: 1.5; color: #2B2A28; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.kc2-review__author { margin-top: 16px; font-size: 13px; color: var(--ink-faint); font-weight: 600; }
.kc2-samplenote { margin: 16px 2px 0; font-size: 12.5px; color: var(--ink-faint); font-style: italic; }

/* Features - image + connector line to a text-height vertical rule */
.kc2-features { max-width: 1120px; margin: clamp(56px,8vw,120px) auto 0; padding: 0 clamp(20px,4vw,54px); display: flex; flex-direction: column; gap: clamp(52px,9vw,120px); }
.kc2-feat { display: flex; align-items: center; }
.kc2-feat--flip { flex-direction: row-reverse; }
.kc2-feat__media { flex: 0 0 auto; width: clamp(178px,20vw,242px); display: flex; }
.kc2-feat__media img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 34px 70px -40px rgba(38,33,28,.5); }
.kc2-feat__line { flex: 0 0 clamp(38px,6vw,92px); height: 2px; background: var(--line); align-self: center; }
.kc2-feat__text { flex: 1; border-left: 2px solid var(--line); padding-left: clamp(22px,3vw,46px); }
.kc2-feat--flip .kc2-feat__text { border-left: none; border-right: 2px solid var(--line); padding-left: 0; padding-right: clamp(22px,3vw,46px); text-align: right; }
.kc2-feat__num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .1em; color: var(--coral-deep); margin-bottom: 12px; }
.kc2-feat__text h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px,3.3vw,46px); line-height: 1.04; letter-spacing: -.032em; color: var(--ink); margin-bottom: 14px; text-wrap: balance; }
.kc2-feat__text p { font-size: clamp(15px,1.2vw,18px); line-height: 1.6; color: var(--ink-muted); }
.kc2-feat--flip .kc2-feat__text p { margin-left: auto; }

/* Privacy - clean editorial (top-rule columns, no boxes) */
.kc2-privacy { max-width: 1040px; margin: clamp(60px,9vw,130px) auto 0; padding: 0 clamp(20px,4vw,54px); text-align: center; }
.kc2-privacy h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3.8vw,50px); letter-spacing: -.03em; color: var(--ink); margin-bottom: 16px; }
.kc2-privacy__intro p { max-width: 54ch; margin: 0 auto; font-size: clamp(16px,1.35vw,19px); line-height: 1.55; color: var(--ink-muted); }
.kc2-privacy__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2.4vw,40px); margin-top: clamp(34px,4vw,56px); text-align: left; }
.kc2-info { border-top: 2px solid var(--ink); padding-top: 18px; }
.kc2-info h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 8px; }
.kc2-info p { font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); }

/* Pricing */
.kc2-pricing { max-width: 760px; margin: clamp(60px,9vw,130px) auto 0; padding: 0 clamp(20px,4vw,54px); text-align: center; }
.kc2-pricing h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3.8vw,50px); letter-spacing: -.03em; color: var(--ink); margin-bottom: 14px; }
.kc2-pricing__sub { max-width: 46ch; margin: 0 auto; font-size: clamp(16px,1.35vw,19px); line-height: 1.5; color: var(--ink-muted); }
.kc2-price-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(30px,4vw,48px); }
.kc2-price-card { position: relative; padding: clamp(28px,3vw,40px) clamp(22px,2.4vw,30px); border-radius: 22px; background: #fff; border: 1px solid var(--line); text-align: center; }
.kc2-price-card--best { background: linear-gradient(152deg, var(--coral-light), var(--coral-deep)); color: #fff; border: none; box-shadow: 0 30px 60px -30px rgba(200,102,60,.55); }
.kc2-price-card .amount { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px,4vw,50px); color: var(--ink); }
.kc2-price-card--best .amount { color: #fff; }
.kc2-price-card .unit { font-size: 14px; color: var(--ink-faint); margin-bottom: 6px; }
.kc2-price-card--best .unit { color: rgba(255,255,255,.88); }
.kc2-price-card .fine { font-size: 13.5px; color: var(--ink-muted); }
.kc2-price-card--best .fine { color: rgba(255,255,255,.9); }
.kc2-price-card .tag { position: absolute; top: 15px; right: 15px; padding: 4px 11px; border-radius: var(--r-pill); background: rgba(255,255,255,.24); font-size: 11.5px; font-weight: 700; }

/* Final CTA - clean */
.kc2-final { max-width: 900px; margin: clamp(60px,9vw,130px) auto clamp(24px,3vw,44px); padding: 0 clamp(20px,4vw,54px); text-align: center; }
.kc2-final h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px,4.6vw,58px); line-height: 1.02; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; margin-bottom: 16px; }
.kc2-final p { max-width: 46ch; margin: 0 auto 30px; font-size: clamp(16px,1.35vw,19px); line-height: 1.5; color: var(--ink-muted); }

@media (max-width: 820px) {
  .kc2-flipwrap { grid-template-columns: 1fr; }
  .kc2-review { min-height: 0; }
}
@media (max-width: 760px) {
  .kc2-feat, .kc2-feat--flip { flex-direction: column; align-items: stretch; gap: 22px; }
  .kc2-feat__media { flex: none; }
  .kc2-feat__line { display: none; }
  .kc2-feat__text, .kc2-feat--flip .kc2-feat__text { border-left: 2px solid var(--line); border-right: none; padding-left: 20px; padding-right: 0; text-align: left; }
  .kc2-feat--flip .kc2-feat__text p { margin-left: 0; }
  .kc2-privacy__cards { grid-template-columns: 1fr; }
  .kc2-price-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kc2-review { transition: none !important; }
}

/* ============================================================
   Contact page (/contact/)
   ============================================================ */
.ct-head { max-width: 720px; margin: clamp(30px,6vw,90px) auto clamp(20px,3vw,36px); padding: 0 clamp(20px,4vw,40px); text-align: center; }
.ct-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px,5.4vw,64px); line-height: 1.0; letter-spacing: -.035em; color: var(--ink); margin: clamp(10px,1.4vw,18px) 0 0; text-wrap: balance; }
.ct-sub { max-width: 52ch; margin: clamp(14px,1.8vw,22px) auto 0; font-size: clamp(16px,1.3vw,19px); line-height: 1.55; color: var(--ink-muted); }

.ct-wrap { max-width: 720px; margin: 0 auto clamp(30px,4vw,60px); padding: 0 clamp(20px,4vw,40px); }
.ct-form { background: var(--soft); border: 1px solid var(--line); border-radius: clamp(20px,2.2vw,30px); padding: clamp(24px,3.4vw,48px); box-shadow: var(--sh-soft); }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,1.8vw,24px); }
.ct-field { display: flex; flex-direction: column; margin-bottom: clamp(16px,1.8vw,22px); }
.ct-row .ct-field { margin-bottom: 0; }
.ct-row + .ct-field, .ct-field + .ct-row { margin-top: clamp(16px,1.8vw,22px); }
.ct-field label { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--ink); margin-bottom: 8px; }
.ct-req { font-family: var(--font-body); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--coral-deep); }
.ct-opt { font-family: var(--font-body); font-weight: 600; font-size: 11.5px; color: var(--ink-faint); }

.ct-field input, .ct-field textarea, .ct-field select {
  width: 100%; font-family: inherit; font-size: 15.5px; color: var(--ink);
  padding: 13px 15px; border-radius: 13px; border: 1.5px solid var(--line);
  background: #fff; outline: none; transition: border-color .18s ease, box-shadow .18s ease;
}
.ct-field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.ct-field input:focus, .ct-field textarea:focus, .ct-field select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(233,145,94,.18);
}
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--ink-faint); }

/* custom select */
.ct-select { position: relative; }
.ct-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.ct-field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.ct-field select:disabled { color: var(--ink-faint); background: #ECECEA; cursor: not-allowed; }

/* required-field highlight on error */
.ct-field.is-invalid input, .ct-field.is-invalid textarea, .ct-field.is-invalid select {
  border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,.14);
}
.ct-field.is-invalid label { color: #C0392B; }
.ct-field.is-invalid .ct-req { color: #C0392B; }

.ct-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: clamp(20px,2.4vw,30px); }
.ct-submit { border: none; border-radius: 13px; background: var(--accent); color: var(--ink);
  font-family: inherit; font-weight: 700; font-size: 15.5px; padding: 14px 28px; cursor: pointer; transition: background .2s ease; }
.ct-submit:hover { background: var(--accent-hi); }
.ct-submit:disabled { opacity: .7; cursor: default; }

/* alert: shows, holds for a read-length, then fades to nothing */
.ct-alert { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; opacity: 0;
  transition: opacity .55s ease; pointer-events: none; }
.ct-alert.is-shown { opacity: 1; }
.ct-alert.is-error { color: #C0392B; }
.ct-alert.is-ok { color: #2E7D5B; }

@media (max-width: 560px) {
  .ct-row { grid-template-columns: 1fr; gap: clamp(16px,1.8vw,22px); }
  .ct-row .ct-field { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-alert { transition: none; }
}

/* ---- Brand sub-header (page/section label under the wordmark) ---- */
.brand-text { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.06; min-width: 0; }
.brand-sub { font-size: clamp(10.5px,.85vw,12.5px); font-weight: 600; letter-spacing: .03em; color: rgba(255,255,255,.55); margin-top: 1px; white-space: nowrap; }
.nav--light .brand-sub { color: var(--coral-deep); }

/* ---- Contact: two-column (intro left, form right) ---- */
.ct-layout { max-width: 1200px; margin: clamp(28px,5vw,76px) auto clamp(40px,6vw,90px); padding: 0 clamp(20px,4vw,40px);
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(28px,4.5vw,72px); align-items: start; }
.ct-intro { padding-top: clamp(4px,1vw,14px); }
.ct-intro .kc2-eyebrow { display: none; }
.ct-intro h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px,3.9vw,56px); line-height: 1.03;
  letter-spacing: -.03em; color: var(--ink); margin: 0 0 clamp(14px,1.6vw,20px); text-wrap: balance; }
.ct-layout .ct-sub { font-size: clamp(16px,1.2vw,19px); line-height: 1.55; color: var(--ink-muted); max-width: 42ch; margin: 0; text-align: left; }
.ct-layout .ct-wrap { max-width: none; margin: 0; padding: 0; }
@media (max-width: 860px) {
  .ct-layout { grid-template-columns: 1fr; gap: clamp(22px,4vw,36px); }
  .ct-intro h1 { font-size: clamp(32px,7vw,46px); }
}

/* ============================================================
   Lumi product page (/lumi/) - three+ rounded boxes
   ============================================================ */
.lumi-box { max-width: var(--maxw); margin: clamp(18px,2.6vw,38px) auto; padding: clamp(32px,5vw,72px) clamp(24px,4vw,64px);
  border-radius: clamp(22px,2.6vw,36px); background: var(--soft); border: 1px solid var(--line); }

/* Box 1 - what it is */
.lumi-hero { display: grid; grid-template-columns: clamp(40px,4.4vw,60px) minmax(0,1fr) minmax(0,34%); gap: clamp(20px,2.6vw,44px); align-items: stretch; text-align: left;
  padding-top: clamp(24px,3.4vw,52px); padding-bottom: clamp(24px,3.4vw,52px); }
.lumi-hero__text { align-self: center; }
/* Left column: the signature edge dock, as tall as the text (stretches with the row) */
.lumi-hero__dock { margin: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.lumi-hero__dockimg { height: 100%; width: auto; max-width: none; image-rendering: -webkit-optimize-contrast; filter: drop-shadow(0 14px 30px rgba(20,25,45,.24)); }
.lumi-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px,5.2vw,72px); line-height: 1.0;
  letter-spacing: -.035em; color: var(--ink); margin: clamp(12px,1.4vw,18px) 0 0; text-wrap: balance; }
.lumi-hero h1 .accent { color: var(--coral-deep); }
.lumi-sub { max-width: 620px; margin: clamp(16px,2vw,26px) 0 0; font-size: clamp(16px,1.3vw,20px); line-height: 1.55; color: var(--ink-muted); }
.lumi-cta-row { margin-top: clamp(22px,3vw,34px); }
.lumi-hero__callout { margin-top: clamp(22px,2.6vw,32px); padding-left: 16px; border-left: 3px solid var(--coral-deep); max-width: 540px; }
.lumi-hero__docklabel { display: inline-block; color: var(--coral-deep); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px; }
.lumi-hero__docknote { margin: 0; font-size: clamp(14px,1.1vw,16px); line-height: 1.55; color: var(--ink); }

/* Right column: dock + screenshot stacked, sized to the text height (never taller) */
.lumi-hero__stack { margin: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px,1.4vw,20px); }
.lumi-hero__stackimg--dock { flex: 0 0 auto; height: clamp(118px,20vh,190px); width: auto; max-width: none; image-rendering: -webkit-optimize-contrast; filter: drop-shadow(0 12px 26px rgba(20,25,45,.24)); }
.lumi-hero__shotwrap { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; border-radius: clamp(12px,1.4vw,20px); overflow: hidden; box-shadow: var(--sh-soft); background: var(--soft-2); border: 1px solid var(--line); }
.lumi-hero__stackimg--shot { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Hero intro - dock fades in, text and screenshot fade up */
.lumi-hero__text > *, .lumi-hero__dockimg, .lumi-hero__stackimg--dock, .lumi-hero__shotwrap { opacity: 0; }
.lumi-hero.is-intro .lumi-hero__dockimg { animation: lumiFade 1s ease .18s both; }
.lumi-hero.is-intro .lumi-hero__text > * { animation: lumiRise .6s cubic-bezier(.2,.7,.2,1) both; }
.lumi-hero.is-intro .lumi-hero__text > *:nth-child(1) { animation-delay: .04s; }
.lumi-hero.is-intro .lumi-hero__text > *:nth-child(2) { animation-delay: .16s; }
.lumi-hero.is-intro .lumi-hero__text > *:nth-child(3) { animation-delay: .30s; }
.lumi-hero.is-intro .lumi-hero__text > *:nth-child(4) { animation-delay: .44s; }
.lumi-hero.is-intro .lumi-hero__text > *:nth-child(5) { animation-delay: .58s; }
.lumi-hero.is-intro .lumi-hero__stackimg--dock { animation: lumiFade .9s ease .34s both; }
.lumi-hero.is-intro .lumi-hero__shotwrap { animation: lumiRise .8s cubic-bezier(.2,.7,.2,1) .5s both; }
@keyframes lumiRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes lumiFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lumi-hero__text > *, .lumi-hero__dockimg, .lumi-hero__stackimg--dock, .lumi-hero__shotwrap { opacity: 1; animation: none; }
}
@media (max-width: 860px) {
  .lumi-hero { grid-template-columns: 1fr; gap: clamp(22px,4vw,34px); text-align: center; }
  .lumi-hero__text { align-self: auto; }
  .lumi-hero h1, .lumi-sub, .lumi-hero__callout { margin-left: auto; margin-right: auto; }
  .lumi-hero__dock { align-self: auto; }
  .lumi-hero__dockimg { height: clamp(200px,34vh,300px); }
  .lumi-hero__stack { height: auto; }
  .lumi-hero__stackimg--dock { height: clamp(118px,26vh,170px); }
  .lumi-hero__shotwrap { flex: 0 0 auto; }
  .lumi-hero__stackimg--shot { height: auto; }
}
.lumi-cta { display: inline-block; background: var(--accent); color: var(--ink); font-family: inherit; font-weight: 700;
  font-size: 15.5px; padding: 14px 28px; border: none; border-radius: 13px; cursor: pointer; transition: background .2s ease; }
.lumi-cta:hover { background: var(--accent-hi); color: var(--ink); }
.lumi-cta:disabled { opacity: .7; cursor: default; }

/* Box 2 - benefits carousel */
.lumi-benefits__head { margin-bottom: clamp(24px,3vw,40px); max-width: 760px; }
.lumi-benefits__head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3.8vw,52px); line-height: 1.02;
  letter-spacing: -.03em; color: var(--ink); margin-top: 12px; text-wrap: balance; }
.lumi-benefits__head h2 .accent { color: var(--coral-deep); }
.lumi-benefits__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(24px,4vw,58px); align-items: center; }
.lumi-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(8px,1.2vw,14px); }
.lumi-bullet { padding: 15px 18px; border-radius: 16px; border-left: 3px solid transparent; cursor: pointer; opacity: .5;
  transition: opacity .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.lumi-bullet:hover { opacity: .82; }
.lumi-bullet.is-active { opacity: 1; background: #fff; border-left-color: var(--coral-deep); box-shadow: 0 16px 34px -24px rgba(0,0,0,.3); }
.lumi-bullet__label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 5px; letter-spacing: -.01em; }
.lumi-bullet__text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); }
.lumi-shots { position: relative; border-radius: 16px; overflow: hidden; background: #0d0d10;
  box-shadow: 0 34px 66px -36px rgba(0,0,0,.55); aspect-ratio: 1280 / 800; }
.lumi-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.lumi-shot.is-active { opacity: 1; }

/* Box 3 - why different */
.lumi-why__head { max-width: 760px; margin-bottom: clamp(16px,2vw,26px); }
.lumi-why__head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3.8vw,52px); line-height: 1.02;
  letter-spacing: -.03em; color: var(--ink); margin-top: 12px; }
.lumi-why__head h2 .accent { color: var(--coral-deep); }
.lumi-why__lead { max-width: none; font-size: clamp(17px,1.5vw,22px); line-height: 1.5; color: var(--ink); font-weight: 500;
  margin: 0 0 clamp(14px,1.6vw,20px); text-wrap: pretty; }
.lumi-why__body { max-width: none; font-size: clamp(15px,1.2vw,18px); line-height: 1.6; color: var(--ink-muted); margin: 0 0 clamp(28px,3.5vw,44px); }
.lumi-why__points { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.6vw,40px); }
.lumi-why__point { border-top: 2px solid var(--ink); padding-top: 16px; }
.lumi-why__point h4 { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.lumi-why__point p { font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); }
.lumi-why__close { margin: clamp(28px,3.5vw,44px) 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px,2vw,26px); line-height: 1.3; letter-spacing: -.02em; color: var(--ink); max-width: none; text-wrap: balance; }

/* Box 4 - beta form */
.lumi-beta { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(26px,4vw,60px); align-items: start; }
.lumi-beta__intro h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3.6vw,48px); line-height: 1.02;
  letter-spacing: -.03em; color: var(--ink); margin-top: 12px; }
.lumi-beta__sub { margin-top: 14px; font-size: clamp(16px,1.3vw,19px); line-height: 1.55; color: var(--ink-muted); max-width: 42ch; }
.lumi-beta__form { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px,2.6vw,34px); }
.lb-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px,1.6vw,20px); margin-bottom: clamp(12px,1.6vw,18px); }
.lb-field { display: flex; flex-direction: column; }
.lb-field label { display: flex; align-items: baseline; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink); margin-bottom: 7px; }
.lb-req { font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--coral-deep); }
.lb-opt { font-family: var(--font-body); font-weight: 600; font-size: 11px; color: var(--ink-faint); }
.lb-field input { width: 100%; font-family: inherit; font-size: 15px; color: var(--ink); padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff; outline: none; transition: border-color .18s ease, box-shadow .18s ease; }
.lb-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(233,145,94,.18); }
.lb-field.is-invalid input { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,.14); }
.lb-field.is-invalid label { color: #C0392B; }
.lb-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.lb-alert { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; opacity: 0; transition: opacity .55s ease; }
.lb-alert.is-shown { opacity: 1; }
.lb-alert.is-error { color: #C0392B; }
.lb-alert.is-ok { color: #2E7D5B; }

@media (max-width: 900px) {
  .lumi-benefits__grid { grid-template-columns: 1fr; gap: clamp(20px,4vw,30px); }
  .lumi-beta { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .lumi-why__points { grid-template-columns: 1fr; }
  .lb-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lumi-shot, .lumi-bullet, .lb-alert { transition: none; }
}

/* Beta badge on a product card */
.pcard__badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--r-pill);
  background: rgba(233,145,94,.18); color: var(--on-dark-hi); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }

/* ============================================================
   Legal pages (/privacy/, /terms/) - clean prose
   ============================================================ */
.legal { max-width: var(--maxw); margin: clamp(24px,4vw,64px) auto clamp(44px,6vw,96px); padding: 0 clamp(20px,4vw,54px); }
.legal h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px,4.6vw,58px); line-height: 1.02;
  letter-spacing: -.03em; color: var(--ink); margin: clamp(10px,1.4vw,16px) 0 0; text-wrap: balance; }
.legal__date { margin-top: 12px; font-size: 14px; color: var(--ink-faint); }
.legal__body { margin-top: clamp(24px,3vw,40px); }
.legal__lead { font-size: clamp(17px,1.4vw,21px); line-height: 1.55; color: var(--ink); font-weight: 500; margin: 0 0 clamp(20px,2.4vw,30px); max-width: none; }
.legal__body h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px,1.9vw,24px); letter-spacing: -.015em;
  color: var(--ink); margin: clamp(28px,3.2vw,44px) 0 10px; }
.legal__body p { font-size: clamp(15px,1.15vw,17px); line-height: 1.66; color: var(--ink-muted); margin: 0 0 14px; max-width: none; }
.legal__body a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.legal__body a:hover { color: var(--link-hi); }
.legal__meta { margin-top: clamp(30px,3.4vw,48px); padding-top: clamp(18px,2vw,26px); border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-faint); }

/* ============================================================
   Scroll reveal (fade + rise) - see js/reveal.js
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
/* Lumi benefits: bullets rise in a stagger as the box reveals */
.lumi-benefits.is-in .lumi-bullet { animation: gfBulletRise .55s cubic-bezier(.2,.7,.2,1) both; }
.lumi-benefits.is-in .lumi-bullet:nth-child(2) { animation-delay: .1s; }
.lumi-benefits.is-in .lumi-bullet:nth-child(3) { animation-delay: .2s; }
.lumi-benefits.is-in .lumi-bullet:nth-child(4) { animation-delay: .3s; }
@keyframes gfBulletRise { from { transform: translateY(16px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { transition: none !important; opacity: 1 !important; transform: none !important; }
  .lumi-benefits.is-in .lumi-bullet { animation: none !important; }
}

/* ============================================================
   KeepClose motion - hero line-rise + feature "come together"
   ============================================================ */
/* Hero: text lines rise in one-by-one (JS adds .kc-intro once content is built) */
.kc2-hero__text > * { opacity: 0; }
.kc-intro .kc2-hero__text > * { animation: kcRiseIn .6s cubic-bezier(.2,.7,.2,1) both; }
.kc-intro .kc2-hero__text > *:nth-child(1) { animation-delay: 0s; }
.kc-intro .kc2-hero__text > *:nth-child(2) { animation-delay: .16s; }
.kc-intro .kc2-hero__text > *:nth-child(3) { animation-delay: .34s; }
.kc-intro .kc2-hero__text > *:nth-child(4) { animation-delay: .52s; }
@keyframes kcRiseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Feature rows: image slides in from its side, text + line from the other - meeting */
.kc2-feat.reveal { opacity: 1; transform: none; }
.kc2-feat.reveal .kc2-feat__media,
.kc2-feat.reveal .kc2-feat__text { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.kc2-feat.reveal .kc2-feat__media { transform: translateX(-44px); }
.kc2-feat.reveal .kc2-feat__text  { transform: translateX(44px); }
.kc2-feat--flip.reveal .kc2-feat__media { transform: translateX(44px); }
.kc2-feat--flip.reveal .kc2-feat__text  { transform: translateX(-44px); }
.kc2-feat.reveal .kc2-feat__line { opacity: 0; transition: opacity .6s ease .2s; }
.kc2-feat.is-in .kc2-feat__media,
.kc2-feat.is-in .kc2-feat__text { opacity: 1; transform: none; }
.kc2-feat.is-in .kc2-feat__line { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .kc2-hero__text > * { opacity: 1 !important; animation: none !important; }
  .kc2-feat.reveal .kc2-feat__media, .kc2-feat.reveal .kc2-feat__text, .kc2-feat.reveal .kc2-feat__line {
    opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Hero image panel: fade + rise (like the text lines), overlapping the line stagger */
.kc2-hero__media { opacity: 0; transform: translateY(22px); }
.kc-intro .kc2-hero__media { animation: kcRiseIn .6s cubic-bezier(.2,.7,.2,1) .35s both; }
@media (prefers-reduced-motion: reduce) {
  .kc2-hero__media { opacity: 1 !important; transform: none !important; animation: none !important; }
}