/* PrestoStories landing page, inside the Presto Photo theme (Isidora Sans,
   navy + blue). The book itself uses the printed book's fonts: Lora for page
   text, Atma for titles. Scoped to .ss so the site's header/footer are untouched. */

/* The theme names each Isidora Alt weight as its own family; load the brand's
   own files under one family so headings can use real weights. */
@font-face { font-family: "SS Isidora Alt"; font-weight: 500; font-display: swap; src: url(/config/themes/prestophoto/isidora/IsidoraSansAlt-Medium.woff2) format("woff2"); }
@font-face { font-family: "SS Isidora Alt"; font-weight: 600; font-display: swap; src: url(/config/themes/prestophoto/isidora/IsidoraSansAlt-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "SS Isidora Alt"; font-weight: 700; font-display: swap; src: url(/config/themes/prestophoto/isidora/IsidoraSansAlt-Bold.woff2) format("woff2"); }

html, body { overflow-x: clip; }

.ss {
	--navy: #0F4E6A;
	--blue: #009DE0;
	--cta: #179CD5;
	--tint: #E2F8FE;
	--stage: #EDF4F7;
	--ink: #333;
	--muted: #5d6670;
	--line: #E7E7E7;
	--paper: #FDF9F1;
	--cream: #FBF4E8;
	--head: "SS Isidora Alt", "IsidoraSansAlt-Medium", IsidoraSans, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--body: IsidoraSans, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--book: Lora, Georgia, serif;
	color: var(--ink);
	font: 17px/1.6 var(--body);
}
.ss *, .ss *::before, .ss *::after { box-sizing: border-box; }
.ss img { display: block; max-width: 100%; height: auto; }
.ss figure { margin: 0; }
.ss h1, .ss h2, .ss h3 { font-family: var(--head); font-weight: 600; color: var(--navy); margin: 0; letter-spacing: -.005em; }
.ss h1 { font-size: clamp(38px, 4.4vw, 56px); line-height: 1.08; }
.ss h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.15; }
.ss h3 { font-size: 22px; line-height: 1.3; }
.ss p { margin: 0; }

.ss-btn { display: inline-block; background: var(--cta); color: #fff !important; border-radius: 6px; padding: 14px 30px; font: 400 18px/1.2 var(--body); text-decoration: none !important; transition: background .15s ease, color .15s ease; }
.ss-btn:hover, .ss-btn:focus-visible { background: var(--navy); }
.ss-link { color: var(--blue); font-size: 17px; text-decoration: none; }
.ss-link:hover { text-decoration: underline; }
.ss :focus-visible { outline: 3px solid rgba(0, 157, 224, .45); outline-offset: 3px; }

/* ================= 1. Hero ================= */
.ss-hero { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(24px, 3.5vw, 48px) 0 clamp(64px, 7vw, 96px); }
.ss-hero-copy { display: grid; gap: 20px; justify-items: start; }
.ss-lead { font-size: clamp(18px, 1.6vw, 21px); color: #444; max-width: 32em; }
.ss-price { font-size: 17px; color: var(--navy); }
.ss-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 4px; }
.ss-privacy { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.ss-privacy svg { width: 16px; height: 16px; fill: none; stroke: var(--navy); stroke-width: 1.6; flex: none; }
.ss-rating { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted) !important; text-decoration: none !important; }
.ss-rating b { color: var(--navy); font-weight: 700; }
.ss-rating svg { width: 18px; height: 18px; fill: #F5A623; flex: none; }
.ss-rating:hover span { text-decoration: underline; }

/* The animation: the printed book stays in view the whole time while a family
   photo, beside it, becomes its characters and flows into it. Without .armed
   (no script) only the book shows; with it, the cumulative step classes s1..s6
   bring the photo and characters in. Reduced motion gets the final frame. */
.hx-stage { position: relative; display: grid; grid-template-columns: 1fr; grid-template-areas: "book" "cap"; align-items: center; gap: 14px 5%; }
.hx-stage.armed { grid-template-columns: .5fr 1fr; grid-template-areas: "lane book" "cap cap"; }
.hx-lane { grid-area: lane; display: none; }
.armed .hx-lane { display: grid; gap: 26px; align-content: center; }
/* The same size before the script arms the stage as after: 95% over 1.5 columns. */
.hx-stage:not(.armed) .hx-book { width: calc(95% / 1.5); justify-self: center; }
.ss .hx-book { grid-area: book; position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px rgba(15, 78, 106, .18); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
/* Opening beat: the book alone, centered; it slides over as the photo arrives. */
.armed:not(.s1) .hx-book { transform: translateX(calc(var(--shift, 0px) * -1)); }
.ss .hx-book img { width: 100%; height: auto; }
/* The last beat: light glints across the cover. The clip is the cover's outline
   in product-mila.webp, so Mila and the room stay untouched. */
.hx-sheen { position: absolute; inset: 0; clip-path: polygon(24.4% 43.9%, 72.3% 43%, 74.4% 91.3%, 25.2% 91.9%); pointer-events: none; }
.hx-sheen::before { content: ""; position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .42) 50%, transparent 60%); transform: translateX(-85%); }
.s6 .hx-sheen::before { animation: hxSheen 1.4s ease-in-out .3s forwards; }
@keyframes hxSheen { to { transform: translateX(85%); } }
.hx-instant, .hx-instant * { transition: none !important; }

.hx-photo { background: #fff; padding: 3%; border-radius: 6px; box-shadow: 0 10px 26px rgba(15, 78, 106, .2); opacity: 0; transform: translateY(-22px) rotate(-8deg); transition: opacity .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.hx-shot { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; }
.ss .hx-shot img { width: 100%; height: 100%; object-fit: cover; }
/* The scan line rides the left edge of a photo-wide layer that slides across
   (a transform, so it never counts as a layout shift). */
.hx-scan { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hx-scan::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #fff; box-shadow: 0 0 18px 6px rgba(0, 157, 224, .45); }
.hx-box { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 2px solid #fff; border-radius: 10px; box-shadow: 0 0 0 1px rgba(15, 78, 106, .3); opacity: 0; transform: scale(1.12); transition: opacity .35s ease, transform .35s ease; }
.hx-box b { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); white-space: nowrap; background: #fff; color: var(--navy); font: 600 12px/1 var(--head); padding: 5px 8px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }

.hx-cast { display: flex; justify-content: center; gap: 7%; }
.hx-face { position: relative; width: 27%; opacity: 0; perspective: 800px; }
.hx-flip { position: relative; display: block; aspect-ratio: 1; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .1, .2, 1); }
.ss .hx-flip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 8px 18px rgba(15, 78, 106, .22); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hx-drawn { transform: rotateY(180deg); }
.hx-face i { display: block; margin-top: 7px; text-align: center; font: 600 14px/1.2 var(--head); font-style: normal; color: var(--navy); opacity: 0; transition: opacity .4s ease; }

.s1 .hx-photo { opacity: 1; transform: rotate(-3deg); }
.s2 .hx-scan { animation: hxScan 1.1s ease-in-out forwards; }
@keyframes hxScan { 0% { transform: none; opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
.s3 .hx-box { opacity: 1; transform: none; }
.s3 .hx-box:nth-of-type(3) { transition-delay: .2s; }
.s3 .hx-box:nth-of-type(4) { transition-delay: .4s; }
.s4 .hx-box { opacity: 0; transition-delay: 0s; }
.s4 .hx-face { opacity: 1; }
.s5 .hx-flip { transform: rotateY(180deg); }
.s5 .hx-face:nth-child(2) .hx-flip { transition-delay: .18s; }
.s5 .hx-face:nth-child(3) .hx-flip { transition-delay: .36s; }
.s5 .hx-face i { opacity: 1; transition-delay: .5s; }

.hx-caption { grid-area: cap; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; min-height: 30px; text-align: center; }
.hx-say { font: 500 17px/1.3 var(--head); color: var(--navy); }

/* ================= 2. Make a story about anything ================= */
/* Idea chips, a Story Guide chat, and (once the art exists) a stage where the
   idea's family photo becomes its storybook cover. Without script it all shows
   the first idea; with it, each idea is typed, sent, answered and drawn in turn. */
/* A warm cream band, full width without leaving the page grid: the shadow paints
   past the container on both sides and the clip keeps it to this band's height. */
.ss-about { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "copy chat" "ideas chat" "cta chat"; gap: 28px clamp(28px, 5vw, 64px); align-items: start; padding: clamp(40px, 4.5vw, 64px) 0; background: var(--cream); box-shadow: 0 0 0 100vmax var(--cream); clip-path: inset(0 -100vmax); }
/* With the art, three columns so the whole section fits a laptop screen: the
   pitch and ideas, the chat, and the photo becoming its cover. */
.ss-about.has-art { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, .9fr); grid-template-rows: auto auto 1fr; grid-template-areas: "copy chat morph" "ideas chat morph" "cta chat morph"; gap: 22px clamp(24px, 3vw, 40px); align-items: start; }
.ss-about-copy { grid-area: copy; display: grid; gap: 14px; align-self: end; }
.has-art .ss-about-copy { align-self: start; }
.has-art .ss-about-copy .ss-lead { font-size: 18px; }
/* Room for the longest topic, so retyping it never moves the page. */
.ss-about-copy h2 { min-height: 2.3em; }
/* Three lines: the longest topic wraps twice in the narrow column. */
.has-art .ss-about-copy h2 { min-height: 3.45em; }
.ss-topic { color: var(--blue); }
.ss-topic.typing::after, .ss-chat-typed.typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: var(--blue); animation: ssCaret 1s steps(1) infinite; }
.ss-topic.typing::after { width: 3px; height: .95em; vertical-align: -.1em; }
@keyframes ssCaret { 50% { opacity: 0; } }
.ss-ideas { grid-area: ideas; display: grid; gap: 20px; justify-items: start; }
.has-art .ss-ideas { gap: 16px; }
.has-art .ss-chip { font-size: 15px; padding: 7px 14px; }
.ss-idea-group { display: grid; gap: 10px; align-content: start; }
.ss .ss-idea-group h3 { font: 600 14px/1.2 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ss-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 480px; }
.ss-chip { border: 1px solid #cfdde4; background: #fff; color: var(--navy); border-radius: 999px; padding: 8px 16px; font: 500 16px/1.2 var(--head); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.ss-chip:hover { border-color: var(--blue); }
.ss-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.ss-about-cta { grid-area: cta; display: grid; gap: 12px; justify-items: start; }
.has-art .ss-about-cta { gap: 10px; }
.has-art .ss-about-cta p { font-size: 15px; }
.ss-about-cta p { color: var(--muted); font-size: 16px; }

.ss .ss-chat { grid-area: chat; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 16px 40px rgba(15, 78, 106, .16); overflow: hidden; }
.ss-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--stage); border-bottom: 1px solid var(--line); }
.ss-chat-head b { display: block; font: 600 17px/1.2 var(--head); color: var(--navy); }
.ss-chat-head i { display: block; font-style: normal; font-size: 13px; color: var(--muted); }
.ss-chat-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; flex: none; }
.ss-chat-avatar svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
/* A fixed height, filled from the bottom, so a new exchange never moves the page. */
.has-art .ss-chat-log { height: 360px; }
.ss-chat-log { height: 330px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 20px 18px; }
.ss-msg { max-width: 82%; padding: 11px 15px; border-radius: 18px; font-size: 16px; line-height: 1.45; transition: opacity .35s ease, transform .35s ease; }
.ss-msg-guide { align-self: flex-start; background: var(--tint); color: #1f3a48; border-bottom-left-radius: 6px; }
.ss-msg-you { align-self: flex-end; background: var(--cta); color: #fff; border-bottom-right-radius: 6px; }
/* The family photo, sent just above the message like a phone chat. */
.ss .ss-msg-shot { align-self: flex-end; flex: none; width: 150px; height: 150px; max-width: none; padding: 0; object-fit: cover; border-radius: 16px; border-bottom-right-radius: 6px; box-shadow: 0 4px 12px rgba(15, 78, 106, .15); margin-bottom: -6px; }
.ss-msg.off { opacity: 0; transform: translateY(8px); }
.ss-msg.gone { display: none; }
.ss-msg-dots { display: inline-flex; gap: 5px; padding: 15px 16px; }
.ss-msg-dots span { width: 7px; height: 7px; border-radius: 50%; background: #6d9bb0; animation: ssDot 1s ease-in-out infinite; }
.ss-msg-dots span:nth-child(2) { animation-delay: .15s; }
.ss-msg-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes ssDot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.ss-chat-compose { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.ss-chat-input { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; border: 1px solid #cfdde4; border-radius: 22px; padding: 10px 16px; font-size: 16px; line-height: 1.35; color: var(--ink); }
.ss-chat-typed:empty { display: none; }
.ss-chat-typed:not(:empty) + .ss-chat-hint { display: none; }
.ss-chat-hint { color: #98a3ab; }
/* The photo picked for the message, waiting in the box until it's sent. */
.ss .ss-chat-attach { flex: none; width: 34px; height: 34px; margin: -4px 0 -4px -8px; object-fit: cover; border-radius: 8px; opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.ss .ss-chat-attach.on { opacity: 1; transform: none; }
.ss-chat-attach:not(.on) { position: absolute; }
.ss-chat-send { width: 40px; height: 40px; border-radius: 50%; background: var(--cta); display: grid; place-items: center; flex: none; transition: transform .15s ease, background .15s ease; }
.ss-chat-send.press { transform: scale(.88); background: var(--navy); }
.ss-chat-send svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* The photo arrives like a print dropped on the table; a scan passes over it
   while the Story Guide thinks; then the cover paints itself across it from
   left to right, and light glints over the finished cover. */
.ss .ss-morph { grid-area: morph; align-self: center; margin-top: -24px; justify-self: center; width: 100%; max-width: 440px; display: grid; gap: 18px; }
.ss-morph-frame { position: relative; aspect-ratio: 1; transition: opacity .3s ease; }
.ss-morph.is-out .ss-morph-frame { opacity: 0; }
.ss .ss-morph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss .ss-morph-photo { padding: 3.5%; background: #fff; border-radius: 4px; box-shadow: 0 12px 30px rgba(15, 78, 106, .22); opacity: 0; transform: translateY(-18px) rotate(-9deg) scale(.86); transition: opacity .5s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.ss .ss-morph-cover { border-radius: 3px 10px 10px 3px; box-shadow: 0 18px 40px rgba(15, 78, 106, .26); -webkit-mask-image: linear-gradient(110deg, #000 42%, transparent 58%); mask-image: linear-gradient(110deg, #000 42%, transparent 58%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; transition: -webkit-mask-position 1.5s cubic-bezier(.5, 0, .3, 1), mask-position 1.5s cubic-bezier(.5, 0, .3, 1); }
.ss-morph.is-photo .ss-morph-photo { opacity: 1; transform: rotate(-3deg) scale(.9); }
.ss-morph.is-cover .ss-morph-photo { opacity: 0; transform: none; transition-delay: .5s; }
.ss-morph.is-cover .ss-morph-cover { -webkit-mask-position: 0 0; mask-position: 0 0; }
.ss-morph-scan { position: absolute; inset: 5%; opacity: 0; pointer-events: none; transform: rotate(-3deg); }
.ss-morph-scan::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #fff; box-shadow: 0 0 18px 6px rgba(0, 157, 224, .45); }
.ss-morph.is-scan .ss-morph-scan { animation: hxScan 1.3s ease-in-out forwards; }
/* A spine along the cover's left edge, and the closing glint. */
.ss-morph-sheen { position: absolute; inset: 0; border-radius: 3px 10px 10px 3px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .4s ease 1.2s; background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(255, 255, 255, .28) 1.6%, rgba(0, 0, 0, .06) 3.2%, transparent 6%); }
.ss-morph.is-cover .ss-morph-sheen { opacity: 1; }
.ss-morph-sheen::before { content: ""; position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .4) 50%, transparent 60%); transform: translateX(-85%); }
.ss-morph.is-cover .ss-morph-sheen::before { animation: hxSheen 1.4s ease-in-out 1.5s forwards; }
.ss-morph-say { display: grid; text-align: center; font: 500 17px/1.3 var(--head); color: var(--navy); }
.ss-morph-step { grid-area: 1 / 1; transition: opacity .4s ease; }
.ss-morph-step + .ss-morph-step, .ss-morph.is-cover .ss-morph-step:first-child { opacity: 0; }
.ss-morph.is-cover .ss-morph-step + .ss-morph-step { opacity: 1; }

/* ================= 3. Bring what you already have (light band, full width) ================= */
/* A drop zone the documents, pasted text and photos land in one by one; the
   Story Guide reads them, and they gather into the book's cover. Without .armed
   (no script, or reduced motion) everything shows landed, with the Guide's
   answer. With it, the cumulative step classes d1..d6 play the scene. */
.ss-bring { position: relative; left: 50%; width: 100vw; margin-left: -50vw; background: var(--stage); padding: clamp(64px, 7vw, 96px) 16px; }
.ss-bring-in { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.ss-bring-copy { display: grid; gap: 18px; justify-items: start; }
.ss-bring-list { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 16px; }
.ss-bring-list li { display: flex; align-items: flex-start; gap: 14px; }
.ss-bring-list svg { width: 24px; height: 24px; padding: 9px; box-sizing: content-box; flex: none; background: #fff; border-radius: 12px; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 2px 8px rgba(15, 78, 106, .08); }
.ss-bring-list span { color: var(--muted); font-size: 16px; line-height: 1.45; }
.ss-bring-list b { display: block; font: 600 18px/1.3 var(--head); color: var(--navy); margin-bottom: 2px; }

.ss-drop { display: grid; gap: 16px; }
.ss-drop-zone { position: relative; aspect-ratio: 1.15; background: #fff; border: 2px dashed #b9cfda; border-radius: 18px; overflow: hidden; }
.ss-drop-hint { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: #7f9aa8; font: 500 17px/1.2 var(--head); opacity: 0; transition: opacity .4s ease; }
.ss-drop-hint svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.armed:not(.d1) .ss-drop-hint { opacity: 1; }

.ss-drop-item { position: absolute; transform: rotate(var(--r)); transition: opacity .35s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.armed .ss-drop-item { opacity: 0; transform: translateY(-40px) scale(1.08) rotate(var(--r)); }
.armed.d1 .ss-drop-pdf, .armed.d2 .ss-drop-doc, .armed.d3 .ss-drop-paste { opacity: 1; transform: rotate(var(--r)); }
.ss-drop-file { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 22px rgba(15, 78, 106, .14); }
.ss-drop-file b { display: block; font: 600 15px/1.25 var(--head); color: var(--navy); }
.ss-drop-file i { font-style: normal; font-size: 13px; color: var(--muted); }
.ss-file-icon { width: 38px; height: 46px; flex: none; display: grid; place-items: end center; padding-bottom: 7px; border-radius: 5px 12px 5px 5px; color: #fff; font: 700 9.5px/1 var(--body); letter-spacing: .05em; }
.ss-drop-pdf { --r: -4deg; left: 6%; top: 7%; }
.ss-drop-pdf .ss-file-icon { background: #D9453B; }
.ss-drop-doc { --r: 3deg; right: 5%; top: 23%; }
.ss-drop-doc .ss-file-icon { background: #2B63C4; }
.ss-drop-paste { --r: -1.5deg; left: 5%; top: 44%; width: 46%; padding: 14px 16px; background: var(--paper); border-radius: 10px; box-shadow: 0 8px 22px rgba(15, 78, 106, .14); }
.ss-drop-paste i { display: block; margin-bottom: 6px; font: 600 11px/1 var(--head); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #9a917f; }
.ss-drop-paste p { font: 13.5px/1.45 var(--book); color: #3a3833; }
.ss-drop-paste p + p { margin-top: 6px; }
.ss-drop-paste b { font-weight: 400; font-style: italic; color: #8a7f6a; }

/* The photos land one after another in a loose pile. */
.ss-drop-photos { --r: 0deg; right: 8%; bottom: 13%; width: 30%; aspect-ratio: 1; }
.armed .ss-drop-photos { opacity: 1; transform: none; }
.ss .ss-drop-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 4px solid #fff; border-radius: 3px; box-shadow: 0 6px 16px rgba(15, 78, 106, .2); transform: translate(var(--x), var(--y)) rotate(var(--r)); transition: opacity .3s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.ss-drop-photos img:nth-child(1) { --r: -13deg; --x: -30%; --y: -26%; }
.ss-drop-photos img:nth-child(2) { --r: 9deg; --x: 16%; --y: -30%; transition-delay: .12s; }
.ss-drop-photos img:nth-child(3) { --r: -6deg; --x: -24%; --y: 14%; transition-delay: .24s; }
.ss-drop-photos img:nth-child(4) { --r: 12deg; --x: 20%; --y: 8%; transition-delay: .36s; }
.ss-drop-photos img:nth-child(5) { --r: -9deg; --x: -6%; --y: -10%; transition-delay: .48s; }
.ss-drop-photos img:nth-child(6) { --r: 4deg; --x: 2%; --y: 12%; transition-delay: .6s; }
.armed .ss-drop-photos img { opacity: 0; transform: translate(var(--x), calc(var(--y) - 40px)) scale(1.1) rotate(var(--r)); }
.armed.d4 .ss-drop-photos img { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
.ss-drop-more { position: absolute; right: -8%; bottom: -6%; z-index: 1; padding: 6px 11px; border-radius: 999px; background: var(--navy); color: #fff; font: 600 15px/1 var(--head); box-shadow: 0 4px 10px rgba(15, 78, 106, .25); transition: opacity .3s ease .75s, transform .4s cubic-bezier(.3, 1.4, .5, 1) .75s; }
.armed .ss-drop-more { opacity: 0; transform: scale(.4); }
.armed.d4 .ss-drop-more { opacity: 1; transform: none; }

/* Reading: a scan passes over everything. */
.ss-drop-scan { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 2; }
.ss-drop-scan::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #fff; box-shadow: 0 0 18px 6px rgba(0, 157, 224, .45); }
.armed.d5 .ss-drop-scan { animation: hxScan 1.6s ease-in-out forwards; }

/* Done: it all gathers into the cover. */
.ss-drop-cover { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; z-index: 3; opacity: 0; transform: translate(-50%, -50%) scale(.5); pointer-events: none; transition: opacity .5s ease .3s, transform .9s cubic-bezier(.2, .8, .2, 1) .3s; }
.ss .ss-drop-cover img { width: 100%; height: 100%; border-radius: 3px 10px 10px 3px; box-shadow: 0 18px 40px rgba(15, 78, 106, .3); }
.ss-drop-sheen { position: absolute; inset: 0; border-radius: 3px 10px 10px 3px; overflow: hidden; background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(255, 255, 255, .28) 1.6%, rgba(0, 0, 0, .06) 3.2%, transparent 6%); }
.ss-drop-sheen::before { content: ""; position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .4) 50%, transparent 60%); transform: translateX(-85%); }
.armed.d6 .ss-drop-cover { opacity: 1; transform: translate(-50%, -50%); }
.armed.d6 .ss-drop-sheen::before { animation: hxSheen 1.4s ease-in-out 1.2s forwards; }
.armed.d6 .ss-drop-item { opacity: 0; transform: translate(var(--gx), var(--gy)) scale(.3) rotate(var(--r)); transition-delay: 0s; }
.armed.d6 .ss-drop-photos { transform: translate(-40%, -45%) scale(.3); }
.ss-drop-pdf { --gx: 30%; --gy: 180%; }
.ss-drop-doc { --gx: -30%; --gy: 110%; }
.ss-drop-paste { --gx: 20%; --gy: 10%; }

/* The Story Guide's word, under the zone: reading, then its answer. */
.ss-drop-say { display: flex; align-items: flex-start; gap: 12px; min-height: 104px; transition: opacity .4s ease, transform .4s ease; }
.ss .ss-drop-say .ss-msg { max-width: none; background: #fff; box-shadow: 0 2px 8px rgba(15, 78, 106, .08); border-top-left-radius: 6px; border-bottom-left-radius: 18px; }
.armed:not(.d5) .ss-drop-say { opacity: 0; transform: translateY(8px); }
.ss-drop-reading { display: none; color: var(--muted); }
.armed.d5:not(.d6) .ss-drop-reading { display: inline; }
.armed.d5:not(.d6) .ss-drop-answer { display: none; }

/* ================= 4. The sample book (navy band, full width) ================= */
.ss-sample { position: relative; left: 50%; width: 100vw; margin-left: -50vw; background: var(--navy); color: #fff; padding: clamp(64px, 7vw, 96px) 16px clamp(56px, 6vw, 80px); }
.ss-sample-head { max-width: 1140px; margin: 0 auto 36px; display: grid; gap: 10px; text-align: center; justify-items: center; }
.ss-sample h2 { color: #fff; }
.ss-sample-head p { color: #cfe4ee; font-size: 18px; }
.ss-reader { max-width: 1000px; margin: 0 auto; outline: none; }
.ss-spread { position: relative; width: 100%; aspect-ratio: 2 / 1; perspective: 2400px; transition: transform .6s ease; }
.ss-reader.closed .ss-spread { transform: translateX(-25%); }
.ss-page { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; display: none; }
.ss-page.left { display: block; left: 0; border-radius: 6px 0 0 6px; }
.ss-page.right { display: block; left: 50%; border-radius: 0 6px 6px 0; }
.ss-page img { width: 100%; height: 100%; object-fit: cover; }
.ss-page-cover.right { border-radius: 4px 8px 8px 4px; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }
.ss-page-art.left::after { content: ""; position: absolute; inset: 0; box-shadow: inset -16px 0 24px -16px rgba(0, 0, 0, .35); }
.ss-page-text { background: var(--paper); color: #2b2a33; place-items: center; padding: 11%; container-type: inline-size; box-shadow: inset 16px 0 24px -16px rgba(0, 0, 0, .22); }
.ss-page-text.right { display: grid; }
.ss-page-text p { font: 400 6.4cqi/1.55 var(--book); text-align: center; text-wrap: pretty; }
.ss-page-text span { position: absolute; bottom: 6%; left: 0; right: 0; text-align: center; font: 400 3.4cqi/1 var(--book); color: #8a8578; }
.ss-leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; display: none; z-index: 5; }
.ss-leaf.back { left: 0; transform-origin: right center; }
.ss-leaf > div { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.ss-leaf-back { transform: rotateY(180deg); }
.ss-leaf .ss-page { display: grid; position: absolute; inset: 0; width: 100%; left: 0; }
.ss-leaf .ss-page-art, .ss-leaf .ss-page-cover { display: block; }
.ss-reader-nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 26px; }
.ss-turn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .15s ease; }
.ss-turn:hover { background: rgba(255, 255, 255, .12); }
.ss-turn:disabled { opacity: .35; cursor: default; }
.ss-turn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss-count { min-width: 8em; text-align: center; font: 500 16px/1 var(--head); color: #cfe4ee; }

.ss-order { max-width: 1000px; margin: 48px auto 0; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, .18); display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.ss-order h3 { color: #fff; font-size: 24px; }
.ss-order-copy p { color: #cfe4ee; margin-top: 12px; }
.ss-prices { list-style: none; margin: 0 0 22px; padding: 0; }
.ss-prices li { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.ss-prices li:first-child { border-top: 1px solid rgba(255, 255, 255, .18); }
.ss-prices span { font: 500 18px/1.3 var(--head); color: #fff; }
.ss-prices b { font: 600 20px/1.3 var(--head); color: #fff; }
.ss-order .ss-btn:hover, .ss-order .ss-btn:focus-visible { background: #fff; color: var(--navy) !important; }
.ss-fine { color: #a9c7d6; font-size: 14px; margin-top: 14px !important; }

/* ================= Responsive ================= */
@media (max-width: 991px) {
	.ss-hero, .ss-order, .ss-bring-in { grid-template-columns: 1fr; }
	.ss-drop { max-width: 640px; width: 100%; justify-self: center; }
	.ss-about, .ss-about.has-art { grid-template-columns: 1fr; grid-template-areas: "copy" "chat" "ideas" "cta"; }
	.ss-about.has-art { grid-template-rows: none; grid-template-areas: "copy" "ideas" "chat" "morph" "cta"; gap: 28px; }
	.has-art .ss-about-copy h2 { min-height: 2.3em; }
	.ss .ss-morph { margin-top: 0; }
	.ss .ss-morph { max-width: 340px; }
	.has-art .ss-ideas { gap: 20px; }
	.ss .ss-chat { width: 100%; max-width: 640px; justify-self: center; }
	.hx { max-width: 640px; width: 100%; justify-self: center; }
}
@media (max-width: 600px) {
	.ss { font-size: 16px; }
	/* Book, then the caption, then the photo: the photo's empty space before it
	   arrives reads as the end of the section rather than a hole. */
	.hx-stage.armed { grid-template-columns: 1fr; grid-template-areas: "book" "cap" "lane"; row-gap: 12px; }
	.hx-stage:not(.armed) .hx-book { width: 100%; }
	.armed:not(.s1) .hx-book { transform: none; }
	.hx-caption { flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; text-align: left; min-height: 45px; }
	.hx-lane { grid-template-columns: 1.35fr 1fr; align-items: center; gap: 16px !important; }
	.hx-cast { flex-direction: column; align-items: flex-start; gap: 8px; }
	.hx-face { width: auto; display: flex; align-items: center; gap: 8px; }
	.hx-flip { width: 46px; }
	.hx-face i { font-size: 13px; margin-top: 0; }
	.hx-box b { font-size: 10px; padding: 3px 5px; bottom: -8px; }
	.ss-spread { aspect-ratio: auto; }
	.ss-reader.closed .ss-spread { transform: none; }
	.ss-page.left, .ss-page.right { position: relative; left: auto; width: 100%; aspect-ratio: 1; }
	.ss-page.left { border-radius: 6px 6px 0 0; }
	.ss-page.right { border-radius: 0 0 6px 6px; }
	.ss-page-cover.right { border-radius: 6px; }
	.ss-page-text p { font-size: 18px; }
	.ss-page-text span { font-size: 13px; }
	.ss-leaf { display: none !important; }
	.ss-chat-log { height: 320px; padding: 16px 14px; }
	.has-art .ss-chat-log { height: 380px; }
	.ss .ss-msg-shot { width: 120px; height: 120px; }
	.ss-msg { max-width: 88%; font-size: 15px; }
	.ss-chip { font-size: 15px; padding: 7px 14px; }
	.ss-drop-zone { aspect-ratio: .68; }
	.ss-drop-file { padding: 9px 12px 9px 9px; gap: 9px; }
	.ss-drop-file b { font-size: 13px; }
	.ss-file-icon { width: 30px; height: 37px; font-size: 8px; padding-bottom: 5px; }
	.ss-drop-doc { top: 19%; }
	.ss-drop-paste { top: 30%; width: 72%; padding: 11px 12px; }
	.ss-drop-paste p { font-size: 12px; }
	.ss-drop-photos { width: 34%; right: 14%; bottom: 6%; }
	.ss-drop-say { min-height: 128px; }
}
@media (prefers-reduced-motion: reduce) {
	.hx-stage *, .ss-spread, .ss-chat *, .ss-morph *, .ss-drop * { transition: none !important; animation: none !important; }
}

/* ================= Sign-up (signup.php) ================= */
.ss-signup { padding: clamp(24px, 4vw, 56px) 0 clamp(48px, 6vw, 80px); }
.su-card { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 980px; margin: 0 auto; }
.ss .su-book { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 78, 106, .18); }
.su-form h1 { font-size: clamp(30px, 3vw, 40px); }
.su-lead { font-size: 18px; color: #444; margin: 10px 0 20px !important; }
.su-form form { display: grid; gap: 8px; }
.su-form label { font: 600 15px/1.2 var(--head); color: var(--navy); margin-top: 6px; }
.su-form input[type=email], .su-form input[type=password], .su-form input[type=text] {
	width: 100%; font-size: 17px; padding: 12px 14px; border: 1px solid #cfd6db; border-radius: 6px; background: #fff; box-sizing: border-box;
}
.su-form input:focus { outline: 3px solid rgba(0, 157, 224, .35); outline-offset: 0; border-color: #179CD5; }
.su-pass { position: relative; }
.su-show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--blue); font-size: 15px; cursor: pointer; padding: 6px 8px; }
.su-captcha:empty { display: none; }
.su-submit { margin-top: 12px; justify-self: start; border: 0; cursor: pointer; }
.su-alt { margin-top: 16px !important; font-size: 15px; color: #555; }
.su-alt a { color: var(--blue); }
.su-errors { background: #fdecec; color: #a3282f; border-radius: 6px; padding: 10px 14px; margin-bottom: 8px; font-size: 15px; }
.su-errors p { margin: 0 !important; }
.ss-signup .ss-privacy { margin-top: 14px !important; }
@media (max-width: 760px) {
	.su-card { grid-template-columns: 1fr; }
	.ss .su-book { max-width: 360px; justify-self: center; }
}