/* 2026-08-07 v1.7
 * - Added a compact header language toggle for all marketing pages.
 *
 * 2026-08-07 v1.6
 * - Added language controls for the bilingual App Store support page.
 *
 * 2026-08-06 v1.5
 * - Replaced simulated CSS phone shells with transparent merged iPhone frame images.
 *
 * 2026-08-06 v1.4
 * - Added focused guide layouts for recording, sharing, POIs and comparisons.
 *
 * 2026-08-06 v1.3
 * - Added the complete features-page layout for real simulator screenshots.
 *
 * 2026-08-06 v1.2
 * - Removed the duplicate CSS notch from simulator screenshots with a Dynamic Island.
 *
 * 2026-08-06 v1.1
 * - Moved the stylesheet into the theme CSS loader structure.
 *
 * 2026-08-06 v1.0
 * - Added the public PinRoam marketing-site styling.
 */

:root { --sky:#bce0f2; --orange:#ee6601; --ink:#24323a; --muted:#5b6b73; --cream:#f8f7f4; --line:#d8d8d3; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--cream); color:var(--ink); margin:0; }
a { color:inherit; }
img { display:block; max-width:100%; }
.site-shell { margin:0 auto; max-width:75rem; padding-left:1.5rem; padding-right:1.5rem; }
.site-header { background:rgba(248,247,244,.94); border-bottom:1px solid rgba(36,50,58,.08); position:sticky; top:0; z-index:10; }
.site-header-inner { align-items:center; display:flex; gap:1.4rem; justify-content:space-between; min-height:4.75rem; }
.brand { align-items:center; display:inline-flex; font-size:1.1rem; font-weight:800; gap:.65rem; letter-spacing:-.035em; text-decoration:none; white-space:nowrap; }
.brand img { border-radius:.62rem; height:2rem; width:2rem; }
.site-header nav { display:flex; gap:1.25rem; margin-left:auto; }
.site-header nav a,.site-footer nav a { color:var(--muted); font-size:.92rem; font-weight:700; text-decoration:none; }
.site-header nav a:hover,.site-footer nav a:hover,.text-link:hover { color:var(--orange); }
.header-language-toggle { align-items:center; display:flex; gap:.15rem; }
.header-language-toggle a { border-radius:999px; color:var(--muted); font-size:.72rem; font-weight:850; padding:.42rem .48rem; text-decoration:none; }
.header-language-toggle a[aria-current="page"] { background:var(--ink); color:#fff; }
.button { align-items:center; border-radius:999px; display:inline-flex; font-weight:800; gap:.5rem; justify-content:center; padding:.88rem 1.15rem; text-decoration:none; transition:transform .16s ease,background .16s ease; }
.button:hover { transform:translateY(-2px); }
.app-store-button { background:var(--orange); color:#fff; font-size:.95rem; }
.app-store-button span:first-child { font-size:1.16rem; line-height:.8; }
.hero { background:linear-gradient(115deg,var(--sky) 0%,#dff1ef 51%,var(--cream) 51%); overflow:hidden; }
.hero-grid { align-items:center; display:grid; gap:3rem; grid-template-columns:minmax(0,1fr) minmax(22rem,.86fr); min-height:39rem; padding-bottom:4rem; padding-top:5rem; }
.eyebrow { color:var(--orange); font-size:.76rem; font-weight:850; letter-spacing:.095em; margin:0 0:.9rem; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(3rem,6vw,5.45rem); letter-spacing:-.07em; line-height:.91; margin-bottom:1.4rem; max-width:11ch; }
h2 { font-size:clamp(2.15rem,4vw,3.45rem); letter-spacing:-.06em; line-height:.98; margin-bottom:1.1rem; max-width:17ch; }
h3 { font-size:1.2rem; letter-spacing:-.035em; margin-bottom:.5rem; }
.hero-intro,.section-intro > p:not(.eyebrow),.section-lead { color:var(--muted); font-size:1.15rem; line-height:1.62; max-width:37rem; }
.button-row { align-items:center; display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:2rem; }
.text-link { color:var(--ink); font-weight:800; text-decoration:none; }
.platform-note { color:var(--muted); font-size:.86rem; margin:1.35rem 0 0; }
.language-toggle { display:flex; gap:.45rem; margin-bottom:2rem; }
.language-toggle a { border-radius:999px; color:var(--muted); font-size:.8rem; font-weight:800; padding:.5rem .75rem; text-decoration:none; }
.language-toggle a[aria-current="page"] { background:var(--ink); color:#fff; }
.features-hero { background:linear-gradient(125deg,var(--sky),#e8f2ee); overflow:hidden; }
.features-hero-grid { align-items:center; display:grid; gap:4rem; grid-template-columns:minmax(0,.95fr) minmax(29rem,1.05fr); min-height:44rem; padding-bottom:4.5rem; padding-top:4.5rem; }
.features-hero-phones { align-items:center; display:flex; justify-content:center; min-height:35rem; position:relative; }
.features-hero-phones .feature-device { margin-left:-3rem; transform:rotate(4deg); width:17rem; }
.features-hero-phones .feature-device-back { margin-left:0; transform:rotate(-6deg) translateY(1.8rem); }
.hero-photo { margin:0; position:relative; }
.hero-photo img { aspect-ratio:4/4.5; border-radius:1.5rem; object-fit:cover; transform:rotate(2deg); width:100%; }
.hero-photo figcaption { background:#fff; border-radius:999px; bottom:-1rem; font-size:.73rem; padding:.55rem .8rem; position:absolute; right:1rem; }
.hero-photo figcaption a { text-decoration:none; }
.proof-strip { background:var(--ink); color:#fff; }
.proof-items { display:grid; grid-template-columns:repeat(3,1fr); }
.proof-items p { border-right:1px solid rgba(255,255,255,.16); margin:0; padding:1.55rem 1.25rem 1.55rem 0; }
.proof-items p + p { padding-left:1.25rem; }
.proof-items p:last-child { border:0; }
.proof-items strong,.proof-items span { display:block; }
.proof-items strong { font-size:1.1rem; letter-spacing:-.03em; }
.proof-items span { color:#bed7e3; font-size:.85rem; margin-top:.18rem; }
.section { padding:7rem 0; }
.section-soft { background:#eef1ed; }
.section-intro { margin-bottom:3rem; }
.feature-grid,.steps { display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
.feature-grid article { background:#fff; border-radius:1rem; min-height:13.25rem; padding:1.6rem; }
.feature-grid p,.steps p { color:var(--muted); line-height:1.55; margin-bottom:0; }
.feature-number { color:var(--orange); display:block; font-size:.8rem; font-weight:850; letter-spacing:.08em; margin-bottom:2.3rem; }
.feature-jump-grid { display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
.feature-jump-grid a { background:#fff; border-radius:1rem; min-height:7.5rem; padding:1.35rem; text-decoration:none; transition:transform .16s ease; }
.feature-jump-grid a:hover { transform:translateY(-3px); }
.feature-jump-grid strong,.feature-jump-grid span { display:block; }
.feature-jump-grid strong { font-size:1.08rem; letter-spacing:-.035em; }
.feature-jump-grid span { color:var(--muted); font-size:.86rem; line-height:1.4; margin-top:.45rem; }
.feature-story { padding:7rem 0; scroll-margin-top:4.75rem; }
.feature-story-grid { align-items:center; display:grid; gap:4.5rem; grid-template-columns:minmax(0,.9fr) minmax(25rem,1.1fr); }
.feature-story:nth-child(even) .feature-story-copy { order:2; }
.feature-story-copy > p:not(.eyebrow) { color:var(--muted); font-size:1.05rem; line-height:1.65; max-width:35rem; }
.feature-device-pair { align-items:center; display:flex; gap:1.5rem; justify-content:center; }
.feature-device { flex:0 1 18rem; margin:0; position:relative; }
.feature-device img { width:100%; }
.feature-device-single { justify-self:center; max-width:20rem; width:100%; }
.guide-hero-device { justify-self:center; max-width:20rem; width:100%; }
.recording-gesture { align-items:center; background:#fff; border-radius:1rem; display:flex; gap:1rem; margin:1.7rem 0 .9rem; padding:1.15rem; }
.recording-gesture-button { background:#ef4444; border:9px solid #fff; border-radius:50%; box-shadow:0 0 0 1px var(--line),0 0 0 9px rgba(255,255,255,.7); flex:0 0 2.15rem; height:2.15rem; margin:.55rem; width:2.15rem; }
.recording-gesture strong,.recording-gesture span { display:block; }
.recording-gesture span { color:var(--muted); font-size:.88rem; line-height:1.4; margin-top:.25rem; }
.guide-drawer-demo { background:#fff; border-radius:1.5rem; justify-self:stretch; padding:1rem 1.2rem 1.35rem; }
.guide-drawer-handle { background:var(--line); border-radius:999px; height:.3rem; margin:0 auto 1.3rem; width:3.5rem; }
.guide-drawer-demo article { align-items:center; border-bottom:1px solid var(--line); display:flex; gap:1rem; padding:1rem .2rem; }
.guide-drawer-demo article:last-child { border-bottom:0; }
.guide-drawer-demo article > span { align-items:center; background:#feeceb; border-radius:50%; display:flex; flex:0 0 2.7rem; height:2.7rem; justify-content:center; }
.guide-drawer-demo strong,.guide-drawer-demo small { display:block; }
.guide-drawer-demo small { color:var(--muted); margin-top:.2rem; }
.share-url-example { background:var(--ink); border-radius:.8rem; color:#fff; display:flex; flex-wrap:wrap; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.79rem; gap:0; margin:1.6rem 0; overflow-wrap:anywhere; padding:1rem; }
.share-url-example strong { color:#ffb478; }
.demo-trip-card { align-items:center; background:var(--sky); border-radius:1.5rem; display:flex; gap:2rem; justify-content:space-between; margin-top:2rem; padding:2rem; }
.demo-trip-card h3 { font-size:clamp(1.55rem,3vw,2.25rem); max-width:24ch; }
.demo-trip-card p:not(.eyebrow) { color:var(--muted); line-height:1.55; margin-bottom:0; }
.demo-trip-card .button { flex:0 0 auto; }
.demo-trip-flag { display:block; font-size:2.2rem; margin-bottom:.8rem; }
.poi-chip-grid { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.7rem; }
.poi-chip-grid span { background:#fff; border-radius:999px; font-size:.85rem; font-weight:750; padding:.65rem .85rem; }
.comparison-sources { line-height:1.55; }
.comparison-sources a { font-weight:750; }
.screenshot-grid { align-items:center; display:grid; gap:5rem; grid-template-columns:1fr minmax(16rem,23rem); }
.screenshot-copy p:not(.eyebrow) { color:var(--muted); line-height:1.65; max-width:35rem; }
.check-list { list-style:none; margin:1.6rem 0 2rem; padding:0; }
.check-list li { border-bottom:1px solid var(--line); font-weight:700; padding:.7rem 0 .7rem 1.5rem; position:relative; }
.check-list li:before { color:var(--orange); content:'✓'; left:0; position:absolute; }
.phone-frame { margin:0 auto; max-width:22rem; padding:0; position:relative; }
.phone-frame img { width:100%; }
.phone-frame figcaption { color:var(--muted); font-size:.73rem; left:50%; position:absolute; text-align:center; top:calc(100% + .75rem); transform:translateX(-50%); width:100%; }
.table-wrap { background:#fff; border-radius:1rem; overflow:auto; }
table { border-collapse:collapse; min-width:42rem; text-align:left; width:100%; }
th,td { border-bottom:1px solid var(--line); padding:1.1rem 1.25rem; vertical-align:top; }
th { background:#e8f5f7; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; }
tr:last-child td { border-bottom:0; }
td { color:var(--muted); line-height:1.45; }
td:first-child { color:var(--ink); font-weight:800; }
.fine-print { color:var(--muted); font-size:.78rem; margin-top:1rem; }
.steps article { border-top:2px solid var(--orange); padding-top:1.1rem; }
.steps span { color:var(--orange); font-size:1.8rem; font-weight:850; letter-spacing:-.06em; }
.faq-section { background:var(--sky); }
.narrow { max-width:50rem; }
.faq-section details { border-bottom:1px solid rgba(36,50,58,.18); padding:1.05rem 0; }
.faq-section summary { cursor:pointer; font-size:1.06rem; font-weight:800; list-style:none; padding-right:2rem; position:relative; }
.faq-section summary:after { color:var(--orange); content:'+'; font-size:1.4rem; position:absolute; right:0; top:-.28rem; }
.faq-section details[open] summary:after { content:'−'; }
.faq-section details p { color:var(--muted); line-height:1.55; margin:1rem 2rem 0 0; }
.cta-section { background:var(--orange); color:#fff; padding:4.5rem 0; }
.cta-inner { align-items:center; display:flex; gap:2rem; justify-content:space-between; }
.cta-section .eyebrow { color:#fff3e9; }
.cta-section h2 { margin:0; max-width:16ch; }
.cta-section .app-store-button { background:var(--ink); white-space:nowrap; }
.site-footer { background:var(--ink); color:#fff; padding:2rem 0; }
.footer-inner { align-items:center; display:flex; gap:1.5rem; justify-content:space-between; }
.site-footer p { color:#bed7e3; font-size:.82rem; margin:0 auto 0 0; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:1rem; justify-content:flex-end; }
.site-footer nav a { color:#bed7e3; }
@media (max-width:760px) { .site-header-inner { gap:.55rem; min-height:4.25rem; } .site-header nav:not(.header-language-toggle) { display:none; } .header-store { font-size:.75rem; padding:.65rem .8rem; } .hero { background:var(--sky); } .hero-grid { display:block; min-height:0; padding-bottom:3.4rem; padding-top:3.5rem; } .hero-photo { margin-top:2.8rem; max-width:32rem; } .features-hero-grid { display:block; min-height:0; padding-bottom:3.8rem; padding-top:3.5rem; } .guide-hero-device { margin-top:3rem; } .features-hero-phones { margin-top:3rem; min-height:25rem; } .features-hero-phones .feature-device { margin-left:-4.5rem; width:12.5rem; } .features-hero-phones .feature-device-back { margin-left:0; } h1 { max-width:12ch; } .proof-items { grid-template-columns:1fr; } .proof-items p,.proof-items p + p { border-bottom:1px solid rgba(255,255,255,.16); border-right:0; padding:1rem 0; } .proof-items p:last-child { border-bottom:0; } .section,.feature-story { padding:4.5rem 0; } .feature-grid,.feature-jump-grid,.steps,.screenshot-grid,.feature-story-grid { grid-template-columns:1fr; } .feature-jump-grid { grid-template-columns:repeat(2,1fr); } .feature-story-grid { gap:3rem; } .feature-story:nth-child(even) .feature-story-copy { order:0; } .feature-device-pair { gap:.75rem; } .screenshot-grid { gap:3rem; } .phone-frame { grid-row:1; } .demo-trip-card { align-items:flex-start; flex-direction:column; padding:1.4rem; } .demo-trip-card .button { width:100%; } .cta-inner,.footer-inner { align-items:flex-start; flex-direction:column; } .site-footer p { margin:0; } .site-footer nav { justify-content:flex-start; } }