/* MyViralPad public site. Brand: Archivo; black #000000, smoke #141110, ash #2A2522, bone #F5F1EC, gold #FFB21A, blaze #FF7A00, ember #FF3D14. */
@font-face{font-family:"Archivo Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/archivo-latin-wght-normal.woff2) format("woff2-variations");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}
:root{color-scheme:dark;--bg:#000000;--smoke:#141110;--ash:#2A2522;--bone:#F5F1EC;--gold:#FFB21A;--blaze:#FF7A00;--ember:#FF3D14;--fg:var(--bone);--dim:#A79E96;--line:var(--ash);--fire:var(--blaze);--font:"Archivo Variable",Archivo,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 var(--font);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--fg);text-decoration:underline;text-decoration-color:#6b625d;text-underline-offset:3px}
a:hover{text-decoration-color:var(--fire)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
/* Home hero: the tagline is the h1, front and center. */
.hero{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px 64px;gap:0}
.glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(52% 40% at 50% 34%,rgba(255,122,0,.26),rgba(255,61,20,.10) 48%,transparent 74%),radial-gradient(120% 60% at 50% 100%,rgba(20,17,16,.9),transparent 60%)}
/* The logo PNG has a pure-black background (owner's logo fix). Screen blending makes that black transparent over the glow, so no box edge shows. */
.mark{width:clamp(132px,28vw,200px);height:auto;mix-blend-mode:screen}
/* Round 71 (owner feedback on R69): the tight letter-spacing also shrank the spaces (0.154em), so "your feed." read like "yourfeed.".
   word-spacing puts the gap back to about 0.31em at every size while the letters stay tight; still two balanced lines at 390 and 1440. */
.tagline{margin:28px 0 0;max-width:11ch;font-weight:800;font-size:clamp(2.875rem,11.5vw,7rem);line-height:.98;letter-spacing:-.035em;word-spacing:.16em;text-wrap:balance;color:var(--bone);background:linear-gradient(180deg,#FFFFFF 0%,var(--bone) 58%,#D8CFC5 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-404 .tagline{font-size:clamp(2.25rem,8vw,4rem)}
.rule{display:block;width:72px;height:4px;margin:30px auto 0;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--blaze) 55%,var(--ember));box-shadow:0 0 18px rgba(255,122,0,.55)}
.company{margin:22px 0 0;font-size:.875rem;font-weight:600;color:var(--dim);letter-spacing:.2em;text-transform:uppercase}
.company a{color:var(--bone)}
@media (min-width:900px){.hero{padding:56px 40px 88px}.tagline{margin-top:34px}.rule{margin-top:38px}.company{margin-top:26px;font-size:.9375rem}}
@media (prefers-reduced-motion:no-preference){.mark,.tagline,.rule,.company{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}.tagline{animation-delay:.08s}.rule{animation-delay:.16s}.company{animation-delay:.22s}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.foot{padding:28px 24px 36px;text-align:center;color:var(--dim);font-size:.9375rem;border-top:1px solid var(--line);background:var(--bg)}
.foot nav{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.foot p{margin:10px 0 0}
.bar{padding:16px 24px;border-bottom:1px solid var(--line)}
.bar-home{border-bottom:0;padding-bottom:0}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;text-decoration:none}
.brand img{border-radius:6px}
.draft{margin:0;padding:12px 24px;background:#2a1606;color:#ffd7b0;border-bottom:1px solid #5a2e0c;font-size:.9375rem;text-align:center}
.doc{flex:1;width:100%;max-width:760px;margin:0 auto;padding:32px 24px 56px;overflow-wrap:anywhere}
.doc h1{font-size:2rem;line-height:1.15;margin:0 0 8px}
.doc h2{font-size:1.3rem;margin:2.2em 0 .5em;line-height:1.3}
.doc h3{font-size:1.1rem;margin:1.8em 0 .4em}
.doc blockquote{margin:1.2em 0;padding:4px 18px;border-left:3px solid var(--fire);background:#0f0d0c;border-radius:0 10px 10px 0}
.doc code{background:#1a1715;padding:1px 5px;border-radius:5px;font-size:.9em}
.doc hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.doc li{margin:.3em 0}
.table{overflow-x:auto;margin:1em 0}
.doc table{border-collapse:collapse;width:100%;font-size:.9375rem}
.doc th,.doc td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.ph{background:#3a2a00;color:#ffe08a;border-radius:4px;padding:0 4px}

/* ---- Round 135: light/dark aware. The hero band and its glow stay black in both modes; text pages follow the reader's setting. ---- */
:root{--card:#0f0d0c;--card-line:#2A2522;--chip-bg:#3a2a00;--chip-fg:#ffe08a}
/* ---- Round 537 (OWNER-DECISIONS-CHAT19 item 11): the header bar is pure black on every page, in BOTH color schemes,
   so the page is black all the way to the top with no white bar. Its own text/link colors are fixed (not the
   --fg/--dim vars, which flip to dark ink in light mode) so they stay readable against the always-black bar. ---- */
.bar{background:#000000}
.bar .brand{color:#F5F1EC}
.bar .nav a{color:#A79E96}
.bar .nav a:hover,.bar .nav a[aria-current="page"]{color:#F5F1EC}
@media (prefers-color-scheme:light){
:root{color-scheme:light;--bg:#F5F1EC;--fg:#141110;--dim:#5E554F;--line:#D8CFC5;--card:#FFFFFF;--card-line:#E4DCD3;--chip-bg:#FFE7A3;--chip-fg:#4a3300}
html,body,.foot{background:var(--bg)}
a{text-decoration-color:#a3968c}
.hero{background:#000;color:#F5F1EC}
.hero .company{color:#A79E96}
.hero .company a{color:#F5F1EC}
.doc blockquote{background:#EFE9E2}
.doc code{background:#E7E0D8}
.draft{background:#FFE7D0;color:#5a2e0c;border-color:#f0c9a3}
.brand img{box-shadow:0 0 0 1px var(--line)}
}
.ph{background:var(--chip-bg);color:var(--chip-fg)}
/* ---- Round 407: the wordmark (silver MyViralPad, flaming V with rocket) in the header and hero, when the file is present.
   The wordmark art sits on black, so: in the hero (always black) it screen-blends like the mark; in the header it gets a
   black pill so light mode shows no ragged box edge. Height-based sizing keeps any aspect ratio sharp. ---- */
.brand-wordmark{gap:0;padding:4px 8px;margin:-4px -8px;border-radius:10px;background:#000}
.brand-wordmark img{display:block;height:40px;width:auto;border-radius:0;box-shadow:none}
.wordmark-hero{display:block;width:min(86vw,660px);height:auto;mix-blend-mode:screen}
@media (prefers-reduced-motion:no-preference){.wordmark-hero{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}}
/* ---- Round 547: the header's home button is the ring-V icon (transparent corners), sized to the same 40px badge the
   wordmark used. No border/box-shadow (the default .brand img rules are for the square MVP mark, not this icon). ---- */
.brand-ring img{width:40px;height:40px;border-radius:50%;box-shadow:none}
/* ---- Round 590: the locked public description sits under the tagline as one readable paragraph on the black hero
   (fixed light-bone colour, not --dim, which flips to dark ink in light mode). Same rise animation as the tagline,
   a beat later; reduced-motion users get it static. ---- */
.hero .intro{margin:26px auto 0;max-width:36em;font-size:clamp(1.0625rem,2.2vw,1.3125rem);line-height:1.55;color:#D8CFC5;text-wrap:pretty}
@media (min-width:900px){.hero .intro{margin-top:32px}}
@media (prefers-reduced-motion:no-preference){.hero .intro{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:.16s}}
/* ---- Round 707: the Google/YouTube login sentence (Q677-3) sits under the locked description, smaller and dimmer so
   the locked paragraph still reads as the primary statement. Same rise animation, a further beat later. ---- */
.hero .intro-note{margin:14px auto 0;max-width:34em;font-size:clamp(.875rem,1.6vw,.9375rem);line-height:1.5;color:#A79E96;text-wrap:pretty}
@media (prefers-reduced-motion:no-preference){.hero .intro-note{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:.24s}}
.doc{color:var(--fg)}
.doc a{overflow-wrap:anywhere}
/* Header nav (launch-day) and the brand line */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.nav{display:flex;gap:4px 14px;flex-wrap:wrap;font-size:.9375rem}
.nav a{text-decoration:none;color:var(--dim);padding:4px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg);text-decoration:underline;text-decoration-color:var(--fire)}
.foot nav{gap:8px 14px}
.foot .fine{margin:14px auto 0;max-width:720px;font-size:.8125rem;line-height:1.55}
.foot .fine a{overflow-wrap:anywhere}
/* Preview bar: only on preview and launch-day builds, never on the published site */
.preview-bar{margin:0;padding:10px 24px;background:#3a2a00;color:#ffe08a;font-size:.9375rem;text-align:center;border-bottom:1px solid #5a4200}
.preview-bar a{color:inherit}
/* Launch-day home */
.ld-hero{padding:56px 24px 64px;flex:0 0 auto}
.ld-hero .tagline{font-size:clamp(2.5rem,9vw,5.5rem);max-width:12ch}
.ld-hero .lede{margin:22px auto 0;max-width:34em;font-size:clamp(1.0625rem,2.2vw,1.3125rem);line-height:1.5;color:#D8CFC5;text-wrap:pretty}
.ld-hero .lede strong{color:#FFFFFF}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:999px;font-weight:700;text-decoration:none;border:1px solid transparent}
.btn-fire{background:linear-gradient(90deg,var(--gold),var(--blaze) 55%,var(--ember));color:#000}
.btn-ghost{border-color:#5a4f48;color:#F5F1EC}
.btn-ghost:hover{border-color:var(--fire)}
.ld-hero .fine{margin:22px 0 0;font-size:.875rem;color:#A79E96}
.sec{width:100%;max-width:1040px;margin:0 auto;padding:44px 24px 8px}
.sec h2{font-size:clamp(1.5rem,3.2vw,2rem);line-height:1.15;margin:0 0 6px;letter-spacing:-.02em}
.sec .sub{margin:0 0 22px;color:var(--dim);max-width:60ch}
.cards{display:grid;gap:14px;grid-template-columns:1fr;list-style:none;padding:0;margin:0}
.card{background:var(--card);border:1px solid var(--card-line);border-radius:16px;padding:18px 18px 20px}
.card h3{margin:0 0 6px;font-size:1.0625rem}
.card p{margin:0;color:var(--dim);font-size:.9375rem}
.card .k{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:12px}
.steps li{position:relative;padding-left:46px;min-height:36px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#000;background:linear-gradient(135deg,var(--gold),var(--blaze))}
.steps h3{margin:0 0 2px;font-size:1rem}
.steps p{margin:0;color:var(--dim);font-size:.9375rem}
.two{display:grid;gap:22px;grid-template-columns:1fr}
.split{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.split li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:.9375rem}
.split .bar-track{grid-column:1/-1;height:8px;border-radius:999px;background:var(--card-line);overflow:hidden}
.split .bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--blaze) 55%,var(--ember))}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:14px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--dim);font-size:1.25rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 16px;color:var(--dim)}
.more{margin:18px 0 0;font-weight:600}
.callout{margin:18px 0 0;padding:14px 18px;border-left:3px solid var(--fire);background:var(--card);border-radius:0 12px 12px 0;font-size:.9375rem}
.doc .callout{margin:1.2em 0}
@media (min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.cards.three{grid-template-columns:repeat(3,1fr)}.cards.four{grid-template-columns:repeat(4,1fr)}}