/* TinyBook section/base layer. Shared system recipes and components have explicit precedence. */
@layer website-base {
/* 13 October owner refinement: one neutral surface and room for the product. */
.appearance-view { border:0!important; background:transparent!important; box-shadow:none!important; }
.appearance-view .segment { box-shadow:none!important; }
.appearance-view input:checked+.segment { background:#f5f5f7; }
.viewer-controls { position:relative; gap:8px; }
.feature-overview>.content-wide { max-width:none; padding-inline:0; }
.feature-overview .feature-overview-heading { width:var(--content-max); padding-inline:var(--page-gutter); }
.feature-overview .feature-grid,.scenarios-section .scenario-track { --gallery-gutter:max(var(--page-gutter),calc((100% - var(--content-max))/2 + var(--page-gutter))); max-width:none; margin-inline:0; padding-inline:var(--gallery-gutter); scroll-padding-inline:var(--gallery-gutter); }
.feature-overview .feature-grid { gap:24px; scroll-snap-type:x proximity; }
.feature-grid,.scenario-track { scroll-behavior:smooth; }
.feature-overview .feature-grid.is-dragging,.scenarios-section .scenario-track.is-dragging { scroll-snap-type:none; scroll-behavior:auto; }
.feature-overview .feature-card { width:calc((100% - 48px)/3); min-height:500px; padding:32px 24px 28px; background:#fff!important; border-radius:28px; scroll-snap-stop:normal; }
.feature-overview .feature-card h3 { font-size:26px; }
.feature-overview .feature-card-copy { gap:var(--space-s); }
.feature-overview .feature-card-copy > * { margin:0; }
.feature-overview .feature-card p { font-size:17px; }
.feature-overview .feature-card .feature-visual { margin-top:24px; min-height:160px; }
.feature-overview .feature-card .feature-visual img { height:210px; max-width:100%; }
.feature-overview #feature-companion img { max-width:200px; }
.feature-overview .highlight-controls { max-width:var(--content-max); margin-inline:auto; padding-inline:var(--page-gutter); justify-content:flex-end; }
.controls-story .experience-layout { align-items:start; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:64px; }
.controls-story .experience-copy { padding-block:0; }
.control-feature-stack { display:grid; grid-template-columns:1fr; gap:0; margin-top:40px; }
.control-feature { display:flex; align-items:flex-start; gap:20px; padding:24px 0; background:none; border:0; border-radius:0; }
.control-feature:first-child { padding-top:0; }
.control-feature:last-child { padding-bottom:0; }
.control-feature + .control-feature { border-top:1px solid var(--line); }
.control-feature>div { min-width:0; }
.control-feature>svg { width:24px; height:24px; flex:none; stroke:var(--ink); stroke-width:1.6; margin-top:2px; }
.control-feature h3 { margin:0; font:600 21px/1.25 var(--font); letter-spacing:-.02em; }
.control-feature p { margin:12px 0 0; color:var(--secondary); font-size:16px; line-height:1.45; }
.control-feature .text-link { margin-top:12px; }
.controls-story .interactive-product { position:sticky; top:104px; align-self:start; padding-block:20px; }
.scenarios-section .scenario-track { gap:var(--showroom-gap); scroll-snap-type:x proximity; }
.scenario-card { flex:0 0 calc((100% - 96px)/2); width:auto; min-width:0; scroll-snap-stop:normal; }
.scenario-card .scenario-media { aspect-ratio:var(--showroom-media-ratio); width:100%; height:auto; min-height:0; border:0; border-radius:0; background:transparent; overflow:visible; margin-bottom:var(--showroom-media-gap); }
.scenario-card .scenario-media img { object-fit:contain; width:100%; height:100%; padding:0; }
.scenario-title { min-height:0; margin:0 0 12px!important; font-size:24px; line-height:1.25; }
.scenario-caption { margin:0; padding:0; max-width:34ch; font-size:17px; line-height:1.5; }
.scenarios-section .scenario-card { display:flex; flex-direction:column; gap:var(--space-s); }
.scenarios-section .scenario-card > * { margin:0!important; }
.controls-story .interactive-product { display:flex; flex-direction:column; gap:var(--space-s); }
.controls-story .interactive-product .demo-invitation { margin:0; }
.product-footer .footer-columns > div { display:flex; flex-direction:column; gap:var(--space-s); }
.product-footer .footer-columns > div > * { margin:0; }
.product-footer .footer-bottom { gap:var(--space-s); }
.gallery-controls { justify-content:flex-end; margin-top:32px; }
.appearance-3d-stage { position:relative; width:100%; aspect-ratio:6 / 5; }
.offer-identity img { border-radius:22%; }
.offer-art img { animation:offer-float 5s ease-in-out infinite; }
@keyframes offer-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(calc(-1 * var(--offer-float-rise))); } }
.mc-requirements .text-link,.offer-companion .text-link { font-size:inherit; }
.price-requirements { width:fit-content; max-width:100%; margin-inline:auto; }
.price-requirements summary { display:inline-flex; gap:8px; justify-content:flex-start; }
.merch-story,.merch-promo,.merch-preview,.merch-section { background:#f5f5f7!important; }
.faq-section { padding-top:var(--faq-block-space); padding-bottom:var(--faq-block-space); }
.faq-list { margin-top:var(--faq-content-gap); }
.closing-scene { margin-top:0; }
.palm-story { isolation:isolate; background:#fff; }
.palm-ground { position:absolute; z-index:0; inset:0; background:url('/assets/brand-sunrise-alpha.png') center bottom/cover no-repeat; pointer-events:none; }
.brand-grain { position:absolute; inset:0; pointer-events:none; background:url('/assets/brand-grain-tile.png') repeat; background-size:128px 128px; opacity:.065; mask:url('/assets/brand-grain-mask.png') center/100% 100% no-repeat; -webkit-mask:url('/assets/brand-grain-mask.png') center/100% 100% no-repeat; animation:brand-grain-shift 1s steps(1,end) infinite paused; }
.palm-ground .brand-grain { mask:url('/assets/brand-sunrise-grain-mask.png') center bottom/cover no-repeat; -webkit-mask:url('/assets/brand-sunrise-grain-mask.png') center bottom/cover no-repeat; }
.brand-grain[data-grain-playing="true"] { animation-play-state:running; }
@keyframes brand-grain-shift { 0%{background-position:0 0} 12.5%{background-position:-31px 19px} 25%{background-position:21px -47px} 37.5%{background-position:-64px -23px} 50%{background-position:47px 61px} 62.5%{background-position:-18px -73px} 75%{background-position:77px 32px} 87.5%{background-position:-53px 57px} }
.palm-story .palm-copy { z-index:1; transform:none; }
.palm-foreground { position:absolute; inset:0; z-index:2; pointer-events:none; }
.palm-foreground img { width:100%; height:100%; object-fit:cover; object-position:center; }
.palm-wallpaper { position:absolute; inset:0; z-index:3; pointer-events:none; }
.palm-wallpaper img { width:100%; height:100%; object-fit:cover; object-position:center; }
@media(max-width:1050px) {
 .feature-overview .feature-card { width:calc((100% - 24px)/2); }
 .controls-story .experience-layout { grid-template-columns:1fr; gap:48px; }
 .controls-story .interactive-product { position:static; max-width:626px; }
}
@media(max-width:650px) {
 .feature-overview .feature-card { width:100%; min-height:480px; padding:28px 24px; }
 .feature-overview .feature-card h3 { font-size:24px; }
 .feature-overview .feature-card p { font-size:16px; }
 .feature-overview .feature-card .feature-visual img { height:210px; }
 .control-feature-stack { grid-template-columns:1fr; margin-top:32px; }
 .control-feature { padding-inline:0; gap:16px; }
 .control-feature h3 { font-size:19px; }
 .controls-story .experience-copy { padding-inline:0; }
 .scenario-card { flex-basis:calc(100% - 16px); }
 .scenario-title { font-size:21px; }
 .scenario-caption { font-size:16px; }
 .faq-section { padding-block:var(--faq-block-space); }
 .faq-list { margin-top:var(--faq-content-gap); }
 .closing-scene { margin-top:0; }
 .palm-ground { inset:auto auto 0 -30%; width:160%; aspect-ratio:3/2; }
}
@media(prefers-reduced-motion:reduce) {
 .feature-grid,.scenario-track { scroll-behavior:auto; }
 .offer-art img { animation:none; }
 .palm-story .palm-copy { transform:none; }
}
.palm-foreground,.palm-wallpaper { transform:translateY(var(--photo-parallax-offset,0px)); }
.palm-foreground img,.palm-wallpaper img { transform:scale(var(--story-image-scale,1)); transform-origin:var(--story-zoom-origin-palm); }
.pricing-requirements { width:fit-content; max-width:100%; margin-inline:auto; }
.pricing-requirements .disclosure-summary { justify-content:flex-start; gap:8px; }
.offer-art img { animation:offer-float 5s ease-in-out infinite; }
@media(prefers-reduced-motion:reduce) { .palm-foreground,.palm-foreground img,.palm-wallpaper,.palm-wallpaper img { transform:none; } .brand-grain { animation-play-state:paused!important; } .offer-art img { animation:none; } }

.palm-story .palm-copy { top:calc(28.3% - 110px); }
.palm-story .palm-copy .section-heading { transform:translateY(-2em); }
@media(max-width:650px) { .palm-story .palm-copy { top:calc(42.7% - 24px); } }

.merch-banner-content,.merch-banner-copy { background:#f5f5f7!important; }
.pricing-requirements .disclosure-summary { display:inline-flex; width:fit-content; max-width:100%; }

.offer-companion .text-link { font-size:var(--support-link-size); }

/* Centred task loop: keep the full browser width as the native scrollport. */
.scenarios-section .scenario-track { padding-inline:calc((100% - var(--showroom-width))/2); scroll-padding-inline:0; }
#use-cases .scenario-card { flex-basis:var(--showroom-width); padding:0; border:0; border-radius:0; background:transparent; scroll-snap-align:center; }
#use-cases .scenario-card img { aspect-ratio:auto; background:transparent; border:0; }
.rotation-hint { margin:16px 0 0; color:var(--secondary); text-align:center; }
@media(min-width:900px) { .appearance-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:64px; } }
@media print { [data-carousel-clone] { display:none!important; } }

/* A static contact shadow adds depth without another rendered scene. */
#use-cases .scenario-media::before { content:""; position:absolute; z-index:0; left:17%; bottom:3%; width:66%; height:14%; background:radial-gradient(ellipse,rgba(29,29,31,.15),rgba(29,29,31,.055) 42%,transparent 72%); pointer-events:none; }
#use-cases .scenario-media>picture { position:relative; z-index:1; mix-blend-mode:multiply; }
#use-cases .scenario-track:focus-visible:has(.scenario-card.is-current) { outline:none; }
#use-cases .scenario-track:focus-visible .scenario-card.is-current { box-shadow:inset 0 0 0 2px var(--blue); }

/* One common chapter scale, with larger opening/closing hero statements. */
.feature-overview .section-heading,.controls-story .section-heading,#use-cases .scenario-heading,.mc-companion .section-heading,.personalisation-chapter .section-heading,.pricing-section .section-heading,.giving-story .personal-heading,.merch-banner .personal-heading,.faq-section .faq-heading,.personalisation-chapter .lookalike-story .lookalike-copy .section-heading { font-size:var(--section-title-size); }
.hero h1,.image-story .closing-message .cta-heading { font-size:var(--hero-title-size); }
.scenarios-section .heading-group { display:block; max-width:680px; margin-inline:auto; text-align:center; }
.scenarios-section .heading-group .heading-description { max-width:620px; margin:var(--heading-copy-gap) auto 0; font-size:var(--showroom-intro-size); }
.scenarios-section .scenario-track { margin-top:var(--showroom-heading-gap); }
#use-cases .scenario-title { font-size:var(--showroom-title-size); text-align:center; }
#use-cases .scenario-caption { max-width:34ch; margin-inline:auto; font-size:var(--showroom-copy-size); text-align:center; }
#use-cases .scenario-card :is(.scenario-title,.scenario-caption) { opacity:calc(.22 + .78 * var(--carousel-focus,1)); }
#use-cases .scenario-card.is-current :is(.scenario-title,.scenario-caption),#use-cases .scenario-card:focus-within :is(.scenario-title,.scenario-caption),#use-cases .scenario-track:focus-visible .is-current :is(.scenario-title,.scenario-caption) { opacity:1; }
#use-cases .gallery-controls { justify-content:center; }

#appearance .appearance-3d-stage > img { width:100%; height:100%; max-height:none; object-fit:contain; }

}

/* Keep the fresh photo's screen below the readable headline on wider layouts. */
@media(min-width:651px) {
 .palm-story .palm-foreground img { transform:translateY(4%) scale(var(--story-image-scale,1)); }
}
@media(min-width:651px) and (prefers-reduced-motion:reduce) {
 .palm-story .palm-foreground img { transform:translateY(4%); }
}