/* ============================================================================
   PageFeed marketing site — styles
   Design tokens, fonts, and feel are lifted verbatim from the app
   (RSS Reader/public/index.html) so the site reads as the app's front door:
   warm paper, editorial serif headlines, monospace chrome, no shadows.
   ========================================================================== */

/* ---- Self-hosted fonts (copied from the app's public/fonts) -------------- */
/* latin-ext + latin subsets for each weight actually used on this page. */

/* JetBrains Mono — UI chrome, buttons, labels */
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/jetbrains-mono-400-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/jetbrains-mono-400-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(fonts/jetbrains-mono-500-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(fonts/jetbrains-mono-500-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url(fonts/jetbrains-mono-600-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url(fonts/jetbrains-mono-600-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Newsreader — headlines & body */
@font-face { font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src:url(fonts/newsreader-400-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src:url(fonts/newsreader-400-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/newsreader-400-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/newsreader-400-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:500; font-display:swap;
  src:url(fonts/newsreader-500-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:500; font-display:swap;
  src:url(fonts/newsreader-500-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:600; font-display:swap;
  src:url(fonts/newsreader-600-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:600; font-display:swap;
  src:url(fonts/newsreader-600-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:700; font-display:swap;
  src:url(fonts/newsreader-700-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:700; font-display:swap;
  src:url(fonts/newsreader-700-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---- Tokens (mirrors the app) ------------------------------------------- */
:root{
  --bg:#f0ebe3; --bg-soft:#e7e1d6;
  --ink:#111; --ink-soft:#3a3a3a;
  /* App uses #6b6b6b, but on this page the faint labels are small uppercase
     text — nudged to #5c5c5c to clear WCAG AA contrast (4.5:1) on paper. */
  --ink-faint:#5c5c5c;
  --rule:#1a1a1a; --rule-soft:#c9c1b2;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --maxw:1080px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1a1614; --bg-soft:#25201d;
    --ink:#e8e1d2; --ink-soft:#bdb6a7;
    /* App uses #807a6e; brightened to #8c8473 to clear AA on the dark paper. */
    --ink-faint:#8c8473;
    --rule:#c0baad; --rule-soft:#3a342e;
  }
}

/* ---- Reset / base ------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

/* Monospace chrome helpers */
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint);
}

/* ---- Layout ------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{padding:88px 0;border-top:1px solid var(--rule-soft)}
.section-head{max-width:680px;margin:0 0 44px}
.section-head h2{
  font-family:var(--serif); font-weight:700; font-size:clamp(28px,4vw,40px);
  line-height:1.15; letter-spacing:-.01em; margin-top:10px;
}
.section-head p{color:var(--ink-soft);margin-top:14px;font-size:19px}

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding:13px 20px; border:1.5px solid var(--rule); color:var(--ink);
  background:transparent; cursor:pointer; line-height:1; white-space:nowrap;
  transition:opacity .15s linear;
}
.btn:hover{opacity:.62}
.btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-sm{padding:10px 15px;font-size:11px;border-width:1px}

/* ---- Nav ---------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule-soft);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand img{width:30px;height:30px;border-radius:7px}
.brand span{font-family:var(--serif);font-weight:700;font-size:25px;letter-spacing:-.01em}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-soft);
  transition:opacity .15s linear;
}
.nav-links a:hover{opacity:.6}
.nav-links a.btn{color:var(--bg)}
@media (max-width:760px){
  .nav-links a:not(.btn){display:none}
}
/* Very narrow phones: keep the brand and the CTA from colliding. */
@media (max-width:430px){
  .wrap{padding:0 18px}
  .brand span{font-size:21px}
  .nav .btn-sm{padding:9px 11px;letter-spacing:.06em}
}

/* ---- Hero --------------------------------------------------------------- */
.hero{padding:72px 0 80px;border-top:none}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(40px,6.4vw,68px); line-height:1.04; letter-spacing:-.022em;
}
.hero h1 em{font-style:italic;font-weight:500}
.hero-sub{margin-top:22px;font-size:21px;line-height:1.5;color:var(--ink-soft);max-width:30ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:32px}
.hero-note{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint)}
.hero-note b{color:var(--ink-soft);font-weight:600}

/* Phone mock that frames the reader screenshot */
.phone{
  justify-self:center; width:300px; max-width:78vw;
  border:1.5px solid var(--rule); border-radius:38px; padding:11px;
  background:var(--bg-soft);
}
/* The matte (padding + background) is the on-screen "safe area" / forehead a
   real phone has above the app's header — without it the rounded corners clip
   the header buttons and the UI looks cramped. Background matches each
   screenshot's own app background (fixed per image, NOT the site theme) so the
   inset is seamless: cream by default, dark/white via the modifier classes. */
.phone-screen{
  border:1px solid var(--rule-soft); border-radius:26px; overflow:hidden;
  padding:9px; background:#f0ebe3;
}
.phone-screen.s-dark{background:#1a1614}
.phone-screen.s-eink{background:#ffffff}
.phone-screen img{width:100%;height:auto;display:block;border-radius:6px}
.phone-notch{width:36%;height:6px;border-radius:3px;background:var(--rule-soft);margin:2px auto 9px}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .phone{order:-1}
}

/* ---- Philosophy band ---------------------------------------------------- */
.creed{background:var(--ink);color:var(--bg)}
.creed .eyebrow{color:color-mix(in srgb,var(--bg) 60%,transparent)}
.creed blockquote{
  font-family:var(--serif); font-weight:500; font-style:normal;
  font-size:clamp(24px,3.6vw,38px); line-height:1.32; letter-spacing:-.01em;
  max-width:22ch; margin:14px 0 0;
}
.creed blockquote em{font-style:italic}
.creed-foot{margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:color-mix(in srgb,var(--bg) 62%,transparent)}

/* ---- Feature grid ------------------------------------------------------- */
.features-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--rule-soft);border-bottom:none;border-right:none;
}
.feature{
  padding:30px 26px;border-right:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
}
.feature .ico{font-size:22px;line-height:1}
.feature h3{
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; margin:16px 0 9px;
}
.feature p{font-size:16.5px;line-height:1.5;color:var(--ink-soft)}
@media (max-width:820px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.features-grid{grid-template-columns:1fr}}

/* ---- How it works ------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.step-num{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--ink-faint)}
.step h3{font-family:var(--serif);font-weight:700;font-size:24px;margin:12px 0 8px}
.step p{font-size:16.5px;color:var(--ink-soft);line-height:1.5}
@media (max-width:720px){.steps{grid-template-columns:1fr;gap:28px}}

/* ---- Gallery (phone-framed portrait screenshots) ------------------------ */
/* Trio = the three themes (kept together so it reads as one comparison).
   Pair = two more app views (Your feed + Discover) — deliberately 2-up so it
   never looks like a broken theme set. */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 24px}
.gallery-pair{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 24px;max-width:540px;margin:48px auto 0}
.shot{display:flex;flex-direction:column;align-items:center}
.shot .phone{width:100%;max-width:240px;margin:0;border-radius:32px}
.gallery .shot .phone{max-width:230px}
.shot figcaption{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);text-align:center;padding-top:16px;
}
@media (max-width:560px){
  .gallery{gap:14px 10px}
  .shot .phone{border-radius:24px;padding:7px}
  .shot .phone-screen{padding:5px;border-radius:18px}
  .shot .phone-notch{margin-bottom:7px}
  .shot figcaption{font-size:9px;letter-spacing:.1em;padding-top:11px}
}

/* ---- Pricing ------------------------------------------------------------ */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:760px}
.plan{border:1px solid var(--rule);padding:30px 28px;display:flex;flex-direction:column}
.plan.feature-plan{border-width:1.5px}
.plan .tier{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.plan .price{font-family:var(--serif);font-weight:700;font-size:38px;margin:12px 0 4px;letter-spacing:-.01em}
.plan .price small{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase}
.plan .blurb{color:var(--ink-soft);font-size:16px;margin-bottom:18px}
.plan ul{list-style:none;font-size:16px;line-height:1.45;color:var(--ink-soft);display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"→";position:absolute;left:0;color:var(--ink-faint);font-family:var(--mono);font-size:13px}
.plan .btn{margin-top:auto}
.plan .note{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-top:14px}
@media (max-width:680px){.plans{grid-template-columns:1fr}}

/* ---- Get the app band --------------------------------------------------- */
.signup{background:var(--bg-soft)}
.signup-inner{max-width:620px}

/* ---- FAQ ---------------------------------------------------------------- */
.faq{max-width:760px}
.faq details{border-top:1px solid var(--rule-soft);padding:18px 0}
.faq details:last-of-type{border-bottom:1px solid var(--rule-soft)}
.faq summary{
  font-family:var(--serif);font-weight:600;font-size:20px;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;color:var(--ink-faint);font-size:20px}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px;color:var(--ink-soft);font-size:17px;line-height:1.55;max-width:64ch}

/* ---- Document pages (Privacy, Support, Terms) --------------------------- */
/* Long-form prose pages. Same paper/serif feel as the landing page, narrower
   measure for readability. Reuses the shared .nav and .footer. */
.doc{max-width:760px;margin:0 auto;padding:64px 28px 96px}
.doc .eyebrow{margin-bottom:14px}
.doc h1{
  font-family:var(--serif); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(34px,5.2vw,52px); line-height:1.06;
}
.doc .updated{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:18px;
}
.doc .lede{font-size:20px;line-height:1.55;color:var(--ink-soft);margin-top:24px}
.doc h2{
  font-family:var(--serif); font-weight:700; font-size:26px; letter-spacing:-.01em;
  line-height:1.2; margin:48px 0 4px; padding-top:28px;
  border-top:1px solid var(--rule-soft);
}
.doc h2:first-of-type{border-top:none;padding-top:0}
.doc h3{font-family:var(--serif);font-weight:600;font-size:20px;margin:28px 0 0}
.doc p{margin-top:14px;font-size:17.5px;line-height:1.62;color:var(--ink-soft)}
.doc ul,.doc ol{margin:14px 0 0 0;padding-left:0;list-style:none;
  display:flex;flex-direction:column;gap:10px}
.doc li{position:relative;padding-left:24px;font-size:17.5px;line-height:1.55;color:var(--ink-soft)}
.doc ul li::before{content:"→";position:absolute;left:0;color:var(--ink-faint);
  font-family:var(--mono);font-size:13px;top:2px}
.doc ol{counter-reset:doc}
.doc ol li{counter-increment:doc}
.doc ol li::before{content:counter(doc);position:absolute;left:0;color:var(--ink-faint);
  font-family:var(--mono);font-size:12px;font-weight:500;top:3px}
.doc li b,.doc p b,.doc li strong,.doc p strong{color:var(--ink);font-weight:600}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--rule-soft);transition:text-decoration-color .15s linear}
.doc a:hover{text-decoration-color:var(--ink)}
/* "Key takeaway" callout used at the top of the privacy policy. */
.doc .callout{
  margin-top:28px;padding:22px 24px;background:var(--bg-soft);
  border:1px solid var(--rule-soft);
}
.doc .callout p{margin-top:0;color:var(--ink)}
.doc .callout p+p{margin-top:12px}
/* Inline contact email — kept consistent across pages. */
.doc .mail{font-family:var(--mono);font-size:.92em;letter-spacing:.01em}
/* Anchor offset so deep links (e.g. /support#delete) clear the sticky nav. */
.doc h2[id]{scroll-margin-top:84px}
@media (max-width:520px){
  .doc{padding:44px 20px 72px}
  .doc h2{font-size:23px}
}

/* ---- Footer ------------------------------------------------------------- */
.footer{border-top:1px solid var(--rule);padding:48px 0 56px}
.footer-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-end}
.footer .brand span{font-size:22px}
.footer-tag{color:var(--ink-faint);font-size:15px;margin-top:10px}
.footer-meta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);text-align:right;line-height:2}
.footer-meta a{text-decoration:none}
.footer-meta a:hover{opacity:.6}