/* Scoped to this draft: archive-wide article rules otherwise override Guides. */
body.social-recipe-page, html.dark body.social-recipe-page { background:var(--guide-paper); color:var(--guide-ink); }
/* Avoid creating a separate scrolling ancestor for the sticky contents list. */
body.social-recipe-page { overflow-x:clip; overflow-y:visible; }
.social-recipe-page .guide-container { max-width:1200px; padding-top:112px; }
.social-recipe-page .guide-container > article { padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.social-recipe-page .guide-breadcrumb { max-width:850px; margin-bottom:32px; border:0; padding:0; border-radius:0; background:none; }
.social-recipe-page .guide-header { max-width:850px; margin-bottom:38px; }
.social-recipe-page .guide-header h1 { font-family:var(--guide-serif); font-size:clamp(36px,4.7vw,62px); font-weight:500; line-height:1.08; letter-spacing:-.035em; color:var(--guide-ink); margin:20px 0; }
.social-recipe-page .guide-dek { font-size:19px; font-style:normal; font-family:inherit; font-weight:400; line-height:1.65; color:var(--guide-muted); max-width:760px; }
.social-recipe-page .guide-byline { font-size:12px; gap:16px; color:var(--guide-muted); margin-top:24px; }
.social-recipe-page .guide-kicker-row { color:var(--guide-muted); }
.social-recipe-page .guide-hero-image { max-width:1140px; margin:0 auto 52px; }
.social-recipe-page .sr-cover { min-height:500px; position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; padding:50px; overflow:hidden; border:1px solid #dce6db; border-radius:30px; background:radial-gradient(ellipse at 20% 35%,#c6e6c9,transparent 65%),#eff4eb; box-shadow:0 24px 64px #18332212; }
.sr-cover__copy { position:relative; z-index:3; }
.sr-eyebrow { color:#49674d; font-size:11px; font-weight:750; letter-spacing:.19em; }
.social-recipe-page .sr-cover h2 { margin:26px 0 20px; color:#193d2c; font-family:var(--guide-serif); font-size:clamp(32px,3.6vw,46px); font-weight:500; line-height:1.09; letter-spacing:-.035em; }
.sr-cover__copy > p { color:#506756; font-size:17px; line-height:1.65; }
.sr-cover__sources { display:flex; flex-wrap:wrap; gap:7px; margin-top:26px; }
.sr-cover__sources span { padding:7px 11px; color:#46614a; background:#ffffff99; border:1px solid #46614a19; border-radius:100px; font-size:11px; font-weight:650; }
.sr-cover__cards { position:relative; height:400px; width:100%; max-width:470px; }
.sr-recipe-card { width:210px; height:282px; position:absolute; overflow:hidden; border-radius:29px; background:#161a18; box-shadow:0 26px 52px #172b3333,0 7px 18px #0d141620; border:1px solid #ffffff88; }
.sr-recipe-card--oats { left:6px; top:6px; transform:rotate(-7deg); }
.sr-recipe-card--rice { right:0; top:45px; transform:rotate(7deg); }
.social-recipe-page .sr-recipe-card > img { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; border:0; border-radius:0; box-shadow:none; }
.sr-recipe-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#050706d1,#05070685 18%,#00000014 45%,transparent 66%); }
.sr-recipe-card__copy { position:absolute; z-index:2; left:17px; right:15px; top:17px; color:white; }
.sr-recipe-card__copy > strong { font-size:20px; font-weight:650; line-height:1.15; display:block; text-shadow:0 2px 12px #000b; }
.sr-recipe-card__meta { display:flex; gap:6px; margin-top:10px; }
.sr-recipe-card__meta span { display:inline-flex; align-items:center; gap:4px; padding:6px 9px; border-radius:99px; background:#0a0e0cb8; border:1px solid #ffffff2e; font-size:11px; font-weight:700; backdrop-filter:blur(8px); }
.sr-recipe-card__meta svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* The app icon sits in front of the recipe collage as its visual focal point. */
.social-recipe-page .sr-cover__app-icon { position:absolute; z-index:4; left:50%; bottom:18px; transform:translateX(-50%) rotate(-4deg); width:144px; height:144px; aspect-ratio:1; border:5px solid #fff; border-radius:36px; box-shadow:0 22px 42px #173b2640,0 4px 10px #173b2620; }
.social-recipe-page .guide-layout { display:grid; grid-template-columns:minmax(0,780px) 190px; gap:56px; max-width:1026px; margin:auto; }
.social-recipe-page .guide-main-column { min-width:0; }
.social-recipe-page .guide-toc { display:block; position:static; width:auto; }
.social-recipe-page .guide-toc > div { position:sticky; top:96px; border:0; border-left:1px solid var(--guide-line); border-radius:0; box-shadow:none; background:transparent; padding:0 0 0 20px; }
.social-recipe-page .guide-toc a { font-size:12px; }
.social-recipe-page .guide-prose { color:var(--guide-body); font-size:16px; line-height:1.85; }
.social-recipe-page .guide-prose > h2 { font-family:var(--guide-serif); color:var(--guide-ink); font-size:32px; line-height:1.2; font-weight:500; margin:52px 0 22px; padding-top:28px; border-top:1px solid var(--guide-line); }
.social-recipe-page .guide-prose h3 { color:var(--guide-ink); font-size:18px; line-height:1.4; font-weight:700; margin:26px 0 12px; }
.social-recipe-page .guide-prose p { color:var(--guide-body); margin-bottom:20px; }
.social-recipe-page .guide-verdict { margin:0 0 30px; padding:25px 28px; border-radius:18px; background:var(--guide-green-soft); border:1px solid var(--guide-line); box-shadow:none; }
.social-recipe-page .guide-verdict p:last-child { color:var(--guide-ink); font-size:20px; font-family:var(--guide-serif); line-height:1.55; }
.social-recipe-page .guide-callout { padding:20px 24px; margin:26px 0; box-shadow:none; font-size:13px; line-height:1.75; border-radius:14px; }
.social-recipe-page .guide-callout p:last-child { margin-bottom:0; }
.social-recipe-page .guide-prose .sr-app { margin:44px 0; padding:28px 0 0; border-top:1px solid var(--guide-line); scroll-margin-top:100px; }
.sr-app__head { display:flex; gap:17px; align-items:center; margin-bottom:22px; }
.sr-app__icon { position:relative; flex:none; }
.sr-app__icon img { display:block; width:64px; height:64px; border-radius:17px; border:1px solid var(--guide-line); }
.sr-app__rank { position:absolute; left:-7px; bottom:-5px; display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:var(--guide-ink); color:var(--guide-paper); font-size:11px; font-weight:750; border:2px solid var(--guide-paper); }
.social-recipe-page .sr-app__head h2 { margin:0 0 5px; padding:0; border:0; font-size:30px; font-family:var(--guide-serif); line-height:1.1; font-weight:500; color:var(--guide-ink); }
.social-recipe-page .sr-app__head p { margin:0; font-size:12px; font-weight:650; color:var(--guide-green-dark); }
.sr-facts { display:grid; grid-template-columns:1fr 1fr; gap:1px; border:1px solid var(--guide-line); background:var(--guide-line); border-radius:14px; overflow:hidden; margin:22px 0; }
.sr-facts > div { padding:15px 18px; background:var(--guide-card); font-size:13px; line-height:1.6; }
.sr-facts dt { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--guide-muted); margin-bottom:4px; }
.sr-facts dd { margin:0; color:var(--guide-ink); }
.social-recipe-page .sr-fit { padding:16px 20px; background:var(--guide-green-soft); border-left:3px solid var(--guide-green); border-radius:0 12px 12px 0; font-size:14px; }
.social-recipe-page .sr-sources { font-size:12px; color:var(--guide-muted); line-height:1.8; }
.sr-capabilities { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0; }
.sr-capabilities > div { padding:20px; background:var(--guide-card); border:1px solid var(--guide-line); border-radius:16px; }
.social-recipe-page .sr-capabilities h3 { margin:0 0 9px; font-size:15px; }
.social-recipe-page .sr-capabilities p { margin:0; font-size:13px; line-height:1.75; }
.sr-demo { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; padding:26px; background:var(--guide-wash); border:1px solid var(--guide-line); border-radius:22px; margin:28px 0; }
.sr-demo__device { min-width:0; text-align:center; }
.sr-demo__device video,.sr-demo__device img { display:block; width:100%; max-width:248px; height:460px; margin:auto; object-fit:cover; object-position:top; background:#141914; border:5px solid #202723; border-radius:28px; box-shadow:0 16px 28px #0002; }
.social-recipe-page .sr-demo__device p { margin:14px 0 0; font-size:12px; line-height:1.5; color:var(--guide-muted); }
.sr-demo figcaption { grid-column:1/-1; font-size:11px; color:var(--guide-muted); line-height:1.7; }
.sr-workflow { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:25px 0; }
.sr-workflow > div { padding:18px; border:1px solid var(--guide-line); border-radius:14px; background:var(--guide-card); }
.sr-workflow span { display:block; font-size:11px; color:var(--guide-green); font-weight:700; letter-spacing:.1em; margin-bottom:9px; }
.sr-workflow strong { font-size:14px; color:var(--guide-ink); }
.social-recipe-page .sr-workflow p { margin:7px 0 0; font-size:12px; line-height:1.7; }
.social-recipe-page .guide-prose table { font-size:12px; line-height:1.6; }
.social-recipe-page .guide-prose th,.social-recipe-page .guide-prose td { padding:15px 12px; }
.social-recipe-page .guide-prose tbody tr:first-child { background:var(--guide-green-soft); }
.social-recipe-page .guide-table-wrap { border-radius:16px; box-shadow:none; }
.social-recipe-page .guide-cta { border-radius:22px; box-shadow:none; }
@media(max-width:760px) {
  .social-recipe-page .static-navbar-inner { padding:0 16px; gap:10px; }
  .social-recipe-page .static-navbar-logo { gap:5px; flex:none; }
  .social-recipe-page .static-navbar-logo span { font-size:19px; }
  .social-recipe-page .static-navbar-logo img { width:28px; height:28px; }
  .social-recipe-page .static-navbar-links { gap:4px; }
  .social-recipe-page .theme-toggle { width:28px; flex:none; }
  .social-recipe-page .static-navbar-btn { font-size:11px; padding:10px; white-space:nowrap; }
}
@media(max-width:1100px) { .social-recipe-page .guide-layout { grid-template-columns:minmax(0,780px); justify-content:center; } .social-recipe-page .guide-toc { display:none; } .social-recipe-page .sr-cover { padding:35px; gap:40px; } .sr-recipe-card { width:185px; height:260px; } .sr-cover__cards { height:360px; } .sr-cover__sources { gap:4px; } }
@media(max-width:760px) { .social-recipe-page .guide-container { width:calc(100% - 32px); padding-top:94px; } .social-recipe-page .guide-header h1 { font-size:38px; } .social-recipe-page .guide-dek { font-size:16px; } .social-recipe-page .guide-byline { gap:10px; } .social-recipe-page .sr-cover { grid-template-columns:1fr; padding:28px 24px 22px; gap:25px; border-radius:22px; } .social-recipe-page .sr-cover h2 { font-size:38px; margin:16px 0; } .sr-cover__copy > p { font-size:15px; } .sr-cover__sources { margin-top:18px; } .sr-wide-break { display:none; } .sr-cover__cards { width:100%; max-width:380px; height:310px; margin:auto; } .sr-recipe-card { width:46%; height:222px; border-radius:24px; } .sr-recipe-card--oats { left:7px; top:0; } .sr-recipe-card--rice { right:6px; top:24px; } .sr-recipe-card__copy { left:13px; right:10px; top:14px; } .sr-recipe-card__copy > strong { font-size:16px; } .sr-recipe-card__meta span { padding:5px 6px; font-size:10px; } .social-recipe-page .sr-cover__app-icon { width:112px; height:112px; border-radius:29px; bottom:4px; } .social-recipe-page .guide-prose { font-size:15px; } .social-recipe-page .guide-verdict { padding:20px; } .social-recipe-page .guide-verdict p:last-child { font-size:18px; } .sr-capabilities,.sr-facts,.sr-workflow { grid-template-columns:1fr; } .sr-demo { padding:18px; gap:22px; grid-template-columns:1fr; } .sr-demo__device video,.sr-demo__device img { height:460px; } .social-recipe-page .sr-app__head h2 { font-size:26px; } }