:root{
  --bg:#F4EFE3; --surface:#FBF8F0; --surface-2:#EFE8D6;
  --text:#241F17; --text-secondary:#6B6252; --text-muted:#8C8371;
  --border:#DCD2B8; --border-strong:#C7BA95;
  --accent:#1F3B54; --accent-soft:#DCE5EA;
  --cta:#B96E24; --cta-text:#FBF8F0;
  --success:#4B6B3A; --success-soft:#E3E9D8;
  --attention:#9C4326; --attention-soft:#F1DDD3;
  --radius:3px;
}
[data-mode="dark"]{
  --bg:#0D2136; --surface:#122B44; --surface-2:#0A1B2C;
  --text:#E8F1F7; --text-secondary:#9FBAD0; --text-muted:#6F8AA3;
  --border:#274864; --border-strong:#3A6486;
  --accent:#7FD1E8; --accent-soft:#173C55;
  --cta:#E8A94A; --cta-text:#12233A;
  --success:#8FCB7A; --success-soft:#1B3324;
  --attention:#F08A6C; --attention-soft:#3A2119;
}
@media (prefers-color-scheme: dark){
  :root:not([data-mode]){
    --bg:#0D2136; --surface:#122B44; --surface-2:#0A1B2C;
    --text:#E8F1F7; --text-secondary:#9FBAD0; --text-muted:#6F8AA3;
    --border:#274864; --border-strong:#3A6486;
    --accent:#7FD1E8; --accent-soft:#173C55;
    --cta:#E8A94A; --cta-text:#12233A;
    --success:#8FCB7A; --success-soft:#1B3324;
    --attention:#F08A6C; --attention-soft:#3A2119;
  }
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:16px; line-height:1.6;}
h1,h2,h3{font-family:'Space Grotesk',sans-serif; font-weight:600; margin:0; color:var(--text);}
a{color:inherit;}
.wrap{max-width:1000px; margin:0 auto; padding:28px 20px 80px;}
.topbar{border-bottom:1px solid var(--border); padding:18px 20px;}
.topbar-inner{max-width:1000px; margin:0 auto;}
.wordmark{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; letter-spacing:-0.02em;}
.wordmark span{color:var(--cta);}

.plotbar{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:24px;}
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:12px; color:var(--text-secondary);}
.field input, .field select{font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--surface); color:var(--text); width:100px;}
.field select{width:130px;}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin-top:8px;}
.card{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden; display:flex; flex-direction:column; text-decoration:none;}
.card-art{padding:18px; border-bottom:1px solid var(--border); background:var(--surface-2); color:var(--accent);}
.card-body{padding:16px; display:flex; flex-direction:column; gap:10px; flex:1;}
.card-name{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px;}
.meta-row{display:flex; flex-wrap:wrap; gap:6px; font-size:12px; color:var(--text-secondary);}
.meta-row span{border:1px solid var(--border); border-radius:var(--radius); padding:2px 7px;}
.price-row{display:flex; align-items:baseline; justify-content:space-between; margin-top:4px;}
.price{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px;}
.badge{display:inline-block; font-size:12px; font-weight:500; padding:3px 9px; border-radius:20px;}
.badge-neutral{background:var(--surface-2); color:var(--text-secondary);}
.badge-match{background:var(--success-soft); color:var(--success);}
.badge-nomatch{background:var(--attention-soft); color:var(--attention);}

button.btn, a.btn{font:inherit; font-size:14px; font-weight:500; cursor:pointer; border-radius:var(--radius); padding:10px 16px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); text-decoration:none; display:inline-block;}
button.btn:hover, a.btn:hover{border-color:var(--accent);}
button.btn-primary, a.btn-primary{background:var(--cta); border-color:var(--cta); color:var(--cta-text);}
button.btn-block{width:100%;}

.detail-layout{display:grid; grid-template-columns:1.1fr 1fr; gap:32px;}
@media (max-width:760px){.detail-layout{grid-template-columns:1fr;}}
.detail-art{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:24px; color:var(--accent);}
.detail-panel{display:flex; flex-direction:column; gap:16px;}
.banner{border-radius:var(--radius); padding:14px 16px; font-size:14px;}
.banner-match{background:var(--success-soft); color:var(--success);}
.banner-nomatch{background:var(--attention-soft); color:var(--attention);}
.spec-list{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; font-size:14px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:16px 0;}
.spec-list dt{color:var(--text-muted); font-size:12px; margin-bottom:2px;}
.spec-list dd{margin:0; font-weight:500;}
.cta-row{display:flex; gap:10px; flex-wrap:wrap;}

.order-form{border:1px solid var(--border); border-radius:var(--radius); padding:20px; background:var(--surface); margin-top:16px;}
.order-form .field{width:100%; margin-bottom:12px;}
.order-form input{width:100%;}
.error-note{color:var(--attention); font-size:13px; margin-top:8px;}
.toast{margin-top:18px; background:var(--success-soft); color:var(--success); padding:14px 16px; border-radius:var(--radius); font-size:14px;}
.section-gap{margin-top:6px; margin-bottom:22px; color:var(--text-secondary); font-size:14px;}

/* Dashboard shared styles (admin / in-house / Creator Studio) */
.topnav{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.topnav .who{font-size:13px; color:var(--text-secondary);}
.topnav .who a{color:var(--attention); text-decoration:none; font-weight:500;}
.topnav .who a:hover{text-decoration:underline;}
.wrap > h1{margin-bottom:4px;}

/* Tabs */
.subtabs{display:flex; gap:6px; margin-bottom:22px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--border);}
.subtab{font:inherit; font-size:14px; font-weight:500; line-height:1.2; padding:9px 16px; border-radius:var(--radius); border:1px solid var(--border-strong); background:var(--surface); color:var(--text-secondary); text-decoration:none; display:inline-block; transition:border-color .15s, color .15s, background .15s;}
.subtab:hover{border-color:var(--accent); color:var(--text);}
.subtab.active{background:var(--accent); color:var(--surface); border-color:var(--accent); font-weight:600;}
.subtab:focus-visible{outline:2px solid var(--cta); outline-offset:2px;}

/* Stats */
.stats-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:26px;}
.stat-card{border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; background:var(--surface); border-top:3px solid var(--accent);}
.stat-num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:28px; line-height:1.1; color:var(--text);}
.stat-label{font-size:12px; color:var(--text-secondary); margin-top:6px; text-transform:uppercase; letter-spacing:.04em;}
@media (max-width:760px){.stats-row{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Tables */
.admin-table{width:100%; border-collapse:separate; border-spacing:0; font-size:14px; margin-bottom:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
.admin-table th{text-align:left; padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--border-strong); color:var(--text-secondary); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;}
.admin-table td{padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle;}
.admin-table tbody tr:last-child td{border-bottom:none;}
.admin-table tbody tr:hover td{background:var(--surface-2);}
.admin-table td:first-child{font-weight:500;}
.admin-table select{font:inherit; font-size:13px; padding:6px 8px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--surface); color:var(--text); cursor:pointer;}
.admin-table form{margin:0;}
@media (max-width:760px){.admin-table{display:block; overflow-x:auto; white-space:nowrap;}}

/* Cards */
.item-card{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:18px 20px; margin-bottom:14px; transition:border-color .15s;}
.item-card:hover{border-color:var(--border-strong);}
.item-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;}
.item-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; line-height:1.3;}
.item-meta{font-size:13px; color:var(--text-secondary); margin-top:4px;}
.item-notes{font-size:14px; color:var(--text-secondary); margin-top:12px; background:var(--surface-2); padding:10px 12px; border-radius:var(--radius); border-left:3px solid var(--border-strong);}
.item-card form{margin-top:12px;}
.item-card .field{margin-bottom:10px;}
.item-card .field input:not([type=file]), .item-card .field textarea{width:100%;}

/* Badges (pills) */
.badge{white-space:nowrap; line-height:1.4;}
.admin-table .badge, .item-card .badge{text-transform:capitalize;}
.b-blue{background:var(--accent-soft); color:var(--accent);}
.b-amber{background:#F1E4D2; color:var(--cta);}
.b-rust{background:var(--attention-soft); color:var(--attention);}
.b-green{background:var(--success-soft); color:var(--success);}
[data-mode="dark"] .b-amber{background:#3A2E17;}
@media (prefers-color-scheme: dark){:root:not([data-mode]) .b-amber{background:#3A2E17;}}

/* Buttons & form controls */
button.btn-small, a.btn-small{font-size:13px; padding:7px 12px;}
button.btn-primary:hover, a.btn-primary:hover{filter:brightness(1.08); border-color:var(--cta);}
.field textarea{font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--surface); color:var(--text); width:100%; min-height:84px; resize:vertical;}
.field input[type=file]{font-size:13px; color:var(--text-secondary); padding:6px 0; border:none; background:none; width:auto;}
.field input:focus, .field select:focus, .field textarea:focus, .admin-table select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);}
.add-form{border:1px solid var(--border); border-radius:var(--radius); padding:22px; background:var(--surface); max-width:720px; margin-top:4px;}
.form-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-bottom:14px;}
.form-grid .field input, .form-grid .field select, .form-grid .field textarea{width:100%;}
.review-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}

/* Login */
.login-box{max-width:380px; margin:72px auto 0; padding:32px 28px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);}
.login-box h1{margin-bottom:18px;}
.login-box .field{margin-bottom:14px;}
.login-box .field input{width:100%;}
.login-box .error-note{margin:0 0 14px; padding:10px 12px; background:var(--attention-soft); border-radius:var(--radius);}
.login-tabs{display:flex; gap:8px; margin-bottom:20px;}
.login-tab{flex:1; text-align:center; padding:9px; border-radius:var(--radius); border:1px solid var(--border-strong); text-decoration:none; color:var(--text-secondary); font-size:14px; font-weight:500;}
.login-tab:hover{border-color:var(--accent); color:var(--text);}
.login-tab.active{background:var(--accent); color:var(--surface); border-color:var(--accent);}

/* =====================================================================
   Customer site: index, design, customize, order, track.
   Everything is scoped under body.site so the staff dashboards are untouched.
   Motion uses transform and opacity only.
   ===================================================================== */
:root{
  --nav-h:64px; --r-md:8px; --r-lg:12px;
  --nav-bg:rgba(244,239,227,.78);
  --art-bg:linear-gradient(160deg,#f0ede4,#e8e3d5);
  --shadow-sm:0 1px 3px rgba(36,31,23,.06);
  --shadow-md:0 4px 20px rgba(0,0,0,.08);
  --shadow-lg:0 18px 40px rgba(36,31,23,.14);
  --amber:#B7791F; --amber-soft:#F6E7CF; --cta-soft:#F7E8D7;
}
[data-mode="dark"]{
  --nav-bg:rgba(13,33,54,.78); --art-bg:linear-gradient(160deg,#17344f,#0f2740);
  --shadow-sm:0 1px 3px rgba(0,0,0,.3); --shadow-md:0 4px 20px rgba(0,0,0,.35); --shadow-lg:0 18px 40px rgba(0,0,0,.45);
  --amber:#E8A94A; --amber-soft:#3A2E17; --cta-soft:#3A2A17;
}
@media (prefers-color-scheme: dark){
  :root:not([data-mode]){
    --nav-bg:rgba(13,33,54,.78); --art-bg:linear-gradient(160deg,#17344f,#0f2740);
    --shadow-sm:0 1px 3px rgba(0,0,0,.3); --shadow-md:0 4px 20px rgba(0,0,0,.35); --shadow-lg:0 18px 40px rgba(0,0,0,.45);
    --amber:#E8A94A; --amber-soft:#3A2E17; --cta-soft:#3A2A17;
  }
}

@keyframes fadeInUp{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);}}
@keyframes scaleIn{from{opacity:0; transform:scale(0.96);} to{opacity:1; transform:scale(1);}}
@keyframes pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.04);}}
@keyframes shimmer{0%{background-position:-200% 0;} 100%{background-position:200% 0;}}
@keyframes checkDraw{to{stroke-dashoffset:0;}}
@keyframes popIn{from{opacity:0; transform:scale(.8);} to{opacity:1; transform:scale(1);}}
@keyframes slideDown{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);}}
@keyframes flashFade{from{opacity:.28;} to{opacity:0;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes floatUp{0%{opacity:0; transform:translateY(0) scale(.6);} 15%{opacity:1;} 100%{opacity:0; transform:translateY(-130px) scale(1);}}
@keyframes haloPulse{0%{opacity:.55; transform:scale(1);} 100%{opacity:0; transform:scale(1.9);}}

/* ---------- Base ---------- */
body.site{display:flex; flex-direction:column; min-height:100vh;}
body.site main{flex:1; width:100%;}
body.site .wrap{max-width:1080px; padding:32px 20px 24px;}
@media (max-width:767px){body.site .wrap{padding:22px 16px 16px;}}
.page-enter{animation:fadeInUp 500ms ease-out both;}
body.site a, body.site button, body.site input, body.site select{transition:color 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 150ms ease;}
body.site :is(a,button,input,select,textarea):focus-visible{outline:none; box-shadow:0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);}
body.site .btn{border-radius:var(--r-md); font-weight:600; transition:transform 150ms ease, box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease;}
body.site .btn:hover{transform:scale(1.03);}
body.site .btn-primary:hover{filter:none; box-shadow:0 8px 20px rgba(185,110,36,.28);}
body.site .btn-outline{background:transparent; border:1.5px solid var(--accent); color:var(--accent);}
body.site .btn-outline:hover{background:var(--accent-soft); border-color:var(--accent);}
body.site .btn.lift:hover{transform:translateY(-2px);}
body.site .btn.btn-outline.lift:hover{box-shadow:0 8px 20px rgba(31,59,84,.14);}
body.site .field input, body.site .field select{width:100%; height:44px; padding:10px 12px; border-radius:var(--r-md); background:var(--surface);}
body.site .field input:focus, body.site .field select:focus{border-color:var(--accent);}
body.site .field label{font-weight:500;}
.ic{display:inline-block; width:16px; height:16px; flex:none; vertical-align:-3px;}
.ic-lg{width:20px; height:20px;}
.eyebrow{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:600; margin-bottom:6px;}
.muted{color:var(--text-secondary);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- Navigation ---------- */
.site-nav{position:sticky; top:0; z-index:50; height:var(--nav-h); background:var(--nav-bg); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:box-shadow 300ms ease, border-color 300ms ease;}
.site-nav.scrolled{box-shadow:0 6px 24px rgba(36,31,23,.08); border-bottom-color:var(--border);}
.nav-inner{max-width:1080px; height:100%; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:16px;}
.brand{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:23px; letter-spacing:-.03em; color:var(--text); text-decoration:none;}
.brand span{color:var(--cta);}
.nav-links{flex:1; display:flex; justify-content:center; gap:4px;}
.nav-links a{padding:8px 16px; border-radius:999px; font-size:14px; font-weight:500; color:var(--text-secondary); text-decoration:none;}
.nav-links a:hover{color:var(--text); background:var(--surface-2);}
.nav-links a.active{color:var(--text); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border);}
.nav-links .nav-contact-mobile{display:none;}
.btn-pill{padding:8px 18px; border:1.5px solid var(--text); border-radius:999px; font-size:14px; font-weight:600; color:var(--text); text-decoration:none; white-space:nowrap;}
.btn-pill:hover{background:var(--text); color:var(--bg); transform:scale(1.03);}
.nav-toggle{display:none; width:42px; height:42px; margin-right:-8px; border:none; background:none; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px; border-radius:var(--r-md);}
.nav-toggle span{display:block; width:20px; height:2px; border-radius:2px; background:var(--text); transition:transform 250ms ease, opacity 200ms ease;}
.site-nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-nav.open .nav-toggle span:nth-child(2){opacity:0;}
.site-nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:767px){
  .nav-inner{padding:0 16px; justify-content:space-between;}
  .nav-toggle{display:flex;}
  .btn-pill{display:none;}
  .nav-links{position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; gap:2px; padding:10px 16px 18px; background:var(--bg); border-bottom:1px solid var(--border); box-shadow:0 14px 30px rgba(36,31,23,.12); transform:translateY(-10px); opacity:0; visibility:hidden; transition:transform 250ms ease, opacity 250ms ease, visibility 0s linear 250ms;}
  .site-nav.open .nav-links{transform:none; opacity:1; visibility:visible; transition:transform 250ms ease, opacity 250ms ease;}
  .nav-links a{padding:13px 14px; font-size:16px; border-radius:var(--r-md);}
  .nav-links .nav-contact-mobile{display:block; margin-top:6px; text-align:center; border:1.5px solid var(--text); color:var(--text); border-radius:999px;}
}

/* ---------- Footer ---------- */
.site-footer{margin-top:56px; border-top:1px solid var(--border); color:var(--text-muted); font-size:13px;}
.footer-inner{max-width:1080px; margin:0 auto; padding:22px 20px 28px; display:flex; justify-content:space-between; align-items:center; gap:10px 24px; flex-wrap:wrap;}
.footer-inner p{margin:0;}
.footer-inner nav{display:flex; gap:18px; flex-wrap:wrap;}
.footer-inner a{color:var(--text-muted); text-decoration:none;}
.footer-inner a:hover{color:var(--text); text-decoration:underline;}
@media (max-width:767px){.footer-inner{padding:20px 16px 26px;}}

/* ---------- Browse ---------- */
.hero{margin-bottom:22px;}
.hero h1{font-size:clamp(30px,5vw,42px); line-height:1.08; letter-spacing:-.03em;}
.hero p{margin:12px 0 0; max-width:560px; color:var(--text-secondary);}
.plot-card{border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%); box-shadow:var(--shadow-sm);}
.plot-card h2{font-size:16px; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.plot-card h2 .ic{color:var(--cta);}
.plot-fields{display:grid; grid-template-columns:repeat(3,minmax(0,170px)); gap:12px;}
@media (max-width:560px){.plot-fields{grid-template-columns:1fr 1fr;} .plot-fields .field:last-child{grid-column:1/-1;}}
.filters{display:grid; gap:10px; margin-top:20px;}
.filter-row{display:flex; align-items:center; gap:12px; min-width:0;}
.filter-label{flex:none; width:80px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);}
.pills{display:flex; gap:8px; overflow-x:auto; min-width:0; padding:3px; margin:-3px; scrollbar-width:none;}
.pills::-webkit-scrollbar{display:none;}
.pill{flex:none; font:inherit; font-size:13px; font-weight:500; padding:7px 15px; border-radius:999px; border:1px solid var(--border-strong); background:transparent; color:var(--text-secondary); cursor:pointer;}
.pill:hover{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
.pill.active{background:var(--accent); border-color:var(--accent); color:var(--surface);}
.results-bar{display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:28px; margin:22px 0 14px; font-size:14px; color:var(--text-secondary);}
.results-bar strong{color:var(--text);}
.clear-all{border:none; background:none; font:inherit; font-size:14px; font-weight:600; color:var(--cta); cursor:pointer; padding:4px 0; opacity:0; visibility:hidden; transition:opacity 200ms ease, visibility 0s linear 200ms;}
.clear-all.show{opacity:1; visibility:visible; transition:opacity 200ms ease;}
.clear-all:hover{text-decoration:underline;}
.dgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px;}
@media (max-width:360px){.dgrid{grid-template-columns:1fr;}}
.dcard{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); color:inherit; text-decoration:none; box-shadow:0 1px 3px rgba(36,31,23,.06); transition:transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;}
.dcard:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--border-strong);}
.dgrid.enter .dcard, .dgrid.enter .skeleton{animation:fadeInUp 500ms ease-out backwards; animation-delay:calc(var(--i,0) * 80ms);}
.dcard-art{background:var(--art-bg); padding:24px; color:var(--accent);}
.dcard-body{flex:1; display:flex; flex-direction:column; gap:10px; padding:16px 18px 18px;}
.dcard-name{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; line-height:1.25;}
.tags{display:flex; flex-wrap:wrap; gap:6px;}
.tag{font-size:12px; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--text-secondary);}
.dcard .badge{align-self:flex-start; white-space:normal;}
.badge.pop{animation:popIn 300ms ease-out both;}
.badge-amber{background:var(--amber-soft); color:var(--amber);}
.dcard-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-end; gap:10px;}
.dprice{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; line-height:1.1; color:var(--cta);}
.ddays{display:block; font-size:12px; color:var(--text-muted); margin-top:3px;}
.view-btn{display:inline-flex; align-items:center; gap:4px; padding:8px 14px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:600; white-space:nowrap;}
.view-btn .arrow{display:inline-block; transition:transform 200ms ease;}
.dcard:hover .view-btn .arrow{transform:translateX(4px);}
.skeleton{border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface);}
.skeleton .sk{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 50%,var(--surface-2) 75%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; border-radius:6px;}
.skeleton .sk-art{height:120px; border-radius:0;}
.skeleton .sk-line{height:14px; margin:16px 18px 0;}
.skeleton .sk-line.short{width:45%; margin-bottom:20px;}
.empty-state{grid-column:1/-1; text-align:center; padding:48px 20px; border:1px dashed var(--border-strong); border-radius:var(--r-lg); color:var(--text-secondary); animation:scaleIn 300ms ease-out both;}

/* ---------- Design detail ---------- */
.breadcrumb{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:20px; font-size:14px; color:var(--text-muted);}
.breadcrumb a{color:var(--text-secondary); text-decoration:none;}
.breadcrumb a:hover{color:var(--text); text-decoration:underline;}
.breadcrumb .current{color:var(--text); font-weight:500;}
.pdp{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:36px; align-items:start;}
@media (max-width:860px){.pdp{grid-template-columns:1fr; gap:22px;}}
.pdp-media{position:sticky; top:calc(var(--nav-h) + 20px); display:grid; gap:16px;}
@media (max-width:860px){.pdp-media{position:static;}}
.art-card{border:1px solid var(--border); border-radius:var(--r-lg); background:var(--art-bg); padding:20px; color:var(--accent);}
.art-label{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:8px;}
.pdp-info{display:grid; gap:12px; min-width:0;}
.pdp-title h1{font-size:clamp(30px,4vw,40px); line-height:1.08; letter-spacing:-.03em;}
.pdp-info .banner{border-radius:var(--r-md);}
.banner-neutral{background:var(--surface-2); color:var(--text-secondary);}
.banner-amber{background:var(--amber-soft); color:var(--text);}
.banner-amber strong{color:var(--amber);}
.banner a{color:inherit;}
.info-card{border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); padding:16px;}
.info-card h2{font-size:15px; margin-bottom:12px;}
.spec-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 16px; margin:0;}
.spec-grid dt{font-size:12px; color:var(--text-muted);}
.spec-grid dd{margin:2px 0 0; font-weight:600; font-size:15px;}
@media (max-width:420px){.spec-grid{grid-template-columns:1fr 1fr;}}
.icon-list{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14px;}
.icon-list li{display:flex; align-items:flex-start; gap:10px;}
.icon-list .ic{margin-top:3px;}
.ic-ok{color:var(--success);}
.ic-no{color:var(--cta);}
.toggle-row{display:flex; align-items:flex-start; gap:14px; cursor:pointer; position:relative;}
.toggle-row input{position:absolute; opacity:0; pointer-events:none;}
.switch{flex:none; position:relative; width:42px; height:24px; margin-top:1px; border-radius:12px; background:var(--border-strong); transition:background-color 200ms ease;}
.switch::after{content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform 200ms ease;}
.toggle-row input:checked + .switch{background:var(--accent);}
.toggle-row input:checked + .switch::after{transform:translateX(18px);}
.toggle-row input:focus-visible + .switch{box-shadow:0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);}
.toggle-title{display:block; font-weight:600; font-size:15px;}
.toggle-sub{display:block; font-size:13px; color:var(--text-secondary); margin-top:2px;}
.chev{transition:transform 250ms ease;}
[aria-expanded="true"] > .chev{transform:rotate(180deg);}
.price-box{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--r-lg); background:var(--accent-soft);}
.price-box .label{font-size:14px; color:var(--text-secondary);}
.price-box .amount{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:28px; line-height:1.1; color:var(--text);}
.pdp-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pdp-actions .btn{text-align:center; padding:14px 16px; font-size:15px;}
@media (max-width:767px){.pdp-actions{grid-template-columns:1fr;}}
.action-hint{margin:-2px 0 0; font-size:12px; color:var(--text-muted);}
.flash{position:relative; isolation:isolate;}
.flash::after{content:''; position:absolute; inset:-3px -8px; z-index:-1; border-radius:6px; background:var(--cta); opacity:0; pointer-events:none;}
.flash.go::after{animation:flashFade 600ms ease-out;}
.similar{margin-top:64px;}
.similar h2{font-size:22px; margin-bottom:16px;}
.similar-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding-top:10px; margin-top:-10px;}
@media (max-width:860px){
  .similar-row{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding:10px 16px 12px; margin:-10px -16px 0; scrollbar-width:none;}
  .similar-row::-webkit-scrollbar{display:none;}
  .similar-row .dcard{flex:0 0 78%; scroll-snap-align:start;}
}

/* ---------- Configurator ---------- */
.config-head{display:flex; align-items:center; gap:18px; margin-bottom:22px;}
.config-head .thumb{flex:none; width:104px; padding:10px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--art-bg); color:var(--accent);}
.config-head h1{font-size:clamp(26px,4vw,34px); line-height:1.1; letter-spacing:-.02em;}
.config-head .meta{margin-top:6px; font-size:14px; color:var(--text-secondary);}
@media (max-width:560px){.config-head{align-items:flex-start;} .config-head .thumb{width:72px; padding:6px;}}
.steps-bar{margin-bottom:26px;}
.steps-text{margin-bottom:8px; font-size:13px; color:var(--text-secondary);}
.steps-text strong{color:var(--text);}
.steps-track{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.steps-seg{height:6px; border-radius:3px; background:var(--border); overflow:hidden; border:none; padding:0; cursor:pointer;}
.steps-seg i{display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform 400ms ease;}
.steps-seg.on i{transform:scaleX(1);}
.config-layout{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:32px; align-items:start;}
@media (max-width:900px){.config-layout{grid-template-columns:1fr;}}
.step-label{display:flex; align-items:center; gap:10px; margin:0 0 14px; scroll-margin-top:calc(var(--nav-h) + 20px);}
.step-num{flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--text); color:var(--bg); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px;}
.step-label h2{font-size:20px; line-height:1.25;}
.choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:36px;}
@media (max-width:600px){.choice-grid{grid-template-columns:1fr;}}
.choice-card{position:relative; font:inherit; color:inherit; text-align:left; cursor:pointer; padding:18px 18px 18px 50px; border:1px solid var(--border-strong); border-left:4px solid var(--border-strong); border-radius:var(--r-lg); background:transparent; transition:background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;}
.choice-card:hover{border-color:var(--accent);}
.choice-card.selected{border-color:var(--accent); border-left-color:var(--accent); background:var(--accent-soft); box-shadow:var(--shadow-sm);}
.choice-card .radio{position:absolute; left:18px; top:21px; width:18px; height:18px; border-radius:50%; border:2px solid var(--border-strong); background:var(--surface); transition:border-color 200ms ease;}
.choice-card .radio::after{content:''; position:absolute; inset:3px; border-radius:50%; background:var(--accent); transform:scale(0); transition:transform 200ms ease;}
.choice-card.selected .radio{border-color:var(--accent);}
.choice-card.selected .radio::after{transform:scale(1);}
.choice-title{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px;}
.choice-desc{margin-top:6px; font-size:13px; line-height:1.5; color:var(--text-secondary);}
.rec-badge{font-family:'Inter',sans-serif; font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; background:var(--success-soft); color:var(--success);}
.tier-group{--tier:var(--text-muted); margin-bottom:14px;}
.tier-group.tier-2{--tier:var(--accent);}
.tier-group.tier-3{--tier:var(--amber);}
.tier-group.tier-4{--tier:var(--attention);}
.tier-head{width:100%; display:flex; align-items:center; gap:10px; padding:10px 4px; border:none; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; border-radius:var(--r-md);}
.tier-head:hover{background:var(--surface-2);}
.tier-head .dot{flex:none; width:8px; height:8px; border-radius:50%; background:var(--tier);}
.tier-head strong{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;}
.tier-head .tier-sub{font-size:13px; color:var(--text-muted);}
.tier-head .tier-count{margin-left:auto; font-size:12px; font-weight:600; color:var(--tier); white-space:nowrap;}
.tier-head .chev{flex:none; color:var(--text-muted);}
.tier-head .tier-count + .chev{margin-left:0;}
.tier-head .tier-count:empty + .chev{margin-left:auto;}
@media (max-width:560px){.tier-head .tier-sub{display:none;}}
.mod-list{margin-top:4px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); overflow:hidden;}
.mod-row{display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer; box-shadow:inset 0 0 0 transparent; transition:background-color 200ms ease, box-shadow 200ms ease;}
.mod-row:last-child{border-bottom:none;}
.mod-row:hover{background:var(--surface-2);}
.mod-row.checked{box-shadow:inset 3px 0 0 var(--tier); background:var(--surface-2);}
.mod-row input{width:18px; height:18px; margin:0; cursor:pointer; accent-color:var(--accent);}
.mod-label{font-size:14px;}
.mod-days{display:block; font-size:12px; color:var(--text-muted);}
.mod-price{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;}
.tier-4 .mod-price{font-size:13px; color:var(--attention);}
/* Room pickers that open under a ticked change */
.mod-detail{padding:4px 16px 16px 48px; border-bottom:1px solid var(--border); background:var(--surface-2); box-shadow:inset 3px 0 0 var(--tier);}
.mod-detail:last-child{border-bottom:none;}
.mod-detail.enter{animation:fadeInUp 300ms ease-out;}
.detail-help{margin:10px 0 12px; font-size:13px; color:var(--text-secondary);}
.detail-help span{font-weight:600; color:var(--text);}
.detail-label{display:block; margin:14px 0 6px; font-size:13px; font-weight:500;}
.floor-block + .floor-block{margin-top:14px;}
.floor-name{margin-bottom:6px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted);}
.room-row{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px; padding:10px 12px; margin-bottom:6px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); transition:border-color 200ms ease, box-shadow 200ms ease;}
.room-row.picked{border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent);}
.room-name{font-size:14px; font-weight:500;}
.room-name span{font-weight:400; color:var(--text-muted); font-size:13px;}
.room-row .room-note{grid-column:1/-1;}
.room-row .room-note:not([hidden]){animation:slideDown 200ms ease-out;}
.mod-detail input.room-note, .mod-detail textarea, .mod-detail select{width:100%; font:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--surface); color:var(--text);}
.mod-detail textarea{resize:vertical; min-height:84px;}
.mod-detail input.room-note:focus, .mod-detail textarea:focus, .mod-detail select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.seg{display:flex; flex-wrap:wrap; gap:6px;}
.seg button{font:inherit; font-size:13px; font-weight:500; padding:6px 12px; border-radius:999px; border:1px solid var(--border-strong); background:transparent; color:var(--text-secondary); cursor:pointer;}
.seg button:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.seg button.on{background:var(--accent); border-color:var(--accent); color:var(--surface);}
.room-check{display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; white-space:nowrap;}
.room-check input{width:18px; height:18px; margin:0; accent-color:var(--accent);}
.room-use{display:flex; align-items:center; gap:10px;}
.room-use .now{font-size:12px; color:var(--text-muted); white-space:nowrap;}
.mod-detail .room-use select{width:auto; min-width:150px; padding:7px 10px;}
@media (max-width:560px){
  .mod-detail{padding:4px 12px 14px 14px;}
  .room-row{grid-template-columns:1fr;}
  .room-use{justify-content:space-between;}
}
.swatch-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
.swatch{display:flex; flex-direction:column; gap:8px; padding:8px; border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--surface); font:inherit; color:inherit; text-align:left; cursor:pointer; transition:border-color 200ms ease, box-shadow 200ms ease, transform 150ms ease;}
.swatch:hover{border-color:var(--border-strong); transform:translateY(-2px);}
.swatch.on{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.swatch-bars{display:flex; height:34px; border-radius:6px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
.swatch-bars i{flex:1;}
.swatch-name{font-size:12px; font-weight:500; line-height:1.3;}
.sum-group + .sum-group{margin-top:4px;}
.sum-room{display:flex; justify-content:space-between; gap:10px; padding:1px 0 1px 12px; font-size:12px; color:var(--text-muted); border-left:2px solid var(--border);}
.sum-room span:last-child{white-space:nowrap; font-variant-numeric:tabular-nums;}
.sum-room.todo, .helper.todo{color:var(--attention);}
/* "Let our architect decide" -- first row in each room / colour picker */
.arch-row{width:100%; display:flex; align-items:center; gap:12px; margin:10px 0 4px; padding:12px 14px; border:1.5px dashed var(--accent); border-radius:var(--r-md); background:var(--accent-soft); color:var(--text); font:inherit; text-align:left; cursor:pointer; transition:border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;}
.arch-row:hover{border-style:solid;}
.arch-row.on{border-style:solid; box-shadow:0 0 0 3px var(--accent-soft), inset 3px 0 0 var(--accent);}
.arch-ic{flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); color:var(--accent);}
.arch-text{flex:1; min-width:0;}
.arch-text strong{display:block; font-size:14px; font-weight:600;}
.arch-text small{display:block; margin-top:2px; font-size:12px; color:var(--text-secondary);}
.arch-text small span{font-weight:600; color:var(--text);}
.arch-check{flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; color:var(--surface); transition:background-color 200ms ease;}
.arch-check .ic{width:14px; height:14px; opacity:0; transform:scale(.6); transition:opacity 200ms ease, transform 200ms ease;}
.arch-row.on .arch-check{background:var(--accent);}
.arch-row.on .arch-check .ic{opacity:1; transform:scale(1);}
.mod-detail .floor-block, .mod-detail .swatch-grid, .mod-detail .detail-help, .mod-detail .detail-label, .mod-detail > textarea, .mod-detail > input{transition:opacity 200ms ease;}
.mod-detail.arch-on .floor-block, .mod-detail.arch-on .swatch-grid, .mod-detail.arch-on .detail-help, .mod-detail.arch-on .detail-label, .mod-detail.arch-on > textarea, .mod-detail.arch-on > input{opacity:.5;}
.mod-detail.arch-on .floor-block:hover, .mod-detail.arch-on .swatch-grid:hover{opacity:.8;}

.mod-list.enter .mod-row{animation:fadeInUp 400ms ease-out backwards; animation-delay:calc(var(--i,0) * 45ms);}
@media (max-width:420px){.mod-row{grid-template-columns:20px minmax(0,1fr); } .mod-price{grid-column:2; text-align:left;}}
.summary{position:sticky; top:calc(var(--nav-h) + 20px); padding:20px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:0 4px 20px rgba(0,0,0,0.08);}
@media (max-width:900px){.summary{position:static;}}
.summary h3{font-size:17px; margin-bottom:12px;}
.sum-line{display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:14px;}
.sum-line span:last-child{white-space:nowrap; font-weight:500; font-variant-numeric:tabular-nums;}
.sum-line.sub{font-size:13px; color:var(--text-secondary);}
.sum-mods{margin:6px 0; padding:6px 0; border-top:1px dashed var(--border);}
.sum-empty{padding:4px 0; font-size:13px; color:var(--text-muted);}
.sum-total{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:10px; padding-top:12px; border-top:2px solid var(--text);}
.sum-total .price{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:24px; text-align:right; font-variant-numeric:tabular-nums;}
.sum-total .price.range{font-size:18px;}
.sum-days{margin-top:4px; font-size:12px; color:var(--text-muted);}
.note{display:flex; align-items:flex-start; gap:10px; margin-top:12px; padding:10px 12px; border-left:3px solid; border-radius:var(--r-md); font-size:13px; line-height:1.5; animation:slideDown 250ms ease-out both;}
.note .ic{margin-top:1px;}
.note.still{animation:none;}
.note-warn{background:var(--amber-soft); border-color:var(--amber);}
.note-warn .ic{color:var(--amber);}
.note-danger{background:var(--attention-soft); border-color:var(--attention);}
.note-danger .ic{color:var(--attention);}
.summary .btn{margin-top:16px; padding:14px 16px; font-size:15px; text-align:center;}
.summary .helper{margin:8px 0 0; font-size:12px; text-align:center; color:var(--text-muted);}
body.site .btn-block{display:block; width:100%;}
body.site .btn.disabled{opacity:.5; cursor:not-allowed; pointer-events:none;}
.help-banner{display:flex; align-items:center; gap:14px; margin-top:24px; padding:14px 18px; border:1px dashed var(--border-strong); border-radius:var(--r-lg); background:var(--surface); font-size:14px;}
.help-banner .ic-wrap{flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent);}
.help-banner strong{display:block;}
.help-banner a{color:var(--accent); font-weight:600;}

/* ---------- Order form ---------- */
.narrow{max-width:520px; margin:0 auto;}
.narrow .back{display:inline-block; margin-bottom:14px; font-size:14px; color:var(--text-secondary); text-decoration:none;}
.narrow .back:hover{color:var(--text); text-decoration:underline;}
.narrow > h1{font-size:clamp(26px,5vw,32px); line-height:1.15; letter-spacing:-.02em;}
.narrow > .lead{margin:8px 0 20px; color:var(--text-secondary); font-size:15px;}
.sum-card{margin-bottom:20px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-md); overflow:hidden;}
.sum-toggle{width:100%; display:flex; align-items:center; gap:10px; padding:16px 18px; border:none; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer;}
.sum-toggle .t-name{flex:1; min-width:0;}
.sum-toggle .t-name small{display:block; font-size:12px; color:var(--text-muted);}
.sum-toggle .t-name strong{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;}
.sum-toggle .t-total{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; white-space:nowrap;}
.sum-body{padding:4px 18px 16px; border-top:1px solid var(--border);}
.sum-body:not([hidden]){animation:slideDown 250ms ease-out;}
.form-card{padding:22px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface);}
.form-card h2{font-size:16px; margin:0 0 14px;}
.form-card h2 + .ff{margin-top:0;}
.form-card .sub-head{margin-top:22px;}
.ff{position:relative; margin-bottom:14px;}
.ff input, .ff select{width:100%; height:58px; padding:24px 14px 8px; border:1.5px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:16px; appearance:none; -webkit-appearance:none;}
.ff select{background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%); background-position:calc(100% - 20px) 27px, calc(100% - 15px) 27px; background-size:5px 5px; background-repeat:no-repeat; padding-right:34px;}
.ff label{position:absolute; left:15px; top:18px; font-size:16px; color:var(--text-muted); pointer-events:none; transform-origin:left top; transition:transform 200ms ease, color 200ms ease; white-space:nowrap;}
.ff input:focus + label, .ff input:not(:placeholder-shown) + label, .ff.always label{transform:translateY(-11px) scale(.75);}
.ff input:focus + label, .ff select:focus + label{color:var(--accent);}
.ff input:focus, .ff select:focus{border-color:var(--accent);}
.ff.valid input{border-color:var(--success);}
.ff.invalid input, .ff.invalid select{border-color:var(--attention);}
.ff.invalid label{color:var(--attention);}
.ff-error{margin-top:6px; font-size:12px; color:var(--attention);}
.ff-error:empty{display:none;}
.ff-error:not(:empty){animation:slideDown 200ms ease-out;}
.ff-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 10px;}
@media (max-width:400px){.ff-row{grid-template-columns:1fr 1fr;} .ff-row .ff:last-child{grid-column:1/-1;}}
.form-error{margin:0 0 12px; font-size:14px; color:var(--attention);}
.form-error:empty{display:none;}
.btn-submit{width:100%; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; padding:16px; font-size:16px; font-weight:700; border-radius:8px;}
body.site .btn-submit:hover{transform:translateY(-2px);}
.btn-submit[disabled]{opacity:.85; cursor:progress; transform:none !important;}
.spinner{width:18px; height:18px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite;}
.fine-print{margin:10px 0 0; font-size:12px; text-align:center; color:var(--text-muted);}
.trust{display:flex; justify-content:center; flex-wrap:wrap; gap:10px 20px; margin-top:22px; font-size:12px; color:var(--text-muted);}
.trust span{display:inline-flex; align-items:center; gap:6px;}
.success{position:relative; overflow:hidden; text-align:center; padding:36px 24px 30px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-md); animation:scaleIn 400ms ease-out both;}
.check-anim{width:76px; height:76px; margin:0 auto 14px; color:var(--success);}
.check-anim circle{stroke-dasharray:227; stroke-dashoffset:227; animation:checkDraw 600ms ease-out forwards;}
.check-anim path{stroke-dasharray:48; stroke-dashoffset:48; animation:checkDraw 350ms 550ms ease-out forwards;}
.success h1{font-size:28px;}
.success .lead{margin:6px 0 0; color:var(--text-secondary);}
.code-box{display:inline-flex; align-items:center; gap:12px; margin:18px auto 6px; padding:10px 10px 10px 18px; border-radius:10px; background:var(--accent-soft);}
.code-box code{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:26px; letter-spacing:.05em; color:var(--text); user-select:all;}
.copy-btn{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--accent); border-radius:var(--r-md); background:var(--surface); color:var(--accent); font:inherit; font-size:13px; font-weight:600; cursor:pointer;}
.copy-btn:hover{transform:scale(1.03);}
.success .small{font-size:13px; color:var(--text-muted);}
.success-total{max-width:320px; margin:18px auto 0; text-align:left;}
.success .cta-row{justify-content:center; margin-top:22px;}
.confetti span{position:absolute; bottom:45%; width:8px; height:8px; border-radius:50%; opacity:0; animation:floatUp 1.6s ease-out forwards; pointer-events:none;}
.confetti span:nth-child(1){left:18%; background:var(--cta); animation-delay:.5s;}
.confetti span:nth-child(2){left:30%; background:var(--success); animation-delay:.65s; width:6px; height:6px;}
.confetti span:nth-child(3){left:70%; background:var(--accent); animation-delay:.55s;}
.confetti span:nth-child(4){left:82%; background:var(--amber); animation-delay:.75s; width:6px; height:6px;}
.confetti span:nth-child(5){left:52%; background:var(--attention); animation-delay:.85s; width:5px; height:5px;}

/* ---------- Tracking ---------- */
.track-card{max-width:480px; margin:8px auto 0; padding:28px 24px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-md);}
.track-card h1{font-size:28px; text-align:center;}
.track-card .lead{margin:8px 0 22px; text-align:center; font-size:14px; color:var(--text-secondary);}
.ff.big input{font-size:20px; letter-spacing:.06em; text-transform:uppercase;}
.ff.big input:placeholder-shown{text-transform:none;}
.track-results{max-width:720px; margin:28px auto 0; scroll-margin-top:calc(var(--nav-h) + 16px);}
.status-card{padding:24px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); animation:fadeInUp 400ms ease-out both;}
.status-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:24px;}
.status-head h2{font-size:22px; line-height:1.2;}
.tstepper{display:flex; list-style:none; margin:0; padding:0;}
.tstep{flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font-size:13px; color:var(--text-muted);}
.tstep::after{content:''; position:absolute; top:11px; left:50%; width:100%; height:2px; background:var(--border-strong);}
.tstep:last-child::after{display:none;}
.tstep.done::after{background:var(--success);}
.tstep.current::after{background:linear-gradient(90deg,var(--accent),var(--border-strong));}
.tstep .node{position:relative; z-index:1; width:24px; height:24px; border-radius:50%; border:2px solid var(--border-strong); background:var(--surface); display:flex; align-items:center; justify-content:center; color:#fff;}
.tstep.done{color:var(--text-secondary);}
.tstep.done .node{background:var(--success); border-color:var(--success);}
.tstep.current{color:var(--text); font-weight:600;}
.tstep.current .node{background:var(--accent); border-color:var(--accent); animation:pulse 1.8s ease-in-out infinite;}
.tstep.current .node::before{content:''; position:absolute; inset:-2px; border-radius:50%; background:var(--accent); z-index:-1; animation:haloPulse 1.8s ease-out infinite;}
.tstep .node .ic{width:14px; height:14px; color:#fff;}
@media (max-width:600px){
  .tstepper{flex-direction:column;}
  .tstep{flex-direction:row; align-items:flex-start; gap:12px; text-align:left; padding-bottom:20px; line-height:24px;}
  .tstep:last-child{padding-bottom:0;}
  .tstep::after{top:24px; left:11px; width:2px; height:calc(100% - 24px);}
  .tstep.current::after{background:linear-gradient(180deg,var(--accent),var(--border-strong));}
}
.details{margin:24px 0 0; border-top:1px solid var(--border);}
.drow{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); font-size:14px;}
.drow dt{color:var(--text-secondary);}
.drow dd{margin:0; font-weight:600; text-align:right;}
.drow ul{list-style:none; margin:0; padding:0; font-weight:500;}
.drow ul li + li{margin-top:4px;}
.track-results .note{margin-top:16px;}

/* ---------- Configurator: choose how to share changes ---------- */
.path-heading{font-size:clamp(22px,3.5vw,28px); line-height:1.25; margin:4px 0 18px;}
.path-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:16px; align-items:stretch;}
@media (max-width:720px){.path-grid{grid-template-columns:1fr;}}
.path-card{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:24px 22px; border:1.5px solid var(--border-strong); border-radius:var(--r-lg); background:var(--surface); color:inherit; font:inherit; text-align:left; cursor:pointer; transition:transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;}
.path-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.path-call{padding:30px 26px 26px; border:2px solid var(--accent); background:linear-gradient(160deg,var(--surface) 0%,var(--accent-soft) 140%); box-shadow:var(--shadow-md);}
.path-self:hover{border-color:var(--accent);}
.path-badge{position:absolute; top:-12px; left:22px; padding:4px 12px; border-radius:999px; background:var(--success); color:var(--surface); font-size:12px; font-weight:600;}
.path-icon{width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent);}
.path-call .path-icon{width:56px; height:56px; background:var(--accent); color:var(--surface);}
.path-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; line-height:1.25;}
.path-call .path-title{font-size:23px;}
.path-sub{font-size:14px; line-height:1.55; color:var(--text-secondary);}
.path-go{margin-top:auto; padding-top:6px; font-size:14px; font-weight:600; color:var(--accent);}
.path-call .path-go{display:inline-flex; gap:6px; padding:10px 18px; border-radius:var(--r-md); background:var(--cta); color:var(--cta-text);}
.path-go .arrow{display:inline-block; transition:transform 200ms ease;}
.path-note{display:flex; align-items:center; justify-content:center; gap:8px; margin:16px 0 0; padding:12px; border-radius:8px; background:var(--success-soft); color:var(--success); font-size:14px; font-weight:500; text-align:center;}
.path-note .ic{flex:none;}
.path-card:hover .path-go .arrow{transform:translateX(4px);}
.back-opt{display:inline-block; margin:0 0 16px; padding:0; border:none; background:none; font:inherit; font-size:14px; font-weight:600; color:var(--accent); cursor:pointer;}
.back-opt:hover{text-decoration:underline;}
.back-opt span{font-weight:400; color:var(--text-secondary);}
.call-wrap{max-width:480px; margin:0 auto;}
.call-head{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.call-head .ic-wrap, .call-success-ic .ic-wrap{flex:none; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent);}
.call-head h2{margin:0; font-size:20px;}
.call-head p{margin:2px 0 0; font-size:14px; color:var(--text-secondary);}
.ff-area{margin-bottom:14px;}
.ff-area label{display:block; margin-bottom:6px; font-size:14px; font-weight:500;}
.ff-area label span{font-weight:400; color:var(--text-muted);}
.ff-area textarea{width:100%; min-height:88px; padding:12px 14px; border:1.5px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:15px; resize:vertical;}
.ff-area textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.call-success-ic{position:relative; width:76px; height:76px; margin:0 auto 16px;}
.call-success-ic .ic-wrap{width:76px; height:76px;}
.call-success-ic .ic-wrap .ic{width:32px; height:32px;}
.call-success-ic .check-anim{position:absolute; right:-6px; bottom:-6px; width:34px; height:34px; margin:0; padding:3px; border-radius:50%; background:var(--surface);}
.call-success .lead{margin:10px 0 0; font-size:16px; color:var(--text);}
.call-success .lead strong{white-space:nowrap;}
.call-success .small{margin-top:14px;}

@media (prefers-reduced-motion: reduce){
  body.site *, body.site *::before, body.site *::after{animation-duration:1ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:1ms !important;}
}

/* Real preview images (from design files) instead of the sketches */
.dcard-art.photo{padding:0; aspect-ratio:4/3; background:var(--surface-2);}
.dcard-art.photo img, .art-card.photo img{display:block; width:100%; height:100%; object-fit:cover;}
.art-card.photo img{height:auto; border-radius:8px; background:var(--surface);}
.dcard-code{margin-top:-6px; font-size:12px; letter-spacing:.03em; color:var(--text-muted); font-variant-numeric:tabular-nums;}

/* ---- Browse: one "Find designs for your plot" block ---- */
.plot-fields.two{grid-template-columns:repeat(2,minmax(0,170px));}
@media (max-width:560px){.plot-fields.two{grid-template-columns:1fr 1fr;} .plot-fields.two .field:last-child{grid-column:auto;}}
.finder .filters.in-card{margin-top:18px; padding-top:16px; border-top:1px solid var(--border);}
.results-bar{flex-wrap:wrap;}
.sort-by{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-secondary); white-space:nowrap;}
.sort-by select{font:inherit; font-size:14px; padding:7px 30px 7px 10px; border:1px solid var(--border-strong); border-radius:8px; background-color:var(--surface); color:var(--text); cursor:pointer;}
.sort-by select:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.results-right{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end;}
@media (max-width:560px){.results-bar{align-items:flex-start;} .results-right{justify-content:flex-start;}}

/* Design page h1: name, then the plan in words (for search engines and people) */
.pdp-title h1 .h1-sub{display:block; margin-top:6px; font-size:.5em; font-weight:500; line-height:1.35; letter-spacing:0; color:var(--text-secondary);}

/* Browse cards: "Starts at" label before the price */
.dprice .dprice-from{display:block; margin-bottom:1px; font-family:Inter,system-ui,sans-serif; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted);}

/* ---- The Planzaa logo (includes/logo.php): the logo image, 40px high (32px on phones) ---- */
:root{--pz-gold-text:#7a5f17;}
[data-mode="dark"]{--pz-gold-text:#d9bc62;}
@media (prefers-color-scheme: dark){:root:not([data-mode]){--pz-gold-text:#d9bc62;}}
.pz-logo{display:inline-flex; align-items:center; gap:9px; color:var(--text); text-decoration:none; flex:none; line-height:1;}
.pz-logo picture{display:contents;}
.pz-logo-img{display:block; height:56px; width:auto; max-width:none; background:transparent; border:0;} /* transparent PNG, about 160px wide at this height */
.pz-logo-img[hidden], .pz-logo-fallback[hidden]{display:none;}
.pz-logo-fallback{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:21px; letter-spacing:.08em;} /* until the image is uploaded */
.pz-logo.on-dark .pz-logo-fallback{color:#fff;}
@media (max-width:767px){ .pz-logo-img{height:40px;} .pz-logo-fallback{font-size:19px;} }
.site-nav .pz-logo{margin-right:20px;}
.pz-logo-label{margin-left:4px; padding-left:10px; border-left:1px solid var(--border-strong); font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:500; color:var(--text-secondary);}
.topbar .pz-logo, .reg-head .pz-logo{margin:0 auto;}
.reg-head .pz-logo{margin-bottom:8px;}
header.quote-brand{align-items:center;}

/* ---- Browse page: the three lines under the heading ---- */
.hero .brand-lines{max-width:none; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 10px; margin:12px 0 0; font-size:14px; font-weight:500; color:var(--pz-gold-text); text-align:center;}
.brand-lines .arrow{color:var(--text-muted); font-weight:400;}
@media (max-width:560px){
  .hero .brand-lines{flex-direction:column; gap:0; line-height:1.35;}
  .brand-lines .arrow{transform:rotate(90deg); line-height:1; font-size:12px;}
}

/* ---- Design page: building safety drawings, one compact card (switch on top, details folded) ---- */
.ic-why{color:var(--accent);}
.safety-section{padding:12px 16px; transition:border-color 200ms ease, box-shadow 200ms ease;}
.safety-section.on{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.safety-details{margin:4px 0 0 56px;}
.safety-details > summary{display:inline-flex; align-items:center; gap:6px; min-height:28px; cursor:pointer; list-style:none; font-size:13px; font-weight:600; color:var(--accent);}
.safety-details > summary::-webkit-details-marker{display:none;}
.safety-details > summary:hover{text-decoration:underline;}
.safety-details[open] > summary .chev{transform:rotate(180deg);}
.safety-detail-content{margin-top:8px; padding-top:12px; border-top:1px dashed var(--border-strong); animation:fadeInUp 300ms ease-out;}
.safety-detail-content .icon-list{gap:7px;}
.safety-detail-content .icon-list li{font-size:13px; line-height:1.5; color:var(--text-secondary);}
.safety-detail-content .icon-list strong{color:var(--text); font-weight:600;}
.safety-art{margin:12px 0 0; color:var(--accent); opacity:.75; max-width:240px;}
.safety-art svg{display:block; width:100%; height:auto;}
.safety-note{margin:10px 0 0; font-size:13px; color:var(--text-secondary);}
.toggle-title .nobr{white-space:nowrap;}
@media (max-width:480px){ .safety-details{margin-left:0;} }

/* ---- Design page: reminder before leaving without building safety drawings ---- */
html.modal-open{overflow:hidden;}
.safety-modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(20,16,10,.55); opacity:0; transition:opacity 200ms ease-out;}
.safety-modal[hidden]{display:none;}
.safety-modal.show{opacity:1;}
.safety-modal-card{width:100%; max-width:440px; max-height:calc(100vh - 32px); overflow-y:auto; padding:24px; border-radius:12px;
  background:#fff; color:#241F17; box-shadow:0 24px 60px rgba(0,0,0,.28); text-align:left;
  transform:translateY(20px); transition:transform 200ms ease-out;}
[data-mode="dark"] .safety-modal-card{background:var(--surface); color:var(--text);}
@media (prefers-color-scheme: dark){:root:not([data-mode]) .safety-modal-card{background:var(--surface); color:var(--text);}}
.safety-modal.show .safety-modal-card{transform:translateY(0);}
.safety-modal-icon{display:block; width:32px; height:32px; color:var(--amber); margin-bottom:10px;}
.safety-modal-card h2{font-size:19px; line-height:1.3; margin:0 0 10px; color:inherit;}
.safety-modal-card p{margin:0 0 6px; font-size:14px; color:var(--text-secondary);}
.safety-modal-card ul{margin:0 0 20px; padding-left:20px; font-size:14px; line-height:1.5; color:var(--text-secondary);}
.safety-modal-card li{margin:4px 0;}
.safety-modal-card li::marker{color:var(--amber);}
.safety-modal-add{display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:12px 18px; border:0; border-radius:var(--r-md);
  background:#c8a84e; color:#241F17; font:inherit; font-size:15px; font-weight:600; cursor:pointer;}
.safety-modal-add:hover{box-shadow:0 8px 20px rgba(200,168,78,.35);}
.safety-modal-skip{display:block; margin:12px auto 0; padding:8px 12px; min-height:36px; border:0; background:none; font:inherit; font-size:13px;
  color:var(--text-muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.safety-modal-skip:hover{color:var(--text-secondary);}
@media (prefers-reduced-motion: reduce){ .safety-modal, .safety-modal-card{transition:none;} }

/* ---- Coupons ("Have a coupon?") — order form, customise sidebar, the team's forms ---- */
.coupon-box{margin:14px 0; padding:12px 14px; border:1px dashed var(--border-strong); border-radius:var(--r-md, 8px); background:var(--surface);}
.coupon-box.applied{border-style:solid; border-color:var(--success); background:var(--success-soft);}
.coupon-label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text);}
.coupon-row{display:flex; gap:8px;}
.coupon-row input{flex:1; min-width:0; min-height:40px; padding:8px 10px; font:inherit; font-size:14px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--border-strong); border-radius:var(--r-md, 8px); background:var(--surface); color:var(--text);}
.coupon-row .btn{flex:none; min-height:40px;}
.coupon-msg{margin:6px 0 0; font-size:13px; min-height:0;}
.coupon-msg:empty{display:none;}
.coupon-msg.ok{color:var(--success); font-weight:600;}
.coupon-msg.err{color:var(--attention);}
.sum-line.coupon-line span:last-child{color:var(--success); font-weight:600;}
.link-btn{border:0; background:none; padding:0 0 0 6px; font:inherit; font-size:12px; color:var(--accent); text-decoration:underline; cursor:pointer;}

/* ---- Payment plan for the customer (quotation, payment, tracking and download pages) ---- */
.ms-plan{margin:18px 0 0;}
.ms-plan h2, .ms-plan h3{font-size:17px; margin:0 0 10px;}
.ms-list{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.ms-list li{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-md, 8px); background:var(--surface);}
.ms-list li.ms-paid{background:var(--success-soft); border-color:transparent;}
.ms-list li.ms-now{border:2px solid var(--success);}
.ms-icon{flex:none; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:12px; color:var(--text-muted);}
.ms-paid .ms-icon{background:var(--success); color:#fff;}
.ms-now .ms-icon{color:#2F5F8A; font-size:16px;}
.ms-what{flex:1; min-width:160px; font-size:14px;}
.ms-what small{display:block; color:var(--text-muted); font-size:12px;}
.ms-when{font-size:13px; color:var(--text-muted);}
.ms-when.ok{color:var(--success); font-weight:600;}
.ms-when.due{color:var(--attention); font-weight:600;}
.ms-pay{width:auto !important; min-height:44px !important; padding:10px 18px !important; border:0; border-radius:8px; background:var(--cta); color:var(--cta-text); font:inherit; font-size:15px !important; font-weight:700; cursor:pointer;}
.ms-pay:hover{filter:brightness(1.08);}
.ms-pay:disabled{opacity:.7; cursor:wait;}
@media (max-width:560px){ .ms-pay{width:100% !important;} }
.ms-sum{margin:12px 0 4px; font-size:14px;}
.ms-progress{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--text-secondary);}
.ms-bar{flex:1; min-width:140px; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden;}
.ms-bar i{display:block; height:100%; border-radius:inherit; background:var(--success);}
.ms-msg{flex-basis:100%; margin:4px 0 0; font-size:13px; color:var(--attention); font-weight:600;}
.ms-bank{margin-top:14px; padding:12px 14px; border-radius:var(--r-md, 8px); background:var(--surface-2); font-size:14px;}
.ms-bank-in p{margin:0 0 6px;}
.ms-plan .manual-payment-option{margin-top:12px;}
.dl-locked{padding:12px 14px; border-radius:var(--r-md, 8px); background:#F6E7CF; color:#7a5212; font-weight:600;}
.pay-next{padding:12px 14px; border-radius:var(--r-md, 8px); background:var(--surface-2);}
.track-plan{margin:14px 0; padding:14px; border:1px solid var(--border); border-radius:var(--r-lg, 12px);}
/* The part due now on the tracking page: one big gold "Pay ₹X now" button (Razorpay opens on the page). */
.pay-due{margin:14px 0; padding:16px; border:2px solid var(--cta); border-radius:var(--r-lg, 12px); background:var(--cta-soft);}
.pay-due-head{display:flex; flex-direction:column; gap:2px; margin-bottom:12px;}
.pay-due-amt{font-family:'Space Grotesk',sans-serif; font-size:clamp(28px,7vw,36px); line-height:1.1; letter-spacing:-.02em;}
.pay-due .btn-pay-primary{width:100%; min-height:56px; padding:14px 16px; border:0; border-radius:10px; background:var(--cta); color:var(--cta-text); font:inherit; font-size:18px; font-weight:700; cursor:pointer; box-shadow:0 6px 18px rgba(185,110,36,.25);}
.pay-due .btn-pay-primary:hover{filter:brightness(1.08);}
.pay-due .btn-pay-primary:disabled{opacity:.7; cursor:wait;}
.pay-due .payment-powered{margin:8px 0 0; font-size:12px; color:var(--text-muted); text-align:center;}
.pay-due .manual-payment-option{margin-top:12px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface);}
.pay-due .manual-payment-option > summary{cursor:pointer; font-weight:600; color:var(--accent);}
.pay-due .ms-bank{margin-top:0; background:var(--surface);}
.note-ok{background:var(--success-soft); border-color:var(--success);}
.note-ok .ic{color:var(--success);}
.quote-prices tr.coupon-line td{color:var(--success); font-weight:600;}
.coupon-row input::placeholder{text-transform:none; letter-spacing:0;}