/* ElevateDrawings.com — shared styles for the public pages.
   The app itself (door_elevation_builder.html) is single-file and does not use
   this sheet.

   The ground is the same navy the app's dark canvas uses, so the site and the
   tool are visibly the same object. Drawings are shown in the app's own dark
   mode — white linework on navy — rather than pasted in as pictures on cards. */

@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo Narrow';src:url('fonts/archivo-narrow-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo Narrow';src:url('fonts/archivo-narrow-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --ground:#0A1628;      /* the app's dark canvas */
  --raise:#0E1D33;       /* panels lifted off the ground */
  --line:#1E3252;        /* rules and panel edges */
  --ink:#E8EDF5;         /* primary text, same as dark-mode linework */
  --dim:#9FB3CC;         /* secondary text */
  --blue:#2E6FE8;        /* actions */
  --blue-lt:#6FA8F0;     /* the dimension blue from the drawings */
  --gold:#E8A020;        /* wordmark only */
  --paper:#FFFFFF;
  --col:66ch;
  --pad:clamp(22px,5vw,64px);
  --max:1280px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}}

body{
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-size:16px; line-height:1.6;
  color:var(--ink); background:var(--ground);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}

/* ── Masthead ───────────────────────────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding-top:22px; padding-bottom:22px}
.wordmark{font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--ink); text-decoration:none}
.wordmark b{color:var(--gold)}
.masthead nav{display:flex; gap:26px; align-items:center; flex-wrap:wrap}
.masthead nav a{font-size:14.5px; color:var(--dim); text-decoration:none}
.masthead nav a:hover{color:var(--ink)}
.masthead nav a.pro{color:var(--ink); border:1px solid var(--line); padding:7px 15px; border-radius:3px}
.masthead nav a.pro:hover{border-color:var(--blue-lt); color:var(--blue-lt)}

/* ── Type ───────────────────────────────────────────────────────────────── */
h1{font-size:clamp(34px,4.6vw,54px); line-height:1.06; font-weight:700;
   letter-spacing:-.025em; max-width:17ch}
h2{font-size:clamp(25px,2.8vw,34px); line-height:1.14; font-weight:700; letter-spacing:-.02em}
h3{font-size:18px; font-weight:600; line-height:1.35}
p{max-width:var(--col)}
.lede{font-size:clamp(17px,1.5vw,19px); line-height:1.58; color:var(--dim); max-width:52ch; margin-top:20px}

/* ── Sections ───────────────────────────────────────────────────────────── */
.section{padding:clamp(54px,7vw,88px) 0; border-top:1px solid var(--line)}
.section-head{margin-bottom:34px}
.section-head p{color:var(--dim); margin-top:12px}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{padding:clamp(52px,7vw,86px) 0 0}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.btn{font-size:15.5px; font-weight:600; padding:13px 26px; border-radius:3px;
     text-decoration:none; display:inline-block; border:1px solid transparent;
     transition:background .13s ease,border-color .13s ease,color .13s ease}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{background:#4786F0}
.btn-ghost{border-color:#2B4466; color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue-lt); color:var(--blue-lt)}

/* the app screenshot, running off the bottom of the hero */
.hero-shot{margin-top:clamp(42px,6vw,66px); position:relative}
.hero-shot .frame{
  max-width:1180px; margin:0 auto; border:1px solid var(--line);
  border-bottom:0; border-radius:6px 6px 0 0; overflow:hidden;
  box-shadow:0 -1px 80px rgba(46,111,232,.2);
}
.hero-shot img{display:block; width:100%}

/* ── Three sheets ───────────────────────────────────────────────────────── */
.sheets{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,40px)}
.sheet-item .plate{
  border:1px solid var(--line); background:var(--raise); border-radius:4px;
  height:290px; display:flex; align-items:center; justify-content:center;
  padding:22px; margin-bottom:18px;
}
.sheet-item .plate svg{width:100%; height:100%; object-fit:contain}
.sheet-item h3{margin-bottom:7px}
.sheet-item p{font-size:15px; color:var(--dim); max-width:none}

/* ── Facts, set like a schedule ─────────────────────────────────────────── */
.facts{list-style:none; max-width:var(--col)}
.facts li{display:grid; grid-template-columns:9.5em 1fr; gap:0 18px;
          padding:15px 0; border-bottom:1px solid var(--line)}
.facts li:first-child{border-top:1px solid var(--line)}
.facts .k{font-family:'Archivo Narrow','Archivo',sans-serif; font-weight:700;
          color:var(--blue-lt); font-size:15px}
.facts .v{color:var(--dim)}

/* ── What prints: the one light moment on the page ──────────────────────── */
.output{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
        gap:clamp(26px,4vw,56px); align-items:center}
.output .paper{background:var(--paper); border-radius:4px; padding:10px;
               box-shadow:0 18px 50px rgba(0,0,0,.4)}
.output .paper img, .output .paper svg{display:block; width:100%; height:auto; border-radius:2px}

/* ── Pricing ────────────────────────────────────────────────────────────── */
.tiers{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.5vw,28px)}
.tier{border:1px solid var(--line); border-radius:5px; padding:clamp(24px,3vw,34px);
      display:flex; flex-direction:column}
.tier.pro{background:var(--raise); border-color:#2B4466}
.tier .name{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
            padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:20px}
.tier .name span:first-child{font-family:'Archivo Narrow','Archivo',sans-serif;
            font-weight:700; font-size:16px}
.tier .price{font-size:32px; font-weight:700; letter-spacing:-.025em}
.tier .price small{font-size:14px; font-weight:400; color:var(--dim)}
.tier .tier-sub{font-size:12.5px; color:var(--dim); margin:-12px 0 16px; max-width:none}
.tier ul{list-style:none; margin-bottom:26px; flex:1}
.tier li{padding:8px 0 8px 22px; position:relative; font-size:15px; max-width:42ch}
.tier li::before{content:""; position:absolute; left:0; top:16px; width:10px; height:1px;
                 background:var(--blue-lt)}
.tier li.off{color:#6B7C94}
.tier li.off::before{background:#2B4466}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line); padding:34px 0 46px}
.foot .wrap{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
            align-items:baseline}
.foot p, .foot nav{font-size:14px; color:#6B7C94}
.foot nav{display:flex; gap:22px; flex-wrap:wrap}
.foot a{color:#6B7C94; text-decoration:none}
.foot a:hover{color:var(--ink)}
.note{font-size:12.5px; color:#53637A; margin-top:16px; max-width:none}

/* ── Long-form pages ────────────────────────────────────────────────────── */
.doc{padding:clamp(40px,5vw,64px) 0 clamp(54px,7vw,84px); max-width:820px}
.doc h1{max-width:20ch; margin-bottom:10px}
.doc .meta{font-family:'Archivo Narrow','Archivo',sans-serif; font-size:14px;
           color:var(--dim); max-width:none; padding-bottom:20px; border-bottom:1px solid var(--line)}
.doc h2{font-size:21px; margin:38px 0 12px}
.doc h2 .num{color:var(--blue-lt); margin-right:10px}
.doc h3{font-size:17px; margin:24px 0 8px; color:var(--ink)}
.doc p,.doc li{font-size:15.5px; color:#C3D2E4}
.doc p{margin-bottom:13px}
.doc ul{margin:0 0 15px 20px}
.doc li{margin-bottom:6px; max-width:var(--col)}
.doc a{color:var(--blue-lt)}
.doc strong{color:var(--ink)}
.doc code{background:#14233C; padding:2px 6px; border-radius:2px; font-size:13.5px; color:var(--ink)}
.doc .summary{border-left:2px solid var(--blue-lt); background:var(--raise);
              padding:18px 22px; margin:26px 0 30px; border-radius:0 4px 4px 0}
.doc .summary p{margin:0; max-width:62ch}
.doc .rule-note{border-left:2px solid var(--line); padding:4px 0 4px 18px; margin:16px 0 20px;
                color:var(--dim); font-size:15px}
.doc .rule-note strong{color:var(--ink)}
.doc table{width:100%; border-collapse:collapse; margin:6px 0 22px; font-size:15px}
.doc th{font-family:'Archivo Narrow','Archivo',sans-serif; text-align:left; font-size:11.5px;
        letter-spacing:.06em; color:var(--dim); border-bottom:1px solid #2B4466;
        padding:0 14px 6px 0; font-weight:700}
.doc td{border-bottom:1px solid var(--line); padding:10px 14px 10px 0; vertical-align:top; color:#C3D2E4}
.doc td:first-child{color:var(--ink); font-weight:600}
.doc-index{margin:26px 0 10px; border-top:1px solid var(--line)}
.doc-index a{display:grid; grid-template-columns:2.2em 1fr auto; gap:0 14px; align-items:baseline;
             padding:11px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink)}
.doc-index a:hover{color:var(--blue-lt)}
.doc-index .n{font-family:'Archivo Narrow','Archivo',sans-serif; font-weight:700;
              font-size:13px; color:var(--blue-lt)}
.doc-index .t{font-size:15.5px}
.doc-index .d{font-size:13px; color:var(--dim); text-align:right}

/* ── Focus ──────────────────────────────────────────────────────────────── */
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--blue-lt); outline-offset:3px}

/* ── Narrow ─────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .sheets{grid-template-columns:1fr; gap:34px}
  .tiers{grid-template-columns:1fr}
  .output{grid-template-columns:1fr}
  .facts li{grid-template-columns:1fr; gap:4px}
}
@media (max-width:620px){
  .doc-index a{grid-template-columns:2em 1fr}
  .doc-index .d{display:none}
  .masthead nav{gap:16px}
  .hero-shot .frame{border-radius:4px 4px 0 0}
}