/* Shared stylesheet for the marketing site (/, /product, /pricing) — kept
   separate from style.css, which is the app's own stylesheet (shared with
   the native build via ios:prepare). Nothing here is ever bundled into the
   native app, and nothing in style.css is referenced here, so neither can
   accidentally affect the other. */

:root {
  --cream: #f5f4ed;
  --card-bg: #faf9f5;
  --border: #e6e3d8;
  --border-2: #f0eee6;
  --dark: #141413;
  --dark-2: #1f1f1d;
  --dark-3: #30302e;
  --accent: #c96442;
  --accent-2: #d97757;
  --text: #141413;
  --muted: #5e5d59;
  --muted-2: #87867f;
  --muted-3: #b0aea5;
  --serif: 'Source Serif 4', Georgia, serif;
  --jp: 'Noto Serif JP', serif;
  --sans: Geist, system-ui, sans-serif;
}

* { box-sizing: border-box; }
/* overflow-x: hidden is a safety net, not the real fix — it stops any
   stray element from creating page-level horizontal scroll, but the
   actual overflow bugs (grid tracks refusing to shrink below their
   content's natural width) are fixed at the source further below. */
html, body { margin: 0; background: var(--cream); font-family: var(--sans); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------------
   Nav
   --------------------------------------------------------------------- */
.nav {
  max-width: 1120px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 28px;
}
.nav .brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
/* Two-tone lettermark on a solid black icon tile — a dark-gray "Aa" tile
   top-right overlapping an accent "語" tile bottom-left, both inset with
   visible black margin around them, exactly as in the source design
   (web_design/) — proportions and colors taken directly from its decoded
   markup (a 240x240 black square at 0.1417 scale containing a centered
   166x130 two-tile cluster). */
/* Unscoped (not ".nav .mark") so this same lettermark can be reused
   inside the web-channel mockups' own nav bar (.webmock-nav), not just
   the page's real nav — it was missing there because these rules were
   previously only ever matched inside .nav. */
.mark {
  width: 34px; height: 34px; border-radius: 9px; background: #141413; overflow: hidden;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mark-inner { position: relative; width: 24px; height: 18px; }
.mark-inner i { position: absolute; width: 16px; height: 12px; border-radius: 2px; display: flex; font-style: normal; box-sizing: border-box; }
.mark-inner i:first-child { top: 0; right: 0; background: #3a3936; align-items: flex-start; justify-content: flex-end; padding: 1px 2px; font-family: var(--serif); font-weight: 500; font-size: 6px; color: #b0aea5; }
.mark-inner i:last-child { bottom: 0; left: 0; background: var(--accent-2); align-items: center; justify-content: center; font-family: var(--jp); font-weight: 500; font-size: 7px; color: #f5f4ed; }
.nav .word { font-family: var(--serif); font-size: 13px; line-height: 1.25; font-weight: 600; letter-spacing: -.2px; }
.nav .links { display: flex; gap: 22px; font-size: 14px; color: var(--muted); }
.nav .links a:hover { color: var(--text); }
.nav .nav-actions { display: flex; align-items: center; gap: 16px; }
.nav .login-link { font-size: 14px; color: var(--muted); }
.nav .login-link:hover { color: var(--text); }
.nav .cta {
  padding: 10px 20px; border-radius: 9999px; background: var(--accent); color: #faf9f5;
  font-size: 13.5px; font-weight: 500;
}
.nav .cta:hover { background: var(--accent-2); }
/* Hamburger button + full-screen mobile menu — on mobile there was
   previously no way at all to reach Product/Pricing/Support/Log in once
   .nav .links was hidden below this breakpoint; this replaces that gap
   with the same pattern as mobile_design/: a sticky header with just the
   logo + a toggle button, opening a full-screen menu with large links
   and both app CTAs. */
.nav-burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; flex: none; background: none; border: none; padding: 0; cursor: pointer; }
.nav-burger .icon-close { display: none; }
body.menu-open .nav-burger .icon-burger { display: none; }
body.menu-open .nav-burger .icon-close { display: block; }
.mobile-menu { display: none; }
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu {
  display: flex; flex-direction: column;
  position: fixed; inset: 0; z-index: 40;
  background: var(--cream); padding: 90px 24px 40px; overflow-y: auto;
}
.mobile-menu a.menu-link { font-family: var(--serif); font-size: 28px; padding: 14px 0; border-bottom: 1px solid var(--border-2); color: var(--text); }
.mobile-menu a.menu-login { font-size: 16px; color: var(--muted); padding: 16px 0; }
.mobile-menu .menu-btn { margin-top: 6px; }
.mobile-menu .dark-btn, .mobile-menu .cta-big { display: flex; width: 100%; box-sizing: border-box; justify-content: center; height: 52px; margin-top: 0; }
@media (max-width: 760px) {
  .nav .links, .nav .nav-actions { display: none; }
  .nav-burger { display: flex; }
  .nav { position: sticky; top: 0; z-index: 50; background: var(--cream); }
}

/* ---------------------------------------------------------------------
   Shared bits: eyebrow label, chips, pill buttons, section headers
   --------------------------------------------------------------------- */
.ovl { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-3); margin-bottom: 10px; }
.ovl.light { color: var(--muted-3); }
h1, h2 { font-family: var(--serif); letter-spacing: -.3px; margin: 0; }
.chip {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 9999px;
  background: var(--card-bg); border: 1px solid var(--border-2); font-size: 13px; color: var(--muted);
}
.cta-big {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; padding: 15px 28px;
  border-radius: 9999px; background: var(--accent); color: #faf9f5; font-size: 15.5px; font-weight: 500;
}
.cta-big:hover { background: var(--accent-2); }
.dark-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 9999px;
  background: var(--dark); color: var(--cream); font-size: 14.5px; font-weight: 500;
}
.dark-btn:hover { background: var(--dark-2); }
.ghost-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 9999px;
  background: transparent; border: 1px solid var(--border); color: var(--text); font-size: 14.5px; font-weight: 500;
}
.ghost-btn:hover { border-color: var(--muted-3); }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
  max-width: 1120px; margin: 0 auto; padding: 48px 24px 72px;
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center;
}
.hero h1 { font-size: 46px; line-height: 1.12; }
.hero .sub { margin: 18px 0 24px; font-size: 16.5px; line-height: 1.65; color: var(--muted); max-width: 46ch; }
.hero .chip-group .ovl { margin-bottom: 10px; }
.hero .chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 860px) {
  /* Below 860px .chip-group becomes a direct item of .hero's grid (see
     the reorder block further down). Its grid-item automatic minimum
     size would otherwise be the un-wrapped sum of every chip's width
     (the mobile .chips rule below sets flex-wrap: nowrap so the chip
     strip can scroll horizontally instead) — min-width: 0 lets the
     grid track actually shrink to the viewport, same fix as the
     .webmock-body sidebar overflow bug elsewhere in this file. */
  .hero .chip-group { min-width: 0; }
}
.stats { display: flex; gap: 32px; margin-top: 40px; }
.stats strong { display: block; font-family: var(--serif); font-size: 22px; color: var(--text); }
.stats span { font-size: 12.5px; color: var(--muted-2); }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 24px; }
  .hero h1 { font-size: 36px; }
  /* Reorder content for mobile (per mobile_design/mobile-home-6b.html):
     CTAs come right after the subhead, before the device mockup — not
     after it. display: contents makes .hero-copy/.hero-art "disappear"
     for layout purposes so their children become direct grid items of
     .hero, each individually placed via order, rather than staying
     fixed in each wrapper's own internal sequence. */
  /* gap: 0 because .hero now has 8 direct grid items instead of 2 once
     .hero-copy/.hero-art collapse below — the 48px gap meant for a
     2-column layout would otherwise apply 7 times over, between every
     reordered section. Spacing between sections is set explicitly per
     element instead. */
  .hero { gap: 0; }
  .hero-copy, .hero-art { display: contents; }
  .hero .ovl { order: 1; }
  .hero h1 { order: 2; margin-top: 12px; }
  .hero .sub { order: 3; margin-top: 16px; }
  .hero-channels { order: 4; margin-top: 24px; }
  .hero-mock-wrap { order: 5; margin-top: 28px; }
  .hero .chip-group { order: 6; margin-top: 28px; }
  .hero .cta-big { order: 7; margin-top: 24px; }
  .hero .stats { order: 8; margin-top: 32px; }
  /* Both download/open-web-app buttons should read as equal-weight
     choices on a phone — side by side they sized to their own text
     ("Download on the App Store" vs "Open the web app"), which looked
     mismatched. Stacked and full-width matches mobile_design/. */
  .hero-channel-ctas { flex-direction: column; align-items: stretch; }
  .hero-channel-ctas .dark-btn, .hero-channel-ctas .cta-big { width: 100%; box-sizing: border-box; justify-content: center; }
}

/* Phone mockup — matches the real review-screen proportions used in the
   source design (a 306x663 bezel wrapping a 393x852 iPhone screen, i.e.
   aspect-ratio ~1:2.17 — tall and narrow, not a stubby rounded square). */
/* container-type lets every font-size below scale with the phone's own
   rendered width via cqw units — needed because this one component gets
   reused at very different sizes (a ~130px hero overlay, a ~280-306px
   standalone showcase). Fixed px font-sizes looked fine at the original
   306px size but caused the Japanese text to wrap one character per
   line at hero scale, which in turn forced the whole card to overflow
   its flex container (flex items don't shrink below their content's
   intrinsic size unless min-height is reset). Ratios below are all
   taken from the original 306px-wide design (e.g. 22px / 306px jp
   font-size = 7.2cqw), so sizing is unchanged at that reference width.
   min-height: 0 on the flex children is the other half of the fix. */
/* Padding lives on .phone-inner (a child), not .phone-frame itself
   (the container): percentage padding always resolves against the
   CONTAINING BLOCK's width, not the padded element's own width. Since
   .phone-frame is absolutely positioned inside the much wider
   .hero-mock-wrap at hero scale, percentage padding directly on it was
   computed against 480px instead of its own ~130px, consuming nearly
   half its interior space before any content even rendered. cqw units
   on a non-container child avoid this (and avoid the circular
   dependency that comes from a container sizing its own padding from
   its own query units). */
.phone-frame {
  background: var(--dark); border-radius: 13%/6%;
  width: 100%; max-width: 306px; aspect-ratio: 306 / 663;
  margin: 0 auto; box-shadow: 0 30px 70px rgba(0,0,0,.22);
  box-sizing: border-box; overflow: hidden;
  container-type: inline-size;
}
.phone-inner { height: 100%; padding: 7cqw 6cqw 8cqw; display: flex; flex-direction: column; box-sizing: border-box; }
.phone-topbar { display: flex; align-items: center; gap: 3.3cqw; color: #faf9f5; margin-bottom: 5%; flex: none; }
.phone-topbar .dot-close { width: 8.5cqw; height: 8.5cqw; border-radius: 9999px; background: rgba(250,249,245,.1); display: flex; align-items: center; justify-content: center; font-size: 3.6cqw; flex: none; }
.phone-topbar .progress { flex: 1; height: 1.3cqw; border-radius: 9999px; background: rgba(250,249,245,.13); overflow: hidden; }
.phone-topbar .progress i { display: block; height: 100%; background: var(--accent); }
.phone-topbar .count { font-size: 3.6cqw; color: #b0aea5; white-space: nowrap; }
.review-card { background: var(--card-bg); border-radius: 7.2cqw; padding: 7.8cqw 6.5cqw; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; gap: 3.3cqw; position: relative; overflow: hidden; }
.review-card .jp { font-family: var(--jp); font-size: 7.2cqw; color: var(--text); line-height: 1.3; }
.review-card .jp rt { font-size: .5em; }
.review-card .romaji { font-size: 4.1cqw; color: var(--muted); white-space: nowrap; }
/* The hero's mockup is much smaller than the standalone ~280-306px uses
   (product page) and deliberately shows a short phrase, so it can afford
   — and needs, for legibility — a much larger ratio than the shared one
   above, which is tuned for longer sentences at the bigger sizes. The
   source design sizes each mockup instance independently rather than
   scaling one ratio uniformly; this mirrors that. */
/* Left-alignment is now the shared .review-card default (matches the
   real app's actual layout everywhere this mockup is reused) — only the
   font size needs its own value here, dialed back down from an earlier
   pass that overshot at this mockup's small scale. */
.hero-mock-wrap .review-card .jp { font-size: 8.5cqw; }
.hero-mock-wrap .review-card .romaji { font-size: 4cqw; }
.card-foot { position: absolute; left: 6.5cqw; right: 6.5cqw; bottom: 6.5cqw; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.play-pill { display: inline-flex; align-items: center; gap: 2px; padding: 2.6cqw 4.2cqw; border-radius: 9999px; background: #f5f4ed; font-size: 3.6cqw; color: var(--muted); white-space: nowrap; flex: none; }
.tapflip { font-size: 3.6cqw; color: var(--muted-3); white-space: nowrap; }
.phone-actions { display: flex; gap: 2.6cqw; margin-top: 5%; flex: none; }
.phone-actions span { flex: 1; text-align: center; padding: 4.2cqw 2cqw; border-radius: 3.9cqw; font-size: 4.2cqw; font-weight: 500; }
.phone-actions .again { background: rgba(250,249,245,.06); border: 1px solid rgba(250,249,245,.16); color: #faf9f5; }
.phone-actions .good { background: var(--accent); color: #faf9f5; }

/* ---------------------------------------------------------------------
   Hero device showcase — browser mockup (web channel) layered behind the
   phone mockup (iOS), matching the source design's composition; the
   "one account, two channels" caption and CTAs sit directly underneath,
   inside the same hero column — not a separate section below the hero.
   --------------------------------------------------------------------- */
/* Both mockups positioned absolutely within a wrap whose own aspect
   ratio is fixed (610:365) — measured directly off a real render of the
   source design file, not estimated. This is what the earlier percentage
   attempt got wrong: percentages there were relative to a wrap whose
   height came only from the browser mockup's content, so the much taller
   phone shot upward past it. Here the wrap's box is defined up front,
   so both children's percentages resolve against the same fixed frame. */
/* Kept as a single layered composition (browser + phone) at every size,
   including mobile — .hero-mock-wrap's width is always 100% of its
   grid column, so the fixed 610:365 ratio just scales the whole thing
   down uniformly rather than needing a separate flattened mobile
   layout. What used to clip the mobile version wasn't the ratio itself,
   it was the browser-frame's interior (nav/sidebar/card) being sized in
   fixed px tuned only for the ~467px desktop width; those are now cqw
   (relative to .browser-frame's own container width, see below), so
   they shrink along with the frame instead of overflowing it. */
/* min-width: 0 — without it, a grid item with a fixed aspect-ratio and
   only absolutely-positioned children still computes a sizable
   automatic minimum size from that ratio, which forced .hero's whole
   1fr column (and therefore every other hero item) wider than the
   viewport once .hero-copy/.hero-art collapse into direct grid items
   below 860px. Same root cause/fix as the earlier .webmock-body
   overflow bug — grid items default to min-width: auto, not 0. */
.hero-mock-wrap { position: relative; width: 100%; max-width: 620px; aspect-ratio: 610 / 365; margin: 0 auto; min-width: 0; }
.hero-mock-wrap .browser-frame { position: absolute; left: 0; top: 12.9%; width: 75.4%; height: 87.1%; max-width: none; }
.hero-mock-wrap .phone-frame { position: absolute; left: 73%; bottom: 0; width: 27%; height: 94.2%; max-width: none; aspect-ratio: auto; box-shadow: 0 18px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06); }
.hero-channels { margin-top: 32px; text-align: center; }
.hero-channels p { font-size: 14.5px; color: var(--muted); margin: 18px 0 0; }
.hero-channel-ctas .dark-btn, .hero-channel-ctas .cta-big { padding: 16px 28px; font-size: 16px; gap: 10px; margin-top: 0; }
.hero-channel-ctas svg { width: 18px; height: 18px; }
.hero-channel-ctas { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Dark Community showcase
   --------------------------------------------------------------------- */
.community { background: var(--dark); color: #faf9f5; padding: 64px 48px; }
.community-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 34px; }
.community-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.community h2 { font-size: 38px; color: #faf9f5; max-width: 520px; margin: 0; }
.community .sub.light { color: #b0aea5; max-width: 380px; font-size: 16.5px; margin: 0; }
.tag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tag-card { background: #1f1f1d; border: 1px solid #30302e; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.tag-card .tag-name { font-family: var(--serif); font-size: 19px; color: #faf9f5; }
.tag-card .tag-by { font-size: 12.5px; color: #87867f; }
.tag-card .tag-lang { align-self: flex-start; font-size: 11.5px; padding: 3px 10px; border-radius: 9999px; background: #30302e; color: #f5f4ed; }
.tag-card .tag-cards { font-size: 12.5px; color: #b0aea5; margin-top: 8px; }
.tag-card .tag-downloads { font-size: 12.5px; color: var(--accent-2); font-weight: 500; }
@media (max-width: 860px) {
  .tag-grid { grid-template-columns: repeat(2, 1fr); }
  .community-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .community h2 { font-size: 26px; }
}
@media (max-width: 600px) {
  /* Horizontal scroll strip on phones (per mobile_design/) rather than
     a cramped 2-column grid. */
  .tag-grid { display: flex; grid-template-columns: none; overflow-x: auto; margin: 0 -24px; padding: 0 24px 4px; scrollbar-width: none; }
  .tag-grid::-webkit-scrollbar { display: none; }
  .tag-card { flex: 0 0 240px; }
  /* Same scroll-strip treatment for the hero's "Built for" chips, also
     per mobile_design/, instead of wrapping to several rows. */
  .hero .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px; padding: 0 24px 4px; scrollbar-width: none; }
  .hero .chips::-webkit-scrollbar { display: none; }
  .hero .chip { flex: none; }
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.foot {
  max-width: 1120px; margin: 0 auto; padding: 56px 24px 60px;
  display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 24px;
  border-top: 1px solid var(--border-2);
}
.foot-col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-3); margin: 0 0 12px; font-weight: 500; }
.foot-col a { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 9px; }
.foot-col a:hover { color: var(--text); }
.foot-brand { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 4px; }
.foot-brand span { font-size: 13.5px; color: var(--muted); }
.foot-brand p { font-size: 13.5px; color: var(--muted-2); margin: 0; }
@media (max-width: 760px) {
  .foot { grid-template-columns: repeat(2, 1fr); }
  .foot-brand { grid-column: span 2; align-items: flex-start; }
}

/* ---------------------------------------------------------------------
   Product page
   --------------------------------------------------------------------- */
.product-hero { max-width: 760px; margin: 0 auto; padding: 48px 24px 36px; text-align: center; }
.product-hero h1 { font-size: 38px; }
.product-hero .sub { max-width: 52ch; margin: 16px auto 0; font-size: 16px; color: var(--muted); line-height: 1.6; }

.seg { display: inline-flex; margin: 28px auto 0; padding: 4px; background: var(--card-bg); border: 1px solid var(--border-2); border-radius: 9999px; }
.seg button {
  font: inherit; border: none; cursor: pointer; padding: 9px 22px; border-radius: 9999px;
  background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 500;
}
.seg button.on { background: var(--dark); color: #faf9f5; }

/* 760px is the web mockup's exact measured width in the source design
   (web_design/product-page-7b.html's .bw element) — a fixed track
   instead of an fr-ratio so the mockup actually reaches that size
   regardless of how much room the text column needs, which is
   deliberately narrow here (per explicit request) to make room for it. */
.showcase { max-width: 1120px; margin: 0 auto; padding: 0 24px 72px; display: grid; grid-template-columns: 760px 1fr; gap: 40px; align-items: center; }
/* min-width: 0 overrides a grid item's default min-width:auto, which
   otherwise refuses to shrink a track below its content's natural
   width — the actual cause of the mobile overflow bug this fixes (the
   mockup was measuring ~477px wide inside a 390px real-device viewport,
   not the ~350px its grid track should have resolved to). */
.showcase .mockwrap, .showcase .col { min-width: 0; }
.showcase .col { display: none; }
.showcase .col.on { display: block; }
/* Each mockup needs its own display type when shown (phone-frame is a flex
   column, browser-frame is a plain block) — a single shared ".mock.on"
   rule would win over phone-frame's own "display:flex" by specificity
   (two classes beats one) and silently break its whole internal layout. */
.showcase .mock { display: none; }
#mock-ios.on { display: flex; }
#mock-web.on { display: block; }
.showcase h2 { font-size: 28px; }
.showcase .sub { margin: 14px 0 22px; font-size: 15px; color: var(--muted); line-height: 1.65; }
.feat-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.feat-list li { font-size: 14.5px; color: var(--text); display: flex; align-items: center; gap: 11px; }
.feat-list li svg { flex-shrink: 0; }
@media (max-width: 860px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase .mockwrap { order: -1; }
}

/* padding/chrome sizing below is cqw, not px — relative to this frame's
   own rendered width (container-type: inline-size), with 760px (the
   showcase's fixed desktop track width, its reference size) as 100cqw.
   That lets the product page's mock scale smoothly down to whatever a
   phone viewport leaves it, rather than needing a breakpoint of its
   own: the product page's own grid column goes from a fixed 760px to
   1fr below 860px, so without this the frame would just overflow (or
   previously, needed the @container simplification below to stay
   legible at all — see the hero's override further down for why
   neither mock wants that simplification instead). */
.browser-frame { background: var(--card-bg); border: 1px solid var(--border-2); border-radius: 16px; padding: 2.63cqw; box-shadow: 0 20px 50px rgba(0,0,0,.08); overflow: hidden; container-type: inline-size; min-width: 0; }
.browser-frame .chrome { display: flex; align-items: center; gap: .92cqw; margin-bottom: 2.11cqw; }
.browser-frame .chrome i { width: 1.32cqw; height: 1.32cqw; border-radius: 9999px; background: var(--border); flex: none; }
.browser-frame .chrome .url { flex: 1; margin-left: 1.05cqw; background: #fff; border-radius: 9999px; padding: .92cqw 2.11cqw; font-size: 1.71cqw; color: var(--muted-2); }
.browser-frame .body { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.browser-frame .side { background: #fff; border-radius: 10px; padding: 10px; font-size: 11px; color: var(--muted); }
.browser-frame .side .row { padding: 6px 4px; border-radius: 6px; margin-bottom: 2px; }
.browser-frame .side .row.on { background: var(--cream); color: var(--text); font-weight: 500; }
.browser-frame .main { background: var(--dark); border-radius: 10px; padding: 14px; color: #faf9f5; }
.browser-frame .main .lbl { font-size: 10px; color: #b0aea5; text-transform: uppercase; letter-spacing: .06em; }
.browser-frame .main .num { font-family: var(--serif); font-size: 20px; margin: 4px 0 10px; }
.browser-frame .main .kbd { font-size: 10px; color: #87867f; display: flex; gap: 10px; }

/* Detailed "On the web" mockup for the product page — a full app chrome
   (nav tabs, session sidebar with due counts, review card, keyboard-key
   hints), matching web_design/product-page-7b.html's actual rendered
   layout rather than the simplified hero-only version above. */
/* Base sizing here matches web_design/product-page-7b.html's actual
   measured proportions at its real 760x456 size (nav tab font 15px,
   sidebar row font 14px, etc. — measured directly via Playwright against
   a real render, not estimated). .hero-mock-wrap overrides these back
   down further below, since that's a much smaller, compact instance of
   the same mockup, not the reference size. */
.webmock-nav { display: flex; align-items: center; gap: 2.63cqw; padding-bottom: 1.84cqw; border-bottom: 1px solid var(--border-2); margin-bottom: 2.11cqw; }
.webmock-nav .brand-mini { display: flex; align-items: center; gap: 1.18cqw; margin-right: auto; }
.webmock-nav .brand-mini .mark { width: 2.89cqw; height: 2.89cqw; border-radius: .79cqw; }
.webmock-nav .brand-mini .mark .mark-inner { width: 1.97cqw; height: 1.58cqw; }
.webmock-nav .brand-mini .mark-inner i { width: 1.32cqw; height: .99cqw; border-radius: .2cqw; font-size: .53cqw; }
.webmock-nav .brand-mini span { font-family: var(--serif); font-size: 1.45cqw; font-weight: 600; line-height: 1.2; color: var(--text); }
.webmock-tabs { display: flex; gap: 2.63cqw; font-size: 1.97cqw; color: var(--muted); }
.webmock-tabs .on { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.webmock-nav .actions { display: flex; align-items: center; gap: 1.32cqw; }
.webmock-nav .newcard { font-size: 1.71cqw; padding: .92cqw 1.84cqw; border-radius: 9999px; border: 1px solid var(--border); color: var(--text); }
.webmock-nav .avatar { width: 3.42cqw; height: 3.42cqw; border-radius: 9999px; background: var(--border-2); display: flex; align-items: center; justify-content: center; font-size: 1.32cqw; color: var(--muted); }
.webmock-body { display: grid; grid-template-columns: 25cqw 1fr; gap: 2.63cqw; min-width: 0; }
.webmock-body > * { min-width: 0; }
.webmock-side .lbl { font-size: 1.45cqw; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-3); margin-bottom: 1.05cqw; }
.webmock-side .row { display: flex; justify-content: space-between; padding: 1.18cqw 1.32cqw; border-radius: .92cqw; font-size: 1.84cqw; color: var(--text); margin-bottom: .26cqw; }
.webmock-side .row span:last-child { color: var(--muted-2); }
.webmock-side .row.on { background: var(--cream); }
.webmock-side .keys { margin-top: 3.42cqw; }
.webmock-side .keys-row { display: flex; align-items: center; gap: 1.05cqw; margin-bottom: .79cqw; font-size: 1.58cqw; color: var(--muted); }
.webmock-side .key { padding: .53cqw 1.18cqw; border-radius: .66cqw; background: var(--cream); border: 1px solid var(--border-2); font-size: 1.45cqw; color: var(--text); }
.webmock-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.32cqw; font-size: 1.71cqw; color: var(--muted); }
.webmock-meta .bar { flex: 1; height: .39cqw; border-radius: 9999px; background: var(--border-2); margin: 0 1.84cqw; overflow: hidden; }
.webmock-meta .bar i { display: block; height: 100%; width: 40%; background: var(--accent); }
.webmock-card { background: var(--card-bg); border-radius: 1.58cqw; padding: 3.42cqw; min-height: 34.21cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.05cqw; position: relative; }
.webmock-card .jp { font-family: var(--jp); font-size: 3.16cqw; color: var(--text); }
.webmock-card .romaji { font-size: 1.71cqw; color: var(--muted); }
.webmock-card .play-pill { margin-top: .79cqw; font-size: 1.58cqw; padding: .92cqw 1.84cqw; }
.webmock-card .hint { position: absolute; bottom: 1.58cqw; font-size: 1.45cqw; color: var(--muted-3); }
.webmock-actions { display: flex; gap: 1.32cqw; margin-top: 1.84cqw; }
.webmock-actions span { flex: 1; display: flex; align-items: center; justify-content: center; gap: .92cqw; padding: 1.58cqw; border-radius: 1.18cqw; font-size: 1.84cqw; font-weight: 500; }
.webmock-actions .again { background: var(--border-2); color: var(--text); }
.webmock-actions .good { background: var(--accent); color: #faf9f5; }

/* Earlier versions of this file simplified the web mockup (hiding the
   nav row and sidebar) whenever its own rendered width got narrow,
   since that happens on both the hero's always-small instance and the
   product page's once a phone viewport squeezes its fixed 760px track
   down. Removed: on request, both should look exactly like the full
   desktop mockup, just proportionally smaller — not a reduced version.
   All the sizing above and below is cqw rather than fixed px for
   exactly this reason, so it scales down cleanly instead of needing a
   breakpoint-specific simplified layout. */

/* Compact override for the hero's much smaller layered mockup. Values
   are cqw (relative to .browser-frame's own container width, ~467px at
   the 620px desktop max-width — container-type: inline-size is set on
   .browser-frame itself) rather than fixed px, so the whole mock's
   interior scales down with it at any width instead of overflowing
   once the frame gets smaller than that reference size, e.g. on a
   phone. ~3cqw at the 467px reference equals the old 14px, and so on. */
.hero-mock-wrap .browser-frame { padding: 3cqw; }
.hero-mock-wrap .browser-frame .chrome { gap: 1.28cqw; margin-bottom: 2.57cqw; }
.hero-mock-wrap .browser-frame .chrome .url { margin-left: 1.28cqw; padding: 1.07cqw 2.57cqw; font-size: 2.25cqw; }
.hero-mock-wrap .webmock-nav { gap: 3.42cqw; padding-bottom: 2.14cqw; margin-bottom: 2.14cqw; }
.hero-mock-wrap .webmock-nav .brand-mini { gap: 1.5cqw; }
.hero-mock-wrap .webmock-nav .brand-mini span { font-size: 1.82cqw; }
.hero-mock-wrap .webmock-tabs { gap: 3cqw; font-size: 2.46cqw; }
.hero-mock-wrap .webmock-nav .newcard { font-size: 2.25cqw; padding: 1.07cqw 2.14cqw; }
.hero-mock-wrap .webmock-nav .avatar { width: 4.28cqw; height: 4.28cqw; font-size: 1.71cqw; }
.hero-mock-wrap .webmock-body { gap: 3cqw; grid-template-columns: .85fr 1.5fr; }
.hero-mock-wrap .webmock-side .lbl { font-size: 1.93cqw; margin-bottom: 1.28cqw; }
.hero-mock-wrap .webmock-side .row { padding: 1.5cqw 1.71cqw; font-size: 2.25cqw; margin-bottom: .43cqw; }
.hero-mock-wrap .webmock-side .keys { margin-top: 4.28cqw; }
.hero-mock-wrap .webmock-side .keys-row { gap: 1.28cqw; margin-bottom: .86cqw; font-size: 2.14cqw; }
.hero-mock-wrap .webmock-side .key { padding: .64cqw 1.5cqw; font-size: 2.03cqw; }
.hero-mock-wrap .webmock-meta { margin-bottom: 1.71cqw; font-size: 2.25cqw; }
.hero-mock-wrap .webmock-meta .bar { margin: 0 2.14cqw; }
.hero-mock-wrap .webmock-card { padding: 3.85cqw; min-height: 30cqw; gap: 1.28cqw; }
.hero-mock-wrap .webmock-card .jp { font-size: 3.64cqw; }
.hero-mock-wrap .webmock-card .romaji { font-size: 2.25cqw; }
.hero-mock-wrap .webmock-card .play-pill { margin-top: 1.28cqw; font-size: 2.14cqw; padding: 1.07cqw 2.14cqw; }
.hero-mock-wrap .webmock-card .hint { bottom: 1.71cqw; font-size: 1.93cqw; }
.hero-mock-wrap .webmock-actions { gap: 1.71cqw; margin-top: 2.14cqw; }
.hero-mock-wrap .webmock-actions span { gap: 1.28cqw; padding: 1.93cqw; font-size: 2.35cqw; }

.compare { background: var(--dark); color: #faf9f5; padding: 72px 24px; }
.compare > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.compare h2 { text-align: center; font-size: 28px; color: #faf9f5; margin-bottom: 30px; }
.compare table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare th { text-align: left; font-weight: 500; color: #87867f; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 0 0 14px; }
.compare th:not(:first-child), .compare td:not(:first-child) { text-align: center; }
.compare td { padding: 16px 0; border-top: 1px solid var(--dark-3); }
.compare td.yes { color: var(--accent-2); font-weight: 600; }
.compare td.no { color: #514c42; }

/* ---------------------------------------------------------------------
   Pricing page
   --------------------------------------------------------------------- */
.pricing-hero { max-width: 640px; margin: 0 auto; padding: 48px 24px 8px; text-align: center; }
.pricing-hero h1 { font-size: 38px; }
.pricing-hero .sub { margin: 14px 0 0; font-size: 15.5px; color: var(--muted); }

.plans { max-width: 1120px; margin: 36px auto 0; padding: 0 24px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* display:flex + margin-top:auto on the CTA pushes it to the bottom of
   the card — grid rows stretch both cards to equal height by default,
   but without this the button just sits wherever its own card's
   (shorter) content ends, landing at a different height than the other
   card's button instead of lining up with it. */
.plan { border-radius: 22px; padding: 30px 26px; display: flex; flex-direction: column; }
.plan .plan-cta { margin-top: auto; }
.plan.basic { background: var(--card-bg); border: 1px solid var(--border-2); }
.plan.premium { background: var(--dark); color: #faf9f5; }
.plan .tier { font-size: 13px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .06em; }
.plan.premium .tier { color: #b0aea5; }
.plan .price { font-family: var(--serif); font-size: 34px; margin: 10px 0 4px; }
.plan .price-note { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.plan.premium .price-note { color: #87867f; }
.plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.plan li { font-size: 14px; display: flex; gap: 9px; align-items: flex-start; }
.plan li.off { color: var(--muted-3); }
.plan.premium li.off { color: #514c42; }
.plan li svg { flex-shrink: 0; margin-top: 2px; }
.plan .plan-cta { display: block; text-align: center; padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 500; }
.plan.basic .plan-cta { background: var(--border-2); color: var(--text); }
.plan.premium .plan-cta { background: var(--accent); color: #faf9f5; }
.plan-foot { text-align: center; font-size: 12px; color: var(--muted-2); margin-top: 12px; }
.plan.premium .plan-foot { color: #87867f; }
@media (max-width: 760px) {
  .plans { grid-template-columns: 1fr; }
  /* Premium leads on mobile (per mobile_design/mobile-pricing-8a.html) —
     a deliberate choice to show the paid plan first once space forces a
     single column, not just a side effect of DOM order. */
  .plan.premium { order: 1; }
  .plan.basic { order: 2; }
}

.trust { max-width: 1120px; margin: 0 auto; padding: 0 24px 72px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trust-item h3 { font-size: 15px; margin: 0 0 8px; }
.trust-item p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }
@media (max-width: 760px) {
  .trust { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Content pages — Support / Terms / Privacy
   --------------------------------------------------------------------- */
.legal-wrap { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
.legal-wrap .ovl { margin-top: 4px; }
.legal-wrap h1 { font-size: 32px; margin: 4px 0 6px; }
.legal-wrap .updated { font-size: 13px; color: var(--muted-3); margin-bottom: 40px; }
.legal-wrap .lede { font-size: 15.5px; color: var(--muted); margin-bottom: 36px; }
.legal-wrap h2 { font-family: var(--serif); font-size: 20px; margin: 40px 0 10px; }
.legal-wrap p, .legal-wrap li { font-size: 15px; line-height: 1.7; color: var(--muted); }
.legal-wrap ul { padding-left: 20px; }
.legal-wrap .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 18px 22px; margin-bottom: 16px; }
.legal-wrap .card:last-of-type { margin-bottom: 0; }
.legal-wrap .contact { background: var(--dark); color: #faf9f5; border-radius: 16px; padding: 24px; margin-top: 32px; }
.legal-wrap .contact h2 { color: #faf9f5; margin-top: 0; }
.legal-wrap .contact a { color: var(--accent-2); }