/* Roamleaf public brand, 2026-10-01. Native UI tokens remain in Design.swift. */
.brand-site { --ink:#142b23; --muted:#496256; --paper:#f6f8f7; --pine:#123f32; --action:#00754f; background:var(--paper); color:var(--ink); }
.brand-site :focus-visible { outline:3px solid var(--action); outline-offset:5px; }
.wrap { width:min(1200px,calc(100% - 96px)); margin-inline:auto; }
.brand-site h1,.brand-site h2,.brand-site h3 { text-wrap:balance; }
.brand-site p { text-wrap:pretty; }
.brand-header { border-bottom:1px solid #dce5df; }
.brand-nav { display:flex; align-items:center; min-height:92px; gap:40px; }
.wordmark { display:flex; align-items:center; gap:14px; text-decoration:none; font-size:21px; font-weight:650; letter-spacing:-.025em; white-space:nowrap; }
.wordmark img { flex-shrink:0; border-radius:12px; }
.brand-nav nav { margin-left:auto; display:flex; gap:28px; align-items:center; font-size:14px; }
.brand-nav nav a { text-decoration:none; padding-block:14px; }
.brand-nav nav a:hover,.quiet-link:hover { color:var(--action); }
.language-links { display:flex; align-items:center; gap:4px; border-left:1px solid #d1dfd6; padding-left:20px; }
.language-links a { min-width:40px; min-height:44px; display:grid; place-items:center; text-decoration:none; font-size:13px; border-radius:8px; }
.language-links a[aria-current] { background:#e3f0e9; color:var(--action); font-weight:700; }
.brand-hero { display:grid; grid-template-columns:1.14fr .86fr; align-items:center; gap:72px; padding-block:84px 68px; }
.kicker { margin:0 0 24px; color:var(--action); font-size:12px; line-height:1.5; font-weight:650; letter-spacing:.1em; text-transform:uppercase; }
.brand-site h1 { margin:0; max-width:none; font-size:clamp(54px,5.7vw,78px); line-height:1.03; font-weight:650; letter-spacing:-.055em; }
.brand-site:lang(zh) h1 { letter-spacing:-.035em; font-size:clamp(50px,5.5vw,74px); line-height:1.14; }
.hero-description { max-width:535px; color:var(--muted); margin:30px 0 0; font-size:19px; line-height:1.7; }
.brand-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:34px; }
.brand-button { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:52px; padding:14px 21px; border-radius:12px; background:var(--action); color:#fff; font-size:15px; font-weight:600; text-decoration:none; transition:background 160ms ease; }
.brand-button:hover { background:#005d3e; }
.brand-button span { font-size:21px; }
.quiet-link { font-size:14px; text-underline-offset:5px; line-height:1.65; }
.platforms { font-size:12px; color:var(--muted); margin:28px 0 6px; letter-spacing:.035em; }
.release-note { color:var(--muted); margin:0; font-size:12px; }
.hero-figure { margin:0; }
.hero-paper { background:#e3f0e9; border:1px solid #d2e3d7; border-radius:120px 120px 20px 20px; padding:30px 34px 28px; }
.native-frame { overflow:hidden; padding:7px; border:1px solid #bdcfc2; border-radius:38px; background:#dbe7df; }
.native-frame img { display:block; width:100%; height:auto; border-radius:30px; }
.hero-paper .native-frame { width:min(306px,100%); margin-inline:auto; }
.hero-figure figcaption { margin-top:18px; text-align:center; font-size:12px; color:var(--muted); line-height:1.6; }
.memory-pillars { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid #d5e1d8; padding-block:28px; margin-bottom:16px; }
.memory-pillars div { padding:8px 34px; border-right:1px solid #d5e1d8; }
.memory-pillars div:first-child { padding-left:0; }
.memory-pillars div:last-child { border:0; }
.memory-pillars strong { font-size:17px; font-weight:600; }
.memory-pillars p { color:var(--muted); font-size:14px; line-height:1.6; margin:9px 0 0; }
.brand-section { padding-block:110px; scroll-margin-top:28px; }
.section-heading { max-width:730px; }
.brand-site h2 { margin:0; font-size:clamp(38px,4.5vw,58px); font-weight:600; line-height:1.12; letter-spacing:-.045em; }
.brand-site:lang(zh) h2 { line-height:1.25; letter-spacing:-.025em; }
.section-heading > p:not(.kicker) { color:var(--muted); font-size:17px; line-height:1.75; max-width:600px; margin:25px 0 0; }
.chapter-row { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; margin-top:74px; }
.chapter-row:nth-of-type(even) .chapter-copy { order:2; }
.chapter-row:nth-of-type(even) .chapter-figure { order:1; background:#e7eee9; }
.chapter-copy { max-width:490px; }
.chapter-copy h3 { font-size:clamp(32px,3.5vw,45px); letter-spacing:-.035em; line-height:1.15; font-weight:600; margin:0; }
.chapter-copy > p:not(.kicker) { font-size:16px; line-height:1.8; color:var(--muted); margin:24px 0 0; }
.chapter-figure { margin:0; border-radius:22px; background:#e0eae3; padding:34px; }
.chapter-figure .native-frame { width:258px; max-width:100%; margin-inline:auto; border-radius:34px; }
.chapter-figure .native-frame img { border-radius:26px; }
.sample-caption { color:var(--muted); text-align:center; font-size:12px; line-height:1.6; margin:30px 0 0; }
.tools-section { padding-block:84px; background:#e3f0e9; }
.tools-section h2 { max-width:850px; font-size:clamp(33px,4vw,49px); }
.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:46px; margin-top:48px; }
.tool-number { display:block; color:var(--action); font-size:13px; margin-bottom:30px; font-variant-numeric:tabular-nums; }
.tool-grid h3 { font-size:21px; line-height:1.35; letter-spacing:-.02em; margin:0 0 15px; font-weight:600; }
.tool-grid p { margin:0; font-size:15px; line-height:1.75; color:var(--muted); }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.choices .quiet-link { display:inline-block; margin-top:30px; }
.choices ol { list-style:none; padding:0; margin:0; counter-reset:choices; }
.choices li { border-bottom:1px solid #d5e1d8; padding:25px 0 25px 40px; position:relative; counter-increment:choices; }
.choices li:first-child { padding-top:0; }
.choices li::before { content:counter(choices,decimal-leading-zero); color:var(--action); font-size:12px; position:absolute; left:0; top:30px; }
.choices li:first-child::before { top:5px; }
.choices h3 { font-size:18px; line-height:1.5; font-weight:600; margin:0; }
.choices li p { color:var(--muted); font-size:14px; line-height:1.75; margin:9px 0 0; }
.faq-section { padding-block:0 110px; display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; }
.faq-section h2 { font-size:clamp(30px,3vw,41px); }
.faq-section details { border-bottom:1px solid #d5e1d8; }
.faq-section summary { cursor:pointer; padding:21px 0; font-size:17px; line-height:1.6; }
.faq-section details p { color:var(--muted); font-size:15px; line-height:1.8; margin:0 0 24px; }
.closing-section { background:var(--pine); color:#fff; text-align:center; padding-block:84px; }
.closing-section img { margin:0 auto 30px; border-radius:16px; }
.closing-section h2 { font-size:clamp(39px,5vw,62px); }
.closing-section p { color:#d3e7dc; font-size:13px; margin:25px 0 26px; }
.closing-section .brand-button { background:#e3f0e9; color:var(--pine); }
.closing-section .brand-button:hover { background:#fff; }
.brand-footer { display:flex; justify-content:space-between; gap:35px; padding-block:36px 42px; color:var(--muted); font-size:12px; }
.brand-footer strong { color:var(--ink); font-weight:600; }
.brand-footer p { line-height:1.5; margin:10px 0 0; }
.legal-links { display:flex; gap:25px; }
.legal-links a { text-decoration:none; }
@media(max-width:1000px) {
  .wrap { width:calc(100% - 56px); }
  .brand-nav { gap:20px; min-height:80px; }
  .brand-nav nav { gap:18px; }
  .wordmark { font-size:18px; gap:10px; }
  .language-links { padding-left:10px; }
  .brand-hero { gap:32px; padding-top:60px; }
  .brand-site h1 { font-size:60px; }
  .brand-site:lang(zh) h1 { font-size:55px; }
  .hero-paper { padding:22px; border-radius:90px 90px 20px 20px; }
  .hero-description { font-size:17px; }
  .chapter-row,.choices,.faq-section { gap:44px; }
  .chapter-figure { padding:25px; }
  .brand-site h2 { font-size:48px; }
  .brand-actions { gap:16px; }
}
@media(max-width:720px) {
  .wrap { width:calc(100% - 40px); }
  .brand-nav { flex-wrap:wrap; justify-content:space-between; gap:0; padding-block:13px; }
  .wordmark { font-size:18px; }
  .wordmark img { width:36px; height:36px; border-radius:10px; }
  .brand-nav nav { order:3; width:100%; justify-content:space-between; margin:7px 0 -4px; gap:18px; font-size:13px; }
  .language-links { padding-left:0; border:0; }
  .language-links a { min-width:34px; }
  .brand-hero { grid-template-columns:1fr; gap:35px; padding-block:46px 42px; }
  .brand-site h1,.brand-site:lang(zh) h1 { font-size:clamp(45px,10.5vw,62px); }
  .kicker { font-size:11px; margin-bottom:18px; }
  .hero-description { font-size:17px; line-height:1.75; margin-top:24px; }
  .brand-actions { gap:20px; margin-top:27px; }
  .platforms { margin-top:22px; }
  .hero-figure { width:min(350px,100%); margin-inline:auto; }
  .hero-paper { padding:24px 30px; border-radius:100px 100px 18px 18px; }
  .hero-paper .native-frame { width:248px; }
  .memory-pillars { grid-template-columns:1fr; padding:6px 0; margin-bottom:0; }
  .memory-pillars div,.memory-pillars div:first-child { border-right:0; border-bottom:1px solid #d5e1d8; padding:20px 0; }
  .memory-pillars strong { font-size:16px; }
  .memory-pillars p { margin:6px 0 0; }
  .brand-section { padding-block:72px; }
  .brand-site h2 { font-size:37px; }
  .section-heading > p:not(.kicker) { font-size:16px; margin-top:20px; }
  .chapter-row { grid-template-columns:1fr; gap:28px; margin-top:48px; }
  .chapter-row:nth-of-type(even) .chapter-copy,.chapter-row:nth-of-type(even) .chapter-figure { order:initial; }
  .chapter-copy h3 { font-size:32px; }
  .chapter-copy > p:not(.kicker) { margin-top:18px; font-size:15px; }
  .chapter-figure { padding:28px; }
  .chapter-figure .native-frame { width:245px; }
  .tools-section { padding-block:64px; }
  .tool-grid { grid-template-columns:1fr; gap:30px; margin-top:34px; }
  .tool-grid article { border-top:1px solid #c8ddcf; padding-top:22px; }
  .tool-number { margin-bottom:12px; }
  .tool-grid h3 { font-size:20px; }
  .choices { grid-template-columns:1fr; gap:35px; }
  .faq-section { grid-template-columns:1fr; gap:24px; padding-bottom:72px; }
  .faq-section h2 { font-size:31px; }
  .faq-section summary { font-size:16px; }
  .closing-section { padding-block:65px; }
  .closing-section h2 { font-size:40px; }
  .brand-footer { flex-direction:column; gap:24px; padding-top:28px; }
}
@media(prefers-reduced-motion:reduce) { .brand-site *, .brand-site *::before { transition:none !important; } }