/* City Guide: real photographs and product screens, not decorative mockups. */
.cg-hero{padding-bottom:3.5rem}
.cg-hero-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.cg-hero h1{max-width:19ch;font-size:clamp(2.25rem,4vw,3.6rem);line-height:1.1}
.cg-hero .sub{max-width:49ch}
.cg-hero .btn-group{gap:.65rem}
.cg-hero-note{margin-top:1.25rem;color:var(--ink-2);font-size:.8rem;line-height:1.7;max-width:47ch}
.cg-comparison{margin:0;min-width:0;max-width:350px;width:100%;justify-self:center}
.cg-comparison.shot,.cg-screen.shot{border:0;border-radius:0;background:none;overflow:visible}
.cg-compare-frame{position:relative;aspect-ratio:500/780;overflow:hidden;border-radius:5px;background:#e8e7df;touch-action:pan-y;isolation:isolate;--split:50%}
.cg-compare-frame img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none}
.cg-compare-now{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split))}
.cg-compare-divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 4px #0004;pointer-events:none}
.cg-compare-divider::after{content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:34px;height:34px;border:1px solid #fff8;border-radius:50%;background:#fff;color:#26312f;font-size:1.1rem;box-shadow:0 2px 9px #0002}
.cg-photo-label{position:absolute;top:.8rem;left:.8rem;padding:.35rem .55rem;background:#fffef2ed;color:#26312f;border-radius:3px;font-size:.7rem;line-height:1.4;pointer-events:none}
.cg-photo-label--now{top:auto;left:auto;bottom:.8rem;right:.8rem;background:#182b35e8;color:#fff}
.cg-comparison figcaption{padding:.7rem 0 0;font-family:var(--body);font-size:.74rem;line-height:1.7;color:var(--ink-2);border:0;background:none}
.cg-range-label{display:block;font-size:.76rem;line-height:1.6;color:var(--ink);font-weight:600}
.cg-range-label input{display:block;width:100%;height:44px;margin:0;accent-color:var(--ink);cursor:ew-resize}
.cg-range-label input:focus-visible{outline:2px solid var(--signal);outline-offset:1px;border-radius:4px}
.cg-photo-credit{font-size:.68rem;line-height:1.75;font-weight:400}
.cg-photo-credit summary{cursor:pointer;min-height:30px;padding:.3rem 0}
.cg-photo-credit a{text-decoration:underline;text-underline-offset:3px}
.cg-hero noscript{font-size:.75rem}
.cg-proof{padding:0 0 2.8rem;border-bottom:1px solid var(--rule)}
.cg-proof .case-summary{margin-top:0}
.cg-workflow .section-heading h2{max-width:24ch}
.cg-feature-row{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;margin-top:3rem}
.cg-feature-row--reverse{grid-template-columns:1fr 1.25fr}
.cg-feature-row--reverse .cg-screen{order:2}
.cg-screen{margin:0;min-width:0}
.cg-screen>a{display:block;border:1px solid #d9dfd8;border-radius:6px;overflow:hidden;background:#f1f1ea}
.cg-screen img{display:block;width:100%;height:auto}
.cg-screen figcaption{font-family:var(--body);font-size:.73rem;line-height:1.7;color:var(--ink-2);margin-top:.75rem;padding:0;border:0;background:none}
.cg-screen figcaption a{text-decoration:underline;text-underline-offset:3px}
.cg-feature-copy h3{font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.22;letter-spacing:-.03em;margin-bottom:1rem}
.cg-feature-copy>p{color:var(--ink-2);font-size:.95rem;line-height:1.85;margin-bottom:1.1rem;max-width:48ch}
.cg-feature-copy ul{display:grid;gap:.65rem;margin:1.4rem 0;color:var(--ink-2);font-size:.85rem;line-height:1.75}
.cg-feature-copy li{padding-left:1rem;position:relative}
.cg-feature-copy li::before{content:'—';position:absolute;left:0;color:#76817e}
.cg-feature-copy .tlink{font-size:.85rem}
.cg-capture-note{max-width:54rem;margin:3rem auto 0;padding:1.5rem 1.6rem;background:#fff;border-left:2px solid var(--signal)}
.cg-capture-note h3{font-size:1.08rem;margin-bottom:.6rem}
.cg-capture-note p{font-size:.88rem;line-height:1.85;color:var(--ink-2)}
.cg-export-specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;border-block:1px solid var(--rule);padding:1.5rem 0;margin-top:3rem}
.cg-export-specs dt{font-size:1.1rem;font-weight:600;letter-spacing:-.02em}
.cg-export-specs dd{font-size:.78rem;color:var(--ink-2);line-height:1.8;margin-top:.4rem}
.cg-export-note{font-size:.77rem;color:var(--ink-2);line-height:1.8;margin-top:1rem;max-width:90ch}
.cg-workflow~.cta-band .cta-inner>div{min-width:0}
.cg-workflow~.cta-band .btn{max-width:100%;white-space:normal;text-align:center}
.cg-platform-overview{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;align-items:center}
.cg-platform-overview h2{font-size:clamp(1.7rem,2.8vw,2.4rem);letter-spacing:-.035em;line-height:1.2;margin-bottom:1rem}
.cg-platform-overview p{color:var(--ink-2);font-size:.94rem;line-height:1.8}
.cg-platform-overview figure{margin:0;border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.cg-platform-overview img{display:block;width:100%;height:auto}
.case-card--secondary .case-image img[src*='/story/']{object-fit:contain;object-position:center;background:#eeefe9;filter:none}
.platform-image img[src*='/story/']{object-fit:contain;object-position:center;background:#eeefe9}
@media(max-width:900px){.cg-hero-grid{grid-template-columns:1.2fr .8fr;gap:2rem}.cg-feature-row,.cg-feature-row--reverse{gap:2rem}}
@media(max-width:760px){
 .cg-hero-grid{grid-template-columns:1fr;gap:2.3rem}
 .cg-comparison{max-width:320px}
 .cg-hero h1{max-width:21ch}
 .cg-feature-row,.cg-feature-row--reverse{grid-template-columns:1fr;gap:1.5rem;margin-top:2.5rem}
 .cg-feature-row--reverse .cg-screen{order:0}
 .cg-feature-copy{max-width:42rem}
 .cg-feature-copy h3{font-size:1.65rem}
 .cg-export-specs{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
 .cg-platform-overview{grid-template-columns:1fr;gap:1.7rem}
}
@media(max-width:420px){.cg-hero h1{font-size:2.35rem}.cg-comparison{max-width:290px}.cg-capture-note{padding:1.3rem}.cg-feature-copy h3{font-size:1.5rem}}


/* Show the actual comparison early, with matching visual and keyboard order. */
.cg-hero-grid{grid-template-areas:"heading comparison" "description comparison" "actions comparison";grid-template-rows:1fr auto 1fr;row-gap:1.25rem}
.cg-hero-heading{grid-area:heading;align-self:end;min-width:0}
.cg-hero-heading h1{margin-bottom:0}
.cg-hero-description{grid-area:description;min-width:0}
.cg-hero-description .sub{margin:0}
.cg-hero-actions{grid-area:actions;align-self:start;min-width:0}
.cg-hero-actions .btn-group{margin-top:0}
.cg-hero-grid>.cg-comparison{grid-area:comparison}
.cg-workflow>.wrap>.cg-feature-row:first-child{margin-top:0}
.cg-screen>a{box-shadow:0 8px 24px #25302a08}
.cg-screen figcaption{font-size:.78rem;line-height:1.75}
.cg-screen figcaption a{display:inline-flex;min-height:36px;align-items:center}
.cg-proof{padding-bottom:1.5rem}
.cg-proof .case-summary{margin-bottom:0}
@media(max-width:760px){
 .cg-hero-grid{grid-template-columns:1fr;grid-template-areas:"heading" "comparison" "description" "actions";grid-template-rows:auto;gap:1.5rem}
 .cg-hero-heading h1{max-width:22ch}
 .cg-hero-grid>.cg-comparison{max-width:300px}
 .cg-hero-note{max-width:none}
 .cg-hero-description .sub{max-width:54ch}
 .cg-hero-actions .btn-group{align-items:stretch}
 .cg-hero-actions .btn{white-space:normal;text-align:center;min-height:46px}
 .cg-feature-row,.cg-feature-row--reverse{margin-top:1.75rem}
 .cg-capture-note{margin-top:2rem}
}
@media(max-width:420px){.cg-hero h1{font-size:2.15rem}.cg-hero-grid>.cg-comparison{max-width:280px}}


/* Clear product positioning and a quieter chapter navigation. */
.cg-positioning{font-size:1rem;line-height:1.7;color:var(--ink-2);max-width:47ch;margin:1.1rem 0 0}
.cg-section-nav{position:sticky;top:64px;z-index:90;background:#fff;border-block:1px solid var(--rule)}
.cg-section-nav .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.cg-section-nav a{display:flex;align-items:center;gap:.8rem;min-height:60px;font-size:.84rem;font-weight:600;color:var(--ink-2);border-bottom:2px solid transparent;padding:.6rem 0}
.cg-section-nav a span{font-family:var(--mono);font-size:.67rem;color:var(--ink-3);font-weight:400}
.cg-section-nav a:hover,.cg-section-nav a[aria-current="location"]{color:var(--ink);border-bottom-color:var(--ink)}
.cg-section-nav a:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.cg-proof{padding-top:1rem}
.cg-proof .case-summary{border-top:0}
.cg-workflow,.cg-adaptation{scroll-margin-top:142px}
.cg-video-section{background:#252d2f;color:#f5f4ef;border-block:1px solid #252d2f}
.cg-video-section .cg-feature-copy h3,.cg-video-section .cg-export-specs dt{color:#f5f4ef}
.cg-video-section .cg-feature-copy>p,.cg-video-section .cg-feature-copy ul,.cg-video-section .cg-screen figcaption,.cg-video-section .cg-export-specs dd,.cg-video-section .cg-export-note{color:#d0d7d4}
.cg-video-section .cg-feature-copy .eyebrow{color:#b5c5bf}
.cg-video-section .cg-feature-copy li::before{color:#a5b5ae}
.cg-video-section .tlink,.cg-video-section .cg-screen figcaption a{color:#fff;border-color:#b5c5bf}
.cg-video-section a:focus-visible{outline:2px solid #fff;outline-offset:4px}
.cg-video-section .cg-screen>a{border-color:#ffffff35;box-shadow:0 16px 38px #0002}
.cg-video-section .cg-export-specs{border-color:#ffffff30}
.cg-adaptation .detail-list li{font-size:.95rem;padding-block:1.15rem}
@media(max-width:760px){
 .cg-positioning{font-size:.94rem;line-height:1.65;max-width:46ch;margin-top:.85rem}
 .cg-section-nav .wrap{gap:.7rem}
 .cg-section-nav a{font-size:.76rem;line-height:1.5;min-height:60px;gap:.4rem}
 .cg-section-nav a span{display:none}
 .cg-video-section .cg-feature-row--reverse{gap:1.75rem}
}