/* =========================================================
   abroo · landing styles
   Base width: 1758. 1px-perfect at desktop, fluid down to 320.
   Fonts: Plus Jakarta Sans (local), Gloria Hallelujah, Noto Sans JP
   ========================================================= */

/* Metric-overridden Arial fallback — calibrated to Plus Jakarta Sans body
   metrics so the swap from fallback → real font doesn't shift line heights or
   cause CLS on large titles. Values approximated from Plus Jakarta's UPM. */
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  src: local("Arial");
  size-adjust: 102%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/PlusJakartaSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/PlusJakartaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   Tokens (1:1 with Figma variables)
   ========================================================= */
:root {
  /* Colors */
  --c-black: #0a0a0a;
  --c-white: #ffffff;
  --c-white-50: rgba(255, 255, 255, 0.5);
  --c-gray-0: #f9f9f9;
  --c-gray-1: #f2f2f2;
  --c-gray-2: #ededed;
  --c-gray-3: #e4e4e4;
  --c-gray-5: #9a9a9a;
  --c-gray-6: #686868;
  --c-gray-4: #cbcbcb;
  --c-gray-7: #494949;
  /* Black alpha tints — used for shadows, overlays, scrim, and inset hairlines.
     Keep all rgba(10,10,10,X) usage funneled through these tokens. */
  --c-black-04: rgba(10, 10, 10, 0.04);
  --c-black-06: rgba(10, 10, 10, 0.06);
  --c-black-08: rgba(10, 10, 10, 0.08);
  --c-black-10: rgba(10, 10, 10, 0.10);
  --c-black-16: rgba(10, 10, 10, 0.16);
  --c-black-50: rgba(10, 10, 10, 0.5);
  --c-white-30: rgba(255, 255, 255, 0.3);
  /* Backdrop blur amount used by .nav frosted glass effect (and any future frosted surface) */
  --blur-nav: 18px;
  --c-red: #ff4040;
  --c-red-sub: #ffeaea;
  --c-red-deep: #cc2020;        /* AA-compliant text on --c-red-sub */
  --c-blue: #008cff;
  --c-blue-sub: #e3f2ff;
  --c-blue-deep: #0066c2;       /* AA-compliant text on --c-blue-sub */

  /* Spacing */
  --pad-8: 8px;
  --pad-12: 12px;
  --pad-16: 16px;
  --pad-18: 18px;
  --pad-24: 24px;
  --pad-28: 28px;
  --pad-36: 36px;
  --pad-48: 48px;
  --gap-8: 8px;
  --gap-12: 12px;
  --gap-16: 16px;
  --gap-17: 17px;
  --gap-18: 18px;
  --gap-24: 24px;
  --gap-31: 31px;
  --gap-36: 36px;
  --gap-42: 42px;
  --gap-48: 48px;
  --gap-60: 60px;

  /* Radius — canonical Figma: 12/18/36/full. Extras (4/6/8) are utility-only
     for badges, icon-buttons, focus rings — not first-class brand radii. */
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-12: 12px;
  --r-18: 18px;
  --r-36: 36px;
  --r-full: 1000px;

  /* Shadows — direct from Figma effects.
     `shadow_1` (#0a0a0a 0x0A ≈ 4%, offset 0/10, blur 24) — pill nav, modal */
  --sh-soft:  0 10px 24px var(--c-black-04);
  /* `shadow_2` (#0a0a0a 0x14 ≈ 8%, offset 0/10, blur 24) — popover, snackbar */
  --sh-soft2: 0 10px 24px var(--c-black-08);
  /* Figma `drop_shadow` for product cards (offset 0/10, blur 12, 4% — tighter) */
  --sh-card:  0 10px 12px var(--c-black-04);
  /* Hover lift — slightly bigger offset/blur for elevation cue */
  /* Hero outer shadow — large soft drop for "frame" feel */
  --sh-hero: 0 30px 60px var(--c-black-06), inset 0 0 0 1px var(--c-black-04);

  /* Layout */
  --content-w: 996px;
  --narrow-w: 505px;
  --hero-pad: 20px;
  /* Viewport-aware vertical padding — short laptops get less air, tall desktops keep 120 */
  --section-py: clamp(72px, 12vh, 120px);

  /* Typography (font-stack) */
  --ff-sans: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", "Pretendard Variable",
    system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-eyebrow: "Gloria Hallelujah", "Plus Jakarta Sans", cursive;
  --ff-ja: "Noto Sans JP", "Plus Jakarta Sans", sans-serif;

  /* Easing / motion — Framer signature curves.
     abroo only ships --ease-out and --ease-out-sm. Bouncy / overshoot easings are
     intentionally absent: hovers are opacity dim, presses are scale 0.98, period. */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-sm:  cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast:     280ms;
  --dur-base:     320ms;
  --dur-slow:     520ms;
  --dur-press:     80ms;   /* :active scale press (21 uses across .btn*, chip, links) */
  --press-scale: 0.98;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-sans);
  font-weight: 500;
  color: var(--c-black);
  /* Figma landing root = solid white. Page-specific overrides set their own bg. */
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-feature-settings: "kern";
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  overflow-x: clip;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
button, a { color: inherit; }
a { text-decoration: none; }
button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
ol, ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

::selection { background: var(--c-black); color: var(--c-white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html { scroll-behavior: smooth; }

/* =========================================================
   Page shell
   ========================================================= */
.page {
  width: 100%;
  /* No max-width — the hero "액자" must keep equal --hero-pad on all four sides
     at every viewport. Body bg never adds extra horizontal frame.
     Section content is internally centered via .section__inner (996px).
     --page-w is kept only as a reference for ultra-wide consistency checks. */
  margin: 0;
  position: relative;
}

.page__body {
  display: flex;
  flex-direction: column;
  /* triple.guide-style — hero stays sticky underneath; body sheet rises
     over it as user scrolls. NO negative margin so the initial state
     preserves the 4-side white "액자" frame around hero. */
  position: relative;
  z-index: 1;
  background: var(--c-white);
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  box-shadow: 0 -16px 48px var(--c-black-08);
}

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
}

.section {
  width: 100%;
  padding: var(--section-py) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Closing quote needs generous breathing room before the footer. */
.section--close { padding-bottom: clamp(220px, 32vh, 360px); }
.section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-60);
  width: var(--content-w);
  /* 64px gutter cap (32 each side) — matches .subpage__content for cross-page parity */
  max-width: calc(100% - 64px);
}
/* (narrow modifier removed — each component manages its own width:
   .section-head = 505, .steps = 636, .quote = 505) */

/* Section head (eyebrow + title + lede) */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-17);
  align-items: center;
  text-align: center;
  width: var(--narrow-w);
  max-width: 100%;
  color: var(--c-black);
  word-break: keep-all;
}
.eyebrow {
  font-family: var(--ff-eyebrow);
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.01em;
}
.section-head__title {
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.25;       /* Figma metadata: title height = 50px (= 40 * 1.25) */
  letter-spacing: -0.04em;
  color: var(--c-black);
}
.section-head__lede {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: var(--c-black);
}

/* =========================================================
   Section 1 · Hero
   ========================================================= */
.hero {
  padding: var(--hero-pad);
  width: 100%;
  /* The page-level gradient sits behind .hero, creating a consistent "frame"
     of body bg (white→gray-0) around the rounded hero rectangle. */
}
.hero__image {
  position: relative;
  width: 100%;
  /* Always fill ~viewport height minus the surrounding frame, but stay within
     sensible bounds so the rectangle never looks cramped or oversized. */
  height: calc(100vh - calc(var(--hero-pad) * 2));
  min-height: 560px;
  max-height: 1080px;
  border-radius: var(--r-36);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 120px;
  box-shadow: var(--sh-hero);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
  transform: translateZ(0);
  will-change: transform;
}
.hero__image > picture { position: absolute; inset: 0; z-index: 0; }
.hero__image > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor bottom slightly more visible so clouds always show — "액자" framing */
  object-position: center 60%;
}

/* Hero content */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-48);
  width: 431px;
  max-width: calc(100% - 64px);
}
/* Figma frame stack (Landing 364:147 / 354:74):
     64×64 at (left 12, top 0)   — back, frosted-glass (50% white + blur baked into SVG)
     76×76 at (left 6,  top 10)  — mid, frosted-glass
     88×88 at (left 0,  top 20)  — front, opaque white with dark triangle
   All three centered horizontally on x=44; behind frames peek above by 20/10px. */
.hero__frames {
  position: relative;
  width: 88px;
  height: 108px;
}
.hero__frame {
  position: absolute;
  display: block;
}
.hero__frame--back2 {
  left: 12px; top: 0; width: 64px; height: 64px;
  z-index: 0; border-radius: 14px;
  /* SVG is transparent — tint + blur come from CSS so frost is actually visible */
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
}
.hero__frame--back1 {
  left: 6px; top: 10px; width: 76px; height: 76px;
  z-index: 1; border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
}
.hero__frame--front {
  left: 0; top: 20px; width: 88px; height: 88px;
  z-index: 2;
  filter: drop-shadow(0 8px 16px var(--c-black-08));
}

/* ─── Page loader overlay (covers entire viewport until fonts + images load) ─── */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 360ms var(--ease-out);
}
.page-loader__mark {
  width: 48px;
  height: 48px;
  animation: loader-bounce 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
}
/* Subtle bounce — pops up 4px then settles. No rotation. */
@keyframes loader-bounce {
  0%, 100% { transform: translate3d(0, 0, 0); }
  40%, 60% { transform: translate3d(0, -4px, 0); }
}
body.is-loaded .page-loader {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 360ms var(--ease-out), visibility 0s linear 360ms;
}
@media (prefers-reduced-motion: reduce) {
  .page-loader__mark { animation: none; }
}
/* Pause hero text rise while loader is up so the entrance plays AFTER fade-out. */
body:not(.is-loaded) .hero__title-line,
body:not(.is-loaded) .hero__subtitle,
body:not(.is-loaded) .hero__main .btn--white {
  animation-play-state: paused;
}

/* First-paint hero text rise — Framer-style. Each line rises 16px from below
   with Out Quart easing, staggered so the eye reads top→bottom in sequence.
   Applies only to hero TEXT (not the image/frames). Plays once on load. */
@keyframes hero-text-rise {
  from { opacity: 0; transform: translate3d(0, 13px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.hero__title-line,
.hero__subtitle,
.hero__main .btn--white {
  animation: hero-text-rise 820ms var(--ease-out) both;
}
.hero__title-line:nth-of-type(1) { animation-delay: 180ms; }
.hero__title-line:nth-of-type(2) { animation-delay: 290ms; }
.hero__subtitle               { animation-delay: 400ms; }
.hero__main .btn--white        { animation-delay: 510ms; }
/* Hero text rise stays exempt from the global reduce-motion kill (16px / fade
   is subtle enough to read as "appearance", not "motion"). The global rule at
   styles.css:171 forces animation-duration to 0.001ms — we override here so the
   first-paint sequence still plays. */
@media (prefers-reduced-motion: reduce) {
  .hero__title-line,
  .hero__subtitle,
  .hero__main .btn--white {
    animation-duration: 820ms !important;
  }
}

.hero__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-36);
  width: 100%;
}
.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-24);
  font-weight: 700;
  font-size: 64px;
  line-height: 44px;
  letter-spacing: -0.04em;
  color: var(--c-white);
  text-align: center;
  white-space: nowrap;
  margin: 0;
}
.hero__title-line { display: block; }
.hero__title-line--muted { color: var(--c-white-50); }

.hero__subtitle--ja {
  font-family: var(--ff-ja);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--c-white);
  text-align: center;
  white-space: nowrap;
}

/* =========================================================
   Nav (fixed, follows scroll)
   ========================================================= */
.nav {
  --nav-t: 0;
  position: fixed;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-36);
  /* Progressive background, blur, and shadow — all driven by --nav-t (0→1 across
     the first 160px of scroll, set by main.js). At rest the nav has no shadow,
     so it reads identically over white (index) and gray-0 (apps/philosophy/wish). */
  background: rgba(255, 255, 255, calc(1 - 0.18 * var(--nav-t)));
  -webkit-backdrop-filter: saturate(140%) blur(calc(var(--blur-nav) * var(--nav-t)));
  backdrop-filter: saturate(140%) blur(calc(var(--blur-nav) * var(--nav-t)));
  border-radius: var(--r-12);
  /* 1px outline via inset shadow (preserves the nav's content-box dimensions —
     a real `border` would add 2px to width and height). Composed with the
     scroll-driven outer drop-shadow. */
  box-shadow: inset 0 0 0 1px var(--c-gray-1),
              0 10px 24px rgba(10, 10, 10, calc(0.04 * var(--nav-t))); /* dynamic alpha — calc() can't be inside var() */
  padding: var(--pad-12) var(--pad-18);
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.nav__logo img { width: 24px; height: auto; }
.nav__links {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-24);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--pad-8);
  color: var(--c-black);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nav__link:hover { opacity: 0.92; }
.nav__link:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.nav__link--active {
  font-weight: 600;
  color: var(--c-black);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;          /* Figma 16_medium token */
  letter-spacing: -0.03em;
  border-radius: var(--r-12);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  will-change: transform;
}
/* Plus Jakarta sits a hair low; nudge centered button labels up 0.5px so the
   optical center matches the chip / pill geometric center. Applied uniformly
   across all button variants to keep alignment identical. */
.btn > span,
.btn--white > span,
.btn--black > span,
.btn--outline > span,
.btn--black--lg > span,
.btn--black--sm > span,
.btn--secondary > span,
.btn--danger > span { display: inline-block; transform: translateY(-0.5px); }

.btn--white {
  background: var(--c-white);
  color: var(--c-black);
  height: 48px;
  padding: 0 var(--pad-16);
  box-shadow: var(--sh-soft);
}
.btn--white:hover { opacity: 0.92; }
.btn--white:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }

.btn--black {
  background: var(--c-black);
  color: var(--c-white);
  height: 40px;
  padding: 0 var(--pad-16);
  line-height: 22px;
}
.btn--black:hover { opacity: 0.92; }
.btn--black:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }

/* =========================================================
   Section 2 · Three steps
   ========================================================= */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  align-items: center;
  width: 636px;
  max-width: 100%;
}
.step-card {
  width: 100%;
  background: var(--c-white);
  /* Figma height excludes border — use inset box-shadow so 1px line doesn't add to box height */
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  border-radius: var(--r-18);
  padding: var(--pad-36) var(--pad-28);
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}
.step-card__num {
  font-weight: 500;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-gray-5);
}
.step-card__title {
  font-weight: 600;
  font-size: 22px;
  line-height: 25px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.step-card__body {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-gray-5);
}

/* =========================================================
   Section 3 · Preview grid (placeholders)
   ========================================================= */
.preview-grid {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  width: 100%;
}
.preview-grid__row {
  display: flex;
  gap: var(--gap-24);
  width: 100%;
}
.preview-tile {
  background: var(--c-gray-0);
  height: 532px;
  border-radius: var(--r-18);
  flex: 0 0 auto;
}
.preview-tile--lg { width: 656px; }
.preview-tile--sm { width: 316px; }

/* =========================================================
   Section 4 · Why abroo (2 cards)
   ========================================================= */
.why-grid {
  display: flex;
  gap: var(--gap-24);
  width: 100%;
  align-items: stretch;
}
.why-card {
  flex: 1 1 0;
  width: 486px;
  max-width: 100%;
  /* Figma height excludes border — inset shadow */
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  border-radius: var(--r-36);
  padding: var(--pad-36) var(--pad-28);
  display: flex;
  flex-direction: column;
  gap: var(--gap-42);
}
.why-card__top {
  display: flex;
  flex-direction: column;
  gap: var(--gap-31);
  width: 100%;
}
.why-card--pos { background: var(--c-white); }
.why-card--neg { background: var(--c-gray-1); }
.why-card--neg .why-card__title { color: var(--c-gray-6); }
.why-card--neg .check-list li { color: var(--c-gray-6); }

.why-card__heading-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-31);
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: var(--r-8);
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.04em;
  align-self: flex-start;
}
.badge--light { background: var(--c-gray-0); color: var(--c-gray-7); }
.badge--dim   { background: var(--c-gray-3); color: var(--c-gray-6); }

.why-card__heading {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}
.why-card__title {
  font-weight: 600;
  font-size: 22px;
  line-height: 25px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.why-card__body {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-gray-5);
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.check-list li {
  display: flex;
  align-items: center;
  gap: var(--gap-12);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.check-list li img {
  width: 12px;
  height: 8px;
  flex: 0 0 auto;
}
.check-list--dim li { color: var(--c-gray-6); }
.check-list--dim li img { filter: opacity(0.6); }

/* =========================================================
   Section 5 · Five rules — scroll-pinned (sticky)
   The outer .section--rules is tall (5x viewport); inner content stays
   pinned and active-rule changes as user scrolls past.
   ========================================================= */
.section--rules {
  /* Internal sticky handles vertical rhythm; no outer py here. */
  padding: 0;
}
.section--rules__pin {
  position: relative;
  /* Total 200vh — sticky travel = 100vh, so 5 rules ÷ 20vh each
     (~180px per rule on 900vh; ~1–2 wheel notches). Snappy advance. */
  height: 200vh;
  width: 100%;
}
.section--rules__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-60);
  padding: 80px 0;
  box-sizing: border-box;
}
/* Mobile: rules content overflows 100vh; disable the pin and let it flow normally. */
@media (max-width: 900px) {
  .section--rules__pin { height: auto; }
  .section--rules__sticky {
    position: static;
    height: auto;
    padding: var(--section-py) 0;
  }
}
.rules {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-24);
  width: 100%;
}
.rules__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-36);
  width: 275px;
  /* Single-rule viewport — JS translates the list as user scrolls so each
     rule slides up into view one at a time. */
  height: 140px;
  overflow: hidden;
  will-change: transform;
  transition: transform 520ms var(--ease-out);
}
.rule {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  width: 100%;
  /* No per-rule opacity — only the visible one is in the window anyway */
}
.rule__num {
  font-weight: 500;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-gray-5);
}
.rule__title {
  font-weight: 600;
  font-size: 22px;
  line-height: 25px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  white-space: nowrap;
}
.rule__body {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-gray-5);
}
.rules__visual {
  flex: 0 0 auto;
  width: 644px;
  height: 548px;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  border-radius: var(--r-36);
}

/* =========================================================
   Section 6 · App cards
   ========================================================= */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-24) var(--gap-24);
  width: 100%;
}
.apps-grid > .app-card:nth-child(n+4) { margin-top: calc(var(--gap-36) - var(--gap-24)); }
/* Figma had row-gap 36 between row1 and row2 (Products Container gap-36, rows gap-24).
   Approximate: use grid row-gap 36 for clarity. Override below. */
.apps-grid { row-gap: var(--gap-36); }
.apps-grid > .app-card:nth-child(n+4) { margin-top: 0; }

.app-card {
  height: 352px;
  background: var(--c-white);
  border-radius: var(--r-36);
  padding: var(--pad-24);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--sh-card);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .app-card:hover { opacity: 0.92; }
}
/* No :active scale on the card — clicking the View button bubbles to .app-card and
   would shrink the whole tile. Card is a container, not a button. */
.app-card__top { display: flex; flex-direction: column; gap: var(--gap-24); width: 100%; }
.app-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.app-card__icon { width: 72px; height: 72px; flex: 0 0 auto; }
.app-card__info { display: flex; flex-direction: column; gap: var(--gap-8); width: 100%; }
.app-card__name {
  font-weight: 600;
  font-size: 22px;
  line-height: 25px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.app-card__desc {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-gray-6);
}
.app-card__bottom { display: flex; flex-direction: column; gap: var(--gap-24); width: 100%; }
.app-card__sep {
  height: 1px;
  border-radius: var(--r-full);
  background: var(--c-gray-3);
  width: 100%;
}
.app-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.app-card__price {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: var(--c-black);
  white-space: nowrap;
}

/* =========================================================
   Section 7 · Closing quote
   ========================================================= */
.quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-24);
  text-align: center;
  width: var(--narrow-w);
  max-width: 100%;
}
.quote__mark { width: 42.6px; height: 34.32px; }
.quote__body {
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--c-black);
  word-break: keep-all;
}
.quote__body p { margin: 0; line-height: 1.25; }
.quote__attribution {
  font-family: var(--ff-eyebrow);
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--c-black);
  white-space: nowrap;
}

/* =========================================================
   Reveal animations (used by main.js IntersectionObserver)
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  /* Subtle rise-from-below. Opacity + small Y, no blur. */
  transition:
    opacity 560ms var(--ease-out),
    transform 560ms var(--ease-out);
}
/* Cards auto-tagged via JS get an even subtler rise */
[data-reveal="auto"] {
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 480ms var(--ease-out),
    transform 480ms var(--ease-out);
}
[data-reveal="auto"].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}
.hero[data-reveal] { transition-delay: 60ms; }

/* Subtle stagger when many cards are inside a [data-reveal] section */
[data-reveal] .step-card,
[data-reveal] .app-card,
[data-reveal] .why-card,
[data-reveal] .rule {
  transform: translate3d(0, 8px, 0);
  opacity: 0;
  transition:
    opacity 520ms var(--ease-out),
    transform 520ms var(--ease-out);
}
[data-reveal].is-visible .step-card,
[data-reveal].is-visible .app-card,
[data-reveal].is-visible .why-card,
[data-reveal].is-visible .rule {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}
.is-visible .step-card { transition-delay: calc(var(--i, 0) * var(--dur-press)); }
.is-visible .app-card  { transition-delay: calc(var(--i, 0) * 70ms); }
.is-visible .why-card  { transition-delay: calc(var(--i, 0) * var(--dur-press)); }
.is-visible .rule[aria-current="true"] { transition-delay: 100ms; }
.is-visible .rule:not([aria-current="true"]) { transition-delay: 140ms; }

/* Keep opacity baselines for non-current rules */
.is-visible .rule[aria-current="true"] { opacity: 1; }
.is-visible .rule:not([aria-current="true"]) { opacity: 0.3; }

/* =========================================================
   Responsive — scales the design without breaking 1px parity at 1758
   Breakpoints: 1758 / 1280 / 768 / 480
   ========================================================= */

/* From 1758 down to ~1280: hero scales, content stays 996. */
@media (max-width: 1280px) {
  :root {
    --section-py: clamp(64px, 10vh, 100px);
  }
}

/* 1100 → 996 boundary: fixed-px children scale (.section__inner already gutters
   via base max-width) */
@media (max-width: 1100px) {
  .why-card { width: auto; }
  .rules__visual { flex: 1 1 0; min-width: 0; }
  .preview-grid__row { gap: var(--gap-16); }
  .preview-tile--lg { width: auto; flex: 2 1 0; min-width: 0; }
  .preview-tile--sm { width: auto; flex: 1 1 0; min-width: 0; }
  .rules__list { width: 240px; }
  .steps { width: 100%; max-width: 636px; }
}

/* Tablet */
@media (max-width: 900px) {
  :root {
    --section-py: 88px;
  }
  .hero__title { font-size: 56px; line-height: 40px; }
  .section-head__title { font-size: 36px; }
  .quote__body { font-size: 32px; }
  .apps-grid { grid-template-columns: repeat(2, 1fr); }
  .rules { flex-direction: column; align-items: stretch; }
  .rules__list { width: 100%; height: auto; overflow: visible; }
  /* Override flex:1 from 1100 query — in column direction it collapses to 0 */
  .rules__visual { flex: 0 0 auto; width: 100%; height: 420px; }
  .rule__title { white-space: normal; }
  .why-grid { flex-direction: column; }
  .preview-tile--lg, .preview-tile--sm { width: auto; flex: 1 1 0; height: 360px; }
}

/* Tablet narrow / Mobile landscape (≤768) */
@media (max-width: 768px) {
  :root {
    --hero-pad: 14px;
    --section-py: 80px;
    --gap-60: 44px;
    --gap-48: 32px;
    --gap-36: 28px;
  }
  .hero__image {
    height: calc(100vh - calc(var(--hero-pad) * 2));
    min-height: 460px;
    max-height: 760px;
    padding-bottom: 80px;
  }
  .nav {
    gap: 20px;
    padding: 10px 14px;
  }
  .nav__links { gap: var(--gap-18); }
  .nav__link { font-size: 15px; padding: 0 4px; }
  .hero__title { font-size: 48px; line-height: 52px; gap: var(--gap-12); white-space: normal; }
  .hero__subtitle--ja { white-space: normal; }
  .hero__content { width: 100%; max-width: calc(100% - 40px); gap: var(--gap-24); }
  .hero__main { gap: var(--gap-18); }

  .section__inner { width: calc(100% - 40px); gap: var(--gap-48); }
  .section-head { gap: var(--gap-12); width: 100%; }
  .section-head__title { font-size: 32px; }
  .section-head__lede { font-size: 16px; line-height: 22px; }
  .section-head__lede br { display: none; }

  .steps { width: 100%; }
  /* Card padding/radius UNCHANGED across viewports — same design system.
     Only LAYOUT (column count, width) and TEXT (font sizes) change. */
  .preview-grid__row { flex-direction: column; }
  .preview-tile--lg, .preview-tile--sm { width: auto; height: 280px; }
  .why-card__title { white-space: normal; }
  .rule__title { white-space: normal; }
  .rules__visual { height: 320px; }
  .apps-grid { grid-template-columns: repeat(2, 1fr); }
  .app-card { height: auto; min-height: 280px; }
  .quote__body { font-size: 28px; }
  .quote__mark { width: 36px; height: auto; }
}

/* Small mobile (≤520) */
@media (max-width: 520px) {
  :root {
    --hero-pad: 12px;
    --section-py: clamp(48px, 9vh, 64px);
  }
  /* Hero text — scale gaps WITH the smaller font so spacing stays proportional. */
  .hero__title { font-size: 38px; line-height: 42px; gap: 8px; }
  .hero__content { max-width: calc(100% - 24px); gap: var(--gap-18); }
  .hero__main { gap: var(--gap-12); }
  .section-head__title { font-size: 26px; }
  .section-head { gap: var(--gap-8); }
  .section__inner { gap: var(--gap-36); }
  .apps-grid { grid-template-columns: 1fr; }
  .quote__body { font-size: 22px; }
  /* Nav: SAME padding & radius as desktop. Only font/logo size adjusts. */
  .nav__link { font-size: 14px; }
  .nav__logo { width: 20px; height: 20px; }
  .nav__logo img { width: 20px; height: auto; }
  /* Modal overlay padding shrinks so the card has more room on tiny phones */
  /* Bottom-sheet modal on mobile — slide up from bottom, fill most of viewport.
     Native iOS / Notion / Linear pattern. */
  .modal-overlay {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
  }
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 18px 18px 0 0;
    padding: 28px var(--pad-20, 20px) max(20px, env(safe-area-inset-bottom));
    box-shadow: 0 -10px 32px var(--c-black-08);
    animation: modal-slide-up 320ms var(--ease-out) both;
  }
  .modal--wide { width: 100%; max-height: 96vh; }
  /* Visual handle at top of sheet */
  .modal::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--c-gray-3);
    border-radius: var(--r-full);
    margin: -12px auto 16px;
  }
  @keyframes modal-slide-up {
    from { transform: translate3d(0, 100%, 0); }
    to   { transform: translate3d(0, 0, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .modal { animation: none; }
  }
  /* Snackbar can wrap text on narrow viewports */
  .snackbar { white-space: normal; }
  /* Checkout row-split: country + zip on one line is too tight on 320 */
  .checkout-form .row-split { flex-direction: column; }
  /* Subpage content gets 16px gutters at small mobile */
  .subpage__content { max-width: calc(100% - 32px); }
  /* Sub-page intros tighten too */
  .subpage__intro, .wish-grid__intro, .acct-intro { gap: var(--gap-8); }
}

/* Mobile touch target bumps — ≥44×44 for tap-only icons */
@media (max-width: 768px) {
  .modal__close { width: 44px; height: 44px; padding: 10px; }
  .app-row__copy,
  .pay-row__menu { width: 44px; height: 44px; }
  .system-info__copy { padding: 10px 12px; font-size: 14px; }
  .chip { height: 44px; }
}

/* Tiny screens (≤375) */
@media (max-width: 375px) {
  .hero__title { font-size: 34px; line-height: 38px; gap: 6px; }
  .hero__main { gap: var(--gap-12); }
  .section-head__title { font-size: 24px; }
}

/* High-pixel density refinement */
@media (min-resolution: 1.5dppx) {
  body { -webkit-font-smoothing: subpixel-antialiased; }
}

/* =========================================================
   Shared Footer
   ========================================================= */
.site-footer {
  width: 100%;
  /* Transparent so body bg shows through — keeps footer in the same color
     plate as the page above it (white on index, gray-0 on apps/philosophy/wish). */
  background: transparent;
  border-top: 1px solid var(--c-gray-2);
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.site-footer__inner {
  width: var(--content-w);
  max-width: calc(100% - 64px);
  display: flex;
  align-items: center;
  gap: var(--gap-24);
}
.site-footer__logo {
  width: 34px; height: 32px;
  display: inline-flex;
  align-items: center;
}
.site-footer__logo img { width: 29.781px; height: 28.092px; }
.site-footer__links {
  display: flex;
  align-items: center;
  gap: var(--gap-12);
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-black);
}
.site-footer__div {
  width: 1px; height: 10px;
  background: var(--c-gray-3);
  border-radius: var(--r-full);
}
.site-footer__link { color: inherit; text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.site-footer__link:hover { opacity: 0.92; }
.site-footer__link:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
@media (max-width: 768px) {
  .site-footer { padding: 40px 0; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__links { flex-wrap: wrap; }
}

/* =========================================================
   Sub-page common (apps, philosophy, wish, signin)
   ========================================================= */
.subpage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.subpage__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 36(nav top) + 50(nav h) + 36(breathing) + 60(extra) = 182 clearance */
  padding: 182px 0 120px;
  gap: var(--gap-60);
}
@media (max-width: 768px) {
  .subpage__main { padding-top: 96px; padding-bottom: 80px; }
}
.subpage__content {
  width: var(--content-w);
  max-width: calc(100% - 64px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-36);
}
.subpage__intro {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  align-items: flex-start;
}
.subpage__intro h1,
.wish-grid__intro h1,
.acct-intro h1 {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--c-black);
  white-space: nowrap;
  margin: 0;
}
.subpage__intro p,
.wish-grid__intro p,
.acct-intro p {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: var(--c-black);
  margin: 0;
}

/* Apps / Philosophy / Wish use a gray-0 page surface (body-level so the footer
   sits on the same plate, no visible color split at the main↓footer boundary). */
body.page-apps, body.page-philosophy, body.page-wish { background: var(--c-gray-0); }
.apps-page__bg { background: transparent; }
/* Wrap intro + filters/search in a single block to enforce Figma gap-24 between them.
   The parent .subpage__content uses gap-36, which then becomes the spacing to the grid. */
.apps-page__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  width: 100%;
}
.apps-page__filters {
  display: flex;
  gap: var(--gap-8);
  align-items: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--pad-16);
  border-radius: var(--r-12);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  background: var(--c-white);
  color: var(--c-gray-7);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  cursor: pointer;
  /* Unified interaction: opacity dim on hover, scale-press on active. No bg flip. */
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.chip:hover { opacity: 0.92; }
.chip:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.chip--active {
  background: var(--c-black);
  color: var(--c-white);
  box-shadow: none;
}
.search-box {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
  height: 40px;
  padding: 0 var(--pad-16);
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  border-radius: var(--r-12);
  width: 312px;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-gray-6);
}
.search-box img { width: 14px; height: 14px; }
.search-box input {
  appearance: none;
  -webkit-appearance: none;
  border: 0; outline: 0; background: none;
  /* Safari overrides input font to a system UI font unless we reset explicitly. */
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: inherit;
  width: 100%;
}
.search-box input::-webkit-search-decoration,
.search-box input::-webkit-search-cancel-button,
.search-box input::-webkit-search-results-button,
.search-box input::-webkit-search-results-decoration { display: none; }
.search-box input::placeholder { color: var(--c-gray-5); opacity: 1; }
.apps-page__top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Philosophy page */
.principle-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-36);
  width: 100%;
}
.principle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.principle-section__head h2 {
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.04em;
  color: var(--c-black);
  margin: 0 0 12px;
}
.principle-section__head p {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: var(--c-gray-5);
  margin: 0;
}
.principle-item {
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  border-radius: var(--r-12);
  padding: var(--pad-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-24);
}
.principle-item__title {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  flex-shrink: 0;
}
.principle-item__body {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: var(--c-gray-6);
  /* Figma 683 max; fluid below that to avoid overflow at mid-widths */
  flex: 1 1 auto;
  max-width: 683px;
}
.section-rule {
  height: 1px;
  background: var(--c-gray-3);
  border-radius: var(--r-full);
  width: 100%;
}

/* Wish page */
.wish-grid {
  display: flex;
  gap: var(--gap-60);
  align-items: flex-start;
  width: 100%;
}
.wish-grid__intro {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.wish-grid__intro p { white-space: pre-wrap; }
.wish-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  align-items: flex-end;
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  width: 100%;
}
.field__label {
  font-weight: 500;
  font-size: 14px;
  line-height: 15px;
  letter-spacing: -0.04em;
  color: var(--c-black);
}
.field__input,
.field__textarea {
  background: var(--c-white);
  border: 0;  /* reset browser default — visible border comes from inset shadow */
  border-radius: var(--r-12);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  /* Vertical centering: 22px line within 48px box → 13/13 split via padding.
     Plus Jakarta sits visually low in its em-box, so bump bottom padding 1px
     more than top to optically lift the glyphs to the geometric center. */
  height: 48px;
  padding: 12px 16px 14px;
  font-family: var(--ff-sans);
  font-weight: 500;            /* Plus Jakarta Medium — Figma spec */
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  width: 100%;
  outline: none;
  transition: box-shadow var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.field__textarea {
  /* Textarea overrides single-line settings */
  height: 159px;
  padding: 12px 16px;
  line-height: 22px;
  resize: vertical;
}
/* Native select: line-height: 48 from above works perfectly. */
.field__input::placeholder,
.field__textarea::placeholder { color: var(--c-gray-5); opacity: 1; font-weight: 400; }
.search-box input::placeholder { font-weight: 400; }
.field__input:focus,
.field__textarea:focus { box-shadow: inset 0 0 0 1px var(--c-black); }
.field__input--mono {
  font-family: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Invalid input state — red 2px ring (matches focus thickness but red) */
.field__input:user-invalid,
.field__input[aria-invalid="true"],
.field__textarea:user-invalid,
.field__textarea[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--c-red);
}

/* Apps grid — empty state (filter / search returns nothing) */
.apps-empty {
  width: 100%;
  padding: 64px 24px;
  text-align: center;
  border-radius: var(--r-18);
  background: var(--c-gray-0);
}
.apps-empty p {
  margin: 0;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.apps-empty p + p { margin-top: 8px; }
.apps-empty__hint {
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -0.04em !important;
  color: var(--c-gray-6) !important;
}

/* Changelog page — Linear/Vercel-style timeline, abroo-quiet */
.changelog {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.changelog__entry {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--gap-48);
  padding: 48px 0;
  border-bottom: 1px solid var(--c-gray-2);
}
.changelog__entry:last-child { border-bottom: 0; }
.changelog__entry--empty {
  opacity: 0.6;
}
.changelog__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.04em;
}
.changelog__meta time {
  color: var(--c-black);
  font-weight: 600;
  font-size: 14px;
}
.changelog__app {
  color: var(--c-gray-6);
  font-family: var(--ff-sans);
}
.changelog__ver {
  color: var(--c-gray-5);
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 12px;
}
.changelog__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.changelog__body h2 {
  font-weight: 600;
  font-size: 22px;
  line-height: 25px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  margin: 0;
}
.changelog__body > p {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: var(--c-gray-6);
  margin: 0;
}
.changelog__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.changelog__list li {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--c-gray-7);
}
.changelog__list li strong { color: var(--c-black); font-weight: 600; }
.changelog__list li code {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 14px;
  background: var(--c-gray-1);
  padding: 2px 6px;
  border-radius: var(--r-4);
}
.changelog__quiet {
  color: var(--c-gray-5);
  font-style: italic;
}
@media (max-width: 768px) {
  .changelog__entry { grid-template-columns: 1fr; gap: var(--gap-12); padding: 32px 0; }
}

/* Legal pages (privacy, terms, business) — quiet reading layout */
.legal-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  width: 100%;
}
.legal-section h2 {
  font-weight: 600;
  font-size: 22px;
  line-height: 25px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  margin: 0;
}
.legal-section p {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--c-gray-7);
  margin: 0;
}
.legal-section strong { color: var(--c-black); font-weight: 600; }
.legal-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  padding: 0;
  margin: 0;
}
.legal-list li {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--c-gray-7);
}
.legal-info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  margin: 0;
}
.legal-info__row {
  display: flex;
  align-items: baseline;
  gap: var(--gap-24);
  padding: 8px 0;
}
.legal-info__row + .legal-info__row { border-top: 1px solid var(--c-gray-2); }
.legal-info__row dt {
  flex: 0 0 180px;
  font-weight: 600;
  font-size: 14px;
  line-height: 15px;
  letter-spacing: -0.04em;
  color: var(--c-gray-6);
}
.legal-info__row dd {
  flex: 1 1 auto;
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.legal-footer {
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-gray-5);
}
@media (max-width: 768px) {
  .legal-info__row { flex-direction: column; gap: 4px; }
  .legal-info__row dt { flex: 0 0 auto; }
}

/* 404 error page — minimal centered */
.error-page {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px;
}
.error-page__inner {
  text-align: center;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-24);
}
.error-page__inner h1 {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--c-black);
}
.error-page__inner > p {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: var(--c-gray-6);
  margin: 0;
}
.error-page__actions {
  display: flex;
  gap: var(--gap-8);
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 520px) {
  .error-page__actions { width: 100%; flex-direction: column; }
  .error-page__actions > * { width: 100%; }
}

/* Signin page — clean standalone centered layout (no modal overlay) */
.signin-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px;
  background: var(--c-white);
}
.signin-page__inner {
  width: 400px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-24);
}
.signin__logo { width: 38.165px; height: 36px; }
.signin__welcome {
  font-weight: 600;
  font-size: 22px;
  line-height: 25px;
  letter-spacing: -0.03em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.signin__welcome-greet { color: var(--c-gray-5); }
.signin__welcome-cta { color: var(--c-black); }
.signin__form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.signin__legal {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-gray-6);
}

/* Wish form Send button — large pill, height-locked to match .btn--outline */
.btn--black--lg {
  background: var(--c-black);
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-8);
  height: 48px;
  padding: 0 24px;
  border-radius: var(--r-12);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  border: 0;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn--black--lg:hover { opacity: 0.92; }
.btn--black--lg:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.btn--black--lg img { width: 14px; height: 14px; }

@media (max-width: 768px) {
  .subpage__intro h1, .wish-grid__intro h1 { white-space: normal; }
  .wish-grid { flex-direction: column; gap: 32px; }
  .principle-item { flex-direction: column; align-items: flex-start; gap: var(--gap-12); }
  .principle-item__body { width: 100%; max-width: 100%; }
  .apps-page__top-row { flex-direction: column; align-items: stretch; gap: var(--gap-16); }
  .search-box { width: 100%; }
  .apps-page__filters { flex-wrap: wrap; }
}

/* =========================================================
   App Detail page
   ========================================================= */
.app-detail__content {
  gap: var(--gap-48);
}
.app-detail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-12);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: var(--c-gray-6);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  align-self: flex-start;
}
.app-detail__back:hover { opacity: 0.92; }
.app-detail__back:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.app-detail__back img {
  width: 5px;
  height: 10px;
  flex: 0 0 auto;
  /* keep icon legible against background */
}

.app-detail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-24);
  width: 100%;
}
.app-detail__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-12);
  min-width: 0;
}
.app-detail__icon {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  margin-bottom: 6px;
}
.app-detail__title {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.25;  /* unified with .subpage__intro h1 / .acct-intro h1 */
  letter-spacing: -0.04em;
  color: var(--c-black);
  margin: 0;
  word-break: keep-all;
}
.app-detail__tagline {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: var(--c-black);
  margin: 0;
}
.app-detail__price {
  margin-top: 6px;
}

.app-detail__actions {
  display: inline-flex;
  align-items: stretch;
  gap: var(--gap-8);
  flex: 0 0 auto;
}

.btn--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-8);
  height: 48px;
  padding: 0 24px;
  background: var(--c-white);
  color: var(--c-black);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  border-radius: var(--r-12);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.btn--outline:hover { opacity: 0.92; }
.btn--outline:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.btn--outline img { width: 14px; height: 14px; flex: 0 0 auto; }
.btn--black--lg img { width: 14px; height: 14px; flex: 0 0 auto; }

/* App preview / video placeholder — 16:9 white surface with subtle outline */
.app-detail__media {
  width: 100%;
  aspect-ratio: 960 / 540;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gray-2);
  border-radius: var(--r-18);
}

/* Sub-section pattern (About, Features, Pricing, System) */
.detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  width: 100%;
}
.detail-section__title {
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.04em;
  color: var(--c-black);
  margin: 0;
}
.detail-section__body {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: var(--c-gray-6);
}
.detail-section__body p { margin: 0; }
.detail-section__body p + p { margin-top: 24px; }

/* Feature list (icon + bold name + body) */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  width: 100%;
}
.feature-list .feature {
  display: flex;
  align-items: center;
  gap: var(--gap-12);
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.03em;
}
.feature__name {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-12);
  font-weight: 600;
  color: var(--c-black);
  white-space: nowrap;
}
.feature__name img { width: 12px; height: 8px; flex: 0 0 auto; }
.feature__body {
  font-weight: 500;
  color: var(--c-gray-6);
  letter-spacing: -0.04em;
  word-break: keep-all;
  /* Figma 94:3310 — 683 max, fluid below */
  flex: 1 1 auto;
  max-width: 683px;
}

/* Pricing plans (Pro variant — two columns) */
.pricing-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-24);
  width: 100%;
}
.pricing-plan {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  padding: 28px 24px;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  border-radius: var(--r-18);
}
.pricing-plan__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}
.pricing-plan__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 600;
  font-size: 22px;
  line-height: 25px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.pricing-plan__sub {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-gray-5);
}
.pricing-plan__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.pricing-plan__benefits li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 14px;
  line-height: 15px;
  letter-spacing: -0.04em;
  color: var(--c-gray-7);
}
.pricing-plan__benefits li img { width: 12px; height: 8px; flex: 0 0 auto; }
.pricing-note {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: var(--c-gray-6);
}

/* System info (key-value rows) */
.system-info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  width: 500px;
  max-width: 100%;
  margin: 0;
}
.system-info__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
}
.system-info__row dt {
  font-weight: 500;
  font-size: 14px;
  line-height: 15px;
  letter-spacing: -0.04em;
  color: var(--c-gray-6);
  flex: 0 0 auto;
}
.system-info__row dd {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
  width: 320px;
  max-width: 100%;
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 15px;
  letter-spacing: -0.04em;
  color: var(--c-black);
  min-width: 0;
}
.system-info__div {
  width: 1px;
  height: 10px;
  background: var(--c-gray-3);
  border-radius: var(--r-full);
  flex: 0 0 auto;
}
.system-info__cmd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  background: var(--c-gray-1);
  color: var(--c-gray-6);
  flex: 0 0 auto;
}
.system-info__row code {
  font-family: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 14px;
  line-height: 15px;
  letter-spacing: -0.04em;
  color: var(--c-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.system-info__copy {
  background: none;
  border: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--c-gray-6);
  padding: 2px 6px;
  border-radius: var(--r-6);
  cursor: pointer;
  flex: 0 0 auto;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.system-info__copy:hover { opacity: 0.92; }
.system-info__copy:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }

/* App Detail responsive */
@media (max-width: 900px) {
  .app-detail__head { flex-direction: column; align-items: stretch; gap: var(--gap-24); }
  .app-detail__actions { width: 100%; flex-wrap: wrap; }
  .btn--outline, .app-detail__actions .btn--black--lg { flex: 1 1 0; min-width: 0; }
  .pricing-plans { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .app-detail__title { font-size: 32px; }
  .app-detail__icon { width: 60px; height: 60px; }
  .feature-list .feature { flex-direction: column; align-items: flex-start; gap: 4px; }
  .feature__name { white-space: normal; }
  .system-info__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .system-info__row dd { width: 100%; }
  .system-info { width: 100%; }
  .app-detail__back { font-size: 16px; }
  .detail-section__title { font-size: 24px; line-height: 30px; }
}
@media (max-width: 520px) {
  .app-detail__title { font-size: 28px; }
  .app-detail__actions { flex-direction: column; }
  .btn--outline, .app-detail__actions .btn--black--lg { width: 100%; }
  .pricing-plan { padding: 22px 18px; }
}

/* =========================================================
   Snackbar (toast) — bottom-right, 24px offset
   ========================================================= */
.snackbar-host {
  position: fixed;
  /* Figma snackbar sits ~48px from canvas right/bottom edge (1758×1080) */
  right: 48px;
  bottom: 48px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-8);
  pointer-events: none;
}
.snackbar {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
  padding: 8px 16px;
  background: var(--c-white);
  /* Figma uses shadow_2 only — no border. */
  box-shadow: var(--sh-soft2);
  border-radius: var(--r-12);
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  pointer-events: auto;
  transform: translate3d(0, 12px, 0);
  opacity: 0;
  transition: transform 220ms var(--ease-out-sm), opacity 220ms var(--ease-out-sm);
}
.snackbar.is-visible { transform: translate3d(0, 0, 0); opacity: 1; }
.snackbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}
.snackbar__icon img { width: 12px; height: 8px; }
@media (max-width: 520px) {
  .snackbar-host { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
  .snackbar { width: 100%; justify-content: flex-start; }
}

/* =========================================================
   Generic modal overlay (Buy, Subscribe, Confirm modals)
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--pad-24);
  background: var(--c-black-50);
  overflow-y: auto;
}
.modal-overlay.is-open { display: flex; }
.modal {
  position: relative;
  background: var(--c-white);
  border-radius: var(--r-18);
  box-shadow: var(--sh-soft);
  width: 480px;
  max-width: 100%;
  padding: var(--pad-28);
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}
.modal--wide { width: 1016px; padding: 0; overflow: hidden; }

/* App Preview modal — opens from apps grid "View" click
   (Figma 315:79 / 263:724 / 263:697). Shows compact preview with action
   buttons + media + footer meta + "See more →" link to full detail page. */
.modal--app-preview {
  width: calc(100% - 64px);
  max-width: 1016px;
  /* Figma 315:79 — pt-28 pb-36 px-28 (heavier bottom padding) */
  padding: var(--pad-28) var(--pad-28) var(--pad-36);
  gap: var(--gap-18, 18px);
}
.app-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
  width: 100%;
  min-height: 28px;
}
.app-preview__title {
  font-weight: 600;
  font-size: 22px;
  line-height: 25px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  margin: 0;
  min-width: 0;
}
.app-preview__actions {
  display: inline-flex;
  gap: var(--gap-8);
  flex: 0 0 auto;
}
.app-preview__actions .btn--outline,
.app-preview__actions .btn--black--sm {
  height: 40px;
  padding: 0 16px;
}
.app-preview__media {
  width: 100%;
  aspect-ratio: 960 / 540;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gray-2);
  border-radius: var(--r-18);
}
.app-preview__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-24);
  width: 100%;
}
.app-preview__info {
  display: flex;
  align-items: center;
  gap: var(--gap-24);
  min-width: 0;
}
.app-preview__pricing {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  white-space: nowrap;
}
.app-preview__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-black);
  min-width: 0;
  flex-wrap: wrap;
}
.app-preview__meta .meta-divider {
  width: 1px;
  height: 10px;
  background: var(--c-gray-3);
  border-radius: var(--r-full);
  display: inline-block;
}
.app-preview__meta code {
  font-family: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.app-preview__see-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  flex: 0 0 auto;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.app-preview__see-more:hover { opacity: 0.92; }
.app-preview__see-more:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.app-preview__see-more img { width: 6px; height: 10px; }

@media (max-width: 768px) {
  .modal--app-preview { padding: 22px 18px; gap: var(--gap-16); }
  .app-preview__header { flex-direction: column; align-items: stretch; gap: var(--gap-12); }
  .app-preview__actions { width: 100%; }
  .app-preview__actions .btn--outline,
  .app-preview__actions .btn--black--sm { flex: 1 1 0; }
  .app-preview__footer { flex-direction: column; align-items: stretch; gap: var(--gap-12); }
  .app-preview__info { flex-direction: column; align-items: flex-start; gap: var(--gap-8); }
  .app-preview__meta { row-gap: 4px; }
}
.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: var(--c-gray-6);
  border-radius: var(--r-6);
  z-index: 1;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.modal__close:hover { opacity: 0.92; }
.modal__close:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.modal__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}
.modal__title {
  font-weight: 600;
  font-size: 22px;
  line-height: 25px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  margin: 0;
}
.modal__sub {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-gray-6);
}
.modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-8);
}

/* Destructive / red CTA — height-locked to 48 (matches .btn--outline / .btn--black--lg) */
.btn--danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-8);
  height: 48px;
  padding: 0 24px;
  background: var(--c-red-sub);
  color: var(--c-red);
  border-radius: var(--r-12);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  border: 0;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn--danger:hover { opacity: 0.92; }
.btn--danger:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }

/* Bullet description box (inside destructive modals) */
.bullet-box {
  background: var(--c-gray-0);
  border-radius: var(--r-12);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}
.bullet-box li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-gray-6);
}
.bullet-box li::before {
  content: "";
  display: inline-block;
  width: 2px; height: 2px;
  background: var(--c-gray-5);
  border-radius: var(--r-full);
  margin-top: 7px;
  flex: 0 0 auto;
}

/* Buy / Subscribe checkout (wide 1016 modal with summary + form) */
.checkout {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.checkout__summary {
  width: 384px;
  background: var(--c-gray-0);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-36);
  flex: 0 0 auto;
}
.checkout__body {
  flex: 1 1 0;
  min-width: 0;
  background: var(--c-white);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}
/* (.checkout__brand img sizing defined in utility section below) */
.checkout__heading {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}
.checkout__heading h2 {
  font-weight: 600;
  font-size: 22px;
  line-height: 25px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  margin: 0;
}
.checkout__heading p {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-gray-5);
}
.order-summary {
  background: var(--c-white);
  border-radius: var(--r-12);
  box-shadow: inset 0 0 0 1px var(--c-gray-2);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}
.order-summary__product {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.order-summary__product-name {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.order-summary__product-type {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-gray-6);
}
.order-summary__rows {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  font-weight: 500;
  font-size: 14px;
  line-height: 15px;
  letter-spacing: -0.04em;
}
.order-summary__rows .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order-summary__rows .row dt { color: var(--c-gray-7); }
.order-summary__rows .row dd { color: var(--c-gray-6); margin: 0; }
.order-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order-summary__total dt {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.order-summary__total dd {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  margin: 0;
}
.order-summary__legal {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.order-summary__legal p {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-gray-5);
  margin: 0;
}
.inline-dot {
  width: 2px; height: 2px;
  background: var(--c-gray-3);
  border-radius: var(--r-full);
  display: inline-block;
  flex: 0 0 auto;
}
.inline-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-gray-6);
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-18, 18px);
}
.checkout-form .row-split {
  display: flex;
  gap: var(--gap-8);
}
.checkout-form .row-split .field { flex: 1 1 0; min-width: 0; }

/* Card number display field (4 groups of 4) — placeholder shown when empty */
.field--card .field__input {
  letter-spacing: 0.18em;
}

/* Sign-in methods list (Figma 104:4948 Manage modal) */
.signin-methods {
  display: flex;
  flex-direction: column;
  gap: var(--gap-18, 18px);
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}
.signin-methods__sep {
  height: 1px;
  background: var(--c-gray-3);
  border-radius: var(--r-full);
  width: 100%;
}
.signin-methods__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
  width: 100%;
}
.signin-methods__name {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.signin-methods__status {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-gray-6);
}

/* Pricing tier selector (Figma 323:524 Subscribe small modal) */
.tier-select {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  width: 100%;
}
.tier-select__option {
  position: relative;
  display: block;
  cursor: pointer;
}
.tier-select__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tier-select__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  border-radius: var(--r-12);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  transition: box-shadow var(--dur-fast) var(--ease-out-sm);
}
.tier-select__option:hover .tier-select__row {
  box-shadow: inset 0 0 0 1px var(--c-gray-5);
}
.tier-select__option--selected .tier-select__row,
.tier-select__option input:checked ~ .tier-select__row {
  box-shadow: inset 0 0 0 1px var(--c-black);
}
.tier-select__price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tier-select__unit { color: var(--c-gray-5); }

/* Full-width primary CTA inside modals */
.btn--full {
  width: 100%;
  justify-content: center;
}

/* Compact check-list inside small modals */
.check-list--sm li {
  font-size: 14px;
  line-height: 15px;
  letter-spacing: -0.04em;
  color: var(--c-gray-7);
  font-weight: 500;
  gap: 6px;
}
.check-list--sm li img { width: 10px; height: 6px; }

/* Checkbox (custom) */
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box {
  width: 16px;
  height: 16px;
  border-radius: var(--r-4);
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background var(--dur-fast), box-shadow var(--dur-fast);
}
.check__box img { width: 10px; height: 6px; opacity: 0; }
.check input:checked + .check__box {
  background: var(--c-black);
  box-shadow: none;
}
.check input:checked + .check__box img { opacity: 1; filter: invert(1); }

@media (max-width: 900px) {
  .modal--wide { width: 100%; max-width: 100%; }
  .checkout { flex-direction: column; }
  .checkout__summary { width: 100%; padding: 28px 22px; gap: var(--gap-24); }
  .checkout__body { padding: 28px 22px; }
}

/* =========================================================
   Account page
   ========================================================= */
/* Narrow content variant — outer container matches .subpage__content width (so h1 aligns
   with Apps/Philosophy/Wish), but inner blocks (.acct-intro, .acct-stack) are constrained
   to 720px for the Figma-spec'd card width. */
.subpage__content--narrow { width: var(--content-w); max-width: calc(100% - 64px); }
.subpage__content--narrow .acct-intro,
.subpage__content--narrow .acct-stack {
  width: 100%;
  max-width: 720px;
}

/* Account intro now uses the canonical .subpage__intro (visual parity with Apps/Wish/Philosophy) */
.acct-intro {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  align-items: flex-start;
}
.acct-intro h1 {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: -0.04em;
  color: var(--c-black);
  margin: 0;
}
.acct-intro p {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: var(--c-black);
  margin: 0;
}

.acct-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-17);  /* 18 — close enough to Figma 18px */
  width: 100%;
}

.acct-card {
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  border-radius: var(--r-12);
  padding: var(--pad-28) var(--pad-36);
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}
.acct-card--compact { padding: var(--pad-16) var(--pad-36); }

.acct-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-12);
  width: 100%;
  min-height: 40px;
}
.acct-card__title {
  font-weight: 600;
  font-size: 22px;
  line-height: 25px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  margin: 0;
}
.acct-card__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
}

.acct-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.acct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
  padding: 18px 0;
  width: 100%;
}
.acct-row:first-child { padding-top: 0; }
.acct-row:last-child { padding-bottom: 0; }
.acct-row + .acct-row { border-top: 1px solid var(--c-gray-2); }

.acct-row__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.acct-row__label {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.acct-row__helper {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-gray-6);
}
.acct-row__value {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-gray-6);
  text-align: right;
  white-space: nowrap;
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  flex: 0 0 auto;
  cursor: pointer;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__track {
  width: 100%;
  height: 100%;
  background: var(--c-gray-5);
  border-radius: var(--r-full);
  transition: background var(--dur-fast) var(--ease-out-sm);
}
.toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--c-white);
  border-radius: var(--r-full);
  box-shadow: 0 1px 2px var(--c-black-16);
  transition: transform var(--dur-fast) var(--ease-out-sm);
}
.toggle input:checked + .toggle__track { background: var(--c-black); }
.toggle input:checked + .toggle__track + .toggle__knob { transform: translateX(16px); }

/* Secondary button (white + gray-4 border) */
.btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-8);
  height: 40px;
  padding: 0 16px;
  background: var(--c-white);
  color: var(--c-black);
  box-shadow: inset 0 0 0 1px var(--c-gray-4);
  border-radius: var(--r-12);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--secondary:hover { opacity: 0.92; }
.btn--secondary:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.btn--secondary--danger { color: var(--c-red); }

/* Compact black button (for "Update payment", "Download" inside rows) */
.btn--black--sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-8);
  height: 40px;
  padding: 0 16px;
  background: var(--c-black);
  color: var(--c-white);
  border-radius: var(--r-12);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--black--sm:hover { opacity: 0.92; }
.btn--black--sm:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.btn--black--sm img { width: 14px; height: 14px; flex: 0 0 auto; }

/* Status dot + meta row */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  flex: 0 0 auto;
  margin-right: 2px;
}
.status-dot--active { background: var(--c-blue); }
.status-dot--danger { background: var(--c-red); }
.status-dot--muted  { background: var(--c-gray-5); }

.meta-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-gray-6);
}
.meta-row__dot {
  width: 2px; height: 2px;
  background: var(--c-gray-3);
  border-radius: var(--r-full);
  display: inline-block;
}
.meta-row .meta-row__strong { color: var(--c-black); }
.meta-row .meta-row__danger { color: var(--c-red); }
.meta-row .meta-row__active { color: var(--c-blue); }
.meta-row a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--c-gray-6);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.meta-row a:hover { opacity: 0.92; }

/* Pill / chip-like badge */
.pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  background: var(--c-gray-1);
  color: var(--c-gray-6);
  border-radius: var(--r-8);
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.04em;
}

/* Underlined text link (Cancel / Resume / Sign out of all devices) */
.text-link {
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-black);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.text-link:hover { opacity: 0.92; }
.text-link:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.text-link--muted { color: var(--c-gray-6); }
.text-link--danger { color: var(--c-red); }

/* App row inside My Apps card */
.app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
  padding: 18px 16px;
  border-radius: var(--r-12);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  background: var(--c-white);
}
.app-row__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.app-row__name {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.app-row__sub {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}
.app-row__license {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-gray-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-12);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.app-row__license-code {
  font-family: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.06em;
}
.app-row__copy {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--c-gray-6);
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-6);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.app-row__copy:hover { opacity: 0.92; }
.app-row__copy:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }

/* Payment method row */
.pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-12);
  padding: 18px 0;
}
.pay-row + .pay-row,
.pay-row + .pay-add { border-top: 1px solid var(--c-gray-2); }
.pay-row__brand {
  display: flex;
  align-items: center;
  gap: var(--gap-12);
  min-width: 0;
}
.pay-row__icon {
  width: 24px; height: 24px;
  border-radius: var(--r-4);
  background: var(--c-black);
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  flex: 0 0 auto;
}
.pay-row__icon--visa { background: #1434cb; }
.pay-row__icon--mc   { background: #eb001b; position: relative; }
.pay-row__icon--mc::after {
  content: "";
  position: absolute;
  left: 10px; top: 4px;
  width: 8px; height: 16px;
  background: #f79e1b;
  opacity: 0.85;
  border-radius: 2px;
}
.pay-row__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pay-row__name {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.pay-row__exp {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-gray-5);
}
.pay-row__menu {
  background: none;
  border: 0;
  padding: 4px;
  width: 28px; height: 28px;
  border-radius: var(--r-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--c-gray-6);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pay-row__menu:hover { opacity: 0.92; }
.pay-row__menu:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }

.pay-add {
  display: flex;
  align-items: center;
  gap: var(--gap-8);
  padding: 18px 0 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-black);
  background: none;
  border: 0;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pay-add:hover { opacity: 0.92; }
.pay-add:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.pay-add__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px; height: 13px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--c-black);
}

/* Popover menu (used for payment method ⋮ kebab) */
.popover {
  position: absolute;
  z-index: 50;
  background: var(--c-white);
  border-radius: var(--r-12);
  box-shadow: var(--sh-soft2), inset 0 0 0 1px var(--c-gray-2);
  padding: 4px 0;
  min-width: 180px;
  display: none;
  transform-origin: top right;
  animation: popover-in 160ms var(--ease-out);
}
@keyframes popover-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.popover.is-open { display: block; }
.popover button {
  display: block;
  width: 100%;
  padding: 8px 24px;
  text-align: left;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c-black);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.popover button:hover { opacity: 0.92; }
.popover button:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.popover button.is-danger { color: var(--c-red); }

@media (max-width: 768px) {
  .acct-row { flex-direction: column; align-items: flex-start; gap: var(--gap-8); }
  .acct-row__value { text-align: left; white-space: normal; }
  .app-row { flex-direction: column; align-items: stretch; }
  .pay-row { flex-direction: column; align-items: stretch; gap: var(--gap-8); }
  .acct-intro h1 { font-size: 32px; }
  .acct-card { padding: 22px 18px; }
  .acct-card__head { flex-direction: column; align-items: flex-start; gap: var(--gap-12); }
  .acct-card__actions { flex-wrap: wrap; }
  .subpage__content--narrow { width: 100%; max-width: calc(100% - 32px); }
}

/* =========================================================
   Shared utility classes (eliminate inline styles)
   ========================================================= */

/* Force [hidden] to override component display rules */
[hidden] { display: none !important; }

/* Brand logo image — SVG uses preserveAspectRatio="none", so lock both axes */
.checkout__brand img {
  height: 28px;
  width: 30px;
}


/* Inline anchor inside body copy / pricing notes / footers */
.inline-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.inline-link:hover { opacity: 0.92; }
.inline-link:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }

/* Strong inside bullet-box and other muted-body contexts */
.bullet-box strong,
.detail-section__body strong {
  color: var(--c-black);
  font-weight: 600;
}

/* Checkout — fineprint footer (charge line + Terms · Privacy · Refund) */
.checkout-footer {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}
.checkout-footer p {
  font-weight: 500;
  font-size: 14px;
  line-height: 15px;
  letter-spacing: -0.04em;
  color: var(--c-gray-5);
  margin: 0;
}

/* Native <select> as field__input */
.field__input--select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("assets/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  cursor: pointer;
  padding-right: 36px;
}

/* Card field — slightly wider tracking for readability */
.field--card .field__input { letter-spacing: 0.18em; }

/* Field flex variants for split rows */
.field--country { flex: 0 0 300px; }
@media (max-width: 520px) {
  .field--country { flex: 1 1 0; }
}

/* Account: rows scoped variants */
.acct-row--cancelled .acct-row__label,
.acct-row--cancelled .meta-row { color: var(--c-gray-5); }
.acct-row--policy { padding: 6px 0 0; }
.acct-row--policy + .acct-row { border-top: 0; }

/* Account: list of app rows inside My Apps card */
.acct-apps-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}

/* License row inline group */
.app-row__license-value {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-8);
}

/* Sign-out card — full-row layout without inner padding */
.acct-card--compact .acct-row {
  padding: 0;
  width: 100%;
}
.acct-card--compact .acct-row + .acct-row { border-top: 0; }
.acct-row__signed-as {
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--c-gray-5);
}

/* Popover anchor — guarantees relative positioning for .popover children */
.has-popover { position: relative; }
.popover--pay { right: 0; top: 44px; }

/* =========================================================
   Accessibility — focus styles (keyboard only)
   ========================================================= */
:focus { outline: none; }
.btn,
.btn--black,
.btn--white,
.btn--outline,
.btn--secondary,
.btn--danger,
.btn--black--lg,
.btn--black--sm,
.chip,
.text-link,
.pay-row__menu,
.pay-add,
.modal__close,
.signin__close,
.app-row__copy,
.system-info__copy,
.nav__link,
.site-footer__link,
.inline-link,
.popover button {
  outline: none;
}
.btn:focus-visible,
.btn--outline:focus-visible,
.btn--secondary:focus-visible,
.btn--danger:focus-visible,
.btn--black--lg:focus-visible,
.btn--black--sm:focus-visible,
.btn--white:focus-visible,
.btn--black:focus-visible,
.chip:focus-visible,
.text-link:focus-visible,
.pay-row__menu:focus-visible,
.pay-add:focus-visible,
.modal__close:focus-visible,
.app-row__copy:focus-visible,
.system-info__copy:focus-visible,
.nav__link:focus-visible,
.site-footer__link:focus-visible,
.inline-link:focus-visible,
.popover button:focus-visible {
  box-shadow: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-black);
  border-radius: var(--r-4);
}
.field__input:focus-visible,
.field__textarea:focus-visible {
  box-shadow: inset 0 0 0 1px var(--c-black);
}
.search-box:focus-within {
  box-shadow: inset 0 0 0 1px var(--c-black);
}
.toggle input:focus-visible + .toggle__track {
  box-shadow: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-black);
}

/* =========================================================
   Component Extensions — primitives for abroo apps
   (Schedule, Memo, Notion-like, Slack-like, etc.)
   Built on the same tokens as the marketing site — copy this section
   verbatim into any new abroo app.
   ========================================================= */

/* ── Avatar ──────────────────────────────────────────────── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--c-gray-1);
  color: var(--c-gray-7);
  font-family: var(--ff-sans);
  font-weight: 600;
  letter-spacing: -0.03em;
  overflow: hidden;
  flex: 0 0 auto;
  user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--xs { width: 20px; height: 20px; font-size: 10px; }
.avatar--sm { width: 24px; height: 24px; font-size: 13px; }
.avatar--md { width: 32px; height: 32px; font-size: 13px; }
.avatar--lg { width: 40px; height: 40px; font-size: 14px; }
.avatar--xl { width: 64px; height: 64px; font-size: 22px; }
/* Stacked group: overlapping avatars in a row */
.avatar-group { display: inline-flex; }
.avatar-group .avatar + .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--c-white); }

/* ── Tag (small contextual label, e.g. memo tag, channel hashtag) ── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 var(--pad-8);
  background: var(--c-gray-1);
  color: var(--c-gray-7);
  border-radius: var(--r-6);
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.tag--blue { background: var(--c-blue-sub); color: var(--c-blue-deep); }
.tag--red { background: var(--c-red-sub); color: var(--c-red-deep); }

/* ── Mention (@user inline) ── */
.mention {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  background: var(--c-blue-sub);
  color: var(--c-blue-deep);
  border-radius: var(--r-4);
  font-weight: 500;
}

/* ── Reaction (emoji + count pill, Slack-style) ── */
.reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 var(--pad-8);
  background: var(--c-gray-1);
  border-radius: var(--r-full);
  box-shadow: inset 0 0 0 1px transparent;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--c-gray-7);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.reaction:hover { opacity: 0.92; }
.reaction:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }
.reaction--active { background: var(--c-blue-sub); color: var(--c-blue); box-shadow: inset 0 0 0 1px var(--c-blue); }

/* ── Count badge (notification number) ── */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: var(--c-red);
  color: var(--c-white);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.count-badge--muted { background: var(--c-gray-5); }

/* ── List item (memo row, channel row, contact row, etc.) ── */
.list-item {
  display: flex;
  align-items: center;
  gap: var(--gap-12);
  width: 100%;
  padding: 10px var(--pad-12);
  border-radius: var(--r-8);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.list-item:hover { background: var(--c-gray-0); }
.list-item--active { background: var(--c-gray-1); }
.list-item__leading { flex: 0 0 auto; }
.list-item__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.list-item__title {
  font-weight: 500; font-size: 14px; line-height: 18px;
  letter-spacing: -0.03em; color: var(--c-black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-item__sub {
  font-weight: 500; font-size: 12px; line-height: 16px;
  letter-spacing: -0.03em; color: var(--c-gray-6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-item__trailing { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--gap-8); }
.list-item__time {
  font-weight: 500; font-size: 13px; line-height: 16px;
  letter-spacing: -0.04em; color: var(--c-gray-5);
}

/* ── Message (chat / log entry) — quiet, no bubble background.
     Composes like Linear / Things message rows: author + time inline, then body. */
.message {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 640px;
  padding: var(--pad-8) 0;
}
.message:empty { display: none; }
.message__meta {
  display: inline-flex; gap: var(--gap-8); align-items: baseline;
  font-size: 13px; line-height: 16px; letter-spacing: -0.04em;
  font-weight: 500; color: var(--c-gray-5);
}
.message__meta strong { color: var(--c-black); font-weight: 600; }
.message__body {
  font-size: 14px; line-height: 20px; letter-spacing: -0.03em;
  color: var(--c-black); white-space: pre-wrap;
}

/* ── Notion-style block ── */
.block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--c-black);
}
.block--h1 { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.04em; }
.block--h2 { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.03em; }
.block--h3 { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.03em; }
.block--quote {
  padding: 0 0 0 16px;
  border-left: 3px solid var(--c-gray-3);
  color: var(--c-gray-7);
  font-style: italic;
}
.block--code {
  font-family: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  background: var(--c-gray-0);
  border-radius: var(--r-8);
  padding: var(--pad-12) var(--pad-16);
  font-size: 13px; line-height: 20px; letter-spacing: 0;
  color: var(--c-gray-7);
  white-space: pre-wrap;
}
.block--callout {
  display: flex; gap: var(--gap-12); align-items: flex-start;
  padding: var(--pad-12) var(--pad-16);
  background: var(--c-gray-0);
  border-radius: var(--r-8);
}
.block--divider {
  height: 1px;
  background: var(--c-gray-2);
  margin: var(--gap-12) 0;
}

/* ── Calendar cell (Schedule app — day grid) ── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--c-gray-2);
  border-radius: var(--r-12);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--c-gray-2);
}
.cal-day {
  position: relative;
  min-height: 80px;
  background: var(--c-white);
  padding: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-gray-7);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.cal-day:hover { background: var(--c-gray-0); }
.cal-day--muted { color: var(--c-gray-5); }
.cal-day--today { color: var(--c-blue); font-weight: 600; }
.cal-day--today::after {
  content: ""; position: absolute; top: 6px; left: 8px;
  width: 4px; height: 4px; background: var(--c-blue); border-radius: var(--r-full);
}
.cal-day--selected { background: var(--c-blue-sub); color: var(--c-blue); }
.cal-event {
  display: block; margin-top: 4px;
  padding: 2px var(--pad-8);
  background: var(--c-gray-1);
  color: var(--c-black);
  border-radius: var(--r-4);
  font-size: 13px; line-height: 16px;
  letter-spacing: -0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-event--blue { background: var(--c-blue-sub); color: var(--c-blue-deep); }
.cal-event--red { background: var(--c-red-sub); color: var(--c-red-deep); }

/* ── Tabs (segmented) ── */
.tabs {
  display: inline-flex;
  background: var(--c-gray-1);
  border-radius: var(--r-12);
  padding: 4px;
  gap: 2px;
}
.tab {
  height: 32px;
  padding: 0 var(--pad-12);
  border: 0;
  background: transparent;
  border-radius: var(--r-8);
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.03em;
  color: var(--c-gray-6);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--c-black); }
.tab--active { background: var(--c-white); color: var(--c-black); box-shadow: var(--sh-soft); }

/* ── Tooltip ── */
.tooltip {
  position: absolute;
  z-index: 110;
  padding: 6px 10px;
  max-width: min(280px, 90vw);
  background: var(--c-black);
  color: var(--c-white);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: -0.03em;
  border-radius: var(--r-6);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 4px, 0);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tooltip.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

/* ── Alert / callout ── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-12);
  padding: var(--pad-12) var(--pad-16);
  background: var(--c-gray-0);
  border-radius: var(--r-12);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.03em;
  color: var(--c-gray-7);
}
.alert__icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
.alert__body { flex: 1 1 auto; }
.alert__title { display: block; font-weight: 600; color: var(--c-black); margin-bottom: 2px; }
/* Variants stay within abroo's palette — gray plate for info/success, red-sub for danger.
   No off-system greens or oranges. */
.alert--info    { background: var(--c-blue-sub); color: var(--c-blue-deep); }
.alert--info    .alert__title { color: var(--c-blue-deep); }
.alert--success { background: var(--c-gray-0);  color: var(--c-gray-7); }
.alert--success .alert__title { color: var(--c-black); }
.alert--warning { background: var(--c-gray-0);  color: var(--c-gray-7); }
.alert--warning .alert__title { color: var(--c-black); }
.alert--danger  { background: var(--c-red-sub); color: var(--c-red-deep); }
.alert--danger  .alert__title { color: var(--c-red-deep); }

/* ── Empty state ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-12);
  padding: 60px var(--pad-24);
  text-align: center;
}
.empty-state__icon { width: 48px; height: 48px; opacity: 0.4; }
.empty-state__title {
  font-weight: 600; font-size: 18px; line-height: 24px;
  letter-spacing: -0.03em; color: var(--c-black);
}
.empty-state__body {
  font-weight: 500; font-size: 14px; line-height: 20px;
  letter-spacing: -0.03em; color: var(--c-gray-6);
  max-width: 320px;
}

/* ── Skeleton loader ── */
@keyframes skeleton-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
  display: block;
  border-radius: var(--r-8);
  background: linear-gradient(90deg, var(--c-gray-1) 0%, var(--c-gray-0) 50%, var(--c-gray-1) 100%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}
.skeleton--text   { height: 14px; margin: 6px 0; }
.skeleton--title  { height: 22px; width: 60%; }
.skeleton--avatar { width: 40px; height: 40px; border-radius: var(--r-full); }
.skeleton--card   { height: 120px; border-radius: var(--r-12); }

/* ── Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--c-gray-3);
  border-top-color: var(--c-black);
  border-radius: var(--r-full);
  animation: spin 0.8s linear infinite;
}
.spinner--lg { width: 24px; height: 24px; border-width: 3px; }
.spinner--on-dark { border-color: var(--c-white-30); border-top-color: var(--c-white); }

/* ── Progress bar ── */
.progress {
  width: 100%;
  height: 4px;
  background: var(--c-gray-2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--c-black);
  border-radius: var(--r-full);
  transition: width var(--dur-slow) var(--ease-out);
}
.progress--blue .progress__bar { background: var(--c-blue); }

/* ── Accordion / Disclosure ── */
.accordion {
  border-radius: var(--r-12);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  background: var(--c-white);
  overflow: hidden;
}
.accordion details + details { border-top: 1px solid var(--c-gray-2); }
.accordion .accordion { box-shadow: none; border-radius: 0; }
.accordion summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-16);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.accordion summary:hover { opacity: 0.92; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  font-size: 18px;
  color: var(--c-gray-5);
  transition: transform var(--dur-fast) var(--ease-out);
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion__body {
  padding: 0 var(--pad-16) var(--pad-16);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.03em;
  color: var(--c-gray-6);
}

/* ── Code block (mono) ── */
.code-block {
  font-family: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
  background: var(--c-gray-0);
  color: var(--c-gray-7);
  border-radius: var(--r-8);
  padding: var(--pad-12) var(--pad-16);
  overflow-x: auto;
  white-space: pre;
}
code.inline-code {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 0.92em;
  padding: 2px 6px;
  background: var(--c-gray-1);
  border-radius: var(--r-4);
  color: var(--c-gray-7);
}

/* ── KBD (keyboard shortcut hint) ── */
kbd, .kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--c-gray-1);
  color: var(--c-gray-7);
  border-radius: var(--r-4);
  box-shadow: inset 0 -1px 0 var(--c-gray-3);
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

/* ── Divider (shared primitive) ── */
.divider {
  height: 1px;
  background: var(--c-gray-2);
  border: 0;
  margin: 0;
}
.divider--strong { background: var(--c-gray-3); }
.divider--vertical { width: 1px; height: auto; }

/* ── Side panel / sidebar shell ── */
.sidebar {
  width: 260px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  padding: var(--pad-16);
  background: var(--c-gray-0);
  border-right: 1px solid var(--c-gray-2);
  height: 100vh;
  overflow-y: auto;
}
.sidebar__section { display: flex; flex-direction: column; gap: 2px; }
.sidebar__heading {
  padding: 8px var(--pad-12) 4px;
  font-size: 11px; font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--c-gray-5);
}

/* ── Toolbar (Notion/editor action row) ── */
.toolbar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--c-white);
  box-shadow: var(--sh-soft2);
  border-radius: var(--r-12);
}
.toolbar__btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-8);
  color: var(--c-gray-7);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.toolbar__btn:hover { background: var(--c-gray-0); color: var(--c-black); }
.toolbar__btn--active { background: var(--c-gray-1); color: var(--c-black); }
.toolbar__divider { width: 1px; height: 20px; background: var(--c-gray-2); margin: 0 4px; }

/* ── Status pill (online/away/offline) ── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--pad-8);
  height: 24px;
  border-radius: var(--r-full);
  background: var(--c-gray-1);
  color: var(--c-gray-7);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.status-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--c-gray-5);
}
.status-pill--online  { background: var(--c-blue-sub); color: var(--c-blue-deep); }
.status-pill--online::before  { background: var(--c-blue-deep); }
.status-pill--away    { background: var(--c-gray-1);   color: var(--c-gray-7); }
.status-pill--away::before    { background: var(--c-gray-5); }
.status-pill--busy    { background: var(--c-red-sub);  color: var(--c-red-deep); }
.status-pill--busy::before    { background: var(--c-red-deep); }

/* ── Breadcrumb ── */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.03em;
  color: var(--c-gray-6);
}
.breadcrumb a { color: var(--c-gray-6); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out); }
.breadcrumb a:hover { opacity: 0.92; }
.breadcrumb__sep { color: var(--c-gray-4); }
.breadcrumb__current { color: var(--c-black); font-weight: 600; }

/* ── Pagination ── */
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pagination__btn {
  min-width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  border-radius: var(--r-8);
  font: inherit; font-weight: 500; font-size: 13px;
  color: var(--c-gray-7);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.pagination__btn:hover { background: var(--c-gray-0); }
.pagination__btn--active { background: var(--c-black); color: var(--c-white); }
.pagination__ellipsis { padding: 0 4px; color: var(--c-gray-5); }

/* ── Notice (page-level banner) ── */
.notice {
  display: flex;
  align-items: center;
  gap: var(--gap-12);
  width: 100%;
  padding: 10px var(--pad-16);
  background: var(--c-blue-sub);
  color: var(--c-blue-deep);
  border-radius: var(--r-12);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.03em;
}
.notice--success { background: var(--c-gray-0);  color: var(--c-black);  }
.notice--warning { background: var(--c-gray-0);  color: var(--c-black);  }
.notice--danger  { background: var(--c-red-sub); color: var(--c-red-deep);    }
.notice__close {
  margin-left: auto;
  background: transparent; border: 0;
  cursor: pointer; color: currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--r-6);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.notice__close:hover { opacity: 0.92; }

/* ── Stat card (quiet metric — same chrome as .acct-card) ── */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--pad-18) var(--pad-24);
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  border-radius: var(--r-12);
}
.stat-card__label {
  font-weight: 500; font-size: 13px; line-height: 16px;
  letter-spacing: -0.04em; color: var(--c-gray-6);
}
.stat-card__value {
  font-weight: 600; font-size: 22px; line-height: 25px;
  letter-spacing: -0.03em; color: var(--c-black);
}
.stat-card__trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; letter-spacing: -0.03em;
  color: var(--c-gray-5);
}
.stat-card__trend--up   { color: var(--c-gray-7); }
.stat-card__trend--down { color: var(--c-red); }

/* ── Data table (quiet — Plus Jakarta 14/20, gray-6 headers, no uppercase) ── */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--ff-sans);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.03em;
}
.table th, .table td {
  padding: 14px var(--pad-16);
  border-bottom: 1px solid var(--c-gray-2);
  text-align: left;
  vertical-align: middle;
}
.table thead th {
  font-weight: 500;
  color: var(--c-gray-6);
  background: transparent;
  white-space: nowrap;
  border-bottom: 1px solid var(--c-gray-3);
}
.table tbody td { color: var(--c-black); font-weight: 500; }
.table tbody tr:last-child td { border-bottom: 0; }
.table--bordered { box-shadow: inset 0 0 0 1px var(--c-gray-3); border-radius: var(--r-12); overflow: hidden; }

/* ── Drawer (slide-in side panel) ── */
.drawer {
  position: fixed;
  top: 0; bottom: 0;
  width: 360px;
  max-width: calc(100% - 48px);
  background: var(--c-white);
  z-index: 210;
  box-shadow: -16px 0 32px var(--c-black-08);
  display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out);
}
.drawer--left  { left:  0; transform: translate3d(-100%, 0, 0); }
.drawer--right { right: 0; transform: translate3d(100%, 0, 0); }
.drawer.is-open { transform: translate3d(0, 0, 0); }

/* ── Bottom sheet (mobile modal) ── */
.bottom-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 220;
  background: var(--c-white);
  border-top-left-radius: var(--r-18);
  border-top-right-radius: var(--r-18);
  box-shadow: 0 -16px 32px var(--c-black-08);
  padding: var(--pad-24);
  transform: translate3d(0, 100%, 0);
  transition: transform var(--dur-base) var(--ease-out);
}
.bottom-sheet.is-open { transform: translate3d(0, 0, 0); }
.bottom-sheet__handle {
  width: 36px; height: 4px;
  background: var(--c-gray-3); border-radius: var(--r-full);
  margin: 0 auto 12px;
}

/* ── File drop zone ── */
.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-8);
  padding: 48px var(--pad-24);
  border: 1.5px dashed var(--c-gray-3);
  border-radius: var(--r-12);
  background: var(--c-gray-0);
  color: var(--c-gray-6);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.03em;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.file-drop:hover, .file-drop.is-dragover { border-color: var(--c-black); background: var(--c-white); color: var(--c-black); }
.file-drop strong { color: var(--c-black); }

/* ── Slider (range input) ── */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%; height: 4px;
  background: var(--c-gray-2);
  border-radius: var(--r-full);
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px;
  border-radius: var(--r-full);
  background: var(--c-black);
  cursor: pointer;
  box-shadow: 0 0 0 4px transparent;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--c-gray-2); }
.slider::-moz-range-thumb {
  width: 16px; height: 16px; border: 0;
  border-radius: var(--r-full); background: var(--c-black);
  cursor: pointer;
}

/* ── OTP input (one-time code, 6 digits) ── */
.otp {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--gap-8);
}
.otp__cell {
  width: 42px; height: 48px;
  text-align: center;
  background: var(--c-white);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  border-radius: var(--r-12);
  font-family: var(--ff-sans);
  font-weight: 600; font-size: 18px;
  letter-spacing: 0;
  color: var(--c-black);
  outline: none;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.otp__cell:focus-visible { box-shadow: inset 0 0 0 1px var(--c-black); }

/* ── Combobox / autocomplete (input + list) ── */
.combobox { position: relative; }
.combobox__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 60;
  background: var(--c-white);
  border-radius: var(--r-12);
  box-shadow: var(--sh-soft2), inset 0 0 0 1px var(--c-gray-2);
  padding: 4px 0;
  max-height: 280px;
  overflow-y: auto;
  display: none;
}
.combobox.is-open .combobox__list { display: block; }
.combobox__item {
  padding: 8px var(--pad-12);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.03em;
  color: var(--c-black);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.combobox__item:hover, .combobox__item.is-active { background: var(--c-gray-0); }

/* ── Tree node (folder/channel) ── */
.tree-node {
  display: flex; align-items: center; gap: 8px;
  padding: 6px var(--pad-8);
  border-radius: var(--r-6);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-gray-7);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.tree-node:hover { background: var(--c-gray-0); }
.tree-node--active { background: var(--c-gray-1); color: var(--c-black); }
.tree-node__chev {
  width: 12px; height: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-gray-5);
  transition: transform var(--dur-fast) var(--ease-out);
}
.tree-node--open .tree-node__chev { transform: rotate(90deg); }
.tree-children { padding-left: var(--pad-16); }

/* ── Drag handle ── */
.drag-handle {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-gray-4);
  cursor: grab;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.list-item:hover .drag-handle,
.block:hover .drag-handle { opacity: 1; }
.drag-handle:active { cursor: grabbing; }

/* ── Color swatch ── */
.swatch {
  width: 20px; height: 20px;
  border-radius: var(--r-6);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--c-black-10);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.swatch:hover { opacity: 0.92; }
.swatch--selected { box-shadow: inset 0 0 0 2px var(--c-black); }

/* ── Number stepper (-/+ input) ── */
.stepper {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border-radius: var(--r-12);
  box-shadow: inset 0 0 0 1px var(--c-gray-3);
  background: var(--c-white);
}
.stepper__btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--c-gray-7);
  cursor: pointer; font-size: 16px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.stepper__btn:hover { opacity: 0.7; }
.stepper__input {
  width: 56px; height: 40px;
  text-align: center;
  background: transparent; border: 0; outline: none;
  font: inherit; color: var(--c-black);
  font-weight: 500; font-size: 16px; letter-spacing: -0.03em;
}


/* Focus-visible for extension components added late. */
.toolbar__btn:focus-visible,
.file-drop:focus-visible,
.swatch:focus-visible,
.list-item:focus-visible,
.tab:focus-visible,
.pagination__btn:focus-visible,
.reaction:focus-visible,
.tree-node:focus-visible,
.stepper__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-black);
}
/* =========================================================
   Final responsive sweep — narrow viewport polish
   ========================================================= */
@media (max-width: 1100px) {
  .modal--wide { width: calc(100% - 32px); max-width: 1016px; }
}
@media (max-width: 768px) {
  .acct-card__head { align-items: stretch; }
  .acct-card__actions { gap: var(--gap-8); }
  .checkout__body, .checkout__summary { padding: 24px 18px; gap: var(--gap-18); }
  .order-summary { padding: 16px 14px; }
  .modal { padding: 30px 22px 22px; }
  .modal__title { font-size: 20px; line-height: 24px; }
  .bullet-box { padding: 14px 14px; }
  .feature-list .feature { gap: 6px; }
  .pricing-plan { padding: 22px 18px; }
  /* Touch targets ≥ 44px */
  .pay-row__menu { width: 44px; height: 44px; }
  .app-row__copy { min-width: 44px; min-height: 44px; padding: var(--pad-8); }
  .system-info__copy { min-height: 44px; padding: 10px 14px; }
  .pay-add { min-height: 44px; align-items: center; }
  .modal__close { min-width: 44px; min-height: 44px; }
  /* Nav pill stays slim — touch area is the whole pill (~30h × full width), so
     each link doesn't need its own 44px min-height. */
  .nav__link { min-height: 0; }
  .site-footer__link { min-height: 44px; display: inline-flex; align-items: center; }
  .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .app-detail__back { min-height: 44px; padding: 10px 0; align-items: center; }
}
@media (max-width: 520px) {
  .nav { top: 16px; }
  .subpage__main { padding-top: 86px; }
  .acct-intro h1 { font-size: 28px; }
  .modal__actions { flex-direction: column-reverse; align-items: stretch; }
  .modal__actions > * { width: 100%; }
  .pay-row__brand { gap: 10px; }
}
@media (max-width: 360px) {
  .nav__links { gap: 10px; }
  .nav__link { font-size: 13px; padding: 0 2px; }
  .acct-card { padding: 18px 14px; }
  .checkout__body, .checkout__summary { padding: 20px 14px; }
}

/* Smooth modal backdrop fade-in */
.modal-overlay {
  animation: modal-fade-in var(--dur-fast) var(--ease-out);
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-overlay .modal {
  animation: modal-pop-in var(--dur-fast) var(--ease-out);
}
@keyframes modal-pop-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* =========================================================
   Edge-case safeguards
   ========================================================= */

/* Print: strip backgrounds, keep content readable */
@media print {
  body { background: white; color: black; }
  .nav,
  .hero__bg,
  .hero__image::before {
    display: none !important;
  }
  .hero__image { background: white; padding-bottom: 0; }
  .hero__title { color: black; }
  .hero__title-line--muted { color: var(--c-gray-6); }
  [data-reveal],
  .step-card, .app-card, .why-card, .rule {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    page-break-inside: avoid;
  }
  .rule { opacity: 1 !important; }
}

/* Touch devices: bigger tap targets, no hover lifts */
@media (hover: none) {
  .btn--white:hover,
  .btn--black:hover { transform: none; }
  .btn--black:hover { opacity: 1; }
  .nav__link { padding-top: 6px; padding-bottom: 6px; }
}

/* Forced-colors (Windows high contrast) */
@media (forced-colors: active) {
  .step-card, .why-card, .app-card,
  .nav, .rules__visual {
    border: 1px solid CanvasText;
  }
  .btn--white, .btn--black {
    border: 1px solid CanvasText;
  }
}

/* Disable parallax for screenshot/preview contexts that pause JS */
.no-anim [data-reveal],
.no-anim .step-card,
.no-anim .app-card,
.no-anim .why-card,
.no-anim .rule {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Pre-deploy polish: mobile overflow protection for new extension components */
@media (max-width: 768px) {
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs, .toolbar { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar, .toolbar::-webkit-scrollbar { display: none; }
  .sidebar { width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--c-gray-2); }
}
@media (max-width: 520px) {
  /* Hero title line-heights bumped to >= font-size to prevent descender clip when wrapping */
  .hero__title { line-height: 1.05; }
}