/* Duplicate Photos: Best Shot — brand tokens and site styles. Rules: site-src/BRAND.md */
:root {
  color-scheme: light dark;
  --ink: #16161a; --paper: #fbfaf8; --card: #fff; --muted: #66666d; --soft: #f3f1ee; --line: rgba(22,22,26,.09);
  --keep: #1fa85a; --keep-ink: #13824a; --amber: #ffad4a; --coral: #ff7f7a; --violet: #b05fd8; --remove: #ff3b30;
  --sunrise: linear-gradient(100deg, var(--amber), var(--coral) 45%, var(--violet));
  --display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
  --shadow: 0 30px 80px -30px rgba(40,20,30,.35), 0 8px 24px -12px rgba(40,20,30,.18);
  /* legacy names used by consent.js and older markup */
  --fg: var(--ink); --bg: var(--paper); --accent: var(--keep);
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #f5f5f7; --paper: #121214; --card: #1c1c1f; --muted: #a1a1a8; --soft: #232326; --line: rgba(255,255,255,.1);
    --keep: #3ccf7c; --keep-ink: #4fd98a; --shadow: 0 30px 80px -30px rgba(0,0,0,.7), 0 8px 24px -12px rgba(0,0,0,.5); }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0 auto; max-width: 44rem; padding: 0 1.25rem; font: 17px/1.55 var(--text); color: var(--ink); background: var(--paper); overflow-x: hidden; }
a { color: var(--keep-ink); text-underline-offset: .15em; }
h1, h2, h3, .price, .totals b { font-family: var(--display); text-wrap: balance; }
h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -.02em; margin: 1.5rem 0 .5rem; }
h2 { margin-top: 2rem; letter-spacing: -.015em; } h3 { margin-bottom: .25rem; }
.button { display: inline-block; padding: .75rem 1.5rem; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600; transition: transform .15s; }
.button:hover { transform: translateY(-1px); }
.points { padding-left: 1.2rem; } .points li { margin: .6rem 0; }
footer { margin: 3rem 0 2rem; color: var(--muted); font-size: .9rem; }
footer a { color: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--keep) 60%, transparent); outline-offset: 2px; border-radius: 4px; }

/* Header */
.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; background: color-mix(in srgb, var(--paper) 85%, transparent); backdrop-filter: saturate(1.8) blur(14px); -webkit-backdrop-filter: saturate(1.8) blur(14px); }
.nav .brand { display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; font: 700 1.02rem/1.2 var(--display); letter-spacing: -.01em; }
.nav nav { display: flex; align-items: center; gap: 1.25rem; font-size: .92rem; }
.nav nav a:not(.button) { color: var(--muted); text-decoration: none; }
.nav nav a:not(.button):hover { color: var(--ink); }
.button.small { padding: .4rem 1rem; font-size: .88rem; }
@media (max-width: 860px) { .nav nav:not(.langs) a:not(.button) { display: none; } .nav .brand { font-size: .95rem; } }

/* Landing page */
body.landing { max-width: 70rem; }
.landing h1 { font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: .6rem 0 1.1rem; }
.landing h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 .8rem; }
.landing h3 { font-size: 1.08rem; margin: .5rem 0 .3rem; letter-spacing: -.01em; }
.landing section { scroll-margin-top: 5rem; }
.grad { background: var(--sunrise); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.eyebrow { color: var(--keep-ink); font-weight: 600; font-size: .9rem; letter-spacing: .02em; margin: 0 0 .5rem; }
.sub { color: var(--muted); font-size: 1.12rem; max-width: 42rem; margin: 0 auto 2.2rem; }
.fine { color: var(--muted); font-size: .88rem; }
.center { text-align: center; }
.landing .hero { position: relative; padding: 4rem 0 1rem; text-align: center; }
.landing .hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 2rem; width: min(70rem, 140vw); height: 36rem; transform: translateX(-50%); background: radial-gradient(closest-side at 30% 45%, color-mix(in srgb, var(--amber) 30%, transparent), transparent), radial-gradient(closest-side at 70% 40%, color-mix(in srgb, var(--violet) 22%, transparent), transparent), radial-gradient(closest-side at 50% 70%, color-mix(in srgb, var(--coral) 20%, transparent), transparent); filter: blur(30px); opacity: .7; pointer-events: none; }
.landing .lead { max-width: 38rem; margin: 0 auto 1.8rem; font-size: 1.24rem; color: var(--muted); }
.cta { display: flex; flex-direction: column; align-items: center; gap: .65rem; }

/* Stand-in photos: abstract scenes, sharp and softened */
.ph-a { background: radial-gradient(circle at 70% 38%, #ffe7a8 0 9%, transparent 10%), linear-gradient(180deg, transparent 58%, #2f6b5a 58% 72%, #1f4a3f 72%), linear-gradient(180deg, #7ec3ff, #ffc58a); }
.ph-b { background: radial-gradient(ellipse 22% 30% at 50% 55%, #f0b48a 0 60%, transparent 62%), radial-gradient(ellipse 34% 30% at 50% 100%, #3b5bdb 0 70%, transparent 72%), linear-gradient(160deg, #ffd6e0, #b9c6ff); }
.ph-c { background: linear-gradient(180deg, transparent 55%, #c98b4c 55%), radial-gradient(circle at 30% 30%, #fff 0 7%, transparent 8%), linear-gradient(180deg, #4da3d9, #bfe6ff); }
.ph-d { background: radial-gradient(circle at 50% 60%, #ff7a59 0 22%, transparent 23%), linear-gradient(135deg, #2b2d42, #5c6784); }
.soft { filter: blur(1.6px) saturate(.9); }
.softer { filter: blur(3px) saturate(.8); }
.dark { filter: brightness(.55) blur(.8px); }

/* Mac window */
.window { margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; text-align: left; font-size: .82rem; }
.titlebar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--soft); }
.titlebar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; } .titlebar i:nth-child(2) { background: #febc2e; } .titlebar i:nth-child(3) { background: #28c840; }
.titlebar span { margin: 0 auto; padding-right: 50px; color: var(--muted); font-weight: 600; }
.app { display: grid; grid-template-columns: 15rem 1fr; min-height: 22rem; }
.sidebar { border-right: 1px solid var(--line); background: var(--soft); padding: .9rem .6rem; }
.sidebar .summary { margin: 0 .4rem .8rem; line-height: 1.35; } .sidebar .summary strong { font-size: 1rem; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { display: grid; grid-template-columns: 34px 1fr; column-gap: .55rem; align-items: center; padding: .4rem; border-radius: 8px; font-weight: 600; }
.sidebar li small { grid-column: 2; color: var(--muted); font-weight: 400; }
.sidebar li .thumb { grid-row: span 2; width: 34px; height: 34px; border-radius: 6px; }
.sidebar li.sel { background: #13824a; color: #fff; } .sidebar li.sel small { color: rgba(255,255,255,.88); }
.sheet { padding: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.tile { position: relative; border-radius: 9px; overflow: hidden; aspect-ratio: 4/3; outline: 1px solid var(--line); }
.tile.best { outline: 3px solid var(--amber); }
.tile .ph { position: absolute; inset: -4px; }
.tile em { position: absolute; left: 6px; bottom: 6px; font-style: normal; font-weight: 700; font-size: .72rem; color: #fff; background: rgba(0,0,0,.45); border-radius: 5px; padding: 1px 6px; }
.badge { position: absolute; top: 6px; left: 6px; z-index: 1; background: var(--amber); color: #2a1a05; font-size: .7rem; padding: 2px 8px; border-radius: 999px; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; } .chips.stack { flex-direction: column; align-items: flex-start; padding: 0 1rem 1rem; }
.chip { padding: .28rem .65rem; border-radius: 999px; font-weight: 600; font-size: .76rem; }
.c1 { background: rgba(31,168,90,.14); color: #13824a; } .c2 { background: rgba(255,173,74,.2); color: #9a5a00; } .c3 { background: rgba(176,95,216,.14); color: #8a3db3; }
@media (prefers-color-scheme: dark) { .c1 { color: #4fd98a; } .c2 { color: #ffc274; } .c3 { color: #d39cf0; } }
.actionbar { margin-top: auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; padding-top: .7rem; border-top: 1px solid var(--line); font-weight: 600; }
.kbd-row { color: var(--muted); font-weight: 400; }
kbd { display: inline-block; min-width: 1.6em; padding: .1em .45em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--card); font: 600 .85em var(--text); text-align: center; color: var(--ink); }
@media (max-width: 700px) { .app { grid-template-columns: 1fr; } .sidebar { display: none; } }

/* Hero stage: Mac window with the iPhone in front */
.stage { position: relative; max-width: 62rem; margin: 3.5rem auto 0; padding-right: 9rem; }
.hero-phone { position: absolute; right: 0; bottom: -2.5rem; width: 15.5rem; }
@media (max-width: 860px) { .stage { padding-right: 0; padding-bottom: 6rem; } .hero-phone { width: 12.5rem; right: -.25rem; bottom: -1rem; } }
@media (max-width: 520px) { .stage { padding-bottom: 9rem; } .hero-phone { width: 11rem; } }

/* iPhone */
.phone { margin: 0; aspect-ratio: 9 / 19.5; padding: .6em; border-radius: 15% / 7%; background: #0d0d0f; box-shadow: var(--shadow), inset 0 0 0 2px #3a3a40; text-align: left; font-size: .7rem; line-height: 1.3; }
.phone .screen { position: relative; height: 100%; overflow: hidden; border-radius: 12% / 5.6%; background: #f2f2f7; color: #1d1d1f; display: flex; flex-direction: column; gap: .5em; padding: 2.6em .7em .7em; }
@media (prefers-color-scheme: dark) { .phone .screen { background: #000; color: #f5f5f7; } }
.island { position: absolute; top: .55em; left: 50%; width: 30%; height: 1.45em; transform: translateX(-50%); border-radius: 999px; background: #0d0d0f; }
.pnav { display: flex; justify-content: space-between; align-items: center; gap: .4em; }
.pnav span { color: #0a84ff; } .pnav b { font-size: 1.05em; }
.shot { position: relative; flex: 1 1 auto; min-height: 0; border-radius: .8em; overflow: hidden; }
.shot em { position: absolute; right: .5em; bottom: .5em; font-style: normal; font-weight: 600; color: #fff; background: rgba(0,0,0,.45); border-radius: 999px; padding: .1em .55em; }
.shot .badge { top: .5em; left: .5em; font-size: .95em; }
.strip { display: flex; gap: .3em; }
.strip i { position: relative; flex: 1; aspect-ratio: 1; border-radius: .45em; }
.strip i.sel { outline: 2px solid var(--amber); outline-offset: 1px; }
.strip i.x { opacity: .45; }
.strip i.x::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.1em; }
.strip i.up { transform: translateY(-.9em); opacity: .6; }
.why { background: #fff; border-radius: .8em; padding: .6em .7em; display: grid; gap: .3em; }
@media (prefers-color-scheme: dark) { .why { background: #1c1c1e; } }
.why .bar { grid-template-columns: 5.2em 1fr; margin: 0; gap: .5em; }
.why .bar b { height: .45em; }
.ptool { display: flex; justify-content: space-between; align-items: center; gap: .4em; padding: .55em .2em .2em; color: #0a84ff; white-space: nowrap; }
.ptool b { background: #0a84ff; color: #fff; padding: .35em .8em; border-radius: 999px; }
.toast { position: absolute; left: 50%; bottom: 3.6em; transform: translateX(-50%); display: flex; gap: 1.2em; white-space: nowrap; background: rgba(30,30,32,.92); color: #fff; padding: .55em 1em; border-radius: 999px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); }
.toast b { color: #64b5ff; }
.phone.solo .toast { top: 50%; bottom: auto; }
.phone.solo { width: 100%; max-width: 17.5rem; justify-self: center; font-size: .78rem; }
.phone.mini { width: 8.2rem; font-size: .5rem; }
.phone.mini .shot { flex: 1; }
.scan { align-items: center; text-align: center; }
.scan .pnav { width: 100%; }
.ring { width: 62%; aspect-ratio: 1; margin: 1.2em auto .6em; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, #f2f2f7 80%, transparent 81%), conic-gradient(var(--keep) calc(var(--p) * 360deg), rgba(120,120,128,.18) 0); }
@media (prefers-color-scheme: dark) { .ring { background: radial-gradient(closest-side, #000 80%, transparent 81%), conic-gradient(var(--keep) calc(var(--p) * 360deg), rgba(120,120,128,.3) 0); } }
.ring span { display: grid; } .ring b { font: 800 2.2em/1.1 var(--display); } .ring small { color: #8e8e93; }
.phase { margin: 0 .5em; color: #8e8e93; }
.found { list-style: none; margin: .4em 0 0; padding: 0; width: 100%; display: grid; gap: .35em; text-align: left; }
.found li { display: grid; grid-template-columns: 2.4em 1fr; column-gap: .6em; align-items: center; background: #fff; border-radius: .7em; padding: .45em; font-weight: 600; }
@media (prefers-color-scheme: dark) { .found li { background: #1c1c1e; } }
.found i { grid-row: span 2; width: 2.4em; height: 2.4em; border-radius: .45em; }
.found small { color: #8e8e93; font-weight: 400; }

/* iPad and MacBook, small */
.tablet, .laptop { margin: 0; }
.tablet { aspect-ratio: 4 / 3; padding: .55rem; border-radius: 7%; background: #0d0d0f; box-shadow: var(--shadow), inset 0 0 0 2px #3a3a40; }
.laptop .screen { aspect-ratio: 16 / 10; padding: .4rem; border-radius: 6% 6% 0 0 / 9% 9% 0 0; background: #0d0d0f; box-shadow: inset 0 0 0 2px #3a3a40; }
.laptop .base { display: block; height: .7rem; margin: 0 -7%; border-radius: 0 0 .9rem .9rem / 0 0 .7rem .7rem; background: linear-gradient(#d7d7dc, #a9a9b0); box-shadow: var(--shadow); }
@media (prefers-color-scheme: dark) { .laptop .base { background: linear-gradient(#55555c, #2c2c31); } }
.tablet .screen, .laptop .screen > .tsplit { height: 100%; }
.tablet .screen { height: 100%; border-radius: 4%; overflow: hidden; background: #f2f2f7; }
@media (prefers-color-scheme: dark) { .tablet .screen, .laptop .tsplit { background: #1c1c1e !important; } }
.tsplit { display: grid; grid-template-columns: 26% 1fr; height: 100%; background: #f2f2f7; border-radius: 3px; overflow: hidden; }
.tsplit ul { list-style: none; margin: 0; padding: 6%; display: grid; align-content: start; gap: 6%; background: rgba(120,120,128,.12); }
.tsplit li { padding: 8%; border-radius: 5px; } .tsplit li.sel { background: var(--keep); }
.tsplit li i { display: block; aspect-ratio: 1; border-radius: 4px; }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; padding: 6%; align-content: center; }
.tgrid.three { grid-template-columns: repeat(3, 1fr); gap: 4%; }
.tgrid i { aspect-ratio: 4 / 3; border-radius: 4px; }
.tgrid i.best { outline: 2px solid var(--amber); }

/* Platforms */
.platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: left; margin-bottom: 1rem; }
.platforms article { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 1.6rem 1.5rem 1.4rem; }
.platforms .dev { height: 13rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.3rem; }
.dev .phone.mini { height: 100%; width: auto; }
.dev .tablet { width: 15.5rem; max-width: 100%; }
.dev .laptop { width: 16.5rem; max-width: 92%; }
.platforms p { margin: 0; color: var(--muted); font-size: .97rem; line-height: 1.45; }
@media (max-width: 860px) { .platforms { grid-template-columns: 1fr; max-width: 30rem; margin-left: auto; margin-right: auto; } }

/* Pillars, cards */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 6rem 0 1rem; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.pillars div { background: var(--paper); padding: 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
.pillars strong { font-family: var(--display); }
.pillars span { color: var(--muted); font-size: .92rem; line-height: 1.4; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr 1fr; margin-top: 4rem; } }
@media (max-width: 420px) { .pillars { grid-template-columns: 1fr; } }
.block { padding: 5rem 0 1rem; text-align: center; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: left; }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.cards article { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.35rem; }
.cards p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.45; }
.icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 22%; background: color-mix(in srgb, var(--keep) 14%, transparent); color: var(--keep-ink); font-size: 1.25rem; font-weight: 700; }
@media (max-width: 860px) { .cards, .cards.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cards, .cards.four { grid-template-columns: 1fr; } }

/* Feature rows */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; padding: 6rem 0 1rem; }
.feature.reverse .text { order: 2; }
.feature .text p:not(.eyebrow) { color: var(--muted); }
.feature .window { margin: 0; }
.small-window { width: 100%; max-width: 30rem; justify-self: center; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: 1rem; }
.panel { padding: 1.1rem 1.2rem 1.3rem; }
.panel h4 { margin: 0 0 .6rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.panel h4 + * { margin-top: 0; } .panel dl + h4, .panel .bar + h4 { margin-top: 1.1rem; }
.bar { display: grid; grid-template-columns: 6.5rem 1fr 5rem; align-items: center; gap: .6rem; margin: .45rem 0; }
.bar b { position: relative; height: 8px; border-radius: 4px; background: rgba(120,120,128,.16); }
.bar b::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--keep); }
.panel .bar b::before { content: ""; position: absolute; z-index: 1; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--muted); opacity: .5; }
.panel .bar b::after { left: 50%; width: calc((var(--v) - .5) * 100%); min-width: 3px; }
.bar small { color: var(--muted); }
.panel dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 0; }
.panel dt { color: var(--muted); } .panel dd { margin: 0; font-weight: 600; }
.totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.totals div { background: var(--soft); border-radius: 10px; padding: .7rem; text-align: center; }
.totals b { display: block; font-size: 1.35rem; } .totals span { color: var(--muted); }
.note { color: var(--muted); margin: .9rem 0; }
.btns { display: flex; justify-content: flex-end; gap: .5rem; }
.btn { padding: .35rem .9rem; border-radius: 7px; background: var(--soft); border: 1px solid var(--line); font-weight: 600; }
.btn.primary { background: var(--remove); border-color: var(--remove); color: #fff; }
.keys { margin: 0; display: grid; gap: .6rem; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.4rem; }
.keys div { display: grid; grid-template-columns: 9.5rem 1fr; align-items: center; gap: .8rem; }
.keys .k { display: flex; gap: .25rem; align-items: center; }
.keys kbd { font-size: .95rem; min-width: 2em; }
.checks { list-style: none; padding: 0; text-align: left; }
.checks li { position: relative; padding-left: 1.6rem; margin: .5rem 0; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--keep-ink); font-weight: 700; }
.gestures { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .55rem; color: var(--muted); }
.gestures li { padding-left: 1.6rem; position: relative; }
.gestures li::before { content: ""; position: absolute; left: .2rem; top: .45em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--sunrise); }
.gestures b { color: var(--ink); }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; gap: 2.2rem; padding-top: 4rem; } .feature.reverse .text { order: 0; } }

/* Steps, pricing, FAQ, final */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: left; margin-top: 2rem; }
.steps li { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.35rem; }
.steps li > span { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 22%; background: var(--ink); color: var(--paper); font: 800 1rem var(--display); }
.steps p { color: var(--muted); margin: 0; font-size: .95rem; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 48rem; margin: 0 auto; text-align: left; }
.plans article { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 1.7rem; }
.plans article.featured { position: relative; border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--sunrise) border-box; }
.price { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; margin: .2rem 0 .8rem; } .price small { display: block; font: 400 .85rem var(--text); letter-spacing: 0; color: var(--muted); }
@media (max-width: 640px) { .plans { grid-template-columns: 1fr; } }
.faq { max-width: 46rem; margin: 0 auto; text-align: left; } .faq h2 { text-align: center; margin-bottom: 1.5rem; }
.faq details { border-bottom: 1px solid var(--line); padding: .3rem 0; }
.faq summary { cursor: pointer; list-style: none; padding: .8rem 2rem .8rem 0; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: .6rem; font-size: 1.3rem; color: var(--muted); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1rem; color: var(--muted); }
.final { position: relative; overflow: hidden; margin: 6rem 0 0; padding: 4rem 1.5rem; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 28px; }
.final::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 90%; background: var(--sunrise); filter: blur(70px); opacity: .22; pointer-events: none; }
.final > * { position: relative; }
.final img { display: block; margin: 0 auto; }
.final h2 { margin-top: 1.2rem; }
.final p { color: var(--muted); }

/* Language switcher, skip link, footer */
.skip { position: absolute; left: -999px; top: 0; z-index: 30; padding: .5rem 1rem; background: var(--ink); color: var(--paper); border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }
.langs { display: flex; flex-wrap: wrap; gap: .2rem; font-size: .88rem; }
.langs a, header .langs a { display: inline; padding: .2rem .45rem; border-radius: 6px; color: var(--muted); font-weight: 400; text-decoration: none; }
.langs a:hover { color: var(--ink); }
.langs a[aria-current] { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--ink) 7%, transparent); }
footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
footer p { margin: 0; }
footer .langs { margin-left: -.45rem; }
.linklike { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
code { font-size: .9em; }

/* Key facts */
.facts dl { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.5rem; max-width: 48rem; margin: 0 auto; text-align: left; }
.facts dt { font-weight: 600; } .facts dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .facts dl { grid-template-columns: 1fr; gap: .1rem; } .facts dd { margin-bottom: .6rem; } }

/* Consent banner */
.consent { position: fixed; z-index: 40; left: 1rem; right: 1rem; bottom: 1rem; max-width: 34rem; margin: 0 auto; padding: 1.1rem 1.2rem; background: var(--card, #fff); color: var(--ink); border: 1px solid var(--line, rgba(0,0,0,.1)); border-radius: 18px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.45); font-size: .92rem; line-height: 1.45; }
.consent h2 { margin: 0 0 .35rem; font-size: 1.02rem; letter-spacing: 0; }
.consent p { margin: 0 0 .9rem; color: var(--muted); }
.consent-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.consent-actions button { flex: 1 1 10rem; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-family: inherit; font-size: .92rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
.consent[hidden] { display: none; }
body:not(.landing) .nav { flex-wrap: wrap; row-gap: .4rem; }
@media (max-width: 560px) { .langs { font-size: .82rem; } .langs a, header .langs a { padding: .15rem .35rem; } }
.dev > * { min-width: 0; flex-shrink: 0; }
.phone.mini .ptool { justify-content: center; } .phone.mini .ptool span { display: none; }
.pnav { white-space: nowrap; } .pnav b { overflow: hidden; text-overflow: ellipsis; }
.hero-phone .ptool { justify-content: center; } .hero-phone .ptool span { display: none; }
.ptool > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ptool > span:last-child { flex-shrink: 0; }
.hero-phone .ptool > span:last-child, .phone.solo .ptool > span:last-child { display: none; }

/* Japanese: Hiragino / Noto Sans JP / Yu Gothic for the kana and kanji (SF has none), breaks
   between phrases rather than inside words, no tight tracking or italics. BRAND.md › Type */
:root:lang(ja) {
  --display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, "Segoe UI", sans-serif;
}
:lang(ja) body { line-break: strict; word-break: auto-phrase; overflow-wrap: anywhere; }
:lang(ja) :is(h1, h2, h3, .nav .brand, .eyebrow) { letter-spacing: 0; }
:lang(ja) :is(.landing h1, .landing h2) { line-height: 1.3; }
:lang(ja) :is(em, i):not(.x) { font-style: normal; }
:lang(ja) .why .bar { grid-template-columns: 6.2em 1fr; } :lang(ja) .bar span { white-space: nowrap; }