/* Unzenblick · A / Nah dran. Local fonts, no external assets. */
:root {
  color-scheme: light;
  --paper:#f5f0e8; --surface:#fffcf7; --ink:#3b3439; --muted:#6e5e65;
  --wine:#75484e; --on-wine:#fff; --line:#cbbab5; --control:#9d858a;
  --wash:#ebe0da; --glow:#dbbcae; --error:#a01d35; --radius:22px;
}
:root[data-theme=dark] {
  color-scheme:dark;
  --paper:#30262b; --surface:#3a2e34; --ink:#fcf0e7; --muted:#d3bcc3;
  --wine:#f1bcc4; --on-wine:#49232c; --line:#79616b; --control:#a28b95;
  --wash:#4b3a42; --glow:#79535e; --error:#ffb1bb;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    color-scheme:dark;
    --paper:#30262b; --surface:#3a2e34; --ink:#fcf0e7; --muted:#d3bcc3;
    --wine:#f1bcc4; --on-wine:#49232c; --line:#79616b; --control:#a28b95;
    --wash:#4b3a42; --glow:#79535e; --error:#ffb1bb;
  }
}
* { box-sizing:border-box; }
html { --header-height:94px; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-height) + 20px); }
body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
[hidden] { display:none!important; }
.js-only { display:none!important; }
.js .js-only { display:flex!important; }
.js .no-js { display:none!important; }
.currency-pending :is([data-quote],[data-coin-value],[data-fine],output[name=result],[data-currency-code],[data-currency-name]) { visibility:hidden; }
button,input,select { font:inherit; color:inherit; }
button,summary,select { cursor:pointer; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button { border-radius:0; }
img,svg { max-width:100%; vertical-align:middle; }
img { height:auto; }
figure,p,h1,h2,h3 { margin:0; }
h1,h2,h3 { line-height:1.12; letter-spacing:-.045em; text-wrap:balance; hyphens:auto; overflow-wrap:anywhere; }
h1 { font-size:clamp(3.1rem,6.3vw,6rem); font-weight:550; }
h1 em { color:var(--wine); font-family:Georgia,"Times New Roman",serif; font-weight:400; }
h2 { font-size:clamp(2rem,3.7vw,3.5rem); font-weight:550; }
h3 { font-size:1.5rem; font-weight:600; }
a { color:inherit; text-underline-offset:4px; text-decoration-thickness:1px; }
a:hover { color:var(--wine); }
:focus-visible { outline:3px solid var(--wine); outline-offset:4px; }
main:focus { outline:none; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip { position:fixed; left:15px; top:-100px; padding:12px 20px; z-index:100; background:var(--wine); color:var(--on-wine); border-radius:8px; }
.skip:focus { top:12px; }
.wrap { width:calc(100% - 80px); max-width:1180px; margin-inline:auto; }
.section { padding-block:90px; }
.eyebrow { color:var(--wine); font-size:.73rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:25px; }
.lead { font-size:1.13rem; line-height:1.7; color:var(--muted); max-width:490px; }
.small { font-size:.82rem; color:var(--muted); }
.icon { width:23px; height:23px; flex-shrink:0; }
.header-shell { position:sticky; top:0; z-index:10; background:var(--paper); border-bottom:1px solid var(--line); }
.breadcrumbs { padding-top:22px; font-size:.77rem; color:var(--muted); }
.breadcrumbs ol { display:flex; flex-wrap:wrap; gap:4px 12px; list-style:none; padding:0; margin:0; }
.breadcrumbs li { display:flex; align-items:center; gap:12px; }
.breadcrumbs li + li::before { content:"/"; }
.breadcrumbs a { display:inline-flex; align-items:center; min-height:30px; }
.breadcrumbs + .page-intro,.breadcrumbs + .section { padding-top:35px; }
.store-status { display:inline-flex; align-items:center; gap:12px; padding:12px 18px; border:1px solid var(--control); border-radius:9px; font-size:.9rem; font-weight:550; background:var(--surface); }
.download-layout .store-status { margin-block:28px 18px; }
.site-header { min-height:94px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; font-weight:730; font-size:1.75rem; letter-spacing:-.045em; line-height:1; flex-shrink:0; }
.brand svg { width:34px; height:35px; }
.site-header nav { display:flex; flex-wrap:wrap; align-items:center; gap:30px; margin-left:auto; }
.site-header nav a { display:inline-flex; align-items:center; gap:10px; min-height:46px; font-size:.85rem; text-decoration:none; white-space:nowrap; }
.site-header nav a:hover,.site-header nav a[aria-current] { color:var(--wine); text-decoration:underline; text-underline-offset:7px; }
.site-header .nav-app { border:1px solid var(--control); padding:3px 16px; border-radius:8px; }
.header-controls { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.theme-control,.currency-control { display:flex; align-items:center; gap:5px; }
.theme-control .icon { width:19px; }
.header-select { position:relative; display:inline-flex; }
.header-select::after { content:""; position:absolute; right:8px; top:calc(50% - 4px); width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); pointer-events:none; }
.header-select select { appearance:none; width:auto; min-width:44px; min-height:44px; background:var(--paper); border:0; border-radius:5px; padding:6px 24px 6px 4px; font-size:.8rem; }
.currency-fallback { display:block; margin-bottom:18px; }
.currency-fallback select { min-height:44px; margin-left:10px; background:var(--surface); border:1px solid var(--control); border-radius:5px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; background:var(--wine); color:var(--on-wine); border:1px solid var(--wine); padding:15px 24px; min-height:52px; font-size:.89rem; font-weight:600; border-radius:9px; text-decoration:none; text-align:center; }
.button:hover { color:var(--on-wine); filter:brightness(.92); }
.text-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:.88rem; text-decoration:none; color:var(--wine); font-weight:550; }
.text-link:hover { text-decoration:underline; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px 26px; margin-top:32px; }
.hero-a { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:45px; padding-block:50px 65px; }
.hero-copy { min-width:0; }
.hero-copy h1 { margin-bottom:30px; }
.hero-trust { display:flex; align-items:center; gap:10px; font-size:.79rem; color:var(--muted); margin-top:30px; }
.hero-visual { min-width:0; min-height:610px; display:grid; place-items:center; position:relative; isolation:isolate; }
.hero-visual figure { transform:rotate(4deg); }
.phone { width:258px; max-width:100%; border:6px solid #2c252a; border-radius:33px; overflow:hidden; box-shadow:0 22px 65px #25192535,0 0 0 1px var(--control); background:#2c252a; }
.phone img { display:block; width:100%; }
.phone picture { display:block; }
figcaption { font-size:.68rem; text-align:center; color:var(--muted); margin-top:22px; }
.image-zoom { display:block; width:fit-content; max-width:100%; margin-inline:auto; border-radius:32px; cursor:zoom-in; }
.orbit { position:absolute; border-radius:50%; z-index:-1; pointer-events:none; }
.orbit-one { width:91%; aspect-ratio:1; background:radial-gradient(circle at 30% 30%,var(--glow),var(--wash) 70%); }
.orbit-two { width:97%; aspect-ratio:1; border:1px solid var(--line); }
.side-note { position:absolute; bottom:65px; left:-35px; padding:20px 25px; background:var(--surface); border:1px solid var(--line); border-radius:13px; box-shadow:0 10px 35px #2519250c; transform:rotate(-4deg); }
.side-note span { display:block; font-size:.68rem; color:var(--wine); margin-bottom:6px; letter-spacing:.08em; }
.side-note strong { font-size:.94rem; line-height:1.4; font-weight:550; }
.quote-wrap { border-block:1px solid var(--line); padding-block:28px; }
.quote-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:.78rem; color:var(--muted); margin-bottom:22px; }
.quote-heading > span:last-child { display:flex; align-items:center; gap:12px; }
.refresh { display:grid; place-items:center; width:44px; height:44px; padding:10px; border:1px solid var(--control); border-radius:10px; background:transparent; color:var(--wine); }
.refresh:disabled { cursor:wait; opacity:.65; }
.refresh .icon { width:19px; }
.quote-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; }
.quote { display:flex; align-items:center; gap:16px; min-width:0; }
.quote > div { min-width:0; }
.element { display:grid; place-items:center; width:40px; height:44px; flex-shrink:0; border-radius:10px; background:var(--wash); color:var(--wine); font-weight:600; font-size:.9rem; }
.quote > div > span { display:block; color:var(--muted); font-size:.78rem; }
.quote strong { display:block; font-size:1.5rem; font-weight:600; line-height:1.35; letter-spacing:-.02em; overflow-wrap:anywhere; }
.source { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; font-size:.7rem; color:var(--muted); margin-top:22px; }
.source a { display:inline-flex; align-items:center; min-height:24px; }
.quote-status { font-size:.8rem; color:var(--wine); margin-top:12px; }
.feature-number { display:block; color:var(--wine); font-size:.73rem; letter-spacing:.07em; text-transform:uppercase; border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:25px; }
.features p { color:var(--muted); font-size:.95rem; margin-top:18px; }
.features > .row { --bs-gutter-x:24px; }
.calc-section { background:var(--wash); }
.calc-layout,.calculator-page { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:90px; align-items:center; }
.calc-layout h2 { font-size:clamp(2.4rem,4.3vw,4rem); margin-bottom:25px; }
.calc-layout > div > p:not(.eyebrow) { color:var(--muted); }
.formula { font:italic 1.18rem/1.65 Georgia,serif; padding-top:22px; }
.calculator-links { display:flex; flex-wrap:wrap; gap:8px 24px; font-size:.82rem; color:var(--wine); margin-top:24px; }
.calculator-links a { display:inline-flex; align-items:center; min-height:35px; }
.calculator { container-type:inline-size; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px; min-width:0; box-shadow:0 14px 35px #2519250a; }
.calc-heading { display:flex; justify-content:space-between; align-items:start; gap:15px; }
.calc-heading .eyebrow { font-size:.69rem; margin-bottom:24px; }
.calc-unit { font-size:.7rem; white-space:nowrap; color:var(--muted); }
.metal-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; border:0; margin:0 0 26px; gap:7px; }
.metal-option { position:relative; }
.metal-option input { position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.metal-option > span { display:flex; flex-direction:column; align-items:center; gap:5px; border:1px solid var(--control); border-radius:9px; padding:11px 5px; font-size:.76rem; cursor:pointer; }
.metal-option b { display:grid; place-items:center; background:var(--wash); color:var(--wine); width:29px; height:29px; border-radius:6px; font-size:.83rem; }
.metal-option input:checked + span { background:var(--wine); border-color:var(--wine); color:var(--on-wine); }
.metal-option input:checked + span b { background:var(--on-wine); color:var(--wine); }
.metal-option input:focus-visible + span { outline:3px solid var(--wine); outline-offset:3px; }
.fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.fields label { font-size:.82rem; font-weight:550; }
.fields input { width:100%; margin-top:8px; padding:11px 14px; font-size:1.2rem; color:var(--ink); background:var(--paper); border:1px solid var(--control); border-radius:7px; }
.fields input[aria-invalid=true] { border-color:var(--error); }
.purities { display:flex; flex-wrap:wrap; align-items:center; gap:3px 8px; margin:12px 0 18px; font-size:.78rem; color:var(--muted); }
.purities button { background:transparent; border:0; border-radius:5px; padding:8px 10px; min-height:44px; text-decoration:underline; text-underline-offset:3px; }
.purities button:hover,.purities button[aria-pressed=true] { background:var(--wash); color:var(--wine); }
.calc-submit { width:100%; min-height:48px; margin-top:12px; font-size:.86rem; }
.error { color:var(--error); font-size:.82rem; margin-top:10px; }
.error:empty { display:none; }
.calc-result { display:flex; flex-direction:column; padding:22px 0 20px; margin-top:8px; gap:5px; border-bottom:1px solid var(--line); }
.calc-result > span { font-size:.81rem; color:var(--muted); }
.calc-result output { display:block; font-size:clamp(2rem,3vw,2.8rem); letter-spacing:-.04em; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.calc-note { font-size:.74rem; line-height:1.65; color:var(--muted); margin-top:16px; }
.calculator .source { display:block; font-size:.7rem; margin-top:12px; }
.calculator .source span { display:block; }
.app-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.app-picture { display:grid; place-items:center; padding:45px; background:radial-gradient(circle at 80% 15%,var(--glow),var(--wash) 75%); border-radius:var(--radius); }
.app-picture .phone { width:225px; }
.app-copy h2 { margin-bottom:25px; }
.app-copy > p { color:var(--muted); }
.app-copy > .small { margin-top:14px; }
.check-list { list-style:none; margin:24px 0 32px; padding:0; font-size:.93rem; }
.check-list li { padding:8px 0 8px 27px; position:relative; }
.check-list li::before { content:"✓"; position:absolute; left:0; color:var(--wine); }
.knowledge { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; border-top:1px solid var(--line); }
.knowledge h2 { margin-bottom:22px; }
.knowledge > div > p:not(.eyebrow) { color:var(--muted); }
.knowledge .text-link { margin-top:18px; }
.questions details { border-bottom:1px solid var(--line); padding:10px 0; }
.questions details:first-child { border-top:1px solid var(--line); }
.questions summary { min-height:52px; padding:13px 30px 13px 0; list-style:none; position:relative; font-weight:550; }
.questions summary::-webkit-details-marker { display:none; }
.questions summary::after { content:"+"; position:absolute; right:5px; top:9px; font-size:1.4rem; font-weight:400; }
.questions details[open] summary::after { content:"−"; }
.questions details p { padding:0 22px 20px 0; color:var(--muted); font-size:.94rem; }
.calculator-page { align-items:start; padding-top:65px; }
.calculator-page h1 { font-size:clamp(3rem,5vw,4.7rem); margin-bottom:28px; }
.tool-steps { display:grid; gap:12px; margin:30px 0 24px; padding-left:23px; color:var(--wine); font-size:.9rem; }
.explanation { max-width:800px; }
.explanation h2,.reading h2 { margin-bottom:26px; }
.explanation p:not(.eyebrow),.reading p,.legal-document p { margin-top:20px; color:var(--muted); }
.app-bridge { display:flex; align-items:center; justify-content:space-between; gap:40px; border-top:1px solid var(--line); }
.app-bridge h2 { font-size:2.2rem; }
.app-bridge p:last-child { margin-top:20px; color:var(--muted); }
.app-bridge .button { flex-shrink:0; }
.page-intro { padding-top:70px; }
.page-intro .lead { margin-top:30px; max-width:600px; }
.page-intro h1 { font-size:clamp(3rem,5.6vw,5.4rem); }
.app-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:45px; }
.app-gallery figure { padding-top:25px; min-width:0; }
.app-gallery .phone { width:250px; }
.app-gallery figcaption { margin-top:35px; font-size:.9rem; text-align:left; }
.app-gallery figcaption h2 { font-size:1.6rem; color:var(--ink); margin-bottom:15px; }
.app-gallery figcaption span { display:block; font-size:.73rem; margin-top:12px; }
.app-gallery + .features { padding-top:10px; }
.download-section { background:var(--wash); }
.download-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:80px; align-items:start; }
.download-layout h2 { margin-bottom:25px; }
.download-layout .button { margin-block:28px 18px; }
.install-notes { padding:30px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.install-options { display:grid; gap:24px; list-style:none; padding:0; margin:28px 0 0; }
.install-options li { display:grid; grid-template-columns:38px minmax(0,1fr); gap:16px; align-items:start; }
.install-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--wash); color:var(--wine); }
.install-icon .icon { width:21px; height:21px; }
.install-options h4 { font-size:.95rem; font-weight:600; line-height:1.4; margin:0 0 6px; overflow-wrap:anywhere; }
.install-options p { font-size:.85rem; line-height:1.6; color:var(--muted); overflow-wrap:anywhere; }
.install-notes > .text-link { display:flex; justify-content:space-between; gap:16px; margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
.knowledge-page { margin-top:60px; }
.reading,.legal-document { max-width:790px; }
.reading h2:not(:first-child),.legal-document h2 { margin-top:50px; font-size:2rem; }
.legal-document h1,.legal-page h1 { font-size:clamp(2.4rem,5vw,4rem); overflow-wrap:anywhere; }
.legal-document li { margin-top:10px; }
.legal-notice,.review-note { border-left:3px solid var(--wine); padding:16px 20px; background:var(--wash); font-size:.9rem; }
.reading.legal-page h2 { margin-top:clamp(56px,5vw,72px); font-size:2rem; }
.legal-page h3 { margin-top:32px; margin-bottom:14px; font-size:1.3rem; }
.legal-page li + li { margin-top:8px; }
.legal-page a { overflow-wrap:anywhere; }
.legal-page > .button { margin-top:30px; }
.error-page { padding-bottom:80px; }
.site-footer { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; border-top:1px solid var(--line); padding-block:40px; }
.site-footer .brand { font-size:1.3rem; }
.site-footer .brand svg { width:26px; height:27px; }
.site-footer p { font-size:.8rem; color:var(--muted); margin-top:10px; }
.footer-links { display:flex; flex-wrap:wrap; gap:25px; align-items:center; }
.footer-links a { display:inline-flex; align-items:center; min-height:44px; font-size:.8rem; text-decoration:none; }
.footer-links a:hover { text-decoration:underline; }
.footer-note { font-size:.75rem; color:var(--muted); }
.site-footer > a.footer-note { text-align:right; }
.image-dialog { margin:auto; width:min(560px,calc(100% - 28px)); max-height:calc(100dvh - 30px); border:1px solid var(--control); border-radius:18px; padding:22px; background:var(--surface); color:var(--ink); overscroll-behavior:contain; }
.image-dialog::backdrop { background:#211b26bb; }
.image-dialog h2 { font-size:1.15rem; margin:10px 50px 24px 0; }
.image-dialog img { display:block; width:100%; border-radius:12px; }
.image-dialog p { margin-top:16px; }
.dialog-close { float:right; width:44px; height:44px; font-size:2rem; line-height:1; border:1px solid var(--control); border-radius:8px; background:var(--surface); position:sticky; top:0; }
@media (max-width:1100px) {
  .wrap { width:calc(100% - 56px); }
  .site-header { gap:20px; }
  .site-header nav { gap:20px; }
  .hero-a { gap:15px; }
  .hero-visual { min-height:570px; }
  .side-note { left:-10px; bottom:55px; padding:15px 18px; }
  .calc-layout,.calculator-page,.knowledge { gap:45px; }
  .quote-grid { gap:20px; }
  .quote { gap:10px; }
  .quote strong { font-size:1.3rem; }
  .app-gallery { gap:25px; }
}
@media (max-width:850px) {
  .site-header { gap:14px; }
  .brand { font-size:1.4rem; }
  .site-header nav { gap:16px; }
  .site-header nav a { font-size:.78rem; }
  .site-header .nav-app { padding-inline:10px; }
  .theme-control .icon { display:none; }
  .section { padding-block:65px; }
  .hero-a { padding-block:35px 50px; }
  .hero-a h1 { font-size:clamp(3rem,6.4vw,4.5rem); }
  .hero-a .lead { font-size:1rem; }
  .hero-visual { min-height:490px; }
  .hero-visual .phone { width:205px; }
  .side-note { display:none; }
  .actions { gap:12px; }
  .quote-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr)); gap:25px; }
  .calc-layout,.calculator-page { grid-template-columns:minmax(0,1fr); gap:35px; }
  .calculator { max-width:600px; width:100%; margin-inline:auto; }
  .calc-layout > div,.tool-intro { max-width:600px; }
  .calculator-page h1 { max-width:650px; }
  .app-section { gap:35px; }
  .app-picture { padding:30px 16px; }
  .app-picture .phone { width:200px; }
  .knowledge { grid-template-columns:1fr; gap:35px; }
  .app-gallery { gap:18px; }
  .app-gallery .phone { border-width:4px; border-radius:22px; }
  .download-layout { grid-template-columns:1fr; gap:35px; }
  .footer-links { gap:18px; }
}
@media (max-width:760px) {
  .site-header { flex-wrap:wrap; padding-block:12px 6px; gap:8px; }
  .site-header nav { width:100%; order:3; justify-content:space-between; }
  .header-controls { margin-left:auto; gap:8px; }
}
@media (max-width:620px) {
  html { --header-height:132px; }
  .wrap { width:calc(100% - 40px); }
  .site-header { flex-wrap:wrap; padding-block:12px 6px; gap:8px; }
  .site-header .brand { font-size:1.55rem; }
  .site-header nav { width:100%; order:3; justify-content:space-between; gap:10px; }
  .site-header nav a { font-size:.8rem; min-height:44px; }
  .site-header .nav-app { border:0; padding:0; }
  .hero-a { display:flex; flex-direction:column; gap:30px; padding-top:32px; }
  .hero-copy { width:100%; }
  .hero-a h1 { font-size:clamp(3.2rem,13.7vw,5rem); }
  .eyebrow { font-size:.68rem; margin-bottom:20px; }
  .hero-visual { min-height:auto; width:100%; padding-block:22px 12px; }
  .hero-visual .phone { width:218px; }
  .hero-visual figure { transform:rotate(3deg); }
  .actions { gap:14px 20px; }
  .actions .button { padding-inline:18px; }
  .quote-heading { flex-direction:column; align-items:start; gap:3px; margin-bottom:18px; }
  .quote-grid { gap:22px 14px; }
  .quote strong { font-size:1.25rem; }
  .element { width:32px; height:34px; border-radius:8px; font-size:.78rem; }
  .source { gap:3px; }
  .source > span { width:100%; }
  .section { padding-block:55px; }
  .calculator-page { padding-top:32px; }
  .calculator-page .tool-steps { display:none; }
  .calculator-page .tool-intro > .small { margin-top:18px; }
  .feature-number { padding-bottom:12px; margin-bottom:18px; }
  .features h3 { font-size:1.5rem; }
  .features p { margin-top:12px; }
  .formula { padding-top:6px; font-size:1.05rem; }
  .calculator { padding:20px; border-radius:16px; }
  .calc-heading { gap:6px; }
  .calc-heading .eyebrow { font-size:.64rem; letter-spacing:.07em; }
  .fields { gap:12px; }
  .fields label { font-size:.78rem; }
  .fields input { padding:10px; font-size:1.1rem; }
  .purities { gap:4px; }
  .calc-result output { font-size:2.1rem; }
  .app-section { display:flex; flex-direction:column-reverse; gap:35px; }
  .app-picture { width:100%; padding:35px; }
  .app-picture .phone { width:210px; }
  .page-intro { padding-top:45px; }
  .page-intro h1 { font-size:clamp(2.8rem,11.5vw,4rem); }
  .page-intro .lead { font-size:1rem; }
  .app-gallery { grid-template-columns:1fr; gap:55px; }
  .app-gallery figure { padding-top:0; }
  .app-gallery .phone { width:235px; border-width:5px; border-radius:30px; }
  .app-gallery figcaption { max-width:330px; margin-inline:auto; text-align:center; }
  .download-layout { grid-template-columns:1fr; }
  .install-notes { padding:24px; }
  .install-options li { gap:12px; }
  .app-bridge { flex-direction:column; align-items:start; gap:25px; }
  .knowledge-page { margin-top:40px; }
  .site-footer { grid-template-columns:1fr; gap:14px; }
  .footer-links { justify-content:space-between; gap:12px; }
  .site-footer > a.footer-note { text-align:left; }
}
@media (max-width:380px) {
  .site-header .brand { font-size:1.2rem; gap:6px; }
  .site-header .brand svg { width:27px; height:28px; }
  .header-controls { gap:4px; }
}
@container (max-width:22rem) {
  .metal-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metal-option > span { flex-direction:row; justify-content:center; gap:8px; }
  .calc-heading { flex-wrap:wrap; }
}
@container (max-width:14rem) {
  .fields { grid-template-columns:1fr; }
  .metal-option > span { flex-direction:column; }
}
@keyframes arrive { from { opacity:.65; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:no-preference) {
  .hero-copy,.tool-intro { animation:arrive .8s ease both; }
  .hero-visual { animation:arrive 1s ease both; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}
@media print {
  .header-shell,.site-footer,.image-zoom,.actions,.purities,.calc-submit,.refresh { display:none!important; }
  .wrap { width:100%; }
  .section { padding-block:25px; }
  .hero-a,.calc-layout,.calculator-page,.knowledge { display:block; }
}

/* Shared invitation to the quiz, on Home and in the knowledge hub. */
.quiz-teaser { display:grid; grid-template-columns:140px minmax(0,1fr); gap:40px; align-items:center; padding:40px; margin-block:10px 65px; border:1px solid var(--line); border-radius:var(--radius); background:radial-gradient(circle at 100% 0,var(--glow),var(--wash) 75%); }
.quiz-teaser-mark { display:grid; place-items:center; width:130px; height:130px; border:1px solid var(--control); border-radius:50%; background:var(--surface); color:var(--wine); font:5rem Georgia,serif; }
.quiz-teaser h2 { font-size:clamp(1.8rem,3vw,2.6rem); }
.quiz-teaser .eyebrow { margin-bottom:16px; }
.quiz-teaser p:not(.eyebrow) { margin-block:18px 24px; max-width:660px; }
.site-header .nav-quiz { color:var(--wine); font-weight:600; }
@media(max-width:620px) {
  .site-header nav { gap:4px 12px; }
  .site-header .nav-app .icon { display:none; }
  .quiz-teaser { grid-template-columns:minmax(0,1fr); padding:26px; gap:22px; }
  .quiz-teaser-mark { width:66px; height:66px; font-size:2.8rem; }
}

/* A compact entry to the stamp helper, shared by home and knowledge. */
.stamp-teaser { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:32px; padding:32px; margin-block:32px 48px; border:1px solid var(--line); border-radius:var(--radius); background:radial-gradient(circle at 0 0,var(--wash),var(--surface) 75%); }
.stamp-teaser h2 { font-size:clamp(1.6rem,3vw,2.2rem); }
.stamp-teaser p:not(.eyebrow) { margin-block:16px; max-width:720px; }
.stamp-teaser-mark { padding:15px 20px; border:2px solid var(--control); border-radius:16px; font-size:2rem; font-weight:600; color:var(--wine); letter-spacing:.08em; transform:rotate(-7deg); }
@media(max-width:600px) { .stamp-teaser { grid-template-columns:1fr; padding:24px; gap:22px; } .stamp-teaser-mark { justify-self:start; font-size:1.4rem; padding:8px 15px; } }