/* Palette, typography, spacing and button rules from the game's ui/design.css,
   scoped to this independent preview. */
#dm-landing{--ui-bg:#f7f5f3;--ui-surface:#fff;--ui-raised:#f4efe7;--ui-sunk:#efe9e0;--ui-line:#e3dbcf;--ui-line-strong:#b9aa94;--ui-ink:#171512;--ui-ink-2:#514b44;--ui-mute:#6e665c;--ui-sea:#7a6a56;--ui-sea-ink:#fff;--ui-focus:#2a2218;--ui-font-display:'Fjalla One','Arial Narrow',sans-serif;--ui-font-body:'Inter',system-ui,sans-serif;--ui-r2:10px;--ui-s4:16px;--ui-hit:36px;background:var(--ui-bg);color:var(--ui-ink);font:400 15px/1.7 var(--ui-font-body);color-scheme:light;overflow-wrap:break-word;isolation:isolate}
#dm-landing[data-theme=dark]{--ui-bg:#161412;--ui-surface:#1f1c19;--ui-raised:#29251f;--ui-sunk:#110f0d;--ui-line:#36312a;--ui-line-strong:#5a5243;--ui-ink:#f2ebdc;--ui-ink-2:#cfc6b4;--ui-mute:#a39a88;--ui-sea:#c9b08a;--ui-sea-ink:#1a140b;--ui-focus:#f3d27a;color-scheme:dark}
#dm-landing[data-style=hand]{--ui-font-display:'Shantell Sans',sans-serif;--ui-font-body:'Shantell Sans',sans-serif;--ui-r2:3px 13px 5px 11px}
#dm-landing[data-font=atkinson]{--ui-font-display:'Atkinson Hyperlegible',sans-serif;--ui-font-body:'Atkinson Hyperlegible',sans-serif}
#dm-landing[data-font=inter]{--ui-font-display:'Inter',sans-serif;--ui-font-body:'Inter',sans-serif}
#dm-landing *{box-sizing:border-box}
#dm-landing h1,#dm-landing h2,#dm-landing h3,#dm-landing p{margin:0}
#dm-landing h1,#dm-landing h2,#dm-landing h3{font-family:var(--ui-font-display);font-weight:400;line-height:1.15;letter-spacing:-.015em}
#dm-landing h1{font-size:clamp(44px,7.8vw,82px);max-width:850px;margin:18px 0 24px}
#dm-landing h2{font-size:clamp(32px,4.8vw,49px);max-width:700px;margin:10px 0 26px}
#dm-landing h3{font-size:25px;margin-bottom:14px}
#dm-landing p+p{margin-top:18px}
#dm-landing p{max-width:680px;color:var(--ui-ink-2)}
#dm-landing .dm-wrap{padding:0 clamp(22px,5.5vw,64px)}
#dm-landing .dm-header{position:sticky;top:0;z-index:8;background:var(--ui-surface);border-bottom:1px solid var(--ui-line);padding-top:18px;padding-bottom:14px}
#dm-landing .dm-top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-right:65px}
#dm-landing .dm-brand{font-family:var(--ui-font-display);font-size:23px;line-height:1.15;text-decoration:none;color:var(--ui-ink);text-transform:uppercase;letter-spacing:.04em}
#dm-landing .dm-brand small{display:block;font:400 10px/1.7 var(--ui-font-body);letter-spacing:.3em}
#dm-landing nav{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:15px}
#dm-landing nav a{color:var(--ui-ink-2);font-size:12px;font-weight:600;text-decoration:none;padding:5px 0}
#dm-landing nav a:hover{color:var(--ui-sea);text-decoration:underline}
#dm-landing .dm-tools,#dm-landing .dm-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#dm-landing .ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ui-hit);padding:8px var(--ui-s4);border-radius:var(--ui-r2);border:1px solid var(--ui-line-strong);background:var(--ui-raised);color:var(--ui-ink);font:600 13px/1.3 var(--ui-font-body);text-decoration:none}
#dm-landing .ui-btn.primary{background:var(--ui-sea);border-color:var(--ui-sea);color:var(--ui-sea-ink);font-weight:700}
#dm-landing .ui-btn:hover{filter:brightness(1.08)}
#dm-landing .dm-actions{margin-top:28px}
#dm-landing .dm-actions .ui-btn{min-height:46px;padding:12px 22px}
#dm-landing .dm-hero{padding-top:70px;padding-bottom:70px;border-bottom:1px solid var(--ui-line)}
#dm-landing .dm-kicker{font:600 11px/1.5 var(--ui-font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ui-mute)}
#dm-landing .dm-hero .dm-intro{font-size:18px;max-width:660px}
#dm-landing .dm-section{padding-top:62px;padding-bottom:62px;scroll-margin-top:160px;border-bottom:1px solid var(--ui-line)}
#dm-landing .dm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:38px}
#dm-landing .dm-grid article{border-top:2px solid var(--ui-line-strong);padding-top:22px}
#dm-landing .dm-grid p{font-size:14px}
#dm-landing .dm-quote{font:400 clamp(25px,3.5vw,36px)/1.35 var(--ui-font-display);color:var(--ui-ink);border-left:3px solid var(--ui-sea);padding-left:24px;margin:32px 0 0;max-width:700px}
#dm-landing .dm-shade{background:var(--ui-raised)}
#dm-landing .dm-end{padding-top:66px;padding-bottom:66px;text-align:center;background:var(--ui-surface)}
#dm-landing .dm-end h2,#dm-landing .dm-end p{margin-left:auto;margin-right:auto}
#dm-landing .dm-end .dm-actions{justify-content:center}
#dm-landing details{position:relative}
#dm-landing summary{list-style:none}
#dm-landing summary::-webkit-details-marker{display:none}
#dm-landing .dm-prefs{position:absolute;right:0;top:46px;z-index:10;width:260px;background:var(--ui-surface);border:1px solid var(--ui-line-strong);border-radius:var(--ui-r2);padding:20px;box-shadow:0 10px 30px #0002}
#dm-landing .dm-prefs label{display:block;font-size:12px;font-weight:600;margin-bottom:14px}
#dm-landing select{display:block;width:100%;margin-top:5px;background:var(--ui-bg);color:var(--ui-ink);border:1px solid var(--ui-line-strong);border-radius:var(--ui-r2);padding:9px;font:400 14px var(--ui-font-body)}
#dm-landing .dm-note{font-size:12px;color:var(--ui-mute);min-height:20px;margin-top:15px}
#dm-landing[data-style=hand] .dm-grid article{border-top-style:dashed}
#dm-landing[data-style=hand] .dm-brand{transform:rotate(-1deg)}
@media(max-width:650px){#dm-landing .dm-grid{grid-template-columns:1fr}#dm-landing .dm-top{padding-right:0}#dm-landing .dm-tools{width:100%}#dm-landing .dm-prefs{left:0;right:auto}#dm-landing .dm-hero{padding-top:42px;padding-bottom:45px}#dm-landing .dm-section{padding-top:42px;padding-bottom:42px;scroll-margin-top:220px}#dm-landing nav{gap:4px 15px}#dm-landing .dm-header{position:relative}#dm-landing .dm-end{text-align:left}#dm-landing .dm-end .dm-actions{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){#dm-landing *{scroll-behavior:auto!important}}
#dm-landing{--dm-alpha:80%;--dm-section-tint:40%}
#dm-landing .dm-section,#dm-landing .dm-end{background:color-mix(in srgb,var(--ui-bg) var(--dm-section-tint),transparent)}
#dm-landing .dm-shade{background:color-mix(in srgb,var(--ui-raised) var(--dm-section-tint),transparent)}
#dm-landing .dm-header{background:color-mix(in srgb,var(--ui-surface) var(--dm-alpha),transparent);backdrop-filter:blur(14px)}
#dm-landing[data-style=hand]{--dm-hand-ink:#292822;--dm-hand-shadow:#292822}
#dm-landing[data-style=hand][data-theme=dark]{--dm-hand-ink:#efe6d5;--dm-hand-shadow:#0c0a08}
#dm-landing[data-style=hand] .ui-btn,#dm-landing[data-style=hand] .dm-prefs{border:1.5px solid var(--dm-hand-ink);box-shadow:3px 3px 0 var(--dm-hand-shadow);border-radius:9px 15px 8px 13px}
#dm-landing[data-style=hand] .dm-header{border-bottom:2px solid var(--dm-hand-ink)}
#dm-landing[data-style=hand] .dm-quote{border-left-style:dashed}
#dm-landing .dm-phone-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
#dm-landing .dm-phone-grid figure{margin:0;min-width:0}
#dm-landing .dm-phone-grid img{display:block;width:100%;height:auto;border-radius:24px}
#dm-landing .dm-phone-grid h3{font-size:21px;margin:18px 0 10px}
#dm-landing .dm-phone-grid p{font-size:13px}
@media(max-width:620px){#dm-landing .dm-phone-grid{grid-template-columns:1fr}#dm-landing .dm-phone-grid img{max-width:300px;margin:auto}}
#dm-landing .dm-logo-slot{display:block;width:250px;max-width:100%;isolation:isolate}
#dm-landing .dm-logo,#dm-landing .dm-logo img{display:block;width:100%;height:auto}
#dm-landing .dm-logo-light{mix-blend-mode:normal}
#dm-landing .dm-logo-dark{display:none;mix-blend-mode:normal}
#dm-landing[data-theme=dark] .dm-logo-light{display:none}
#dm-landing[data-theme=dark] .dm-logo-dark{display:block}
#dm-landing .dm-hero-logo{width:570px;margin:0 0 32px}
#dm-landing .dm-footer-logo{width:330px;margin:0 auto 28px}
#dm-landing[data-style=hand] .dm-brand{transform:none}
@media(max-width:650px){#dm-landing .dm-brand{width:100%}#dm-landing .dm-logo-slot{width:240px}#dm-landing .dm-hero-logo{width:100%;max-width:570px}#dm-landing .dm-footer-logo{margin-left:0;width:280px}}

#dm-landing .dm-actions button[aria-pressed="true"]{background:var(--ui-sea);color:var(--ui-sea-ink)}

/* Compact navigation: logo, section links and actions share one baseline. */
#dm-landing .dm-header{padding:7px 18px}
#dm-landing .dm-top{flex-wrap:nowrap;gap:14px;padding-right:65px}
#dm-landing .dm-header .dm-brand{flex:0 0 145px;width:145px}
#dm-landing .dm-header nav{flex:1;justify-content:center;align-items:center;flex-wrap:nowrap;gap:10px;margin:0}
#dm-landing .dm-header nav a{font-size:11px;white-space:nowrap;padding:10px 0}
#dm-landing .dm-header .dm-tools{flex:0 0 auto;width:auto;flex-wrap:nowrap;gap:7px}
#dm-landing .dm-header .ui-btn{font-size:11px;padding:8px 10px;white-space:nowrap}
#dm-landing .dm-section{scroll-margin-top:85px}
@media(max-width:950px){
#dm-landing .dm-top{flex-wrap:wrap;gap:5px 14px}
#dm-landing .dm-header .dm-brand{margin-right:auto}
#dm-landing .dm-header nav{order:3;flex-basis:100%;justify-content:flex-start;flex-wrap:wrap;gap:0 16px}
#dm-landing .dm-header nav a{padding:5px 0}
#dm-landing .dm-section{scroll-margin-top:125px}
}
@media(max-width:650px){
#dm-landing .dm-header{padding:7px 16px}
#dm-landing .dm-top{padding-right:0}
#dm-landing .dm-header .dm-brand{flex-basis:58px;width:58px}
#dm-landing .dm-header .dm-tools{gap:5px}
#dm-landing .dm-header .ui-btn{padding:7px 8px}
#dm-landing .dm-section{scroll-margin-top:20px}
}

#dm-landing .dm-top{padding-right:0}

/* Fixed clean appearance; only light/dark is selectable. */
#dm-landing .dm-header .dm-beta-cta{min-height:52px;padding:14px 26px;font-size:17px}
#dm-landing .dm-header .dm-theme-toggle{min-height:44px;cursor:pointer}
@media(max-width:1100px){#dm-landing .dm-top{flex-wrap:wrap}#dm-landing .dm-header nav{order:3;flex-basis:100%;flex-wrap:wrap}#dm-landing .dm-header .dm-tools{margin-left:auto}}
@media(max-width:400px){#dm-landing .dm-header .dm-beta-cta{padding:10px 12px;font-size:14px}#dm-landing .dm-header .dm-tools{gap:5px}}

#dm-landing #dm-beta-form{display:grid;gap:10px;max-width:580px;margin-top:22px}
#dm-landing #dm-beta-form label{font-weight:600}
#dm-landing #dm-beta-form label span{font-weight:400}
#dm-landing #dm-beta-form input[type=email],#dm-landing #dm-beta-form textarea{box-sizing:border-box;width:100%;padding:11px 12px;margin-bottom:8px;border:1px solid var(--ui-line-strong);border-radius:6px;background:var(--ui-surface);color:var(--ui-ink);font:inherit}
#dm-landing #dm-beta-form textarea{resize:vertical}
#dm-landing .dm-beta-consent{display:flex;align-items:flex-start;gap:9px;margin-bottom:6px}
#dm-landing .dm-beta-consent input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--ui-sea)}
#dm-landing #dm-beta-form :focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}
#dm-landing #dm-beta-form button:disabled{opacity:.65;cursor:default}
#dm-landing #dm-beta-status{margin:0}
#dm-landing #dm-beta-status:empty{margin-top:-10px}

#dm-landing .dm-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;background:center/cover no-repeat url(/landing/assets/mdina-day.webp)}
#dm-landing[data-theme=dark] .dm-backdrop{background-image:url(/landing/assets/mdina-night.webp)}
#dm-landing .dm-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ui-bg),color-mix(in srgb,var(--ui-bg) 94%,transparent) 24%,color-mix(in srgb,var(--ui-bg) 68%,transparent) 46%,transparent 74%)}
#dm-landing .dm-hero{display:grid;align-items:center;min-height:clamp(570px,78svh,800px)}
#dm-landing .dm-hero-copy{max-width:610px}
@media(max-width:820px){
 #dm-landing{--dm-section-tint:52%}
 #dm-landing .dm-hero{padding-bottom:115px}
 #dm-landing .dm-backdrop{background-position:78% center}
 #dm-landing .dm-backdrop::after{background:linear-gradient(180deg,var(--ui-bg),color-mix(in srgb,var(--ui-bg) 90%,transparent) 48%,transparent 92%)}
}