/* Shared product-page shell. App identity lives in the artwork and accent text. */
html.app-site,body.app-site {
  --paper:#151d20; --ink:#faf7ee; --muted:#b9c4c1; --accent:#f6b000;
  --border:#354347; --card:#202a2d;
  background:var(--paper); color:var(--ink);
}
html.app-site {scroll-padding-top:calc(5rem + 12px)}
.app-site .wrap {width:min(1180px,calc(100% - 64px))}
.app-site .site-header {
  position:sticky; top:0; z-index:30; background:#151d20f2;
  border-bottom:1px solid var(--border); backdrop-filter:blur(16px);
}
.app-site .site-header .header {
  min-height:76px; padding:16px 0; border:0; gap:24px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.app-site .brand {display:inline-flex; gap:11px; color:var(--ink); font-size:1.1rem; font-weight:600; letter-spacing:-.025em; white-space:normal; min-width:0}
.app-site .brand img {width:34px; height:34px; flex:none; border-radius:23%; object-fit:contain}
.app-site .nav {display:flex; gap:26px; font-size:.9rem; color:var(--ink)}
.app-site a {color:inherit}
.app-site .nav a,.app-site .footer-links a {text-decoration:none}
.app-site .nav a:hover,.app-site .footer-links a:hover {text-decoration:underline}
.app-site .button,.studio .product-copy .button {
  display:inline-flex; justify-content:center; align-items:center; gap:14px;
  min-height:48px; padding:12px 22px; border:1px solid #f6b000; border-radius:999px;
  background:#f6b000; color:#182327; font-size:.9375rem; line-height:1.35;
  font-weight:600; text-decoration:none; transition:background .15s ease,box-shadow .15s ease;
}
.app-site .button:hover,.studio .product-copy .button:hover {background:#ffca45; box-shadow:0 5px 18px #0002; filter:none}
.app-site a:focus-visible,.app-site summary:focus-visible {outline:3px solid #f6b000; outline-offset:5px}
.app-site .app-hero {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(32px,5vw,72px); padding:52px 0 48px; min-height:0}
.app-site .app-hero>* {min-width:0}
.app-site .app-hero h1 {font-size:clamp(2.75rem,5.6vw,4.6rem); line-height:1.04; letter-spacing:-.055em; font-weight:550; color:var(--ink); margin:0 0 26px; overflow-wrap:break-word}
.app-site .app-hero h1 em {font-style:normal}
.app-site .app-hero .eyebrow {font-size:.75rem; color:#8dd0d4; letter-spacing:.12em; margin:0 0 24px}
.app-site .app-hero .lead,.app-site .ke-lead {font-size:1.15rem; line-height:1.6; color:var(--muted); max-width:480px; margin:0 0 24px}
.app-site .app-hero .actions {display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin:28px 0 18px}
.app-site .app-hero .status {padding:0; min-height:0; border:0; background:none; color:var(--muted); font-size:.9rem; font-weight:400}
.app-site .app-hero .fine,.app-site .ke-small {font-size:.8rem; color:var(--muted); line-height:1.6; margin:0}
.app-site .footer {color:var(--ink); border-color:var(--border); padding:36px 0 44px; margin-top:24px}
.app-site .footer p,.app-site .footer-links {color:var(--muted); font-size:.875rem}
.app-site .footer-links {display:flex; flex-wrap:wrap; gap:16px 24px}
.app-site .studio-credit {white-space:normal}
.app-site .doc-hero {padding:64px 0 36px}
.app-site .doc-hero h1 {font-size:clamp(2.6rem,5.5vw,4.5rem); line-height:1.06; color:var(--ink)}
.app-site .doc-hero .lead,.app-site .document p {color:var(--muted)}
.app-site .document h2 {font-size:1.6rem; margin-top:38px; color:var(--ink)}
.app-site .document a,.app-site .support-contact a,.app-site .card a {color:#8dd0d4}
.app-site .card,.app-site .support-contact {background:var(--card); border:1px solid var(--border); color:var(--ink)}
.app-site .card p,.app-site .support-contact p {color:var(--muted)}
.app-site .support-grid {margin-bottom:40px}
.app-site .faq-layout summary,.app-site .ke-faq summary {padding:22px 0; color:var(--ink); font-size:1rem; font-weight:550; line-height:1.5; cursor:pointer}
.app-site details {border-color:var(--border)}
.app-site details p {color:var(--muted); line-height:1.65}

/* Screens retain their source aspect ratio. The rim never crops their height. */
.device-mockup,.app-site .device-mockup.device-frame {
  position:relative; display:block; margin:0; width:var(--phone-width,260px); max-width:100%; height:auto;
  min-height:min-content; flex:0 0 auto; align-self:center;
  padding:5px; border:1px solid #728087; border-radius:15% / 7%;
  background:#070a0c; overflow:visible; line-height:0;
  box-shadow:0 0 0 1px #080c0d,0 18px 34px #06101235;
}
.device-screen {position:relative; width:100%; aspect-ratio:1206 / 2622; overflow:hidden; border-radius:13.5% / 6.2%; background:#f5f6f7}
.device-screen::after {content:""; position:absolute; top:1.8%; left:36.5%; width:27%; height:3.3%; border-radius:999px; background:#050607; pointer-events:none}
.device-mockup .device-screen img,.app-site .device-mockup .device-screen img {
  display:block; width:100%; max-width:none; height:100%; max-height:none;
  margin:0; border:0; border-radius:0; object-fit:contain;
}
.app-site .recording:has(.device-mockup) {max-width:100%; overflow:visible}

/* Kitchen Expiry uses the same canvas and controls as Swipe Photos. */
.kitchen .app-hero h1 em {color:#8dd0d4}
.ke-hero-stage {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; min-width:0; padding:30px; border:1px solid #4c6678; border-radius:28px; box-shadow:0 22px 65px #0002}
.ke-sample {margin:0; font-size:.75rem; line-height:1.4; color:#c5dedb}
.ke-intro-line {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding:26px 0; border-block:1px solid var(--border); color:var(--muted); font-size:.9rem}
.ke-kicker {font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#8dd0d4; margin:0 0 20px}
.kitchen h2 {color:var(--ink); font-size:clamp(2rem,3.5vw,3.15rem); line-height:1.1; font-weight:550; letter-spacing:-.045em; margin:0 0 22px}
.kitchen .ke-note {font-size:.8125rem!important; line-height:1.65!important; color:#afc0bc!important}
.ke-mint {background:#dce8e4}
.ke-sun {background:#ffe5a6}
.ke-blue {background:#d7e7e9}
.ke-privacy {display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:48px; border:1px solid #4d989b; border-radius:26px; background:#2f777b; color:var(--ink); margin:56px 0}
.ke-privacy p {color:#e0efec; line-height:1.65}
.ke-privacy .ke-kicker,.ke-privacy a {color:#ffd36b}
.kitchen .ke-privacy .ke-note {color:#d4e4df!important}
.ke-faq {display:grid; grid-template-columns:1fr 1.1fr; gap:60px; padding:20px 0 60px}
.ke-faq details {border-bottom:1px solid var(--border)}
.ke-faq details p {margin:0 0 24px}
.ke-outro {text-align:center; padding:48px 24px; margin-bottom:40px}
.ke-outro img {border-radius:23%; margin-bottom:24px}
.ke-outro p {color:var(--muted); margin-bottom:26px}

/* The Studio card fits the whole screen instead of clipping a tall phone. */
.studio .ke-studio-card {margin-top:32px; height:auto; min-height:520px; background:#202a2d; border-color:#405055}
.studio .ke-studio-card .product-copy>img {border-radius:23%}
.ke-studio-screen {display:flex; align-items:center; justify-content:center; min-width:0; padding:34px}

@media(max-width:950px) {
  .ke-faq {gap:32px}
  .ke-hero-stage {padding:24px 20px}
  .ke-privacy {padding:32px; gap:30px}
}
@media(max-width:720px) {
  html.app-site {scroll-padding-top:calc(5rem + 4px)}
  .app-site .wrap {width:calc(100% - 36px)}
  .app-site .site-header .header {min-height:66px; padding:14px 0; gap:16px}
  .app-site .brand {font-size:1rem; gap:9px}
  .app-site .brand img {width:30px; height:30px}
  .app-site .nav {font-size:.875rem; gap:16px}
  .app-site .nav .desktop-link {display:none}
  .app-site .app-hero {grid-template-columns:minmax(0,1fr); gap:32px; padding:36px 0}
  .app-site .app-hero h1 {font-size:clamp(2.7rem,10.5vw,4.1rem); margin-bottom:22px}
  .app-site .app-hero .lead,.app-site .ke-lead {font-size:1.05rem}
  .app-site .app-hero .eyebrow {margin-bottom:18px}
  .app-site .app-hero .actions {margin:24px 0 16px; gap:16px}
  .app-site .doc-hero {padding:42px 0 28px}
  .app-site .footer {display:block; padding-top:30px}
  .app-site .footer-links {margin-top:24px; gap:16px 22px}
  .ke-hero-stage {width:100%; max-width:480px; justify-self:center; padding:26px 24px; border-radius:24px}
  .ke-intro-line {grid-template-columns:1fr; gap:12px; padding:22px 0}
  .ke-faq {grid-template-columns:1fr; gap:28px; padding:44px 0}
  .ke-privacy {grid-template-columns:1fr; gap:14px; padding:28px 24px; margin:32px 0}
  .ke-outro {padding:36px 12px}
  .ke-studio-screen {padding:28px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  .app-site *, .app-site *::before, .app-site *::after {animation:none!important; transition:none!important}
}

/* Full scenes provide the setting; the shared phone and real screen stay above them. */
.ke-hero-stage,.ke-studio-screen,.ke-stories .story-stage {
  position:relative; isolation:isolate; overflow:hidden;
  background:#3f6582;
}
.ke-hero-stage {padding:34px 26px 24px; min-height:570px}
.ke-hero-stage>.ke-phone,.ke-studio-screen>.ke-phone,.ke-stories .ke-phone {position:relative;z-index:1}
.ke-hero-stage>.ke-sample {position:relative;z-index:1;color:#fff;text-shadow:0 1px 5px #0009}
.ke-illustration {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;z-index:0}
.swipe .feature-intro h2 {white-space:normal}
@media(max-width:720px) {
  .ke-hero-stage {min-height:0;padding:30px 22px 24px}
}

/* Both apps use one phone frame and alternate the same feature-story grid.
   Keep screenshot aspect ratios intact; the frame is decorative, not a crop. */
.app-site .feature-stories {display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.app-site .feature-stories>.feature-story {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:500px;
  border:1px solid #405055;border-radius:24px;background:#202a2d;color:var(--ink);overflow:hidden
}
.app-site .feature-story .story-copy {
  grid-column:1;grid-row:1;order:initial;min-width:0;min-height:0;padding:44px;
  display:flex;flex-direction:column;justify-content:center
}
.app-site .feature-story .story-stage {
  --phone-width:198px;
  grid-column:2;grid-row:1;order:initial;display:grid;place-items:center;
  min-width:0;min-height:500px;padding:28px 30px
}
.app-site .feature-story .story-copy :is(h2,h3) {
  font-size:clamp(2.35rem,4vw,3.5rem);line-height:1.08;letter-spacing:-.045em;
  font-weight:550;color:var(--ink);margin:0 0 24px;overflow-wrap:anywhere
}
.app-site .feature-story .story-index {color:#8dd0d4;text-transform:uppercase}
.app-site .feature-story .story-description {color:#c7d1ce}
.app-site .feature-story .story-copy>p:last-child {margin-bottom:0}
.app-site .feature-story .recording {margin:0}
.ke-stories {padding-top:56px}
.ke-receipt-story .story-stage {background:#b44b27}
.ke-shopping-story .story-stage {background:#3a1635}
.ke-dates-story .story-stage {background:#234e48}
.ke-diary-story .story-stage {background:#3f6582}
.ke-studio-screen {--phone-width:205px}
@media(min-width:721px) {
  .app-site .feature-story:nth-child(even) .story-copy {grid-column:2;grid-row:1}
  .app-site .feature-story:nth-child(even) .story-stage {grid-column:1;grid-row:1}
  .app-site .feature-story:nth-child(odd) .story-copy {grid-column:1;grid-row:1}
  .app-site .feature-story:nth-child(odd) .story-stage {grid-column:2;grid-row:1}
}
@media(max-width:950px) {
  .app-site .feature-story .story-copy {padding:32px}
}
@media(max-width:720px) {
  .app-site .feature-stories>.feature-story {grid-template-columns:minmax(0,1fr);min-height:0}
  .app-site .feature-story .story-copy {grid-column:1;grid-row:1;padding:28px 25px}
  .app-site .feature-story .story-stage {--phone-width:178px;grid-column:1;grid-row:2;min-height:420px;padding:22px}
  .app-site .feature-story .story-copy :is(h2,h3) {font-size:2.15rem}
  .ke-stories {padding-top:32px}
  .app-site .app-hero {--phone-width:clamp(170px,52vw,260px)}
}

/* Illustrated screens use the same shell as captures; never nest a second phone. */
.ke-phone {margin:0;max-width:100%;line-height:0}
.phone-art .device-screen {background:#efe9db}
:is(.studio,.swipe) .phone-art {
  position:relative;z-index:2;width:100%;max-width:100%;height:auto;
  padding:0;transform:none;filter:none;display:flex;align-items:center;justify-content:center
}
:is(.studio,.swipe) .phone-art .phone-scene {
  display:block;width:100%;max-width:none;height:100%;overflow:hidden
}
.app-site .app-hero :is(.ke-hero-stage,.swipe-hero-visual) {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:0;padding:34px 26px 24px;gap:18px
}
.app-site .swipe-hero-visual>.ke-sample {display:block;align-self:center;margin:0;max-width:none;font-size:.75rem;color:#eef5f1;text-align:center;z-index:2}
.studio .product-card {--phone-width:205px}
.studio .product-visual:has(.phone-art) {height:auto;min-height:520px;padding:34px;display:flex;align-items:center;justify-content:center}
@media(max-width:720px) {
  .app-site .app-hero :is(.ke-hero-stage,.swipe-hero-visual) {padding:30px 22px 24px}
  .studio .product-visual:has(.phone-art) {min-height:0;padding:28px}
}