/* ==========================================================================
   feedcast.org design system

   Every page loads this file and it owns every component more than one page
   could want. A page that needs something nobody else does gets its own
   stylesheet next to this one (home.css, changelog.css) rather than a block
   of inline styles. DESIGN.md explains the tokens and the components.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------
   Colour, type, space and shape. Nothing below this block invents a value.
   -------------------------------------------------------------------------- */
:root {
  /* Magenta is Feedcast itself. Yellow marks Premium, and nothing else. */
  --accent: #cb30e0;
  --accent-bright: #e24bf2;
  --accent-deep: #a31fc0;
  --accent-soft: rgba(203, 48, 224, 0.12);
  --accent-line: rgba(203, 48, 224, 0.3);
  --yellow: #ffd60a;
  --yellow-soft: rgba(255, 214, 10, 0.13);
  --yellow-line: rgba(255, 214, 10, 0.28);
  --ok: #34d27b;

  /* Surfaces. Dark is the default, light is the override further down. */
  --ink: #09090b;
  --ink-2: #111113;
  --txt: #fafafa;
  --muted: #a1a1aa;
  --muted-2: #71717a;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --glass: #111113;
  --glass-2: #17171b;
  --glass-brd: rgba(255, 255, 255, 0.08);
  --nav-bg: rgba(9, 9, 11, 0.72);
  --grid-line: rgba(255, 255, 255, 0.018);
  --shot-shadow: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.34)) drop-shadow(0 26px 52px rgba(0, 0, 0, 0.46));

  /* One type scale, used by every page. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-display: clamp(40px, 5.6vw, 72px);   /* page title */
  --fs-title: clamp(32px, 5.2vw, 58px);     /* section title */
  --fs-head: clamp(26px, 3.4vw, 40px);      /* showcase title */
  --fs-sub: 23px;                           /* card title */
  --fs-lede: clamp(18px, 2.2vw, 22px);
  --fs-body: 17px;
  --fs-small: 14px;

  /* One space scale. --section-y is the page rhythm and pages retune it. */
  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 18px;
  --sp-4: 26px;
  --sp-5: 36px;
  --sp-6: 52px;
  --sp-7: 74px;
  --section-y: var(--sp-7);

  --maxw: 1120px;
  --r: 18px;
  --r-sm: 12px;
  --r-pill: 980px;
  --ease: cubic-bezier(0.16, 0.84, 0.34, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    --ink: #ffffff;
    --ink-2: #f5f5f7;
    --txt: #1d1d1f;
    --muted: #515154;
    --muted-2: #86868b;
    --line: rgba(0, 0, 0, 0.09);
    --line-strong: rgba(0, 0, 0, 0.14);
    --glass: #ffffff;
    --glass-2: #f5f5f7;
    --glass-brd: rgba(0, 0, 0, 0.08);
    --nav-bg: rgba(255, 255, 255, 0.72);
    --yellow: #e6a700;
    --grid-line: rgba(0, 0, 0, 0.025);
    --shot-shadow: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.14)) drop-shadow(0 26px 52px rgba(0, 0, 0, 0.22));
  }
}

/* --- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  overflow-x: hidden;
  color: var(--txt);
  background-color: var(--ink);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-position: center top;
  background-size: 52px 52px;
  font-family: var(--font);
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* The home page opens with its own full-bleed hero. Every other page starts
   below the fixed header, and gives itself a little more room per section. */
body:not(.home-page) { padding-top: 62px; }
.home-page { --section-y: 96px; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
::selection { color: #fff; background: var(--accent); }

:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* --- Header -------------------------------------------------------------- */
#nav {
  position: fixed;
  z-index: 60;
  top: 0;
  right: 0;
  left: 0;
  padding: 0 28px;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: border-color 0.3s ease;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}
/* The tint sits on a pseudo element so it can fade in on its own */
#nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: transparent;
  transition: background 0.3s ease;
}
#nav.scrolled::before { background: var(--nav-bg); }
#nav.scrolled { border-bottom-color: var(--line); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  max-width: var(--maxw);
  min-height: 62px;
  margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.brand img { width: 29px; height: 29px; border-radius: 7px; }
.nav-links { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 500; }
.nav-links a:not(.nav-cta) { padding: 8px 10px; border-radius: 8px; color: var(--muted); transition: color 0.2s, background 0.2s; }
.nav-links a:not(.nav-cta):hover,
.nav-links a[aria-current="page"]:not(.nav-cta) { color: var(--txt); background: var(--glass-2); }
.nav-divider { width: 1px; height: 22px; margin: 0 8px; background: var(--line-strong); }
.nav-cta { padding: 9px 18px; border-radius: var(--r-pill); color: var(--ink); background: var(--txt); font-size: var(--fs-small); font-weight: 600; transition: transform 0.2s, opacity 0.2s; }
.nav-cta:hover { opacity: 0.85; transform: translateY(-1px); }

/* --- Buttons -------------------------------------------------------------
   One component. .accent is the primary tint, .lg is the download CTA.
   -------------------------------------------------------------------------- */
.btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 15px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  color: var(--txt);
  background: var(--glass);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.btn:hover { opacity: 0.9; transform: translateY(-1px); }
.btn svg { flex: none; width: 20px; height: 20px; }
.btn.accent { border-color: transparent; color: #fff; background: var(--accent); }
.btn.lg {
  gap: 18px;
  width: 420px;
  max-width: 100%;
  min-height: 92px;
  padding: 26px 34px;
  border: 0;
  border-radius: var(--r);
  color: var(--ink);
  background: var(--txt);
  font-size: 26px;
}
.btn.lg svg { width: 34px; height: 34px; }
.btn.block { width: 100%; }

/* --- Page opener ---------------------------------------------------------- */
.eyebrow { display: inline-block; margin-bottom: 14px; color: var(--accent); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.01em; }
.breadcrumbs { padding-top: 28px; color: var(--muted-2); font-size: var(--fs-small); }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }

.hero { padding: 90px 0 70px; text-align: center; }
.hero h1 { max-width: 900px; margin: 0 auto; font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.lede { max-width: 740px; margin: var(--sp-4) auto 0; color: var(--muted); font-size: var(--fs-lede); line-height: 1.55; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.note { margin-top: var(--sp-3); color: var(--muted-2); font-size: var(--fs-small); }

/* --- Sections ------------------------------------------------------------
   Every section is .section > .wrap > .section-head + content. Content pages
   draw a rule between sections, the home page runs them together.
   -------------------------------------------------------------------------- */
.section { padding: var(--section-y) 0; }
.content-page .section { border-top: 1px solid var(--line); }
/* A section that carries straight on from the one above it */
.section.tight { padding-top: 0; }

.narrow { max-width: 880px; margin-inline: auto; }
.center { text-align: center; }

.section-head { max-width: 760px; }
.section-head.center { max-width: 720px; margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-title); line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; }
.section-head p { margin-top: var(--sp-3); color: var(--muted); font-size: 19px; line-height: 1.6; text-wrap: pretty; }

/* --- Cards ---------------------------------------------------------------
   .grid lays them out, .card is the surface, and the modifiers below cover
   every card on the site: numbered steps, feature cards, plans, downloads.
   -------------------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.flow { gap: 44px; }

.card { position: relative; padding: 30px; border: 1px solid var(--glass-brd); border-radius: var(--r); background: var(--glass); }
.card h3 { font-size: var(--fs-sub); font-weight: 620; letter-spacing: -0.02em; line-height: 1.2; }
.card p { margin-top: var(--sp-2); color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.card > a:not(.btn) { display: inline-block; margin-top: var(--sp-3); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

.card-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: var(--sp-3);
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  color: var(--accent);
  background: var(--accent-soft);
}
.card-icon svg { width: 30px; height: 30px; }
.number { display: block; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.number + h3, .card-icon + .number { margin-top: 8px; }

/* Premium is the only thing on the site allowed to be yellow */
.card.premium { border-color: var(--yellow-line); }
.card.premium h3, .card.premium .number { color: var(--yellow); }
.card.premium .card-icon { border-color: var(--yellow-line); color: var(--yellow); background: var(--yellow-soft); }
.card.premium .checks li svg { color: var(--yellow); }

/* The chevrons that turn a row of cards into a sequence */
@media (min-width: 861px) {
  .grid.flow .card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -29px;
    width: 13px;
    height: 13px;
    transform: translateY(-50%) rotate(45deg);
    border-top: 2px solid var(--line-strong);
    border-right: 2px solid var(--line-strong);
  }
}

/* --- Feature lists -------------------------------------------------------
   The ticked list under a showcase, a plan or a download card.
   -------------------------------------------------------------------------- */
.checks { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); list-style: none; }
.checks li { display: flex; align-items: flex-start; gap: 11px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.checks li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.checks li.premium { color: var(--yellow); font-weight: 550; }
.checks li.premium svg { color: var(--yellow); }
.checks li.yes { color: var(--txt); }
.checks li.yes svg { color: var(--ok); }
.checks li.no svg { color: var(--muted-2); }

/* --- Showcase ------------------------------------------------------------
   Copy beside a screenshot, alternating sides.
   -------------------------------------------------------------------------- */
.showcase { display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; gap: 60px; padding: 60px 0; }
.showcase.rev { grid-template-columns: 1.4fr 1fr; }
.showcase.rev .showcase-copy { order: 2; }
.showcase h3 { font-size: var(--fs-head); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }
.showcase p { margin-top: var(--sp-3); color: var(--muted); font-size: 16.5px; line-height: 1.6; }
/* Screenshots get more room than the text column on a wide display */
.showcase-wrap { max-width: 1120px; }
@media (min-width: 1320px) { .showcase-wrap { max-width: 1320px; } }
@media (min-width: 1600px) { .showcase-wrap { max-width: 1480px; } }

/* --- Article -------------------------------------------------------------- */
.article { max-width: 780px; margin: 0 auto; }
.article h2 { margin-top: var(--sp-6); font-size: 34px; letter-spacing: -0.025em; }
.article h2:first-child { margin-top: 0; }
.article h3 { margin-top: var(--sp-5); font-size: var(--fs-sub); }
.article p, .article li { color: var(--muted); font-size: 18px; line-height: 1.75; }
.article p { margin-top: var(--sp-3); }
.article ul, .article ol { margin-top: var(--sp-3); padding-left: 22px; }
.article li + li { margin-top: 10px; }
.article strong { color: var(--txt); }
.article a { text-decoration: underline; text-underline-offset: 4px; }
.callout {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) 28px;
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  background: var(--accent-soft);
}
.callout p { margin: 0; color: var(--txt); }

/* --- Screenshots ---------------------------------------------------------
   The window is cut out along its own silhouette, so the frame is a shadow
   rather than a card: a tight contact shadow and a wide soft one under it.
   -------------------------------------------------------------------------- */
.shot img { display: block; width: 100%; height: auto; filter: var(--shot-shadow); }
.shot figcaption { margin-top: 22px; color: var(--muted-2); font-size: var(--fs-small); line-height: 1.5; text-align: center; }
figure.shot { margin: var(--sp-6) 0 0; }
.shot.phone { max-width: 320px; margin-inline: auto; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { max-width: 820px; margin: var(--sp-5) auto 0; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa .plus { display: grid; flex: none; place-items: center; width: 26px; height: 26px; color: var(--accent); transition: transform 0.25s; }
.qa .plus svg { width: 20px; height: 20px; }
.qa[open] .plus { transform: rotate(45deg); }
.qa p { max-width: 700px; padding: 0 4px 24px; color: var(--muted); font-size: 15.5px; line-height: 1.62; }

/* --- Download cards ------------------------------------------------------
   Shared by the home page section and /download.
   -------------------------------------------------------------------------- */
.grid.downloads { gap: var(--sp-3); max-width: 880px; margin-inline: auto; }
.card.download { display: flex; flex-direction: column; align-items: center; padding: 44px 32px 36px; text-align: center; }
.card.download h2, .card.download h3 { font-size: 25px; font-weight: 650; letter-spacing: -0.02em; }
.card.download .checks { align-self: stretch; margin: 0 0 28px; text-align: left; }
.card.download .btn { margin-top: auto; }
.download-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 104px;
  height: 104px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 26px;
  color: var(--txt);
  background: var(--ink-2);
}
.download-icon svg { width: 56px; height: 56px; }
.download-sub { max-width: 300px; margin: var(--sp-2) 0 var(--sp-4); color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.card.download > a.link, .card.download .card-note { margin-top: 16px; font-size: var(--fs-small); line-height: 1.4; }
.card.download > a.link { color: var(--muted); border-bottom: 1px solid var(--line-strong); transition: color 0.2s; }
.card.download > a.link:hover { color: var(--txt); }
.card-note { color: var(--muted-2); }

/* --- Footer --------------------------------------------------------------- */
footer { padding: var(--sp-6) 0 var(--sp-4); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; align-items: start; gap: 72px; }
.footer-intro { max-width: 280px; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--txt); font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.footer-brand img { width: 32px; height: 32px; border-radius: 8px; }
.footer-intro p { margin: 16px 0 20px; color: var(--muted); font-size: var(--fs-small); line-height: 1.55; }
.footer-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--txt);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}
.footer-download:hover { border-color: var(--muted-2); background: var(--glass-2); }
.foot-cols { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 48px; }
.foot-col h4 { margin-bottom: 14px; color: var(--muted-2); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.foot-col a { display: block; margin-bottom: 10px; color: var(--muted); font-size: 14.5px; transition: color 0.2s; }
.foot-col a:hover { color: var(--txt); }
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 46px;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 13px;
}
.foot-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.foot-legal a { transition: color 0.2s; }
.foot-legal a:hover { color: var(--txt); }

/* --- Motion --------------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-links { gap: 2px; }
  .nav-links a:not(.nav-cta) { padding-inline: 8px; }
  .showcase, .showcase.rev { grid-template-columns: 1fr; gap: 30px; padding: 40px 0; }
  .showcase.rev .showcase-copy { order: 0; }
}

@media (max-width: 860px) {
  .grid, .grid.two { grid-template-columns: 1fr; }
  .grid.flow { gap: var(--sp-3); }
}

@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr; gap: 44px; }
  .footer-intro { max-width: 420px; }
}

@media (max-width: 760px) {
  body:not(.home-page) { padding-top: 0; }
  :root { --section-y: var(--sp-6); }
  .home-page { --section-y: 68px; }
  .wrap { padding: 0 16px; }

  /* On phones the header belongs to the page and scrolls away with it */
  #nav {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    padding-inline: 16px;
    border-bottom-color: var(--line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #nav::before, #nav.scrolled::before { background: transparent; }
  .nav-links a:not(.nav-cta), .nav-divider { display: none; }

  .hero { padding: 56px 0 52px; }
  .article p, .article li { font-size: var(--fs-body); }
}

@media (max-width: 680px) {
  .card.download { padding: 36px 28px 30px; }
  .btn.lg { min-height: 76px; padding: 20px; font-size: 21px; }
  .btn.lg svg { width: 28px; height: 28px; }
}

@media (max-width: 560px) {
  footer { padding-top: 42px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 34px 28px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}