/* wishmap landing: 「郵戳 Postmark」. Colours and radii come from tokens.css (apps/wishmap/design/tokens.json). */
.wishmap {
  --ink: var(--wishmap-on-surface);
  --mute: var(--wishmap-on-surface-variant);
  --paper: var(--wishmap-surface);
  --card: var(--wishmap-surface-container-lowest);
  --rule: var(--wishmap-outline-variant);
  --line: var(--wishmap-outline);
  --stamp: var(--wishmap-primary);
  --bezel: var(--wishmap-inverse-surface);
  --bezel-rim: color-mix(in srgb, var(--wishmap-inverse-surface), var(--wishmap-outline) 20%);
  --notch: var(--wishmap-scrim);
  --display: "Instrument Serif", "wishmap-display-cjk", "wishmap-body", serif;
  --serif: "Instrument Serif", "wishmap-body", serif;
  --body: "wishmap-body", system-ui, sans-serif;
  --w-display: 400;
  --w-title: 400;
  --gutter: 16px;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme: light;
}
/* CJK headlines are Noto Serif in the locale's script (its Latin matches the weight); Latin pages use Instrument Serif. */
.wishmap:is(:lang(zh), :lang(ja), :lang(ko)) { --display: "wishmap-display-cjk", "Instrument Serif", "wishmap-body", serif; --w-display: 900; --w-title: 600; }
.wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) { font-feature-settings: "pwid"; }
@media (min-width: 900px) { .wishmap { --gutter: 64px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body.wishmap { margin: 0; background: var(--paper) var(--grain); color: var(--ink); font: 400 16px/1.8 var(--body); -webkit-font-smoothing: antialiased; font-synthesis: none; overflow-x: clip; }
.wishmap a { color: var(--stamp); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.wishmap a:hover { color: var(--ink); }
.wishmap :focus-visible { outline: 2px solid var(--wishmap-secondary); outline-offset: 3px; border-radius: 2px; }
:where(.wishmap) :is(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.wishmap) :is(ul, ol) { padding: 0; list-style: none; }
:where(.wishmap) :is(h1, h2, h3) { font-family: var(--display); font-weight: var(--w-display); }
.wishmap:lang(ja) :is(h1, h2, h3, .lede) { word-break: auto-phrase; }
.wishmap:lang(ko) { word-break: keep-all; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 18px; border-radius: var(--wishmap-radius-small); background: var(--ink); color: var(--paper) !important; text-decoration: none; }
.skip:focus { top: 12px; }

.cap { font: 500 12px/1.5 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.ital { font-family: var(--serif); font-style: italic; font-weight: 400; }
.lede { font-size: 17.5px; line-height: 1.8; color: var(--mute); max-width: 34em; }
.note { font-size: 14px; line-height: 1.75; color: var(--mute); }
hr.double, .head::after { border: 0; border-top: 3px double var(--line); margin: 0; }

/* buttons: printed rectangles */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px; border-radius: var(--wishmap-radius-small); background: var(--stamp); color: var(--wishmap-on-primary) !important; border: 1px solid var(--stamp); font: 500 15px/1.3 var(--body); letter-spacing: .06em; text-decoration: none; }
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink) !important; border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper) !important; }
.btn.small { min-height: 40px; padding: 8px 16px; font-size: 14px; }

.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store { display: grid; min-width: 150px; padding: 8px 16px 9px; border: 1px solid var(--ink); border-radius: var(--wishmap-radius-small); background: var(--card); color: var(--ink); text-decoration: none; }
.store .kicker { font: 500 11px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--stamp); }
.store .name { font: 400 22px/1.15 var(--serif); }

/* wordmark: the i's dot is a stamp ring */
.mark { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--stamp); stroke-width: 3; }
.mark .thin { stroke-width: 1.5; }
.mark .pin { fill: var(--stamp); stroke: none; }
.mark .hole { fill: var(--card); stroke: none; }
.word { position: relative; font: italic 400 30px/1 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.word .i { position: relative; }
/* The ring is the i's dot: it is painted over the glyph's own dot in the background colour, so the text stays a plain "Wishmap". */
.word .i::after { content: ""; position: absolute; left: 50%; top: .25em; width: .2em; height: .2em; margin-left: -.07em; border: .05em solid var(--stamp); border-radius: 50%; background: var(--paper); }

/* header */
.bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.nav { max-width: 1312px; margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 4px 0; }
.nav .links { display: none; gap: 28px; font-size: 14px; letter-spacing: .06em; }
.nav .links a { display: inline-block; padding: 8px 0; color: var(--ink); text-decoration: none; }
.nav .links a:hover { box-shadow: inset 0 -2px 0 var(--stamp); }
.nav-end { display: flex; align-items: center; gap: 8px; }
@media (min-width: 1040px) { .nav .links { display: flex; } }
@media (max-width: 420px) { .nav .btn.small { display: none; } }

.lang { position: relative; font: 500 14px/1.4 system-ui, sans-serif; }
.lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px; border-radius: var(--wishmap-radius-small); border: 1px solid var(--rule); background: var(--card); }
.lang summary::-webkit-details-marker { display: none; }
.lang svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.lang ul { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; padding: 6px; border-radius: var(--wishmap-radius-medium); background: var(--card); border: 1px solid var(--line); z-index: 30; }
.lang a { display: block; padding: 8px 12px; border-radius: var(--wishmap-radius-extra-small); color: var(--ink); text-decoration: none; }
.lang a:hover { background: var(--wishmap-surface-container-low); color: var(--ink); }
.lang a[aria-current] { color: var(--stamp); box-shadow: inset 2px 0 0 var(--stamp); }

/* sections */
main { overflow-x: clip; }
.hero, .platforms, .share, .views, .pricing, .faq, .together-in, .download-in { max-width: 1312px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.head { display: grid; gap: 14px; max-width: 760px; }
.head::after { content: ""; display: block; margin-top: 12px; }
:where(.wishmap) :is(h1, h2, h3) { text-wrap: balance; }
:where(.wishmap) h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.16; letter-spacing: .005em; }
.wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) h2:not(.cap) { font-size: clamp(36px, 5vw, 62px); line-height: 1.04; letter-spacing: -.01em; }

/* hero */
.hero { position: relative; display: grid; gap: 28px; padding-top: 28px; padding-bottom: 56px; }
.masthead { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 3px double var(--line); font-size: 15px; color: var(--mute); }
.hero-copy { display: grid; gap: 20px; align-content: start; padding-top: 16px; }
.hero h1 { font-size: clamp(28px, 8.4vw, 60px); line-height: 1.22; letter-spacing: .01em; text-wrap: wrap; }
@media (min-width: 1000px) { .hero h1 { font-size: clamp(40px, 3.7vw, 56px); } }
.hero h1 span { display: block; }
.wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .hero h1 { font-size: clamp(40px, 10.5vw, 68px); line-height: 1.02; letter-spacing: -.02em; }
@media (min-width: 1000px) { .wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .hero h1 { font-size: clamp(52px, 4.9vw, 74px); } }
.wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .hero h1 span + span { font-style: italic; color: var(--stamp); }
.wishmap:is(:lang(zh), :lang(ja), :lang(ko)) .hero h1 span + span { color: var(--stamp); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.hero .fine { font-size: 13.5px; color: var(--mute); }
.hero .fine .ital { font-size: 18px; color: var(--ink); }
.hero-art { position: relative; min-height: 600px; }
.route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route > path { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 6 8; }
.postmark .ink { fill: none; stroke: var(--stamp); stroke-width: 2.5; }
.postmark circle:first-child { fill: var(--card); }
.postmark .thin { stroke-width: 1; }
.postmark text { fill: var(--stamp); stroke: none; text-anchor: middle; font-family: var(--display); font-weight: var(--w-display); font-size: 21px; }
.wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .postmark text { font-style: italic; font-size: 19px; }
.hero-art .phone { position: absolute; left: 50%; top: 4px; margin-left: -180px; --z: .8; }
@media (min-width: 1000px) {
  .hero { grid-template-columns: 1.08fr 1fr; column-gap: 40px; padding-top: 32px; padding-bottom: 88px; }
  .masthead { grid-column: 1 / -1; }
  .hero-copy { padding-top: 48px; }
  .hero-art { min-height: 660px; }
  .hero-art .phone { left: auto; right: 6%; margin-left: 0; --z: .88; }
}
@media (max-width: 999px) { .route { opacity: .9; } }
@media (max-width: 480px) {
  .hero-art { min-height: 520px; }
  .hero-art .phone { --z: .68; margin-left: -122px; }
}

/* phone mock (HTML/CSS, after apps/wishmap/design/preview.html) */
.phone { width: 360px; height: 740px; zoom: var(--z, 1); border-radius: 50px; position: relative; overflow: hidden; background: var(--paper) var(--grain); color: var(--ink); box-shadow: 0 0 0 9px var(--bezel), 0 0 0 10px var(--bezel-rim), 0 40px 70px -30px color-mix(in srgb, var(--ink) 55%, transparent); font-family: var(--body); isolation: isolate; text-align: left; }
.phone::before { content: ""; position: absolute; top: 11px; left: 50%; width: 112px; height: 32px; margin-left: -56px; border-radius: 18px; background: var(--notch); z-index: 30; }
.phone::after { content: ""; position: absolute; bottom: 8px; left: 50%; width: 124px; height: 5px; margin-left: -62px; border-radius: 3px; background: var(--ink); opacity: .85; z-index: 40; }
.sb { height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 6px 30px 0 38px; font: 600 15px/1 -apple-system, system-ui, sans-serif; position: relative; z-index: 20; }
.sb svg { height: 11px; fill: currentColor; }
.scr { position: absolute; inset: 50px 0 0; display: flex; flex-direction: column; }
.phone .cap { font-size: 10px; letter-spacing: .16em; }
.s-head { padding: 4px 20px 0; }
.s-head .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.s-title { font: var(--w-display) 30px/1.15 var(--display); margin-top: 10px; }
.s-head .sub { margin: 4px 0 10px; font-size: 12px; color: var(--mute); align-items: baseline; }
.s-head .sub .ital { font-size: 15px; color: var(--ink); }
.s-tabs { display: flex; gap: 18px; padding: 10px 20px 0; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; }
.s-tabs span { padding-bottom: 9px; }
.s-tabs .on { color: var(--ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--stamp); }
.s-list { padding: 0 20px; flex: 1; overflow: hidden; }
.s-item { display: grid; grid-template-columns: 1fr 80px; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); position: relative; }
.s-body { min-width: 0; }
.badge { display: inline-block; font: 500 9px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--line); padding: 3px 5px 2px; border-radius: 1px; color: var(--mute); }
.s-name { font: var(--w-title) 16px/1.35 var(--display); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .s-name { font-size: 18px; line-height: 1.2; }
.s-text { font-size: 12px; line-height: 1.6; color: var(--mute); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-meta { margin-top: 6px; font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-meta .ital { font-size: 13.5px; color: var(--ink); }
.th { display: block; width: 80px; height: 100px; border-radius: var(--wishmap-radius-thumbnail); position: relative; overflow: hidden; background-color: var(--line); }
/* Thumbnail art stands in for photos from Instagram/RedNote/Airbnb, so its colours are the subjects' (broth, bamboo, cedar), not the brand's. */
.th-noodle { background: radial-gradient(circle at 46% 56%, #f6e2b3 0 9%, #e3a95a 10% 17%, #b4561f 18% 30%, #6a2a10 31% 37%, #f1ede6 38% 41%, #2a1c15 42% 100%); }
.th-noodle::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 38% 48%, #7fb04a 0 2%, transparent 2.5%), radial-gradient(circle at 56% 62%, #7fb04a 0 1.6%, transparent 2%), radial-gradient(circle at 52% 44%, #8a4421 0 7%, transparent 7.5%), radial-gradient(ellipse at 80% 10%, rgb(255 240 200 / .35), transparent 50%); }
.th-bamboo { background: linear-gradient(180deg, rgb(220 240 200 / .55), transparent 45%), repeating-linear-gradient(93deg, #22442a 0 5px, #6c9a46 5px 7px, #2e5934 7px 15px, #9fbf6a 15px 16px, #1b3520 16px 26px); }
.th-bamboo::after { content: ""; position: absolute; left: 44%; right: 44%; bottom: 0; height: 60%; background: linear-gradient(#cdbf9a, #8b7a55); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); opacity: .8; }
.th-onsen { background: radial-gradient(ellipse at 30% 30%, rgb(255 255 255 / .55), transparent 40%), radial-gradient(ellipse at 70% 45%, rgb(255 255 255 / .35), transparent 35%), linear-gradient(180deg, #22303a 0 35%, #5d7a7f 36% 70%, #2f4146 71%); }
.th-onsen::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36%; background: repeating-linear-gradient(90deg, #3b2a1e 0 3px, #5a4330 3px 22px); opacity: .9; }
.stamp-mini { position: absolute; right: 62px; top: 2px; z-index: 3; width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--stamp); box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--stamp); background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--stamp); display: grid; place-content: center; text-align: center; line-height: 1.1; rotate: -8deg; }
.stamp-mini .fd { font: var(--w-display) 10.5px/1.1 var(--display); max-width: 46px; }
.stamp-mini .ital { font-size: 10.5px; }
.fab { position: absolute; right: 18px; bottom: 92px; height: 44px; padding: 0 16px; display: flex; align-items: center; background: var(--ink); color: var(--paper); border-radius: var(--wishmap-radius-small); font-size: 13px; letter-spacing: .04em; z-index: 5; }
.tabbar { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); padding: 9px 0 26px; background: var(--paper); font-size: 10.5px; text-align: center; color: var(--mute); }
.tabbar span { display: grid; justify-items: center; gap: 3px; }
.tabbar .on { color: var(--ink); }
.tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.tabbar .on svg { stroke: var(--stamp); }

/* platforms */
.platforms { padding-top: 8px; padding-bottom: 64px; display: grid; gap: 16px; justify-items: center; text-align: center; }
.wishmap .platforms h2.cap { font: 500 12px/1.5 var(--body); letter-spacing: .16em; }
.platforms ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 980px; }
.platforms li { padding: 5px 12px 4px; border: 1px solid var(--line); border-radius: var(--wishmap-radius-extra-small); font: 500 12.5px/1.4 var(--body); letter-spacing: .08em; color: var(--ink); background: var(--card); }

/* share: three steps */
.share { padding-top: 72px; padding-bottom: 88px; border-top: 1px solid var(--rule); }
.steps { display: grid; gap: 20px; margin-top: 40px; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.step { background: var(--card); border: 1px solid var(--rule); border-radius: var(--wishmap-radius-medium); padding: 20px 20px 26px; display: grid; gap: 8px; align-content: start; }
@media (min-width: 900px) { .step { padding: 24px 24px 30px; } }
.step .ill { height: 214px; margin: -4px -4px 14px; border-radius: var(--wishmap-radius-small); background: var(--wishmap-surface-container-low) var(--grain); border: 1px solid var(--rule); display: grid; place-content: center; position: relative; overflow: hidden; padding: 16px; }
.step .num { font-size: 30px; line-height: 1; color: var(--stamp); }
.step h3 { font-size: 24px; line-height: 1.3; font-weight: var(--w-display); }
.wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .step h3 { font-size: 28px; line-height: 1.1; }
.step > p:last-child { color: var(--mute); font-size: 15px; line-height: 1.75; }
.share .note { margin-top: 24px; text-align: center; }
.post { width: 200px; border: 1px solid var(--rule); background: var(--card); border-radius: var(--wishmap-radius-small); overflow: hidden; rotate: -2deg; }
.post .th { width: 100%; height: 132px; border-radius: 0; }
.post-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; font-size: 13px; color: var(--mute); }
.share-ic { width: 30px; height: 30px; padding: 5px; fill: none; stroke: var(--paper); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: var(--stamp); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--stamp) 22%, transparent); }
.sheet { width: 268px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--wishmap-radius-small); position: relative; padding: 18px 14px 14px; }
.sheet::before, .perf { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 10px; background: radial-gradient(circle at 6px 0, var(--wishmap-surface-container-low) 4.5px, transparent 5px) 0 0 / 12px 10px repeat-x; }
.sheet-src { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.sheet-src .th { width: 38px; height: 38px; }
.sheet-src > span { display: grid; min-width: 0; font-size: 12px; color: var(--mute); }
.sheet-src .fd { font: var(--w-title) 13.5px/1.3 var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 14px; text-align: center; }
.av { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.ring { width: 46px; height: 46px; border-radius: 50%; display: grid; place-content: center; border: 2px solid var(--wishmap-secondary); box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--wishmap-secondary); color: var(--wishmap-secondary); font: var(--w-display) 16px/1 var(--display); }
.av.on .ring { border-color: var(--stamp); box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--stamp), 0 0 0 4px color-mix(in srgb, var(--stamp) 18%, transparent); color: var(--stamp); }
.av-name { font-size: 11px; line-height: 1.3; color: var(--mute); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av.on .av-name { color: var(--ink); font-weight: 500; }
.toast { width: 272px; display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--wishmap-radius-small); }
.toast-mark .mark { width: 46px; height: 46px; rotate: -8deg; }
.toast > span:last-child { display: grid; min-width: 0; }
.toast .fd { font: var(--w-display) 15px/1.35 var(--display); }
.toast-sub { font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parsed { width: 272px; margin-top: 10px; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border: 1px dashed var(--line); border-radius: var(--wishmap-radius-small); }
.parsed svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--stamp); stroke-width: 1.6; }
.parsed > span { display: grid; }
.parsed .cap { font-size: 9.5px; }
.parsed .ital { font-size: 16px; line-height: 1.3; }

/* views: list + map */
.views { display: grid; gap: 40px; padding-top: 88px; padding-bottom: 96px; border-top: 1px solid var(--rule); }
.views-copy { display: grid; gap: 18px; align-content: center; }
.ruled { display: grid; border-top: 1px solid var(--line); margin-top: 8px; }
.ruled li, .ruled > div { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; line-height: 1.6; }
.ruled li .ital { font-size: 19px; line-height: 1.3; color: var(--stamp); }
.views-art { position: relative; display: grid; place-items: center; min-height: 640px; background: var(--wishmap-surface-container-low) var(--grain); border: 1px solid var(--rule); border-radius: var(--wishmap-radius-small); }
.views-art .phone { --z: .82; }
.views-art { gap: 16px; align-content: center; padding: 24px 16px; }
.views-art figcaption { max-width: 30em; text-align: center; }
@media (min-width: 1000px) { .views { grid-template-columns: 1fr 1fr; gap: 72px; } .views-art { min-height: 720px; } .views-art .phone { --z: .9; } }
@media (max-width: 480px) { .views-art { min-height: 540px; } .views-art .phone { --z: .66; } }
.paper-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.paper-map .land { fill: var(--wishmap-map-land); }
.paper-map .water { fill: var(--wishmap-map-water); }
.paper-map .park { fill: var(--wishmap-map-parks); }
.paper-map .casing { stroke: var(--wishmap-map-casing); stroke-width: 10; fill: none; stroke-linecap: round; }
.paper-map .road { stroke: var(--wishmap-map-roads); stroke-width: 7; fill: none; stroke-linecap: round; }
.paper-map .label { fill: var(--mute); font: var(--w-title) 11px var(--display); }
.wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .paper-map .label { font-style: italic; font-size: 13px; }
.pin circle { fill: var(--card); stroke: var(--stamp); stroke-width: 2; }
.pin .thin { fill: none; stroke-width: 1; opacity: .7; }
.pin text { fill: var(--stamp); text-anchor: middle; font: var(--w-display) 12px var(--display); }
.wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .pin text { font-style: italic; font-size: 15px; }
.pin.on circle { fill: var(--stamp); }
.pin.on .thin { stroke: var(--wishmap-on-primary); }
.pin.on .dot { fill: var(--wishmap-on-primary); }
.cluster circle { fill: var(--card); stroke: var(--stamp); stroke-width: 2; }
.cluster .thin { fill: none; stroke-width: 1; stroke-dasharray: 2 3; }
.cluster text { fill: var(--stamp); text-anchor: middle; font-size: 21px; }
.map-top { position: absolute; top: 8px; left: 14px; right: 14px; z-index: 6; display: flex; gap: 8px; }
.map-top .search { flex: 1; min-width: 0; height: 42px; display: flex; align-items: center; padding: 0 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--wishmap-radius-small); font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-top .toggle { height: 42px; padding: 0 12px; display: grid; place-items: center; background: var(--ink); color: var(--paper); border-radius: var(--wishmap-radius-small); font-size: 12.5px; }
.map-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--card); }
.map-sheet .perf { top: -9px; rotate: 180deg; background: radial-gradient(circle at 6px 0, var(--card) 4.5px, transparent 5px) 0 0 / 12px 10px repeat-x; }
.map-sheet-body { display: grid; grid-template-columns: 1fr 72px; gap: 12px; padding: 14px 20px 34px; }
.map-sheet-body > div { min-width: 0; }
.map-sheet-body .s-name { font-size: 19px; font-weight: var(--w-display); }
.map-sheet-body .th { width: 72px; height: 88px; }
.map-btns { grid-column: 1 / -1; display: flex; gap: 8px; }
.map-btns .btn { flex: 1; min-height: 44px; padding: 8px 10px; font-size: 13px; letter-spacing: .02em; white-space: nowrap; }
.map-btns .btn.ghost { flex: 0 0 auto; }

/* together */
.together { background: var(--wishmap-surface-container) var(--grain); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.together-in { display: grid; gap: 48px; padding-top: 88px; padding-bottom: 96px; }
.together-copy { display: grid; gap: 18px; align-content: center; }
.together .lede, .together .note { color: var(--mute); }
.ruled > div { grid-template-columns: minmax(8em, 1fr) 2fr; gap: 16px; align-items: baseline; }
.ruled dt { font: var(--w-title) 18px/1.4 var(--display); }
.wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .ruled dt { font-size: 21px; line-height: 1.2; }
.ruled dd { color: var(--ink); }
@media (max-width: 560px) { .ruled > div { grid-template-columns: 1fr; gap: 2px; } }
.ticket { position: relative; align-self: center; justify-self: center; width: min(100%, 420px); background: var(--card); border: 1px solid var(--rule); border-radius: var(--wishmap-radius-small); padding: 22px 0 18px; rotate: -1.5deg; }
.ticket-top { display: grid; grid-template-columns: 124px 1fr; gap: 18px; align-items: center; padding: 0 22px 18px; }
.qr-box { display: block; padding: 7px; border: 1px solid var(--rule); background: var(--card); }
.qr { display: block; width: 100%; height: auto; fill: var(--ink); }
.ticket-top > span:last-child { display: grid; gap: 8px; }
.ticket-title { font: var(--w-display) 21px/1.35 var(--display); }
.wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .ticket-title { font-size: 25px; line-height: 1.12; }
.tear { position: relative; height: 12px; margin: 0 -1px; background: radial-gradient(circle at 0 6px, var(--wishmap-surface-container) 6px, transparent 6.5px) left / 12px 12px no-repeat, radial-gradient(circle at 12px 6px, var(--wishmap-surface-container) 6px, transparent 6.5px) right / 12px 12px no-repeat; }
.tear::after { content: ""; position: absolute; left: 16px; right: 16px; top: 5px; border-top: 2px dotted var(--line); }
.ticket-valid { padding: 12px 22px 0; font-size: 13.5px; line-height: 1.65; color: var(--mute); }
.ticket-btns { display: flex; padding: 14px 22px 0; }
.ticket-btns .btn { flex: 1; }
.ticket figcaption { padding: 12px 22px 0; font-size: 13px; color: var(--mute); }
.postmark.big { position: absolute; right: -26px; top: -40px; width: 120px; height: 120px; rotate: 12deg; }
.postmark.big svg { width: 100%; height: 100%; }
.postmark.big text { font-family: var(--serif); font-style: italic; font-size: 22px; font-weight: 400; }
.postmark.big text.small { font-size: 12px; }
@media (min-width: 1000px) { .together-in { grid-template-columns: 1.15fr 1fr; gap: 80px; } }
@media (max-width: 480px) { .ticket-top { grid-template-columns: 92px 1fr; gap: 14px; } .postmark.big { right: -6px; width: 96px; height: 96px; } }

/* pricing */
.pricing { padding-top: 96px; padding-bottom: 88px; }
.tiers { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } }
.tier { position: relative; display: grid; gap: 14px; align-content: start; padding: 26px 24px 28px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--wishmap-radius-medium); }
.tier.featured { border: 1px solid var(--ink); box-shadow: 6px 6px 0 -1px var(--wishmap-surface-container-high), 6px 6px 0 0 var(--line); }
.tier h3 { font-size: 26px; line-height: 1.2; }
.wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .tier h3 { font-size: 32px; line-height: 1; }
.tier .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-bottom: 16px; border-bottom: 3px double var(--line); }
.tier .amount { font-size: 50px; line-height: 1; letter-spacing: -.01em; }
.tier.featured .amount { color: var(--stamp); }
.tier .per { font-size: 14px; color: var(--mute); }
.tier ul { display: grid; gap: 9px; }
.tier li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.6; }
.tier li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 9px; height: 9px; border: 1.5px solid var(--stamp); border-radius: 50%; }
.tier li:first-child { color: var(--mute); }
.tier:first-child li:first-child { color: var(--ink); }
.tier-stamp { position: absolute; right: 18px; top: 18px; width: 70px; height: 70px; border-radius: 50%; display: grid; place-content: center; border: 2px solid var(--stamp); box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--stamp); color: var(--stamp); font: var(--w-display) 15px/1 var(--display); rotate: -12deg; text-align: center; }
.wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .tier-stamp { font-style: italic; font-size: 17px; }
.pricing > .note { margin-top: 24px; max-width: 860px; }

/* download band: inverse paper */
.download { background: var(--wishmap-inverse-surface); color: var(--wishmap-inverse-on-surface); }
.download-in { display: grid; justify-items: center; text-align: center; gap: 18px; padding-top: 88px; padding-bottom: 88px; }
.download .mark { width: 64px; height: 64px; stroke: var(--wishmap-inverse-primary); rotate: -8deg; }
.download .mark .pin { fill: var(--wishmap-inverse-primary); }
.download .mark .hole { fill: var(--wishmap-inverse-surface); }
.download h2 { max-width: 16em; }
.download p { max-width: 36em; color: var(--wishmap-inverse-on-surface); }
.download a { color: var(--wishmap-inverse-primary); }
.download a:hover { color: var(--wishmap-inverse-on-surface); }
.download .stores { justify-content: center; margin-top: 8px; }
.download .store, .download .store:hover { background: transparent; border-color: var(--wishmap-inverse-on-surface); color: var(--wishmap-inverse-on-surface); }
.download .store .kicker { color: var(--wishmap-inverse-primary); }
.download :focus-visible { outline-color: var(--wishmap-inverse-primary); }

/* FAQ */
.faq { max-width: 880px; padding-top: 96px; padding-bottom: 104px; }
.faq h2 { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 3px double var(--line); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; font: var(--w-title) 18px/1.5 var(--display); }
.wishmap:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .faq summary { font-size: 22px; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--stamp); font: 400 18px/1 var(--body); transition: rotate .2s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 2px 20px; font-size: 15.5px; color: var(--mute); max-width: 44em; }

/* footer */
.foot { border-top: 3px double var(--line); padding: 40px var(--gutter) 48px; text-align: center; font-size: 14px; color: var(--mute); display: grid; gap: 16px; justify-items: center; }
.foot .brand { display: inline-flex; align-items: center; gap: 10px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
.foot-links a, .langs a { display: inline-block; padding: 4px 2px; }
.langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font: 13px/1.6 system-ui, sans-serif; }
.langs a { color: var(--mute); text-decoration: none; }
.langs a[aria-current] { color: var(--stamp); }

/* the stamp lands once (tokens.json motion); nothing loops */
@media (prefers-reduced-motion: no-preference) {
  .hero .postmark .ink, .stamp-mini, .tier-stamp, .postmark.big svg { animation: stamp-in .5s cubic-bezier(.05, .7, .1, 1) both; transform-box: fill-box; transform-origin: center; }
  .hero .postmark:nth-of-type(2) .ink { animation-delay: .15s; }
  .hero .postmark:nth-of-type(3) .ink { animation-delay: .3s; }
  .stamp-mini { animation-delay: .5s; }
}
@keyframes stamp-in { from { transform: scale(1.35) rotate(-6deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }