/* App content only. Shell, glass, settings and color-scheme behavior come
   directly from /css/style.css; navigation from SharedApp's compiled CSS. */
.app-page{font-family:ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--app-accent:#c02a58;--app-accent-rgb:255,45,85;--app-link:#ab1941}
.app-burn-rate{--app-accent:#c05200;--app-accent-rgb:255,149,0;--app-link:#aa4400}
.app-out-the-rudes{--app-accent:#ce3029;--app-accent-rgb:255,59,48;--app-link:#b6241e}
.app-house-rules{--app-accent:#c02a58;--app-accent-rgb:255,45,85;--app-link:#ab1941}
/* Web adaptation of AppTintKit's CurrentAppTintGradientBackgroundModifier.
   The document canvas carries both gradient layers with normal page scrolling.
   Blend the document ends into its opaque canvas color for Safari chrome. */
html[data-blog-default-tint]{
  --app-wash-rgb:var(--tint-pink-rgb);
  --app-wash-color:rgb(var(--app-wash-rgb));--app-wash-space:srgb;
  --app-palette-light:.15;--app-palette-dark:.25;
  --app-palette-opacity:var(--app-palette-light);
  --app-canvas-neutral:#fff;
  --app-main-top:.55;--app-main-bottom:1;
  --app-under-top:.05;--app-under-bottom:.1;
  --app-canvas-fill:calc(1 - (1 - var(--app-palette-opacity) * (var(--app-main-top) + var(--app-main-bottom)) / 2) * (1 - var(--app-palette-opacity) * (var(--app-under-top) + var(--app-under-bottom)) / 2));
  --app-canvas-edge:color-mix(in var(--app-wash-space),var(--app-wash-color) calc(var(--app-canvas-fill) * 100%),var(--app-canvas-neutral));
  background-color:var(--app-canvas-edge);
  background-image:
    linear-gradient(to bottom,var(--app-canvas-edge),transparent 180px,transparent calc(100% - 180px),var(--app-canvas-edge)),
    linear-gradient(to bottom,color-mix(in var(--app-wash-space),var(--app-wash-color) calc(var(--app-palette-opacity) * var(--app-main-top) * 100%),transparent),color-mix(in var(--app-wash-space),var(--app-wash-color) calc(var(--app-palette-opacity) * var(--app-main-bottom) * 100%),transparent)),
    linear-gradient(to bottom,color-mix(in var(--app-wash-space),var(--app-wash-color) calc(var(--app-palette-opacity) * var(--app-under-top) * 100%),transparent),color-mix(in var(--app-wash-space),var(--app-wash-color) calc(var(--app-palette-opacity) * var(--app-under-bottom) * 100%),transparent)),
    linear-gradient(var(--app-canvas-neutral),var(--app-canvas-neutral));
  background-repeat:no-repeat;
}
html[data-blog-default-tint="orange"]{--app-wash-rgb:var(--tint-orange-rgb);--app-palette-dark:.225}
html[data-blog-default-tint="red"]{--app-wash-rgb:var(--tint-red-rgb)}
html[data-blog-default-tint][data-blog-tint]{--app-wash-rgb:var(--accent-rgb);--app-palette-light:.15;--app-palette-dark:.25}
html[data-blog-default-tint][data-blog-tint="orange"]{--app-palette-dark:.225}
html[data-blog-default-tint][data-blog-tint="blue"]{--app-palette-light:.13;--app-palette-dark:.15}
html[data-blog-default-tint][data-blog-tint="purple"]{--app-palette-light:.137}
html[data-blog-default-tint][data-blog-tint="green"]{--app-palette-light:.1;--app-palette-dark:.15}
html[data-blog-default-tint][data-blog-tint="grey"]{--app-wash-color:var(--app-canvas-neutral);--app-palette-light:1;--app-palette-dark:1}
.app-page .blogBackground{background:transparent;padding-top:calc(1.25em + env(safe-area-inset-top));padding-left:calc(1.25em + env(safe-area-inset-left));padding-right:calc(1.25em + env(safe-area-inset-right));padding-bottom:calc(var(--footer-gap) + env(safe-area-inset-bottom))}
body.app-page{background:transparent}
/* Header structure/declarations come from SharedApp's actual compiled source.
   This host adapter only provides sticky placement and the existing settings. */
.app-page .shared-app-header{position:sticky;top:calc(clamp(20px,1.875rem + .625vw,22.5px) + env(safe-area-inset-top));z-index:20;max-width:none}
.shared-app-header>.blogSettings{margin-left:12px}.shared-app-header .blogSettingsButton{color:var(--muted-text)}
.shared-app-header .headerName,.shared-app-header .navLink{font-family:inherit}
.app-page .blogMain a,.app-page .blogFooter a{color:var(--app-link);text-underline-offset:4px}
.app-page a:focus-visible,.app-page button:focus-visible{outline:3px solid var(--app-accent);outline-offset:4px}
.shared-app-header .blogSettingsButton:focus-visible{outline-offset:-4px}
.skip-link{position:absolute;top:-100px;left:24px;padding:12px 18px;background:var(--page-bg);z-index:30}.skip-link:focus{top:12px}
.app-page h1,.app-page h2,.app-page h3{color:var(--title-text);line-height:1.12;letter-spacing:-.035em;text-wrap:balance}
.app-page h1{font-size:clamp(4rem,5.5vw,6.8rem);font-weight:700;margin:20px 0 24px}
.app-page h2{font-size:clamp(2.8rem,3vw,4rem);font-weight:650;margin:8px 0 20px}
.app-page h3{font-size:2.3rem;font-weight:650;margin:14px 0}
.app-page p{margin:0 0 20px}
.eyebrow{font-size:1.2rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-text);margin-bottom:14px}
.landing{gap:var(--desktop-content-gap)}
.hero{display:grid;gap:64px;align-items:center;padding:56px 48px}
.hero.has-preview{grid-template-columns:minmax(220px,.8fr) minmax(0,1fr)}
.hero.text-led .app-info{max-width:780px;margin:auto}.hero.text-led{padding:72px}
.app-identity{display:flex;align-items:center;gap:20px;margin-bottom:38px}.app-identity p{margin:0;font-weight:620;font-size:2.4rem;letter-spacing:-.035em}
.app-icon{display:block;object-fit:contain;width:88px;height:88px;filter:drop-shadow(0 6px 14px #24182b14)}
.app-description{font-size:clamp(2rem,2.1vw,2.4rem);line-height:1.5;letter-spacing:-.012em}.app-detail{color:var(--muted-text);max-width:530px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.button{display:inline-flex;gap:18px;align-items:center;justify-content:center;border-radius:999px;padding:13px 23px;font-size:1.5rem;font-weight:620;text-decoration:none;min-height:48px}
.blogMain a.button-primary{background:var(--app-accent);color:white;box-shadow:0 4px 14px rgba(var(--app-accent-rgb),.15)}.button-primary:hover{filter:brightness(.94);text-decoration:none}.button-secondary{background:var(--glass-background);border:1px solid var(--rule)}
.iphone-preview{aspect-ratio:1470/3000;justify-self:center;width:100%;max-width:342px}.iphone-preview picture,.iphone-preview img{display:block;width:100%;height:auto}
.features-section{padding:48px 32px}.section-heading{margin-bottom:32px}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px}.feature-number{font-size:1.3rem;color:var(--app-link);font-variant-numeric:tabular-nums;font-weight:650}.feature p{color:var(--muted-text);margin:0;font-size:1.6rem;line-height:1.65}
.pro-note{padding:32px;display:grid;grid-template-columns:1fr 1.3fr;gap:48px}.pro-note h2{font-size:3rem}.pro-note p:last-child{margin-bottom:0}.product-note{padding:0 20px;font-size:1.3rem;line-height:1.65;color:var(--muted-text)}
.document{padding:40px 48px}.document>h1,.document>.eyebrow,.document-body{width:100%;max-width:780px;margin-left:auto;margin-right:auto}.document>h1{font-size:clamp(3.8rem,5vw,5.6rem);margin-bottom:36px}.document-body h2{font-size:2.7rem;margin:36px 0 14px}.document-body h2:first-child{margin-top:0}.document-body p,.document-body li{line-height:1.75}.document-body ul{padding-left:24px;margin:0 0 24px}.document-body li+li{margin-top:8px}.document-body a{overflow-wrap:anywhere}.document-body>p:last-child{margin-bottom:0}.app-page .blogFooter p{margin:0}
@media(max-width:992px){.hero{gap:36px;padding:40px 32px}.hero.has-preview{grid-template-columns:minmax(180px,.7fr) minmax(0,1fr)}.app-page h1{font-size:4.8rem}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.app-page .shared-app-header{top:calc(clamp(16px,1.5rem + .5vw,18px) + env(safe-area-inset-top))}.hero,.hero.text-led{padding:32px 24px;gap:36px}.hero.has-preview{grid-template-columns:1fr}.app-info{grid-row:1}.iphone-preview{max-width:270px}.app-identity{margin-bottom:28px;gap:16px}.app-icon{width:64px;height:64px}.app-identity p{font-size:2.2rem}.app-page h1{font-size:4.4rem}.app-description{font-size:2rem}.features-section{padding:28px 24px}.feature-grid{gap:28px}.pro-note{padding:24px;grid-template-columns:1fr;gap:8px}.document{padding:28px 24px}.document>h1{font-size:4rem}.document-body h2{font-size:2.5rem}.landing{gap:var(--mobile-page-gap)}}
@media(max-width:460px){.feature-grid{grid-template-columns:1fr}.hero,.hero.text-led,.document{padding:28px 20px}.app-page h1{font-size:4rem}.document>h1{font-size:3.6rem}.actions{align-items:stretch}.button{padding:12px 18px}.features-section{padding:28px 20px}.app-identity p{font-size:2rem}}
@media(prefers-color-scheme:dark){:root:not([data-blog-scheme="light"])[data-blog-default-tint]{--app-palette-opacity:var(--app-palette-dark);--app-canvas-neutral:#000;--app-main-top:1;--app-main-bottom:.55;--app-under-top:.3;--app-under-bottom:0}:root:not([data-blog-scheme="light"]) .app-page{--app-link:#ff9ab6}:root:not([data-blog-scheme="light"]) .app-burn-rate{--app-link:#ffb873}:root:not([data-blog-scheme="light"]) .app-out-the-rudes{--app-link:#ffa19d}}
:root[data-blog-scheme="dark"][data-blog-default-tint]{--app-palette-opacity:var(--app-palette-dark);--app-canvas-neutral:#000;--app-main-top:1;--app-main-bottom:.55;--app-under-top:.3;--app-under-bottom:0}:root[data-blog-scheme="dark"] .app-page{--app-link:#ff9ab6}:root[data-blog-scheme="dark"] .app-burn-rate{--app-link:#ffb873}:root[data-blog-scheme="dark"] .app-out-the-rudes{--app-link:#ffa19d}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.app-page *, .app-page *::before,.app-page *::after{animation:none!important;transition:none!important}}

@media(max-width:768px){.app-page .blogBackground{padding-top:calc(var(--mobile-page-gap) + env(safe-area-inset-top));padding-left:calc(var(--mobile-page-gap) + env(safe-area-inset-left));padding-right:calc(var(--mobile-page-gap) + env(safe-area-inset-right));padding-bottom:calc(var(--mobile-page-gap) + env(safe-area-inset-bottom))}.app-page .blogSettingsPanel{width:min(var(--settings-panel-width),calc(100vw - (2 * var(--mobile-page-gap)) - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}}

/* Short landscape viewports need the same scrollable, safe-area-bounded panel. */
.app-page .blogSettingsPanel{overflow:auto;overscroll-behavior:contain;max-height:max(0px,calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}

.app-page .skip-link{left:calc(24px + env(safe-area-inset-left))}.app-page .skip-link:focus{top:calc(12px + env(safe-area-inset-top))}