/* Guide pages and the linked guide section on the product landing. */
.guide-header-links { display:flex; gap:26px; font-size:14px; color:var(--muted); }
.guide-header-links a:hover { color:var(--green); }
.guide-languages { display:flex; gap:4px; border:1px solid var(--line); border-radius:7px; padding:3px; }
.guide-languages a { display:flex; align-items:center; min-height:36px; padding:4px 10px; font-size:13px; }
.guide-languages [aria-current] { background:var(--surface-raised); color:var(--green); border-radius:4px; }
.breadcrumbs { padding-top:28px; font-size:12px; color:var(--muted); }
.breadcrumbs ol { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.breadcrumbs li+li::before { content:'/'; margin-right:8px; color:#7e9482; }
.breadcrumbs a:hover { text-decoration:underline; }
.guide-hero,.guide-hub-hero { display:grid; grid-template-columns:1.25fr 1fr; gap:72px; align-items:center; padding-block:52px 76px; }
.guide-hero h1,.guide-hub-hero h1 { font-size:clamp(36px,4.4vw,62px); line-height:1.16; letter-spacing:-.055em; margin-block:24px; }
.guide-lead { color:var(--paper); font-size:22px; line-height:1.55; letter-spacing:-.02em; margin-bottom:20px; }
.guide-intro { color:var(--muted); font-size:16px; line-height:1.9; }
.guide-hero .button,.guide-hub-hero .button { margin-top:28px; }
.guide-byline { color:#b0bfaf; font-size:12px; margin-top:28px; }
.guide-byline span { padding-inline:5px; }
.guide-hero-figure { max-width:480px; width:100%; justify-self:end; }
.guide-image-stage { background:radial-gradient(ellipse at 45% 32%,#344c34 0%,#1c2b20 57%,#18221b 100%); border:1px solid #364837; border-radius:20px; padding:26px; display:flex; justify-content:center; align-items:center; }
.phone .guide-image-stage img { max-height:548px; width:auto; max-width:100%; border:5px solid #0a0e0b; border-radius:14px; box-shadow:0 20px 40px #0005; }
.diagram .guide-image-stage { padding:0; border-radius:20px; overflow:hidden; }
.guide-hero-figure figcaption { color:var(--muted); font-size:12px; line-height:1.7; padding:14px 6px 0; }
.guide-hero-figure figcaption a { display:inline-block; color:var(--green); text-decoration:underline; text-underline-offset:3px; margin-top:7px; }
.guide-image-stage>a { display:block; max-width:100%; }
.guide-control-details { margin:26px 0 0; }
.guide-control-details>div { padding:24px 0; border-top:1px solid #d0dbc9; }
.guide-control-details dt { font-size:21px; line-height:1.45; font-weight:750; letter-spacing:-.025em; }
.guide-control-details dd { margin:12px 0 0; color:#3e5142; line-height:1.9; word-break:keep-all; overflow-wrap:anywhere; }
.guide-settings td strong { display:block; margin-bottom:7px; }
.guide-settings th { width:34%; }
.guide-example { background:#e6edde; padding:28px; margin-top:26px; border-radius:9px; }
.guide-detail-screen { display:grid; grid-template-columns:minmax(0,240px) 1fr; gap:26px; align-items:center; padding:26px; background:#e0e9d9; border-radius:12px; margin-top:24px; }
.guide-detail-screen img { width:100%; max-height:420px; object-fit:contain; }
.guide-detail-screen figcaption { color:#3e5142; font-size:15px; line-height:1.8; }
.reading-zone { background:var(--paper); color:var(--ink); }
.guide-facts { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-block:38px; border-bottom:1px solid #d2dbd0; }
.guide-facts span { color:#44613b; font-size:12px; font-weight:750; letter-spacing:.08em; }
.guide-facts p { font-size:17px; line-height:1.65; margin-top:9px; }
.guide-reading-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:84px; padding-block:68px 86px; }
.guide-sidebar { align-self:start; position:sticky; top:126px; font-size:14px; }
.guide-sidebar nav>p { font-size:11px; font-weight:800; letter-spacing:.1em; margin-bottom:14px; color:#506747; }
.guide-sidebar ol { list-style:none; padding:0; margin:0; border-left:1px solid #ccd6c7; }
.guide-sidebar li a { padding:11px 0 11px 18px; display:flex; gap:12px; line-height:1.5; }
.guide-sidebar li span { color:#61775b; font-size:12px; }
.guide-sidebar li a:hover { background:#e4eddf; }
.sidebar-product { display:block; margin-top:28px; padding:18px; border:1px solid #c8d7bf; border-radius:6px; color:#2e5025; font-weight:700; }
.sidebar-product span { float:right; }
.guide-article-body { max-width:780px; }
.guide-article-body section+section { margin-top:64px; }
.guide-section-number { font-size:11px; letter-spacing:.14em; font-weight:800; color:#45613b; margin-bottom:14px; }
.guide-article-body h2 { font-size:32px; line-height:1.3; letter-spacing:-.045em; margin-bottom:26px; }
.guide-article-body h3 { font-size:21px; line-height:1.4; letter-spacing:-.025em; margin-bottom:9px; }
.guide-article-body p,.guide-checklist { line-height:1.9; }
.guide-article-body p:not(.guide-section-number) { color:#3e5142; }
.guide-checklist { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.guide-checklist li { position:relative; padding:16px 20px 16px 48px; background:#e6edde; border-radius:7px; }
.guide-checklist li::before { content:'✓'; position:absolute; left:19px; color:#426b31; font-weight:bold; }
.guide-steps { list-style:none; padding:0; margin:0; counter-reset:steps; }
.guide-steps li { display:flex; gap:22px; padding-block:25px; border-top:1px solid #d4ded0; counter-increment:steps; }
.guide-steps li::before { content:counter(steps,decimal-leading-zero); flex:0 0 40px; color:#4a683d; font-size:24px; font-weight:750; letter-spacing:-.05em; }
.guide-observations { border-collapse:collapse; width:100%; font-size:16px; }
.guide-observations th,.guide-observations td { text-align:left; vertical-align:top; padding:20px; border:1px solid #ced9c7; line-height:1.85; }
.guide-observations th { width:28%; background:#e6edde; font-weight:700; }
.guide-observations td { color:#3e5142; }
.guide-routine { padding:32px; background:#d9edbe; border:1px solid #bdd398; border-radius:12px; }
.guide-routine .text-link { color:#294c22; border-color:#aabd98; margin-top:14px; }
.guide-mistakes { display:grid; gap:24px; }
.guide-mistakes>div { padding-left:22px; border-left:3px solid #8ca478; }
.guide-faq details { border-top:1px solid #cbd8c5; padding:20px 0; }
.guide-faq details:last-child { border-bottom:1px solid #cbd8c5; }
.guide-faq summary { font-size:18px; line-height:1.5; font-weight:700; padding-right:10px; }
.guide-faq details p { margin-top:15px; }
.guide-related h2,.guide-gallery h2,.guide-download h2,.guide-directory>div>h2,.guide-chooser h2,.landing-guide-section h2 { font-size:clamp(30px,3.4vw,44px); line-height:1.25; letter-spacing:-.05em; margin-top:18px; }
.guide-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:35px; }
.guide-card { display:flex; flex-direction:column; background:var(--surface); color:var(--paper); --muted:#bac5ba; border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .18s,transform .18s; min-width:0; }
.guide-card:hover { border-color:#a6ca80; transform:translateY(-3px); }
.guide-card-copy { padding:28px; display:flex; flex:1; flex-direction:column; }
.guide-card-kicker { display:flex; justify-content:space-between; gap:14px; font-size:11px; letter-spacing:.09em; font-weight:750; color:var(--green); margin-bottom:18px; }
.guide-card h3 { font-size:25px; line-height:1.3; letter-spacing:-.04em; margin-bottom:12px; }
.guide-card p { color:var(--muted); font-size:15px; line-height:1.8; margin-bottom:24px; }
.guide-card-link { display:flex; justify-content:space-between; font-size:13px; font-weight:750; margin-top:auto; border-top:1px solid var(--line); padding-top:16px; }
.guide-card-visual { height:300px; background:#223427; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--line); padding:20px; }
.guide-card-visual.screen img { width:auto; height:100%; border:3px solid #0a0e0b; border-radius:9px; box-shadow:0 14px 30px #0005; }
.guide-card-visual.diagram { padding:0; background:#15231b; }
.guide-card-visual.diagram img { height:100%; width:100%; object-fit:contain; }
.guide-download { padding-block:66px; background:#24331f; border-top:1px solid #46563c; }
.guide-download>.container { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.guide-download h2 { font-size:38px; }
.guide-download p:not(.eyebrow):not(.fine-print) { color:var(--muted); margin-top:18px; }
.guide-download .store-links { margin-top:0; }
.guide-gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:38px; }
.guide-gallery-grid img { border:1px solid var(--line); border-radius:12px; }
.guide-gallery-grid figcaption { display:flex; gap:12px; padding-top:18px; align-items:baseline; }
.guide-gallery-grid figcaption span { color:var(--green); font-size:11px; }
.guide-gallery-grid h3 { font-size:16px; line-height:1.5; }
.guide-hub-hero { min-height:660px; }
.hub-visual { height:530px; position:relative; border-radius:28px; background:radial-gradient(ellipse at center,#345130,#101713 73%); }
.hub-screen { position:absolute; width:235px; border:6px solid #070c08; border-radius:18px; overflow:hidden; box-shadow:0 25px 60px #0008; }
.hub-screen.primary { left:0; top:0; transform:rotate(-7deg); z-index:2; }
.hub-screen.secondary { right:0; bottom:25px; transform:rotate(8deg); }
.hub-visual-label { position:absolute; bottom:-18px; left:0; right:0; text-align:center; color:var(--green); font-size:11px; letter-spacing:.19em; }
.guide-directory { border-top:1px solid var(--line); }
.guide-category-nav { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.guide-category-nav a { display:flex; gap:28px; border:1px solid #4c6049; border-radius:24px; padding:9px 18px; color:#d8e5cf; font-size:14px; }
.guide-category-nav a:hover { background:#263722; }
.guide-hub-group { margin-top:60px; }
.guide-hub-group>h2 { font-size:24px; margin-bottom:22px; font-weight:600; letter-spacing:-.03em; }
.guide-hub-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.guide-chooser { background:var(--paper); color:var(--ink); }
.guide-chooser .section-intro { color:#3e5142; }
.guide-chooser table { border-collapse:collapse; width:100%; margin-top:32px; font-size:16px; }
.guide-chooser th,.guide-chooser td { padding:21px 24px; text-align:left; border-bottom:1px solid #d0dbc9; }
.guide-chooser thead { background:#e5eeda; font-size:12px; color:#426139; }
.guide-chooser tbody th { width:36%; font-weight:650; }
.guide-chooser td a { color:#385c2a; text-decoration:underline; text-underline-offset:4px; }
.guide-chooser td:last-child { color:#576c4e; font-size:14px; }
.landing-guide-overview { display:grid; grid-template-columns:300px minmax(0,1fr); gap:28px; align-items:stretch; margin-top:34px; }
.landing-guide-preview { background:#19291d; border:1px solid #394f35; border-radius:14px; padding:25px; display:flex; flex-direction:column; justify-content:center; }
.landing-guide-preview>div { display:flex; justify-content:center; }
.landing-guide-preview img { height:340px; width:auto; max-width:100%; border:4px solid #080e09; border-radius:10px; }
.landing-guide-preview figcaption { padding-top:22px; color:#f3f6f1; }
.landing-guide-preview figcaption>span { font-size:10px; letter-spacing:.12em; color:#c8fa74; }
.landing-guide-preview strong { display:block; font-size:18px; line-height:1.5; margin-top:7px; letter-spacing:-.025em; word-break:keep-all; }
.landing-guide-preview p { color:#bac5ba; font-size:12px; margin-top:8px; }
.landing-feature-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.landing-feature-link { display:flex; align-items:flex-start; gap:12px; padding:22px 18px; background:#f5f8f0; color:#101713; border:1px solid #bacbb0; border-radius:9px; transition:background .15s,border-color .15s; }
.landing-feature-link:hover { background:#fff; border-color:#668251; }
.landing-feature-link>div { flex:1; min-width:0; }
.landing-feature-number { color:#496b36; font-size:11px; font-weight:750; margin-top:4px; }
.landing-feature-link h3 { font-size:19px; line-height:1.4; letter-spacing:-.035em; }
.landing-feature-link p { color:#4b5f47; font-size:13px; line-height:1.7; margin-top:8px; }
.landing-feature-arrow { color:#355c25; font-size:18px; line-height:1.5; }
.guide-page a:focus-visible,.reading-zone summary:focus-visible { outline-color:#73a53c; }
@media(min-width:1500px) { .guide-hero,.guide-hub-hero { gap:100px; } }
@media(max-width:1100px) {
 .guide-hero,.guide-hub-hero { gap:36px; }
 .guide-reading-layout { gap:45px; grid-template-columns:210px minmax(0,1fr); }
 .hub-screen { width:210px; }
 .guide-download>.container { gap:30px; }
 .guide-download .store-links { flex-wrap:wrap; }
 .landing-guide-overview { grid-template-columns:245px minmax(0,1fr); gap:20px; }
 .landing-feature-link { padding:18px 14px; gap:9px; }
 .landing-feature-link h3 { font-size:18px; }
 .guide-header-links { gap:18px; }
}
@media(max-width:800px) {
 .landing-guide-overview { grid-template-columns:1fr; }
 .landing-guide-preview { display:grid; grid-template-columns:130px minmax(0,1fr); gap:26px; align-items:center; padding:22px; }
 .landing-guide-preview img { height:235px; }
 .landing-guide-preview figcaption { padding-top:0; max-width:300px; }
 .guide-header-links { display:none; }
 .guide-hero,.guide-hub-hero { grid-template-columns:1fr; gap:38px; padding-block:35px 50px; }
 .guide-hero h1,.guide-hub-hero h1 { max-width:650px; font-size:44px; }
 .guide-hero-figure { justify-self:center; max-width:540px; }
 .phone .guide-image-stage img { max-height:480px; }
 .guide-image-stage { padding:24px; }
 .guide-facts { gap:26px; }
 .guide-reading-layout { grid-template-columns:1fr; gap:42px; padding-top:36px; }
 .guide-sidebar { position:static; }
 .guide-sidebar ol { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #cbd6c5; border-radius:8px; }
 .guide-sidebar li a { padding:12px; font-size:12px; }
 .sidebar-product { display:none; }
 .guide-related-grid { grid-template-columns:1fr; }
 .guide-download>.container { grid-template-columns:1fr; }
 .guide-gallery-grid { grid-template-columns:repeat(2,1fr); gap:30px 20px; }
 .hub-visual { width:min(470px,100%); justify-self:center; height:520px; }
 .hub-screen { width:230px; }
 .guide-hub-grid { gap:18px; }
 .guide-card-copy { padding:23px; }
 .guide-card h3 { font-size:22px; }
 .guide-card-visual { height:250px; }
 .guide-chooser th,.guide-chooser td { padding:18px 14px; }
}
@media(max-width:540px) {
 .guide-header .nav { gap:10px; min-height:75px; }
 .guide-header .brand { font-size:22px; gap:7px; }
 .guide-header .brand img { width:30px; height:30px; }
 .guide-header .brand small { font-size:7px; }
 .guide-header .nav-actions { gap:7px; }
 .guide-header .button-small { display:none; }
 .guide-languages a { font-size:12px; padding:4px 8px; }
 .guide-hero h1,.guide-hub-hero h1 { font-size:36px; }
 .guide-lead { font-size:20px; }
 .guide-intro { font-size:15px; }
 .guide-byline { max-width:280px; }
 .guide-facts { grid-template-columns:1fr; gap:24px; }
 .guide-sidebar ol { grid-template-columns:repeat(2,1fr); }
 .guide-article-body h2 { font-size:28px; }
 .guide-article-body h3 { font-size:20px; }
 .guide-steps li { gap:14px; }
 .guide-steps li::before { flex-basis:28px; font-size:21px; }
 .guide-observations th,.guide-observations td { display:block; width:100%; padding:15px 18px; }
 .guide-observations td { border-top:0; }
 .guide-observations tr+tr th { border-top:0; }
 .guide-routine { padding:24px; }
 .guide-hub-grid { grid-template-columns:1fr; }
 .guide-card-visual { height:260px; }
 .landing-guide-preview { grid-template-columns:105px minmax(0,1fr); gap:20px; padding:20px; }
 .landing-guide-preview img { height:202px; }
 .landing-guide-preview strong { font-size:17px; }
 .landing-feature-list { gap:10px; }
 .landing-feature-link { display:grid; grid-template-columns:1fr auto; gap:7px; padding:16px 13px; }
 .landing-feature-number { display:none; }
 .landing-feature-link h3 { font-size:17px; }
 .landing-feature-link p { font-size:12px; }
 .guide-control-details dt { font-size:20px; }
 .guide-example { padding:22px; }
 .guide-detail-screen { grid-template-columns:1fr; gap:20px; }
 .guide-detail-screen img { max-height:440px; }
 .guide-download h2 { font-size:31px; }
 .guide-download .store-links { flex-wrap:nowrap; }
 .guide-download .store-link { min-width:0; width:50%; padding:12px; gap:7px; }
 .guide-download .store-link strong { font-size:17px; }
 .guide-download .store-link small { font-size:10px; }
 .guide-download .store-link>span:last-child { font-size:18px; }
 .guide-chooser table,.guide-chooser tbody,.guide-chooser tr,.guide-chooser td,.guide-chooser tbody th { display:block; width:100%; }
 .guide-chooser thead { display:none; }
 .guide-chooser tr { padding-block:20px; border-bottom:1px solid #d0dbc9; }
 .guide-chooser th,.guide-chooser td { border:0; padding:5px 0; }
 .guide-gallery-grid { gap:28px 12px; }
 .guide-gallery-grid figcaption { gap:7px; padding-top:12px; }
 .guide-gallery-grid h3 { font-size:14px; }
 .hub-visual { height:390px; max-width:350px; }
 .hub-screen { width:175px; }
 .hub-screen.primary { left:16px; }
 .hub-screen.secondary { right:24px; }
 .guide-category-nav { gap:9px; }
 .guide-category-nav a { font-size:12px; padding:9px 13px; gap:15px; }
}
@media(max-width:359px) { .landing-feature-list { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .guide-card { transition:none; } .guide-card:hover { transform:none; } }
