/* Taphive design system — Belegdog family, light + dark, honey accent.
   Hand-authored. Shared across the homepage and product pages. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
}

/* ---------- tokens: light is the base, dark overrides ---------- */
:root {
  --radius: 34px;
  --maxw: 1120px;

  --bg:            #fbfaf8;
  --bg-subtle:     #f3f1ec;
  --bg-elevated:   #ffffff;
  --border:        #e6e2da;
  --border-strong: #d6d1c6;
  --text:          #17161a;
  --text-secondary:#54525c;
  --text-tertiary: #8b8890;

  /* accent */
  --accent:        #2f5bff;   /* cobalt, readable on light */
  --accent-bright: #2f5bff;
  --accent-ink:    #ffffff;   /* text on top of accent fills */
  --accent-soft:   rgba(47, 91, 255, .12);

  --shadow: 0 1px 2px rgba(20,16,10,.04), 0 12px 32px rgba(20,16,10,.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0b0b0d;
    --bg-subtle:     #131317;
    --bg-elevated:   #17171c;
    --border:        #262630;
    --border-strong: #34343f;
    --text:          #ededed;
    --text-secondary:#a2a1ab;
    --text-tertiary: #66656f;

    --accent:        #7d97ff;
    --accent-bright: #4f74ff;
    --accent-ink:    #ffffff;
    --accent-soft:   rgba(125, 151, 255, .16);

    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.4);
  }
}

/* explicit theme overrides win over the media query, both directions */
:root[data-theme="light"] {
  --bg:#fbfaf8; --bg-subtle:#f3f1ec; --bg-elevated:#ffffff; --border:#e6e2da; --border-strong:#d6d1c6;
  --text:#17161a; --text-secondary:#54525c; --text-tertiary:#8b8890;
  --accent:#2f5bff; --accent-bright:#2f5bff; --accent-ink:#ffffff; --accent-soft:rgba(47,91,255,.12);
  --shadow:0 1px 2px rgba(20,16,10,.04), 0 12px 32px rgba(20,16,10,.06);
}
:root[data-theme="dark"] {
  --bg:#0b0b0d; --bg-subtle:#131317; --bg-elevated:#17171c; --border:#262630; --border-strong:#34343f;
  --text:#ededed; --text-secondary:#a2a1ab; --text-tertiary:#66656f;
  --accent:#7d97ff; --accent-bright:#4f74ff; --accent-ink:#ffffff; --accent-soft:rgba(125,151,255,.16);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.4);
}

/* ---------- reset / base ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  transition: background .25s ease, color .25s ease;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
::selection { background:var(--accent-soft); }

.container { max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* language visibility (bilingual: body[data-lang] controls it) */
body[data-lang="en"] .de { display:none !important; }
body[data-lang="de"] .en { display:none !important; }

/* ---------- nav ---------- */
nav {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:18px; letter-spacing:-.02em; }
.brand .dot { width:10px; height:10px; border-radius:3px; background:var(--accent-bright); display:inline-block; }
.brand-logo { height:24px; width:auto; display:block; }
:root[data-theme="dark"] .brand-logo { filter:brightness(1.7); }
@media (prefers-color-scheme: dark){ .brand-logo { filter:brightness(1.7); } }
:root[data-theme="light"] .brand-logo { filter:none; }
.nav-links { display:flex; align-items:center; gap:26px; font-size:14.5px; color:var(--text-secondary); }
.nav-links a:hover { color:var(--text); }
.nav-ctl { display:flex; align-items:center; gap:8px; }
.iconbtn {
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:12px; background:none; color:var(--text-secondary);
  cursor:pointer; font:inherit;
}
.iconbtn:hover { color:var(--text); border-color:var(--border-strong); }
.lang-toggle { display:flex; border:1px solid var(--border); border-radius:12px; overflow:hidden; font-size:12.5px; }
.lang-toggle a { padding:7px 10px; color:var(--text-tertiary); }
.lang-toggle a:hover { color:var(--text); }
.lang-toggle a.active { background:var(--bg-elevated); color:var(--text); }
@media (max-width:760px){ .nav-links { display:none; } }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600;
  padding:13px 24px; border-radius:999px; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, opacity .15s ease;
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--accent-bright); color:var(--accent-ink); }
.btn-primary:hover { opacity:.92; }
.btn-ghost { border-color:var(--border-strong); color:var(--text); }
.btn-ghost:hover { background:var(--bg-subtle); }

/* ---------- sections ---------- */
section { padding:96px 0; border-top:1px solid var(--border); }
.kicker { font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:14px; }
h1 { font-size:clamp(38px, 6vw, 66px); font-weight:800; letter-spacing:-.035em; line-height:1.03; }
h2 { font-size:clamp(28px, 4vw, 40px); font-weight:750; letter-spacing:-.025em; line-height:1.15; }
h3 { font-size:20px; font-weight:700; letter-spacing:-.01em; }
.section-sub { color:var(--text-secondary); font-size:17px; max-width:620px; margin-top:14px; }
.section-head { margin-bottom:44px; }

/* ---------- hero ---------- */
.hero { padding:104px 0 80px; text-align:center; position:relative; overflow:hidden; }
.hero .container { max-width:920px; }
.hero h1 { margin:0 auto; }
.hero-sub { font-size:clamp(17px, 2.2vw, 20px); color:var(--text-secondary); max-width:640px; margin:22px auto 34px; }
.hero-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero .container.hero-apps { max-width:var(--maxw); margin-top:52px; }
#apps { scroll-margin-top:84px; }
@media (max-width:600px){ .hero .container.hero-apps { margin-top:38px; } }
.nav-cta { padding:8px 16px; font-size:14px; }
@media (max-width:420px){ .nav-cta { display:none; } }
.hero-glow { position:absolute; inset:auto 0 auto 50%; top:-120px; width:640px; height:360px; transform:translateX(-50%);
  background:radial-gradient(closest-side, var(--accent-soft), transparent); filter:blur(20px); pointer-events:none; z-index:-1; }

/* ---------- stats strip ---------- */
.stats { display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:center; margin-top:40px; color:var(--text-secondary); font-size:14.5px; }
.stats b { color:var(--text); font-weight:700; }

/* ---------- products grid (big, image-led cards) ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(440px, 1fr)); gap:22px; }
@media (max-width:520px){ .grid { grid-template-columns:1fr; } }
.card {
  background:var(--bg); border:1px solid color-mix(in srgb, var(--border) 55%, transparent); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .15s ease, transform .15s ease, box-shadow .2s ease;
}
.card:hover { border-color:var(--border); transform:translateY(-3px); box-shadow:var(--shadow); }
.card-img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center; background:var(--bg-subtle); display:block; }
.card-body { padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card h3 { font-size:21px; }
.card p { color:var(--text-secondary); font-size:15px; }
.card .meta { font-size:12.5px; color:var(--text-tertiary); margin-top:auto; padding-top:6px; }
.pill { font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:99px; background:var(--accent-soft); color:var(--accent); white-space:nowrap; }
.card .go { font-size:14px; font-weight:600; color:var(--accent); }

/* products: app home-screen showcase — black device, icons unlock in, flip to a card */
.hs-device {
  width:100%; max-width:100%; margin:0 auto;
  border-radius:30px; padding:6px; background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -40px rgba(0,0,0,.9);
}
.hs-screen { border-radius:26px; overflow:hidden; background:#000; padding:clamp(28px,4vw,54px) clamp(22px,4vw,48px); }
.hs-grid { display:grid; grid-template-columns:repeat(4,1fr); justify-items:center; row-gap:clamp(30px,3.6vw,52px); column-gap:clamp(20px,3vw,60px); }
@media (max-width:560px){
  .hs-grid { grid-template-columns:repeat(2,1fr); column-gap:clamp(20px,8vw,44px); row-gap:34px; }
  .hs-tile { width:clamp(96px,28vw,128px); height:clamp(96px,28vw,128px); }
}

.hs-app {
  appearance:none; border:0; background:none; cursor:pointer; color:#fff; font:inherit;
  display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; opacity:0;
}
.hs-grid.hs-in .hs-app { animation:hs-appIn .62s cubic-bezier(.33,.66,.3,1) both; }
.hs-tilewrap { position:relative; transition:transform .2s ease; }
.hs-app:hover .hs-tilewrap, .hs-app:focus-visible .hs-tilewrap { transform:translateY(-6px) scale(1.05); }
.hs-app:active .hs-tilewrap { transform:scale(.94); }
.hs-app:focus-visible { outline:none; }
.hs-tile {
  width:clamp(78px,10vw,120px); height:clamp(78px,10vw,120px); border-radius:26%; overflow:hidden;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.7), 0 0 0 .5px rgba(255,255,255,.12) inset; display:block;
}
.hs-tile img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(.96); transition:filter .3s ease; }
.hs-app:hover .hs-tile img, .hs-app:focus-visible .hs-tile img { filter:none; }
.hs-name { font-size:15px; font-weight:500; text-align:center; line-height:1.2; color:#fff; }
.hs-badge { position:absolute; top:-6px; right:6px; background:#ff3b30; color:#fff; font-size:11px; font-weight:700; border-radius:10px; padding:1px 7px; box-shadow:0 1px 4px rgba(0,0,0,.5); }
.hs-app.dim { opacity:.32; filter:saturate(.7); }
.hs-app.hide { visibility:hidden; }
@keyframes hs-appIn { 0%{opacity:0;transform:scale(1.85)} 45%{opacity:1} 72%{transform:scale(.975)} 100%{opacity:1;transform:scale(1)} }

.hs-scrim { position:fixed; inset:0; background:rgba(0,0,0,.34); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); opacity:0; pointer-events:none; transition:opacity .4s ease; z-index:1000; }
.hs-scrim.show { opacity:1; pointer-events:auto; }
.hs-flip { position:fixed; display:none; z-index:1001; perspective:1500px; }
.hs-flip-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; }
.hs-face { position:absolute; inset:0; border-radius:30px; backface-visibility:hidden; overflow:hidden; }
.hs-front { border-radius:26%; }
.hs-front img { width:100%; height:100%; object-fit:cover; }
.hs-back {
  transform:rotateY(180deg);
  background:rgba(28,28,32,.5); backdrop-filter:blur(34px) saturate(1.3); -webkit-backdrop-filter:blur(34px) saturate(1.3);
  border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
  display:flex; flex-direction:column; padding:26px; gap:14px; color:#f2f4f8;
}
/* card content fades in as a block once the card has finished opening (no reflow during scale) */
.hs-cardin { flex:1; display:flex; flex-direction:column; gap:14px; opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease; }
.hs-flip.revealed .hs-cardin { opacity:1; transform:none; }
.hs-back .hs-head { display:flex; align-items:center; gap:14px; }
.hs-back .hs-mini { width:52px; height:52px; border-radius:26%; overflow:hidden; flex:none; box-shadow:0 0 0 .5px rgba(255,255,255,.12) inset; }
.hs-back .hs-mini img { width:100%; height:100%; object-fit:cover; }
.hs-back h3 { margin:0; font-size:21px; letter-spacing:-.01em; color:#fff; }
.hs-back .hs-plat { color:rgba(255,255,255,.6); font-size:13px; margin-top:3px; display:inline-flex; align-items:center; gap:6px; }
.hs-back .hs-plat svg { display:block; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hs-back .hs-press { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7d97ff; font-weight:700; }
.hs-back p { color:rgba(255,255,255,.9); margin:0; font-size:15px; line-height:1.5; flex:1; }
.hs-back .hs-actions { display:flex; gap:10px; }
.hs-btn { appearance:none; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:14px; padding:11px 16px; border-radius:999px; background:#4f74ff; color:#fff; flex:1; text-align:center; text-decoration:none; transition:filter .15s; }
.hs-btn:hover { filter:brightness(1.08); }
.hs-btn.ghost { background:transparent; border:1px solid rgba(255,255,255,.16); color:#f2f4f8; flex:none; padding:11px 15px; }
@media (prefers-reduced-motion:reduce){ .hs-grid.hs-in .hs-app { animation:none; opacity:1; } .hs-tilewrap, .hs-scrim, .hs-flip-inner, .hs-flip { transition:none !important; } }

/* platform badge (glyph + label) */
.platform { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-secondary); }
.platform svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* hero media (single product shot above the headline) */
.hero-media { display:flex; justify-content:center; margin-bottom:42px; }
.hero-media img { height:300px; width:auto; border-radius:24px; box-shadow:var(--shadow); border:1px solid color-mix(in srgb, var(--border) 55%, transparent); }
@media (max-width:600px){ .hero-media img { height:230px; } }

/* why design section */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
@media (max-width:900px){ .why-grid { grid-template-columns:1fr; } }
.why-num { font-size:13px; font-weight:800; color:var(--accent); margin-bottom:12px; letter-spacing:.04em; }
.why-item h3 { font-size:19px; margin-bottom:8px; }
.why-item p { color:var(--text-secondary); font-size:15px; }

/* press strip: uniform monochrome — inline SVGs + wordmarks all share currentColor */
.press-logos { color:var(--text-tertiary); }
.press-logos svg { height:22px; width:22px; fill:currentColor; display:block; }
.press-logos .word { color:inherit; font-weight:700; font-size:19px; letter-spacing:-.012em; }
.press-logos .word.caps { text-transform:uppercase; letter-spacing:.16em; font-weight:800; font-size:16px; }
.press-logos .word.serif { font-family:Georgia,'Times New Roman',serif; font-weight:700; letter-spacing:0; }

/* ---------- services (design consultation) — bento, big frameless gradient icons ---------- */
.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  grid-template-areas:
    "feat feat a"
    "feat feat b"
    "c    d    e";
}
.services-grid > :nth-child(1){ grid-area:feat; }
.services-grid > :nth-child(2){ grid-area:a; }
.services-grid > :nth-child(3){ grid-area:b; }
.services-grid > :nth-child(4){ grid-area:c; }
.services-grid > :nth-child(5){ grid-area:d; }
.services-grid > :nth-child(6){ grid-area:e; }
@media (max-width:900px){
  .services-grid { grid-template-columns:1fr; grid-template-areas:none; }
  .services-grid > * { grid-area:auto !important; }
}

.svc {
  background:var(--bg-subtle); border:1px solid transparent; border-radius:var(--radius);
  padding:26px; display:flex; flex-direction:column;
  transition:border-color .15s ease, transform .15s ease;
}
.svc:hover { border-color:var(--border); transform:translateY(-2px); }
.svc h3 { margin-bottom:8px; }
.svc p { color:var(--text-secondary); font-size:14.5px; }

/* big frameless icon: gradient stroke, no chip, no glow */
.svc .ico { margin-bottom:16px; display:flex; }
.svc .ico svg {
  width:42px; height:42px;
  stroke:url(#svcGrad); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

/* feature card: one bold solid-accent tile */
.svc.feature { background:var(--accent-bright); border-color:transparent; color:var(--accent-ink); padding:36px; }
.svc.feature h3 { font-size:26px; }
.svc.feature p { color:rgba(255,255,255,.92); font-size:16px; }
.svc.feature .ico svg { stroke:#fff; width:50px; height:50px; }
.svc-list { list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.svc-list li { position:relative; padding-left:26px; color:rgba(255,255,255,.92); font-size:15.5px; line-height:1.4; }
.svc-list li::before { content:""; position:absolute; left:2px; top:7px; width:9px; height:5px; border-left:2px solid rgba(255,255,255,.9); border-bottom:2px solid rgba(255,255,255,.9); transform:rotate(-45deg); }
.svc-feature-foot { margin-top:22px; color:rgba(255,255,255,.72); font-size:14.5px; font-style:italic; }
.svc-link { margin-top:24px; font-weight:600; font-size:15px; color:#fff; display:inline-flex; align-items:center; gap:6px; }
.svc-link:hover { opacity:.85; }

/* ---------- press strip ---------- */
.press { text-align:center; }
.press-logos { display:flex; flex-wrap:wrap; gap:16px 40px; justify-content:center; align-items:center; margin-top:8px; }
.press-logos span { font-size:19px; font-weight:650; letter-spacing:-.01em; color:var(--text-tertiary); opacity:.85; }

/* ---------- about ---------- */
.about-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
@media (max-width:900px){ .about-grid { grid-template-columns:1fr; } }
.about-col h3 { font-size:19px; margin-bottom:8px; }
.about-col p { color:var(--text-secondary); font-size:15px; }

/* ---------- legal (imprint) ---------- */
.legal { padding-top:60px; }
.legal h1 { font-size:clamp(30px,4.5vw,44px); margin-bottom:10px; }
.legal .legal-intro { color:var(--text-secondary); margin-bottom:36px; }
.legal dl { display:grid; grid-template-columns:210px 1fr; gap:16px 28px; max-width:660px; }
@media (max-width:560px){ .legal dl { grid-template-columns:1fr; gap:2px 0; } .legal dt { margin-top:16px; } }
.legal dt { color:var(--text-tertiary); font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:600; padding-top:2px; }
.legal dd { color:var(--text); font-size:16px; }
.legal dd a { color:var(--accent); }
.legal .legal-note { color:var(--text-tertiary); font-size:14px; margin-top:36px; max-width:660px; }

/* ---------- footer ---------- */
footer { border-top:1px solid var(--border); padding:40px 0; color:var(--text-tertiary); font-size:14px; }
.footer-inner { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; }
.footer-links { display:flex; gap:20px; }
.footer-links a:hover { color:var(--text); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } }

/* ---------- product pages ---------- */
.phero { padding:64px 0 60px; }
.phero-grid { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
@media (max-width:860px){ .phero-grid { grid-template-columns:1fr; gap:36px; text-align:center; } }
.phero .picon { width:100px; height:100px; border-radius:26%; box-shadow:var(--shadow); border:1px solid color-mix(in srgb, var(--border) 55%, transparent); margin-bottom:20px; }
@media (max-width:860px){ .phero .picon { margin-left:auto; margin-right:auto; } }
.phero h1 { font-size:clamp(32px,4.4vw,48px); }
.pmeta { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; color:var(--text-secondary); font-size:13.5px; margin:12px 0 2px; }
@media (max-width:860px){ .pmeta { justify-content:center; } }
.pmeta .dot { color:var(--text-tertiary); }
.ptag { color:var(--text-secondary); font-size:clamp(17px,2vw,20px); line-height:1.5; margin:14px 0 24px; max-width:540px; }
@media (max-width:860px){ .ptag { margin-left:auto; margin-right:auto; } }
.phero-cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
@media (max-width:860px){ .phero-cta { justify-content:center; } }
.appstore-badge { display:inline-block; width:200px; height:67px; background:url('/assets/img/appstore-black.svg') left center/contain no-repeat; }
.appstore-badge:hover { opacity:.85; }
@media (prefers-color-scheme: dark){ .appstore-badge { background-image:url('/assets/img/appstore-white.svg'); } }
:root[data-theme="dark"] .appstore-badge { background-image:url('/assets/img/appstore-white.svg'); }
:root[data-theme="light"] .appstore-badge { background-image:url('/assets/img/appstore-black.svg'); }
.phero.space .appstore-badge { background-image:url('/assets/img/appstore-white.svg'); }
/* German badge */
.appstore-badge.lang-de { background-image:url('/assets/img/appstore-black-de.svg'); }
@media (prefers-color-scheme: dark){ .appstore-badge.lang-de { background-image:url('/assets/img/appstore-white-de.svg'); } }
:root[data-theme="dark"] .appstore-badge.lang-de { background-image:url('/assets/img/appstore-white-de.svg'); }
:root[data-theme="light"] .appstore-badge.lang-de { background-image:url('/assets/img/appstore-black-de.svg'); }
.phero.space .appstore-badge.lang-de { background-image:url('/assets/img/appstore-white-de.svg'); }
.ppress { margin-top:22px; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-tertiary); }
@media (max-width:860px){ .ppress { margin-left:auto; margin-right:auto; max-width:420px; } }

/* device frames */
.phero-media { display:flex; justify-content:center; }
.device-phone { background:#0c0c0e; border-radius:40px; padding:4px; box-shadow:0 22px 44px -30px rgba(0,0,0,.45); flex:0 0 auto; }
.device-phone img { display:block; width:264px; height:auto; border-radius:36px; background:#000; object-fit:contain; }
@media (max-width:860px){ .device-phone img { width:224px; } }
.device-tv { width:100%; max-width:540px; border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background:#000; }
.device-tv img, .device-tv iframe { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border:0; }

/* overview + highlights */
.plead { font-size:clamp(22px,2.7vw,31px); font-weight:650; letter-spacing:-.015em; line-height:1.32; max-width:820px; }
.phl-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:38px 60px; margin-top:48px; }
@media (max-width:760px){ .phl-grid { grid-template-columns:1fr; } }
.phl-ico { color:var(--app-tint,var(--accent)); margin-bottom:14px; line-height:0; }
/* per-app tint: everything but the nav follows --app-tint */
.product .kicker { color:var(--app-tint); }
.product .pback a { color:var(--app-tint); }
.pshots-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-tertiary); margin:38px 0 12px; }
.phl-ico svg { width:34px; height:34px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.phl h3 { font-size:21px; margin-bottom:8px; }
.phl p { color:var(--text-secondary); font-size:17px; line-height:1.55; }
.pnote { margin-top:34px; font-size:14px; color:var(--text-tertiary); }

/* press quote */
.pquote-sec { text-align:center; }
.pquote { font-size:clamp(21px,2.7vw,30px); font-weight:650; letter-spacing:-.015em; line-height:1.35; max-width:840px; margin:0 auto; }
.pquote cite { display:block; margin-top:16px; font-style:normal; font-size:14px; font-weight:500; color:var(--text-tertiary); }

/* screenshots: spread full width, left aligned, inside the Details section */
.pshots { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; align-items:start; margin:0; }
@media (max-width:820px){ .pshots { grid-template-columns:repeat(2,1fr); gap:20px; } }
.pshots .device-phone { width:100%; }
.pshots .device-phone img { width:100%; }
/* compact: horizontal swipeable carousel */
@media (max-width:640px){
  .pshots {
    display:flex; grid-template-columns:none; gap:16px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:4px 0 14px; margin:0 -4px;
  }
  .pshots::-webkit-scrollbar { display:none; }
  .pshots .device-phone { width:auto; flex:0 0 74%; scroll-snap-align:center; }
  .pshots .device-phone img { width:100%; }
}

/* video: full width of the section */
.pvideo { border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background:#000; }
.pvideo iframe { display:block; width:100%; aspect-ratio:16/9; border:0; }

/* details strip */
.pdetails { display:flex; flex-wrap:wrap; gap:30px 76px; }
.pdetails div { font-size:16px; color:var(--text-secondary); }
.pdetails b { font-weight:600; display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-tertiary); margin-bottom:4px; }

.pback { text-align:center; padding:56px 0; border-top:1px solid var(--border); }
.pback a { color:var(--accent); font-weight:600; }

/* space telescope: starfield hero */
.phero.space {
  color:#fff; position:relative; overflow:hidden; border:0;
  background:
    linear-gradient(to bottom, rgba(5,6,15,.72), rgba(5,6,15,.5) 45%, rgba(5,6,15,.9)),
    url('/assets/img/space/hubble.jpg') center/cover no-repeat,
    #05060f;
}
.phero.space::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 68%, #cfe0ff, transparent),
    radial-gradient(1.6px 1.6px at 46% 34%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 62% 74%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 26%, #dfe9ff, transparent),
    radial-gradient(1.2px 1.2px at 88% 60%, #fff, transparent),
    radial-gradient(1px 1px at 36% 84%, #fff, transparent),
    radial-gradient(1px 1px at 68% 12%, #fff, transparent);
}
.phero.space > .container { position:relative; z-index:1; }
.phero.space .picon { border-color:rgba(255,255,255,.18); box-shadow:0 20px 60px -20px rgba(0,0,0,.8); }
.phero.space h1 { color:#fff; }
.phero.space .pmeta { color:rgba(255,255,255,.72); }
.phero.space .pmeta .platform { color:rgba(255,255,255,.72); }
.phero.space .pmeta .dot { color:rgba(255,255,255,.4); }
.phero.space .ptag { color:rgba(255,255,255,.82); }
.phero.space .ppress { color:rgba(255,255,255,.6); }