/* Shared chrome for pricing design variants v3/v4/v5. Layout-specific styles
   live in each page's own <style>. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* ===== Atelier theme (ported from servicerequest-webapp) =====
   Token names are kept identical to the old dark theme so every page's
   var(--blue-500) etc. re-themes automatically. The 5-color app system
   collapses to ink + a single red accent. */
:root{
  /* Atelier core */
  --paper:#f1e9da;--paper-2:#ece2cf;--paper-3:#e3d6bb;
  --ink:#1a1612;--ink-2:#3d342a;--muted:#7a6c5a;
  --rule:#c9bba1;--rule-2:#d8cdb8;
  --accent:#c0392b;--accent-2:#a32d22;--accent-soft:rgba(192,57,43,.16);

  --bg:var(--paper);--bg-surface:var(--paper-2);--bg-card:var(--paper-2);--bg-card-hover:var(--paper-3);
  --bg-base:var(--paper);
  /* Former blue ramp -> interactive = red, structural = rules/paper */
  --blue-300:#a32d22;--blue-400:#a32d22;--blue-500:#c0392b;--blue-600:#a32d22;--blue-700:#c9bba1;--blue-800:#e3d6bb;
  /* Former secondary app hues -> ink / muted (mono) */
  --purple-400:#7a6c5a;--purple-500:#3d342a;--teal-400:#7a6c5a;--teal-500:#3d342a;
  --coral-400:#a32d22;--coral-500:#c0392b;--gold-400:#7a6c5a;--gold-500:#3d342a;--green-400:#4f7233;
  --text:var(--ink);--text-base:var(--ink);--text-muted:var(--muted);--text-dim:#9a8a72;
  --border:var(--rule);--border-light:var(--rule-2);
  --radius:0px;--radius-lg:0px;
  --font-display:'Fraunces',Georgia,serif;--font-body:'Inter Tight',system-ui,-apple-system,sans-serif;--font-mono:'Inter Tight',system-ui,sans-serif;
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;min-height:100vh}
/* Noise overlay removed for the flat parchment look. */
::selection{background:var(--accent-soft);color:var(--ink)}
a{color:var(--accent);text-decoration:none}

.brand{position:fixed;top:20px;left:24px;z-index:120;display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--text)}
.brand svg{width:30px;height:30px}
.controls{position:fixed;top:20px;right:24px;z-index:120;display:flex;align-items:center;gap:12px}
.controls:empty{display:none}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;font-weight:600;font-size:.9rem;font-family:var(--font-body);border:none;cursor:pointer;transition:all .25s;text-decoration:none}
.btn-blue{background:var(--blue-500);color:#fff}
.btn-blue:hover{background:var(--blue-400);color:#fff;transform:translateY(-1px);box-shadow:0 4px 24px rgba(0,123,255,.3)}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border-light)}
.btn-ghost:hover{color:var(--blue-300);border-color:var(--blue-700);background:rgba(0,123,255,.05)}

.variant-tag{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:120;font-family:var(--font-mono);font-size:.7rem;color:var(--text-dim);background:rgba(10,10,26,.8);border:1px solid var(--border);border-radius:999px;padding:5px 14px;backdrop-filter:blur(8px)}

footer{border-top:1px solid var(--border);padding:32px 24px 64px;text-align:center;color:var(--text-dim);font-size:.8rem}

/* Demo modal (shared) */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}
.modal-overlay.open{display:flex;opacity:1}
.modal-box{width:100%;max-width:460px;margin:24px;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:36px;position:relative;box-shadow:0 32px 80px rgba(0,0,0,.5)}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.4rem;line-height:1;padding:4px 8px;border-radius:6px}
.modal-close:hover{color:var(--text);background:rgba(255,255,255,.05)}
.modal-box h2{font-family:var(--font-display);font-weight:700;font-size:1.4rem;margin-bottom:4px}
.modal-box .modal-sub{color:var(--text-muted);font-size:.9rem;margin-bottom:22px}
.modal-field{margin-bottom:16px}
.modal-field label{display:block;font-size:.82rem;font-weight:500;margin-bottom:6px;color:var(--text-muted)}
.modal-field input,.modal-field textarea{width:100%;padding:11px 13px;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--border);color:var(--text);font-family:var(--font-body);font-size:.92rem;outline:none}
.modal-field input:focus,.modal-field textarea:focus{border-color:var(--blue-500)}
.modal-field .optional{color:var(--text-dim);font-size:.78rem}
.modal-submit{width:100%;padding:13px;border-radius:999px;background:var(--blue-500);color:#fff;font-weight:700;font-size:1rem;border:none;cursor:pointer;margin-top:6px}
.modal-submit:hover{background:var(--blue-400)}
.modal-submit:disabled{opacity:.6;cursor:not-allowed}
.modal-msg{text-align:center;padding:11px;border-radius:var(--radius);font-size:.88rem;margin-top:12px;display:none}
.modal-msg.success{display:block;background:rgba(46,204,113,.1);color:#2ecc71;border:1px solid rgba(46,204,113,.2)}
.modal-msg.error{display:block;background:rgba(253,121,114,.1);color:var(--coral-400);border:1px solid rgba(253,121,114,.2)}

.brand-svg-defs{position:absolute;width:0;height:0}
@media(max-width:560px){
  .brand{font-size:0;gap:0}
  .controls{top:16px;right:16px}
  .btn{padding:9px 16px;font-size:.85rem}
}

/* ============================================================
   ATELIER OVERRIDES — flatten remaining dark/neon treatments
   on the standalone pages (dashboard, signup, legal, pricing…).
   ============================================================ */
.brand{color:var(--ink);font-family:var(--font-display);font-style:italic;font-weight:500}
.btn,.btn-blue,.btn-ghost,.modal-submit{border-radius:0!important}
.btn-blue{background:var(--accent)!important;color:#fff!important;border:1px solid var(--accent-2)!important}
.btn-blue:hover{background:var(--accent-2)!important;color:#fff!important;box-shadow:none!important;border-color:var(--ink)!important}
.btn-ghost{background:transparent!important;color:var(--ink)!important;border:1px solid var(--rule)!important}
.btn-ghost:hover{color:var(--accent)!important;border-color:var(--accent)!important;background:var(--accent-soft)!important}
.variant-tag{background:var(--paper-2)!important;border:1px solid var(--rule)!important;color:var(--muted)!important;border-radius:0!important}
/* Flatten + square the standalone page cards (drop heavy dark drop-shadows) */
.su-card,.pf-card,.bi-card,.detail{box-shadow:none!important;border-radius:0!important}
footer{border-top:1px solid var(--rule);color:var(--muted);font-family:var(--font-display);font-style:italic}

/* Demo modal -> Atelier */
.modal-box{background:var(--paper)!important;border:1px solid var(--ink)!important;border-radius:0!important;box-shadow:none!important}
.modal-overlay{background:rgba(26,22,18,.55)!important;backdrop-filter:blur(4px)}
.modal-field input,.modal-field textarea{background:var(--paper)!important;border:1px solid var(--rule)!important;color:var(--ink)!important;border-radius:0!important}
.modal-field input:focus,.modal-field textarea:focus{border-color:var(--ink)!important;box-shadow:0 0 0 2px var(--accent-soft)!important}
.modal-submit{background:var(--accent)!important;color:#fff!important}
.modal-submit:hover{background:var(--accent-2)!important}
.modal-close:hover{background:var(--paper-2)!important;color:var(--ink)!important}
.modal-msg.success{background:#e8efe2!important;color:#3a5424!important;border:1px solid #b6c9a3!important}
.modal-msg.error{background:#f5dbd6!important;color:var(--accent-2)!important;border:1px solid var(--accent)!important}