/* Self-hosted, not @import from fonts.googleapis.com: the sitewide CSP
   (apps.core.middleware.ContentSecurityPolicyMiddleware — font-src 'self',
   no CDN exceptions anywhere in this codebase) blocks the cross-origin
   @import once this page is served through Django instead of as a
   static file with no policy applied. Same pattern already established
   in static/css/register.css for Newsreader/Source Sans 3/IBM Plex Mono
   — see that file's own comment. Playfair Display ships as a single
   variable-font file per unicode range (400–800 weight all live in the
   same file — Google's own /css2 response repeats the identical URL for
   every weight value, this isn't several near-duplicate downloads).
   latin-ext included alongside latin for accented client/case names
   (e.g. "Müller") — cyrillic/vietnamese subsets dropped, unused here. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 800;
  src: url("../fonts/homepage/playfair-display-latin.ef05b30d6e5c.woff2") format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 800;
  src: url("../fonts/homepage/playfair-display-latin-ext.319e6b2aad48.woff2") format('woff2');
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --ink:#eeedeb;
  --ink-raised:#e2e0dd;
  --ink-line: rgba(52,65,75,0.11);
  --ink-line-strong: rgba(52,65,75,0.22);
  --paper:#34414b;
  --paper-dim:#546878;
  --paper-faint:#778fa1;
  --accent:#34414b;
  --accent-soft: rgba(52,65,75,0.10);
  --accent-ink:#f6f8f9;

  --display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", serif;
  --body: "Playfair Display", "Iowan Old Style", "Palatino Linotype", serif;
  --mono: "Playfair Display", "Iowan Old Style", "Palatino Linotype", serif;

  --wide: 1080px;
}

*{ box-sizing:border-box; }
p, ul, ol, dl{ margin:0; }
html{ background:var(--ink); overflow-x:hidden; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.hero-viewport{
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh;
}

::selection{ background:var(--accent); color:var(--accent-ink); }

a{ color:var(--paper); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

h1,h2,h3{ font-family:var(--display); font-weight:700; color:var(--paper); margin:0; text-wrap:balance; }

.eyebrow{
  margin:0;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--accent);
  display:inline-block;
}

.wrap{ max-width:var(--wide); margin:0 auto; padding:0 32px; }
hr{ border:none; border-top:1px solid var(--ink-line); margin:32px 0; }

section{ padding:96px 0; border-bottom:1px solid var(--ink-line); }
#instruct{ padding-bottom:64px; }
section:last-of-type{ border-bottom:none; }

/* ---------- Announcement bar ---------- */
.announce-bar{
  background:var(--paper); color:var(--accent-ink);
  padding:10px 32px;
}
.announce-bar .wrap{
  display:flex; align-items:baseline; justify-content:center; gap:10px;
  flex-wrap:wrap; text-align:center;
}
.announce-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent-ink); opacity:0.7;
  flex:none;
}
.announce-text{
  font-family:var(--body); font-size:13px; letter-spacing:0.01em;
  color:var(--accent-ink);
}

/* ---------- Nav ---------- */
header.site{
  position:sticky; top:0; z-index:20;
  background:rgba(238,237,235,0.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--ink-line);
}
.nav{
  display:flex; flex-wrap:wrap; row-gap:10px; align-items:center; justify-content:space-between;
  padding:10px 32px;
  max-width:var(--wide); margin:0 auto;
}
.brand{
  display:flex; align-items:center;
}
.brand img{
  display:block;
  height:30px;
  width:auto;
}
.nav-links{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-end; }
.nav-links a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em;
  text-transform:uppercase; text-decoration:none; color:var(--paper-dim);
  transition:color .15s ease;
}
.nav-links a:hover{ color:var(--paper); }
.nav-cta{
  border:1px solid var(--accent); color:var(--accent) !important;
  padding:8px 16px; border-radius:2px;
}
.nav-cta .cta-short{ display:none; }
.nav-cta:hover{ background:var(--accent-soft); color:var(--paper) !important; }

/* ---------- Hero ---------- */
.hero{
  flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:center;
  padding:88px 0;
  position:relative;
  background-image: repeating-linear-gradient(180deg, rgba(52,65,75,0.045) 0px, rgba(52,65,75,0.045) 1px, transparent 1px, transparent 48px);
}
.flag{
  width:34px; height:17px; flex:none; display:block;
}
.hero-crest{ margin-bottom:26px; }
.hero-flag{
  width:46px; height:auto; aspect-ratio:2/1;
}
.hero h1{
  font-size:clamp(34px, 5vw, 54px);
  line-height:1.12;
  max-width:22ch;
  font-weight:700;
}
/* ---------- Instruct ---------- */
.instruct-grid{
  display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:start;
}
.instruct-grid > div{ min-width:0; }
/* Named classes, not :first-child/:last-child — the two <dialog> modals
   are also direct children of .instruct-grid (inert, since they're
   display:none until opened) and would otherwise throw off which div
   those pseudo-classes actually match. Services first/left, Self-Serve
   second/right, at every breakpoint — same order on mobile keeps the
   primary conversion path (Instruct) above the self-serve alternatives. */
.instruct-col-services{ order:1; }
.instruct-col-self-serve{ order:2; }
#instruct-form, #corporate-form{ margin-top:20px; }
fieldset{ border:none; margin:0; padding:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field-row[hidden]{ display:none; }
.field{ margin-bottom:18px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.field[hidden]{ display:none; }
label{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--paper-dim);
}
input, select, textarea{
  background:var(--ink-raised);
  border:1px solid var(--ink-line-strong);
  color:var(--paper);
  font-family:var(--body);
  font-size:14.5px;
  padding:11px 12px;
  border-radius:2px;
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
input[type="date"]{
  -webkit-appearance:none;
  appearance:none;
  min-width:0;
  max-width:100%;
}
input::placeholder, textarea::placeholder{ color:var(--paper-faint); }
textarea{ resize:vertical; min-height:72px; font-family:var(--body); }
select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
option{ font-family:var(--body); background:var(--ink-raised); color:var(--paper); }

.submit-btn{
  font-family:var(--mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  background:var(--accent); color:var(--accent-ink); border:none;
  padding:15px 26px; cursor:pointer; width:100%; border-radius:2px;
  transition:background .15s ease;
}
.submit-btn:hover{ background:#232c33; }
.submit-fallback{ margin:12px 0 0; text-align:center; font-size:12.5px; color:var(--paper-faint); }
.submit-fallback a{ color:var(--accent); text-decoration:none; }
.submit-fallback a:hover{ text-decoration:underline; }
.submit-confirmation{
  margin-top:16px; padding:16px 18px; background:var(--accent); color:var(--accent-ink);
  font-size:13.5px; line-height:1.6; border-radius:2px;
}
.submit-confirmation strong{ font-family:var(--mono); letter-spacing:0.04em; }

.back-to-top{
  position:fixed; bottom:18px; right:18px; z-index:1000;
  width:30px; height:30px; border-radius:2px;
  border:1px solid var(--accent); background:var(--ink-raised); color:var(--accent);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,0.12);
  opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s, background .15s ease, color .15s ease;
}
.back-to-top:hover{ background:var(--accent-soft); color:var(--paper); }
.back-to-top.visible{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s, background .15s ease, color .15s ease;
}

.quote-table-wrap{ margin-top:20px; overflow-x:auto; border:1px solid var(--ink-line-strong); }
table.pricing{ border-collapse:collapse; width:100%; font-size:13.5px; }
table.pricing th, table.pricing td{
  padding:13px 16px; text-align:left; border-bottom:1px solid var(--ink-line);
  font-variant-numeric:tabular-nums;
}
table.pricing tbody th{ font-weight:500; color:var(--paper); text-align:left; }
table.pricing td{ color:var(--paper-dim); font-family:var(--mono); }
table.pricing tbody tr:last-child td, table.pricing tbody tr:last-child th{ border-bottom:none; }
tr.category-row td{
  background:var(--ink-raised); border-bottom:1px solid var(--ink-line-strong);
  padding:10px 12px 10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.cat-label{
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  font-weight:500; color:var(--paper);
}
.instruct-btn{
  all:unset; box-sizing:border-box; cursor:pointer; flex-shrink:0;
  border:1px solid var(--accent); color:var(--accent);
  padding:6px 14px; border-radius:2px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
  transition:background .15s ease, color .15s ease;
}
.instruct-btn:hover, .instruct-btn:focus-visible{ background:var(--accent-soft); color:var(--paper); }
.row-toggle{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--paper); font-weight:500;
}
.row-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.row-toggle .chevron{
  font-family:var(--mono); font-size:13px; line-height:1; color:var(--accent);
  display:inline-block; width:1ch; text-align:center;
}
tr.detail-row td{
  background:var(--ink-raised); color:var(--paper-dim); font-family:var(--body);
  font-size:13px; line-height:1.65; padding:16px 16px 20px; font-variant-numeric:normal;
}
tr.detail-row[hidden]{ display:none; }
.pricing-foot{ margin-top:14px; color:var(--paper-faint); font-size:13px; line-height:1.6; }
.self-serve-crosspromo{
  margin-top:20px; padding:18px;
  border:1px solid var(--ink-line-strong); border-radius:2px; background:var(--ink-raised);
  display:flex; flex-direction:column; align-items:stretch; gap:12px;
}
.self-serve-crosspromo p{ margin:0; font-size:13.5px; color:var(--paper-dim); line-height:1.5; }
.self-serve-crosspromo strong{ color:var(--paper); }
.self-serve-crosspromo .nav-cta{
  display:block; width:100%; box-sizing:border-box; text-align:center; padding:12px 18px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
  text-decoration:none;
}
.self-serve-crosspromo hr{ margin:0; border-top:1px solid var(--ink-line); }

/* ---------- Instruct modals ---------- */
.instruct-modal{
  border:1px solid var(--ink-line-strong); border-radius:3px; padding:0;
  background:var(--ink); color:var(--paper);
  width:min(720px, calc(100vw - 40px));
  max-height:calc(100vh - 64px);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
}
.instruct-modal::backdrop{ background:rgba(20,24,27,0.55); backdrop-filter:blur(2px); }
.instruct-modal-inner{ padding:32px 32px 36px; overflow-y:auto; max-height:calc(100vh - 64px); }
.modal-close{
  all:unset; box-sizing:border-box; cursor:pointer; float:right;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--ink-line-strong); border-radius:2px; color:var(--paper-dim);
  font-size:16px; line-height:1; transition:color .15s ease, background .15s ease;
}
.modal-close:hover, .modal-close:focus-visible{ background:var(--accent-soft); color:var(--paper); }
.instruct-modal .eyebrow{ margin-bottom:4px; }

@media (max-width:640px){
  .instruct-modal-inner{ padding:24px 20px 28px; }
}

/* ---------- Footer ---------- */
.footer-copyright{
  margin:10px 0 0; text-align:center;
  font-family:var(--mono); font-size:11.5px; color:var(--paper-faint);
}
.legal-notices .legal-notice-text{
  margin:0; color:var(--paper-faint); font-size:11.5px; line-height:1.7;
  max-width:none; text-align:center;
}
.site-footer{
  padding:32px 0; border-top:1px solid var(--ink-line);
}

/* ---------- Shared public-page content blocks (secure upload, delivery
   decision, invoice, quote signing) reuse these on top of the tokens/
   layout above — see templates/base_homepage_public.html. ---------- */
.page-panel{
  border:1px solid var(--ink-line-strong); border-radius:3px; background:var(--ink-raised);
  padding:32px; margin-top:28px;
}
.page-panel + .page-panel{ margin-top:20px; }
.page-status{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  padding:6px 12px; border-radius:2px; border:1px solid var(--accent); color:var(--accent);
}
.page-status.is-done{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.page-status.is-muted{ border-color:var(--ink-line-strong); color:var(--paper-faint); }
.page-status.is-danger{ background:#c0132c; color:#fff; border-color:#c0132c; }
.page-file-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.page-file-list li{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px; border:1px solid var(--ink-line-strong); border-radius:2px; background:var(--ink);
}
.page-file-list a{ color:var(--accent); text-decoration:none; font-weight:500; }
.page-file-list a:hover{ text-decoration:underline; }
.page-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.page-btn{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
  padding:12px 22px; border-radius:2px; border:1px solid var(--accent); background:transparent;
  color:var(--accent); cursor:pointer; text-decoration:none; display:inline-block;
}
.page-btn:hover{ background:var(--accent-soft); }
.page-btn-primary{ background:var(--accent); color:var(--accent-ink); }
.page-btn-primary:hover{ background:#232c33; }

@media (max-width: 860px){
  .brand img{ height:17px; }
  .nav-links{ gap:4px; }
  .nav-cta{ padding:3px 6px; font-size:8.5px; }
  .nav-cta .cta-full{ display:none; }
  .nav-cta .cta-short{ display:inline; }
  section{ padding:64px 0; }
  .instruct-grid{ grid-template-columns:1fr; gap:40px; }
  .field-row{ grid-template-columns:1fr; }
  .wrap{ padding:0 20px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}