/* Homepage product presentation. Shared support and legal pages stay unchanged. */
.site--showcase {
  color-scheme: light;
  --paper: #fff;
  --paper-2: #f5f5f7;
  --paper-3: #e8e8ed;
  --card: #fff;
  --ink: #1d1d1f;
  --ink-soft: #424245;
  --muted: #66666c;
  --forest: #0066cc;
  --forest-deep: #004f9e;
  --gold: #0066cc;
  --gold-soft: #c6ddf4;
  --line: #d2d2d7;
  --line-soft: #e8e8ed;
  --nav-paper: 255, 255, 255;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-h2: 48px;
  --fs-h3: 36px;
  --fs-h4: 22px;
  --fs-lede: 20px;
  --fs-body: 17px;
  --fs-micro: 13px;
  --r-card: 8px;
  --r-media: 8px;
  --shadow-lg: 0 18px 48px rgb(0 0 0 / 10%);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 8%);
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
}
.site--showcase *, .site--showcase *::before, .site--showcase *::after { letter-spacing: 0; }
.site--showcase .grain { display: none; }
.site--showcase :is(h1, h2, h3, h4) { font-weight: 650; text-wrap: balance; }
.site--showcase .nav { background: rgb(255 255 255 / 88%); }
.site--showcase .nav__inner { height: 60px; }
.site--showcase .brand svg { color: #1d1d1f; }
.site--showcase .nav__links { font-size: 13px; }
.site--showcase .btn { min-height: 44px; white-space: normal; text-align: center; box-shadow: none; }
.site--showcase .btn--primary { --btn-bg: #0071e3; --btn-fg: #fff; }
.site--showcase .btn--primary:hover { --btn-bg: #0077ed; }
.site--showcase .btn--store { --btn-bg: #1d1d1f; --btn-fg: #fff; }
.site--showcase .btn--ghost { border-color: transparent; color: #0066cc; background: transparent; backdrop-filter: none; }
.site--showcase .btn--ghost:hover { text-decoration: underline; background: transparent; }
.site--showcase .hero--hedah { padding-block: 28px 36px; overflow: clip; }
.site--showcase .hero--hedah .hero__grid { gap: 28px; }
.site--showcase .hero--hedah .display { font-size: 64px; line-height: 1.08; margin-bottom: 10px; }
.site--showcase .hero__promise { font-size: 26px; font-weight: 550; line-height: 1.25; margin-bottom: 12px; }
.site--showcase .hero--hedah .lede { max-width: 57ch; font-size: 17px; color: #6e6e73; margin-bottom: 18px; }
.site--showcase .hero__family { gap: 24px; }
.site--showcase .hero__family .hero__tablet { width: min(70%, 520px); }
.site--showcase .hero__family .hero__phone { width: min(21%, 156px); }
.site--showcase .hero__family .shot { border-color: #d2d2d7; box-shadow: 0 12px 32px rgb(0 0 0 / 10%); }
.site--showcase .ticker { padding-block: 16px; background: #f5f5f7; }
.site--showcase .ticker span { font-size: 12px; text-transform: none; color: #6e6e73; }
.site--showcase .ticker i { color: #a1a1a6; }
.site--showcase .flagship { background: #f5f5f7; padding-block: 88px; }
.site--showcase .flagship__head { max-width: 850px; margin-inline: auto; text-align: center; }
.site--showcase .flagship__head .lede { max-width: 65ch; margin-inline: auto; }
.site--showcase .flagship__grid { margin-top: 52px; }
/* Cropped app captures have no status bar: do not invent a speaker or island. */
.site--showcase .flagship__phone::before { content: none; }
.site--showcase .panel__media .shot:not(.shot--card)::before { content: none; }
.site--showcase .flagship__stage {
  /* The two images are finished marketing compositions — caption band, device,
     soft field — so they sit side by side and align on the baseline rather than
     one covering the other, which would hide a caption. */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 30px);
  perspective: 1200px;
}
.site--showcase .collection { background: #fff; }
.site--showcase .panel { background: #fff; border-color: #e8e8ed; }
.site--showcase .panel:nth-child(even) { background: #f5f5f7; }
.site--showcase .panel--dark { background: #1d1d1f; --gold: #8fc5ff; --forest: #8fc5ff; }
.site--showcase .panel--dark .media-note { color: #aeb4bb; }
.site--showcase .panel--dark .btn--ghost { color: #8fc5ff; }
.site--showcase .panel--dark .btn--store { --btn-bg: #fff; --btn-fg: #1d1d1f; }
.site--showcase .panel__grid { border-radius: 0; box-shadow: none; }
.site--showcase .panel__copy h3 { font-size: 40px; max-width: 17ch; }
.site--showcase .panel__head .index { font-size: 15px; font-weight: 600; }
.site--showcase .media-note { font-size: 12px; color: #6e6e73; }
.site--showcase .principles { background: #f5f5f7; }
.site--showcase .contact { background: #fff; color: #1d1d1f; }
.site--showcase .contact p, .site--showcase .contact__mail { color: #66666c; }
.site--showcase .contact__mail a:hover { color: #0066cc; }
.site--showcase .footer { background: #f5f5f7; }
.site--showcase .rail { display: none; }
@media (min-width: 761px) and (max-height: 800px) {
  .site--showcase .hero--hedah { padding-block: 20px 24px; }
  .site--showcase .hero--hedah .hero__grid { gap: 16px; }
  .site--showcase .hero--hedah .display { font-size: 54px; }
  .site--showcase .hero__family .hero__tablet { width: min(70%, 440px); }
  .site--showcase .hero__family .hero__phone { width: min(21%, 132px); }
}
@media (min-width: 1025px) and (max-height: 900px) {
  /* Sticky product panels need more height than their tallest card. Let short
     desktop screens scroll through each complete card without overlap. */
  .site--showcase .panel { position: relative; top: auto; min-height: 0; }
}
@media (min-width: 1440px) and (min-height: 850px) {
  .site--showcase .hero--hedah { padding-top: 40px; }
  .site--showcase .hero__family .hero__tablet { width: min(70%, 600px); }
  .site--showcase .hero__family .hero__phone { width: min(21%, 180px); }
}
@media (max-width: 760px) {
  .site--showcase { --fs-h2: 32px; --fs-h3: 28px; --fs-lede: 17px; }
  .site--showcase .nav__inner { gap: 14px; }
  .site--showcase .nav__links { gap: 14px; font-size: 12px; }
  .site--showcase .brand { font-size: 14px; gap: 7px; }
  .site--showcase .hero--hedah { padding-block: 32px 36px; }
  .site--showcase .hero--hedah .display { font-size: 46px; }
  .site--showcase .hero__promise { font-size: 23px; max-width: 20ch; margin-inline: auto; }
  .site--showcase .hero--hedah .lede { font-size: 16px; }
  .site--showcase .hero__actions { gap: 4px; }
  .site--showcase .hero__family { gap: 12px; }
  .site--showcase .hero__family .hero__tablet { width: 73%; }
  .site--showcase .hero__family .hero__phone { width: 22%; }
  .site--showcase .flagship { padding-block: 56px; }
  .site--showcase .flagship__grid { margin-top: 28px; }
  .site--showcase .flagship__phone { display: block; width: 26%; }
  .site--showcase .flagship__shot { border-radius: 9px; }
  .site--showcase .panel__copy h3 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .site--showcase .ticker__track { animation: none; }
  .site--showcase .shot { transition: none; }
}

/* Full-bleed family context; real, inspectable app captures remain below. */
.site--showcase .hero--scene { height: min(780px, calc(100svh - 124px)); min-height: 440px; padding: 0; background: #f2f2f0; }
.hero__scene { position: absolute; inset: 0; overflow: hidden; }
.hero__scene picture { display: block; width: 100%; height: 100%; }
.hero__scene img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.site--showcase .hero--scene .hero__grid { position: relative; height: 100%; display: flex; align-items: center; padding-block: 40px 70px; }
.site--showcase .hero--scene .hero__copy { text-align: left; width: 38%; max-width: 370px; margin: 0; }
.site--showcase .hero--scene .display { font-size: 72px; line-height: 1.05; margin: 0 0 20px; }
.site--showcase .hero--scene .hero__promise { font-size: 27px; line-height: 1.25; margin: 0 0 18px; }
.site--showcase .hero--scene .lede { color: #424245; font-size: 17px; margin: 0 0 24px; max-width: 32ch; }
.site--showcase .hero--scene .hero__actions { justify-content: flex-start; gap: 4px; }
.hero__scene-credit { position: absolute; bottom: 12px; right: 20px; margin: 0; font-size: 11px; color: #424245; background: rgb(255 255 255 / 88%); padding: 4px 8px; }
@media (max-width: 760px) {
  .site--showcase .hero--scene { height: min(740px, calc(100svh - 112px)); min-height: 520px; }
  .hero__scene { inset: 0; height: 100%; }
  .hero__scene img { object-position: center bottom; }
  .site--showcase .hero--scene .hero__grid { align-items: flex-start; padding-block: 28px; }
  .site--showcase .hero--scene .hero__copy { width: 100%; max-width: 340px; margin-inline: auto; text-align: center; }
  .site--showcase .hero--scene .display { font-size: 48px; margin-bottom: 12px; }
  .site--showcase .hero--scene .hero__promise { font-size: 22px; margin: 0 auto 12px; max-width: 22ch; }
  .site--showcase .hero--scene .lede { font-size: 15px; margin: 0 auto 16px; }
  .site--showcase .hero--scene .hero__actions { justify-content: center; }
  .site--showcase .hero--scene .btn { width: auto; font-size: 14px; padding: 12px 16px; }
  .hero__scene-credit { font-size: 10px; right: 8px; bottom: 8px; }
}

/* Version 1.0.1 release note, inside the Hedah flagship section. */
.release{margin:34px 0 6px;padding:26px 28px;border-radius:20px;border:1px solid rgba(13,115,119,.22);background:rgba(13,115,119,.055)}
.release__tag{margin:0 0 10px;font-family:var(--mono,monospace);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0d7377}
.release__title{margin:0 0 12px;font-size:clamp(20px,2.4vw,27px);line-height:1.2}
.release__body{margin:0 0 12px;max-width:62ch;font-size:16px;line-height:1.6;opacity:.86}
.release__body:last-child{margin-bottom:0}


/* Ryndix shows decision cards rather than phone screens. */
.site--showcase .shot--card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-media); box-shadow: var(--shadow-lg); }



/* The flagship Hedah images above are complete device compositions. The
   collection below uses unframed App Store captures, so give those screens one
   consistent, restrained graphite device shell without changing their pixels. */
.site--showcase .collection .panel__media {
  --screen-accent: 86, 104, 116;
  position: relative;
  isolation: isolate;
  padding: 10px 8px 16px;
}
.site--showcase .collection .panel__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5% 8% 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(var(--screen-accent), .15) 0%,
    rgba(var(--screen-accent), .07) 42%,
    transparent 72%);
  filter: blur(8px);
  pointer-events: none;
}
.site--showcase .collection .panel__media > :is(.media-duo, .media-single, .media-spread, .media-note) {
  position: relative;
  z-index: 1;
}
.site--showcase #kindling .panel__media { --screen-accent: 159, 73, 53; }
.site--showcase #hedah .panel__media { --screen-accent: 13, 115, 119; }
.site--showcase #perith .panel__media { --screen-accent: 170, 70, 95; }
.site--showcase #visitrep .panel__media { --screen-accent: 48, 112, 83; }
.site--showcase #ryndix .panel__media { --screen-accent: 45, 109, 193; }
.site--showcase #gluise .panel__media { --screen-accent: 155, 45, 91; }

.site--showcase .collection .panel__media .shot:not(.shot--card) {
  box-sizing: border-box;
  position: relative;
  padding: 6px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: clamp(25px, 2.4vw, 34px);
  background: linear-gradient(145deg,
    #e5e9ed 0%, #87919c 3%, #252b33 7%, #090c11 16%,
    #090c11 84%, #262d35 94%, #bec5cc 100%);
  box-shadow:
    0 28px 64px rgba(19, 25, 33, .19),
    0 8px 18px rgba(19, 25, 33, .12),
    inset 0 1px 0 rgba(255, 255, 255, .72);
}
.site--showcase .collection .panel__media .shot:not(.shot--card) img {
  display: block;
  border-radius: clamp(19px, 1.9vw, 27px);
  box-shadow: none;
}
/* A slim side key makes the outer shell read as a device, not a framed card. */
.site--showcase .collection .panel__media .shot:not(.shot--card)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 24%;
  right: -3px;
  width: 2px;
  height: 38px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #c7cdd3, #515963 45%, #20252b);
  pointer-events: none;
}
/* These two screenshots omit the hardware cutout; add it to the device shell. */
.site--showcase #kindling .panel__media .shot::before,
.site--showcase #perith .panel__media .shot::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 50%;
  width: 22%;
  height: 9px;
  border-radius: 999px;
  background: #080a0e;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .13);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Let the main screen lead; the second screen supports the story. */
.site--showcase .media-duo { gap: clamp(14px, 2vw, 26px); }
.site--showcase .media-duo .shot { width: 46%; }
.site--showcase .media-duo .shot:first-child { width: 36%; }
.site--showcase #perith .media-single .shot { width: min(56%, 330px); }
.site--showcase #ryndix .media-duo .shot--card { width: 43%; border-radius: 14px; }
.site--showcase #ryndix .media-duo .shot--card:first-child { width: 48%; }
.site--showcase #gluise .media-spread { gap: clamp(8px, 1.2vw, 16px); }
.site--showcase #gluise .media-spread .shot { width: 32%; }
.site--showcase #gluise .media-spread .shot:nth-child(2) { width: 29%; }
.site--showcase #gluise .media-spread .shot:nth-child(3) { width: 31%; }

@media (max-width: 760px) {
  .site--showcase .collection .panel__media { padding: 8px 0 14px; }
  .site--showcase .media-duo { justify-content: center; gap: 12px; }
  .site--showcase .media-duo .shot { width: 47%; }
  .site--showcase .media-duo .shot:first-child { width: 38%; }
  .site--showcase #perith .media-single .shot { width: min(64%, 300px); }
  .site--showcase #ryndix .media-duo .shot--card { width: 43%; }
  .site--showcase #ryndix .media-duo .shot--card:first-child { width: 49%; }
  .site--showcase #gluise .media-spread { justify-content: center; gap: 8px; }
  .site--showcase #gluise .media-spread .shot,
  .site--showcase #gluise .media-spread .shot:nth-child(2),
  .site--showcase #gluise .media-spread .shot:nth-child(3) { width: 30%; }
}