@font-face{font-family:ThafatSans;src:url('assets/fonts/NimbusSans-Regular.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:ThafatSans;src:url('assets/fonts/NimbusSans-Bold.otf') format('opentype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:ThafatRoman;src:url('assets/fonts/NimbusRoman-Italic.otf') format('opentype');font-style:italic;font-weight:400;font-display:swap}

:root{color-scheme:light;--bg:#F8F6F0;--ink:#192F3C;--muted:#66736F;--accent:#876236;--line:#E7E2D9;--surface:#FFFDFA;--soft:#F0ECE3;--focus:#86622F;--shadow:0 16px 48px rgb(25 47 60 / .07);--mockup-shift:0%}
:root[data-theme="night"]{color-scheme:dark;--bg:#101E29;--ink:#F4EFE5;--muted:#ACBABC;--accent:#DCB474;--line:#2B414D;--surface:#182C38;--soft:#203843;--focus:#F0CB8D;--shadow:0 16px 48px rgb(0 0 0 / .18);--mockup-shift:-50%}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 ThafatSans,Arial,sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .35s ease,color .35s ease}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
button{touch-action:manipulation}
button svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
img{display:block;max-width:100%}
.shell{width:min(100% - 64px,1000px);margin-inline:auto}
.header{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:114px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;flex-direction:column;align-items:center;line-height:1;flex:none;user-select:none}
.brand-name{font-size:25px;font-weight:700;letter-spacing:6.4px;padding-left:6.4px}
.brand-detail{display:flex;align-items:center;gap:11px;margin-top:11px;font-size:7px;letter-spacing:3.7px;padding-left:3.7px;color:var(--accent)}
.brand-detail i{display:block;width:18px;height:1px;background:currentColor}
.theme-control{display:flex;align-items:center;gap:15px}
.theme-label{font-size:12px;color:var(--muted);white-space:nowrap}
.theme-toggle{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--accent);box-shadow:0 2px 8px rgb(0 0 0 / .02);transition:background-color .2s,border-color .2s,transform .2s}
.theme-toggle:not(:disabled):hover{border-color:var(--accent);transform:translateY(-1px)}
.theme-toggle .theme-icon{width:21px;height:21px;grid-area:1/1}
.theme-toggle .icon-sun{display:none}
[data-theme="night"] .theme-toggle .icon-sun{display:block}
[data-theme="night"] .theme-toggle .icon-moon{display:none}
.intro{padding-block:61px 40px}
.eyebrow{display:flex;align-items:center;gap:13px;margin:0 0 19px;font-size:10px;font-weight:400;letter-spacing:1.8px;color:var(--accent)}
.eyebrow>span{width:23px;height:1px;background:var(--accent)}
h1,h2,p{margin-top:0}
h1{margin-bottom:17px;font-size:clamp(34px,4.7vw,54px);font-weight:400;line-height:1.05;letter-spacing:-1.4px}
em{font-family:ThafatRoman,Georgia,serif;font-weight:400;font-style:italic}
h1 em{color:var(--accent)}
.intro-copy{max-width:660px;margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.mobile-break{display:none}
.concept-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-bottom:35px;border-bottom:1px solid var(--line)}
.concept-choice{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:58px;text-align:left;padding:13px 15px;border:1px solid var(--line);border-radius:6px;background:transparent;font-size:13px;line-height:1.3;transition:background-color .2s,border-color .2s,color .2s}
.concept-index{color:var(--accent);font-size:10px;flex:none;letter-spacing:.6px}
.concept-choice[aria-pressed="true"]{border-color:var(--accent);background:var(--surface)}
.concept-choice[aria-pressed="true"]>span:last-child{font-weight:700}
.concept-choice:not(:disabled):hover{background:var(--surface);border-color:var(--accent)}
.selected-design{padding-top:31px}
.design-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:24px}
.design-number{margin-bottom:7px;color:var(--accent);font-size:9px;letter-spacing:1.5px}
.design-heading h2{margin-bottom:5px;font-weight:400;font-size:23px;line-height:1.2;letter-spacing:-.35px}
.design-description{margin:0;color:var(--muted);font-size:13px}
.compare-button{display:inline-flex;align-items:center;gap:9px;flex:none;min-height:44px;padding:10px 0 10px 12px;border:0;background:transparent;color:var(--muted);font-size:12px;text-align:left}
.compare-button svg{width:18px;height:18px;color:var(--accent)}
.compare-button:not(:disabled):hover{color:var(--accent)}
.design-figure{margin:0}
.mockup-view{position:relative;overflow:hidden;width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow);isolation:isolate}
.mockup-image{display:block;width:200%;max-width:none;height:auto;transform:translateX(var(--mockup-shift));transform-origin:center;transition:transform .55s cubic-bezier(.22,.65,.25,1)}
.mockup-view.is-unavailable{min-height:280px;display:grid;place-items:center;box-shadow:none}
.mockup-view.is-unavailable .mockup-image{display:none}
.image-status{margin:0;padding:40px;color:var(--muted);font-size:14px;text-align:center}
[hidden]{display:none!important}
figcaption{display:flex;align-items:center;gap:11px;margin-top:17px;color:var(--muted);font-size:11px;line-height:1.5}
.caption-rule{width:21px;height:1px;background:var(--accent);flex:none}
.footer{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:58px;padding-block:28px 35px;border-top:1px solid var(--line)}
.footer>span{font-size:9px;letter-spacing:1.2px;color:var(--muted)}
.footer p{margin:0;font-size:14px}
.footer em{color:var(--accent);font-size:17px}
.comparison-dialog{width:min(1400px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);box-shadow:0 24px 100px rgb(0 0 0 / .35)}
.comparison-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.comparison-dialog::backdrop{background:rgb(6 17 25 / .72);backdrop-filter:blur(5px)}
.comparison-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:26px 28px 22px;border-bottom:1px solid var(--line)}
.comparison-header .eyebrow{margin-bottom:8px;font-size:9px}
.comparison-header h2{margin-bottom:6px;font-size:24px;font-weight:400;line-height:1.2}
.comparison-header p:last-child{margin:0;font-size:12px;color:var(--muted)}
.dialog-close{display:grid;place-items:center;flex:none;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink)}
.dialog-close:hover{border-color:var(--accent);color:var(--accent)}
.dialog-close svg{width:19px;height:19px}
.comparison-body{min-height:0;overflow:auto;overscroll-behavior:contain;background:var(--surface)}
.comparison-body img{display:block;width:100%;max-width:none;height:auto}
.comparison-footnote{margin:0;padding:12px 28px;color:var(--muted);font-size:10px;border-top:1px solid var(--line)}
.no-script{margin:18px 0 0;font-size:12px;color:var(--muted)}
.skip-link{position:fixed;z-index:10;left:16px;top:12px;padding:12px 18px;border-radius:4px;background:var(--ink);color:var(--bg);text-decoration:none;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%);margin:-1px;padding:0;border:0}
body:has(.comparison-dialog[open]){overflow:hidden}

@media (max-width:760px){
  .shell{width:calc(100% - 40px)}
  .header{min-height:98px}
  .intro{padding-block:44px 29px}
  .concept-choices{gap:8px;padding-bottom:26px}
  .concept-choice{align-items:flex-start;gap:7px;padding:12px 10px;font-size:12px;min-height:65px}
  .concept-index{padding-top:2px;font-size:9px}
  .design-heading{align-items:flex-start;gap:14px}
  .design-heading h2{font-size:21px}
  .design-description{max-width:370px;font-size:12px}
  .compare-button{max-width:156px;line-height:1.35;font-size:11px;padding-top:17px}
  .footer{flex-wrap:wrap;margin-top:40px;gap:15px;padding-block:24px 28px}
  .footer p{order:3;width:100%}
  .comparison-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:8px}
  .comparison-header{padding:20px 18px;gap:18px}
  .comparison-header h2{font-size:21px}
  .comparison-header .eyebrow{font-size:8px;letter-spacing:1.2px}
  .comparison-footnote{padding:11px 18px;font-size:9px}
}
@media (max-width:480px){
  .shell{width:calc(100% - 32px)}
  .header{min-height:91px;gap:14px}
  .brand-name{font-size:22px;letter-spacing:4.5px;padding-left:4.5px}
  .brand-detail{font-size:6px;letter-spacing:3px;padding-left:3px;gap:8px}
  .brand-detail i{width:15px}
  .theme-control{gap:9px}
  .theme-label{font-size:10px}
  .theme-toggle{width:42px;height:42px}
  .intro{padding-block:34px 27px}
  .eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:17px}
  h1{font-size:35px;line-height:1.07;letter-spacing:-.9px;max-width:290px}
  .intro-copy{font-size:14px;line-height:1.65}
  .mobile-break{display:block}
  .concept-choices{grid-template-columns:1fr;gap:7px}
  .concept-choice{align-items:center;min-height:45px;padding:11px 13px;gap:12px;font-size:12px}
  .concept-index{padding:0}
  .selected-design{padding-top:24px}
  .design-heading{display:block;margin-bottom:19px}
  .design-heading h2{font-size:22px}
  .design-description{font-size:12px;line-height:1.55}
  .compare-button{max-width:none;min-height:44px;margin-top:7px;padding:10px 0;font-size:12px}
  .mockup-view{border-radius:6px}
  figcaption{font-size:10px;gap:8px;margin-top:13px}
  .caption-rule{width:13px}
  .footer{margin-top:31px}
  .footer>span{font-size:8px;letter-spacing:.9px}
  .comparison-header{gap:12px}
  .comparison-header h2{font-size:19px}
  .comparison-header p:last-child{font-size:10px}
  .dialog-close{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}