/* FellaReviews.com — design tokens copied from Fella's main site
   (src/styles.css). Colors, radius, spacing, and the button component only —
   no page content, no layout beyond a bare skeleton. */

:root {
  --fella-background: #f3f3f3;
  --fella-card: #fafafa;
  --fella-secondary-fill: #eeeeee;
  --fella-button-secondary-fill: #e1e2e5;
  --fella-separator: #d8d8d8;
  --fella-accent: #5260d9;
  --fella-destructive: #ff3b30;
  --fella-success: #34c759;
  --fella-primary-text: #1d1d1f;
  --fella-secondary-text: #8a8a8e;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  --hover-brighten: brightness(1.12);
  --button-font-weight: 300;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fella-background);
  color: var(--fella-primary-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.4;
}

.container {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

/* Nav, copied exactly from the main site's .nav/.nav-inner/.brand/
   .nav-links/.nav-link-accent — sticky, blurred, everything centered as
   one flex group (brand + links share the row via display:contents on
   .nav-links). Trimmed down to just the logo and "Get the app" CTA. */
.nav {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 10;
  /* Solid, same token as body — no translucency/backdrop-filter, since
     saturate() subtly shifts its own tint even over an identical color
     underneath, breaking the match. */
  background: var(--fella-background);
}

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  /* Wider than the main site's var(--space-sm): that nav has 5 links
     filling the row naturally, this one only has the brand + CTA, so a
     tighter gap read as cramped. */
  gap: var(--space-xl);
}

/* Mobile only: the fixed 32px gap between all 4 items (brand, Pricing,
   Support, Get the app) doesn't fit a phone-width row without wrapping,
   and nowrap was letting it overflow instead. Let it wrap onto a second
   line with a tighter gap instead. */
@media (max-width: 640px) {
  .nav-inner {
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: var(--space-md);
    padding: 8px 0;
    min-height: auto;
  }

  .nav-link-support {
    display: none;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: rgba(0, 0, 0, 0.68);
  padding: 6px 10px;
  text-decoration: none;
  transition: color 160ms ease;
}

.brand:hover {
  color: rgba(0, 0, 0, 0.88);
}

.brand-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex: 0 0 auto;
  opacity: 0.68;
  transition: opacity 160ms ease;
  transform: translateY(-1px);
}

.brand:hover .brand-icon {
  opacity: 0.88;
}

.brand span {
  transform: translateY(0.5px);
}

.nav-links {
  display: contents;
  font-size: 14px;
  font-weight: 400;
}

.nav-links a:not(.nav-link-accent) {
  color: rgba(0, 0, 0, 0.68);
  text-decoration: none;
  transition: color 160ms ease;
  transform: translateY(0.5px);
}

.nav-links a:not(.nav-link-accent):hover {
  color: rgba(0, 0, 0, 0.88);
}

.nav-links a.nav-link-accent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  color: #ffffff;
  background: #232326;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  transition: filter 160ms ease;
}

.nav-links a.nav-link-accent:hover {
  color: #ffffff;
  filter: var(--hover-brighten);
}

.nav-link-accent-icon {
  width: 13px;
  height: 13px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
}

.hero-section {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 65px);
  display: flex;
  align-items: center;
  padding: 24px var(--space-lg) 48px;
}

/* Image lives on its own layer, sized to exactly cover the extra space
   .section-white's margin-top pushes open below — so the boxes can move
   down without leaving a flat gray seam, and without touching the box
   that centers the copy (growing that box would recenter the text). */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/assets/images/hero-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.4);
}

.section {
  padding: 64px 0;
}

/* Single pre-composed three-phone shot (home/block/streak, correct
   perspective baked in). Sized by height to fill the section exactly —
   flush to the bottom edge, no gap — instead of width-capped with
   padding around it. Any crop this causes falls on the sides, not top
   or bottom. */
.section-phone {
  padding-top: clamp(32px, 5vw, 52px);
  overflow: hidden;
}

/* Same type scale as .hero-headline, recolored for this section's light
   background instead of the hero's dark photo backdrop. */
.phone-section-headline {
  max-width: 680px;
  margin: 0 auto clamp(24px, 4vw, 40px);
  color: var(--fella-primary-text);
  font-size: clamp(42px, 5vw, 58px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: 0;
  text-wrap: balance;
}

.phone-bleed {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: clamp(380px, 58vh, 560px);
}

/* Mobile only: sized by height like the desktop version, this image was
   rendering far too wide for a phone screen and getting heavily cropped
   on the sides — reads as "zoomed in" rather than shrunk down. Cut the
   height clamp down so it doesn't blow out this section on small
   screens. */
@media (max-width: 640px) {
  .phone-bleed {
    height: clamp(185px, 32vh, 260px);
  }
}

.phone-bleed-img {
  width: auto;
  height: 100%;
  max-width: none;
}

.section-white {
  margin-top: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #ffffff;
}

/* Full-bleed, not capped — so the outer edge gap matches the grid's own
   gap exactly at any viewport width, instead of drifting apart once the
   old max-width container stopped growing. */
.container-wide {
  width: 100%;
  max-width: none;
  padding: 0 10px;
}

/* Apple-style 2x2 showcase grid: rounded cards, alternating light/dark,
   headline + subtext + a filled/outline button pair, with an image slot
   at the bottom (empty for now — real product/screenshot art goes here). */
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.showcase-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 580px;
  padding: 56px 40px 0;
  overflow: hidden;
}

.showcase-card-light {
  background: var(--fella-secondary-fill);
  color: var(--fella-primary-text);
}

.showcase-card-tint {
  background: linear-gradient(to bottom, #8fd3f5, var(--fella-secondary-fill) 90%);
}

.showcase-card-dark {
  background: #0a0a0a;
  color: #ffffff;
}

.showcase-card-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 8px;
}

.showcase-card-sub {
  font-size: 19px;
  font-weight: 300;
  opacity: 0.72;
  margin-bottom: var(--space-lg);
}

.showcase-card .button {
  min-height: 44px;
  padding: 0 20px;
  font-size: 16px;
}

@media (max-width: 860px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }
}

.hero-center {
  text-align: center;
}

/* Hero headline/subtext sizing started from the main site's h1/.lead
   (src/styles.css), sized down and re-toned for this page. */
.hero-headline {
  max-width: 680px;
  margin: 0 auto 18px;
  color: #ffffff;
  font-size: clamp(42px, 5vw, 58px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero-section .button-primary {
  color: #1d1d1f;
  background: #ffffff;
}

.hero-subtext {
  max-width: 640px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.42;
}

/* Mobile only: the hard-coded <br> was tuned for the desktop line break
   and creates an awkward short second line at phone widths. Drop it and
   let the text wrap on its own at this narrower measure. */
@media (max-width: 640px) {
  .hero-subtext-break {
    display: none;
  }
}

.button-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  font-size: 18px;
  font-weight: var(--button-font-weight);
  line-height: 1;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: filter 150ms ease;
  transform: translateZ(0);
}

.button:not(:disabled):active {
  transform: scale(0.97);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  .button:not(:disabled):active {
    transform: none;
  }
}

/* This site's default CTA: solid dark pill, no accent color — matches
   the nav's "Get the app" pill instead of the app's sapphire accent. */
.button-primary {
  color: #ffffff;
  background: #232326;
}

.button-outline {
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
}

@media (hover: hover) {
  .button-outline:hover {
    background: rgba(128, 128, 128, 0.1);
  }
}

.button-secondary {
  color: var(--fella-primary-text);
  background: var(--fella-button-secondary-fill);
}

@media (hover: hover) {
  .button-primary:hover {
    filter: none;
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.1);
  }

  .button-secondary:hover {
    filter: none;
    box-shadow: inset 0 0 0 999px rgba(29, 29, 31, 0.045);
  }
}

.card {
  background: var(--fella-card);
  border: 1px solid var(--fella-separator);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-xl) 0;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  font-size: 14px;
}

.site-footer-links a {
  color: var(--fella-secondary-text);
  text-decoration: none;
  transition: color 160ms ease;
}

.site-footer-links a:hover {
  color: var(--fella-primary-text);
}

.site-footer-copy {
  margin: 0;
  font-size: 13px;
  color: var(--fella-secondary-text);
}

/* Editorial article pages (the 4 story pages + the main review) — plain
   prose flow, no cards or grid. Narrower measure than the marketing
   sections above since this is copy meant to be read, not scanned. */
.article {
  padding: 56px 0 96px;
}

.article-container {
  width: min(680px, calc(100% - 48px));
  margin: 0 auto;
}

.article-back {
  margin: 0 0 24px;
  font-size: 14px;
}

.article-back a {
  color: var(--fella-secondary-text);
  text-decoration: none;
}

.article-back a:hover {
  color: var(--fella-primary-text);
}

.article-title {
  margin: 0 0 16px;
  font-size: clamp(42px, 5vw, 58px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--fella-primary-text);
}

.article-lead {
  margin: 0 0 40px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--fella-primary-text);
}

.article-body h2 {
  margin: 48px 0 16px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--fella-primary-text);
}

.article-body h3 {
  margin: 32px 0 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fella-primary-text);
}

/* Same weight/size as the site's subtext style (.hero-subtext,
   .showcase-card-sub) rather than default body text, so the article
   copy reads consistently with everything else instead of looking
   smaller or heavier than it. */
.article-body p {
  margin: 0 0 20px;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--fella-primary-text);
}

.article-body ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.article-body li {
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 8px;
}

.article-cta {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--fella-separator);
}