/* Phone layouts reuse the presentation content at its natural reading size. */
.mobile-example, .mobile-cost, .mobile-gift, .mobile-cities, .mobile-control-label { display: none; }
.mobile-map { display: contents; }
html.mobile, html.mobile body { height: auto; min-height: 100%; overflow: visible; background: var(--paper-2); }
html.mobile { -webkit-text-size-adjust: 100%; scroll-padding-bottom: 100px; }
html.mobile .stage { position: relative; inset: auto; width: 100%; height: auto; min-height: 100svh; transform: none; overflow: clip; box-shadow: none; touch-action: pan-y pinch-zoom; }
html.mobile .slide { display: none; position: relative; inset: auto; width: 100%; height: auto; min-height: 100svh; padding: 48px 24px calc(112px + env(safe-area-inset-bottom)); visibility: hidden; overflow: hidden; }
html.mobile .slide.is-on { display: flex; flex-direction: column; gap: 24px; visibility: visible; opacity: 1; }
html.mobile .slide.is-leaving { display: none; }
html.mobile .slide *, html.mobile .slide *::before, html.mobile .slide *::after { animation: none !important; transition: none !important; }
html.mobile .up, html.mobile .pop, html.mobile .write, html.mobile .slam, html.mobile .fade, html.mobile .rise, html.mobile .drop, html.mobile .from-r, html.mobile .from-l { opacity: 1; transform: none; filter: none; }
html.mobile .slide > :is(.head, h1, .brand, .closing-brand, .recipient, .lead, .tag, .feats, .product-free, .tayyib, .value-note, .value-free, .persona, .steps, .sum, .category-grid, .category-bottom, .figs, .network-copy, .network-tags, .loop-list, .say, .checks, .free-clarity, .ideas, .cmp-us, .cmp-them, .tl, .cta, .contact, .hayakum, .team, .foot) { position: relative; inset: auto; width: 100%; height: auto; margin: 0; transform: none; }
html.mobile .slide > :is(.spark, .under, .cup, .bub, .gdot, .pdot, .strings, .gift-body, .gift-lid, .abs, .glow, .coin, .fixed-drop, .label, .ringstain, .toast, .tray, .on-tray, .wisp, .coffee, .carrow, .arch, .heart-steam, .logo-end), html.mobile .steps > .arrow { display: none; }
html.mobile .slide .head { display: flex; flex-direction: column; gap: 12px; }
html.mobile .slide :is(h1, .head h1) { font-size: clamp(30px, 8vw, 42px); line-height: 1.35; letter-spacing: -.4px; white-space: normal; margin: 0; overflow-wrap: anywhere; }
html.mobile .slide :is(.lead, .head .lead, .network-copy, .value-note, .free-clarity, .category-bottom) { width: auto; font-size: 18px; line-height: 1.85; margin: 0; }
html.mobile .slide .lead br, html.mobile .step p br { display: none; }
html.mobile .slide .kicker, html.mobile .slide .recipient { font-size: 14px; line-height: 1.7; }
html.mobile .product-name { white-space: normal; }
html.mobile .badge-row { gap: 12px; }
html.mobile .badge-n { width: 36px; height: 36px; font-size: 19px; flex: none; }
html.mobile .slide .slide-number { top: 21px; left: 24px; font-size: 11px; }
html.mobile .brand, html.mobile .closing-brand { display: flex; align-items: center; gap: 26px; }
html.mobile .ministry-mark { width: 94px; height: 71px; }
html.mobile .brand > .logo, html.mobile .closing-brand > .logo { width: 76px; height: 26px; }
html.mobile .s1 h1 { font-size: clamp(34px, 9.5vw, 48px); }
html.mobile .s1 .tag, html.mobile .s11 .hayakum { font-size: 22px; line-height: 1.65; }
html.mobile .slide > .dallah-wrap { position: relative; inset: auto; width: 150px; height: 200px; margin: 0 auto; opacity: 1; transform: none; }
html.mobile .s1 .brand { order: -6; }
html.mobile .s1 .recipient { order: -5; }
html.mobile .s1 h1 { order: -4; }
html.mobile .s1 .dallah-wrap { order: -3; }
html.mobile .s1 .lead { order: -2; }
html.mobile .s1 .tag { order: -1; }
html.mobile .sadu { height: 5px; }
html.mobile .slide .foot { order: 99; margin-top: 16px; gap: 16px; font-size: 11px; line-height: 1.6; }
html.mobile .foot > .logo { width: 58px; height: 20px; flex: none; }
html.mobile .feats { gap: 20px; }
html.mobile .feat { gap: 14px; align-items: flex-start; }
html.mobile .product-intro .feat .tile { width: 44px; height: 44px; border-radius: 13px; font-size: 24px; }
html.mobile .product-intro .feat b { font-size: 19px; line-height: 1.6; }
html.mobile .product-intro .feat small { font-size: 16px; line-height: 1.75; }
html.mobile .slide .product-free, html.mobile .slide .value-free { align-self: flex-start; width: auto; font-size: 18px; padding: 9px 16px; }
html.mobile .phone { display: none; }
html.mobile .mobile-example { display: block; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: white; }
html.mobile .mobile-example > p { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
html.mobile .mobile-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
html.mobile .mobile-demo-card { min-width: 0; }
html.mobile .mobile-demo-card > svg { width: 100%; height: auto; aspect-ratio: 200/140; border-radius: 12px; overflow: hidden; }
html.mobile .mobile-demo-card b { display: block; font-size: 16px; margin-top: 8px; }
html.mobile .mobile-demo-card p { color: var(--red-ink); font-size: 16px; margin-top: 6px; }
html.mobile .mobile-demo-card s { color: var(--muted); font-size: 14px; margin-inline-start: 4px; }
html.mobile .s3 { justify-content: center; }
html.mobile .s3 .tayyib { font-size: 22px; }
html.mobile .mobile-gift { display: grid; place-items: center; align-self: flex-start; width: 100px; height: 100px; border-radius: 28px; color: var(--dark); background: #ffffffd9; font-size: 54px; }
html.mobile .persona { gap: 14px; }
html.mobile .persona .av { width: 52px; height: 52px; }
html.mobile .persona b { font-size: 19px; }
html.mobile .persona small { font-size: 16px; line-height: 1.7; }
html.mobile .steps { display: flex; flex-direction: column; gap: 14px; }
html.mobile .step { width: 100%; height: auto; min-height: 128px; border-radius: 20px; padding: 20px 72px 20px 20px; }
html.mobile .step .n { width: 32px; height: 32px; top: 20px; right: 20px; font-size: 16px; }
html.mobile .step .si { position: static; display: none; }
html.mobile .step h3 { margin: 0; font-size: 21px; }
html.mobile .step p { margin-top: 7px; font-size: 17px; line-height: 1.8; }
html.mobile .step .ring-on { display: none; }
html.mobile .slide .sum { font-size: 25px; line-height: 1.6; }
html.mobile .slide .category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html.mobile .category-card { grid-column: auto !important; height: auto; padding: 16px 13px; border-radius: 18px; }
html.mobile .category-icon { width: 42px; height: 42px; font-size: 25px; border-radius: 13px; }
html.mobile .category-card b { font-size: 18px; line-height: 1.6; min-height: 0; margin-top: 12px; }
html.mobile .category-card p { font-size: 16px; line-height: 1.7; margin-top: 7px; }
html.mobile .figs { gap: 0; }
html.mobile .figs dt { font-size: 72px; }
html.mobile .figs dd { font-size: 18px; }
html.mobile .network-tags { display: flex; flex-wrap: wrap; gap: 8px; }
html.mobile .network-tags span { font-size: 15px; padding: 9px 12px; border-radius: 10px; }
html.mobile .mobile-map { display: block; width: 100%; aspect-ratio: 1040/860; position: relative; overflow: hidden; }
html.mobile #kingdom { top: 0; left: 0; width: 1040px; height: 860px; transform: scale(var(--mobile-map-fit, .3)); transform-origin: top left; }
html.mobile #kingdom :is(img, .city) { opacity: 1; }
html.mobile .mobile-cities { display: flex; flex-wrap: wrap; gap: 8px; }
html.mobile .mobile-cities span { background: white; color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; font-size: 14px; }
html.mobile .loop-list { gap: 20px; }
html.mobile .loop-list li { align-items: flex-start; gap: 14px; font-size: 19px; line-height: 1.8; }
html.mobile .loop-list .on { width: 34px; height: 34px; font-size: 16px; }
html.mobile .loop-list .lbl { opacity: 1; }
html.mobile .team { justify-content: center; font-size: 16px; }
html.mobile .team .av { width: 36px; height: 36px; }
html.mobile .slide .say { font-size: 23px; line-height: 1.8; }
html.mobile .checks { gap: 18px; font-size: 18px; line-height: 1.8; }
html.mobile .checks li { gap: 12px; }
html.mobile .checks .cbox { width: 30px; height: 30px; }
html.mobile .cbox > svg { width: 18px; height: 18px; }
html.mobile .receipt { display: none; }
html.mobile .mobile-cost { display: block; background: white; border: 1px solid var(--line); border-radius: 22px; padding: 24px; text-align: center; }
html.mobile .mobile-cost p { font-size: 16px; color: var(--muted); }
html.mobile .mobile-cost strong { display: block; font-size: 68px; color: var(--red-ink); line-height: 1.4; }
html.mobile .mobile-cost strong span { font-size: 22px; }
html.mobile .mobile-cost small { display: block; font-size: 17px; color: var(--ink); margin-top: 10px; }
html.mobile .ideas { display: grid; grid-template-columns: 1fr; gap: 16px; }
html.mobile .idea { height: auto; padding: 22px; border-radius: 22px; gap: 16px; }
html.mobile .idea .tape, html.mobile .idea .ico .avs { display: none; }
html.mobile .idea .ico { width: 46px; height: 46px; font-size: 25px; }
html.mobile .idea b { font-size: 21px; line-height: 1.6; margin: 0; }
html.mobile .idea p { font-size: 17px; line-height: 1.85; }
html.mobile .slide .cmp-us, html.mobile .slide .cmp-them { padding: 22px; border-radius: 22px; opacity: 1; color: var(--ink); }
html.mobile .cmp-them { border: 1px dashed var(--muted); }
html.mobile .cmp-them :is(.dash, .scissors, .stamp, .who) { display: none; }
html.mobile .cmp-them .body { position: static; opacity: 1; }
html.mobile .slide .cmp-us h3, html.mobile .slide .cmp-them h3 { font-size: 22px; gap: 12px; line-height: 1.6; }
html.mobile .cmp-us h3 .tile { width: 36px; height: 36px; font-size: 23px; flex: none; border-radius: 10px; }
html.mobile .slide .cmp-us ul, html.mobile .slide .cmp-them ul { font-size: 18px; line-height: 1.8; gap: 18px; margin-top: 20px; }
html.mobile .cmp-us li, html.mobile .cmp-them li { gap: 12px; align-items: flex-start; }
html.mobile .cmp-us .cbox, html.mobile .cmp-them .minus { width: 28px; height: 28px; margin-top: 3px; flex: none; }
html.mobile .cmp-us .cbox svg { width: 16px; height: 16px; }
html.mobile .cmp-us .pill { position: static; font-size: 15px; margin-top: 22px; padding: 8px 14px; gap: 10px; }
html.mobile .cmp-us .pill .cbox { width: 24px; height: 24px; }
html.mobile .slide .tl { display: flex; flex-direction: column; gap: 28px; }
html.mobile .tl li { gap: 16px; }
html.mobile .tl .c { width: 42px; height: 42px; font-size: 21px; }
html.mobile .slide .tl b { font-size: 22px; line-height: 1.6; }
html.mobile .slide .tl small { font-size: 17px; line-height: 1.9; }
html.mobile .tl .con { display: none; }
html.mobile .s11 .dallah-wrap { order: 2; }
html.mobile .s11 .closing-brand { order: 0; }
html.mobile .s11 h1 { order: 1; }
html.mobile .s11 .lead { order: 3; }
html.mobile .s11 .cta { order: 4; }
html.mobile .s11 .contact { order: 5; }
html.mobile .s11 .hayakum { order: 6; }
html.mobile .slide .cta { justify-content: center; min-height: 58px; font-size: 20px; line-height: 1.7; padding: 14px 20px; border-radius: 20px; text-align: center; }
html.mobile .contact { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 16px; }
html.mobile .contact a { min-height: 44px; display: inline-flex; align-items: center; }
html.mobile .s11 .hayakum { text-align: center; }
html.mobile .hint { display: none; }
html.mobile .progress { height: 3px; }
html.mobile .hud { display: flex; left: 0; right: 0; bottom: 0; gap: 12px; padding: 12px max(20px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: #103748f5; opacity: 1; transform: none; backdrop-filter: blur(20px); box-shadow: 0 -8px 28px #10374820; }
html.mobile .hud button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 48px; border-radius: 14px; padding: 0 16px; font-size: 16px; background: #ffffff15; }
html.mobile .hud #next { order: 3; flex: 1; background: #0b8e8c; }
html.mobile .hud #prev { order: 1; flex: 1; }
html.mobile .hud #prev > svg { transform: rotate(180deg); }
html.mobile .hud #sound { order: 2; width: 44px; padding: 0; flex: none; }
html.mobile .hud #sound > svg { width: 21px; height: 21px; }
html.mobile .hud :is(#replay, #full, .count) { display: none; }
html.mobile .mobile-control-label { display: inline; }
html.mobile .hud button:disabled { opacity: .35; cursor: default; }
@media (min-width: 600px) { html.mobile .slide { padding-inline: max(32px, calc((100vw - 680px)/2)); } }
@media (max-width: 350px) { html.mobile .slide { padding-inline: 18px; } html.mobile .category-grid { gap: 8px; } html.mobile .category-card { padding: 14px 10px; } html.mobile .category-card b { font-size: 17px; } html.mobile .hud { gap: 8px; padding-inline: 14px; } }
html.mobile .draw { stroke-dashoffset: 0; }
html.mobile .hud #sound { display: none; }
html.mobile .slide .mobile-gift { flex: none; }
html.mobile .cmp-us .cbox path { stroke-dashoffset: 0; }
/* Keep the bright accent palette legible at phone reading sizes. */
html.mobile .s3 { background: linear-gradient(145deg, #087e7c, #15445a); }
html.mobile .s3 .tayyib { color: var(--gold); }
html.mobile .figs dt.red { color: var(--red-ink); }
html.mobile:has(.slide.dark.is-on), html.mobile:has(.slide.dark.is-on) body { background: #103748; }