/* DocuDeal marketing site. Same warm palette and type as the product. */
/* Palette from the DocuDeal brand kit (content/brand-colors.json). ink, stone,
   violet, violet-light, white and brass are the kit's; the greys and lines are
   site-only tints derived from them.
   violet moved #6d5bd0 -> #7157b4, which also raises contrast on stone from
   4.92:1 to 5.36:1. brass is the kit's #c9a45f and is a background tint only:
   at 2.23:1 on stone it must never carry text. */
:root {
  --ink: #16151f; --ink-2: #26232a; --text: #26232a; --muted: #66615a; --faint: #716c64;
  --paper: #ffffff; --bg: #faf9f7; --bg-2: #f3f1ec; --line: #e8e4dc; --line-2: #d6d0c5;
  --violet: #7157b4; --violet-light: #8f78c8; --violet-soft: #eeebf6;
  --brass: #c9a45f; --green: #1f7a4d;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --brand: "Work Sans", var(--font);
  --radius: 14px; --shadow: 0 1px 2px rgba(22,21,31,.06), 0 12px 32px -16px rgba(22,21,31,.25);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.display { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.08; font-variation-settings: "opsz" 72, "SOFT" 30; }
.eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); }
.btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 12px 22px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; transition: transform .12s ease, background .12s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--ink-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
*:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(250,249,247,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
/* Lockup built to the kit's construction rather than by eye:
   mark height = 1.15 x wordmark cap height, gap = 0.32 x mark height, and
   Work Sans Bold has a cap height of 0.66em. --cap is the only number to tune. */
.logo { --cap: 14px; display: flex; align-items: center; text-decoration: none; white-space: nowrap;
        gap: calc(0.32 * 1.15 * var(--cap)); }
.logo svg { height: calc(1.15 * var(--cap)); width: auto; display: block; flex: 0 0 auto; overflow: visible; }
.logo-word { font-family: var(--brand); font-weight: 700; font-size: calc(var(--cap) / 0.66);
             letter-spacing: -0.035em; color: var(--ink); line-height: 1; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.header-cta { display: flex; gap: 10px; }
/* ── The Compare dropdown ──────────────────────────────────────────────
   Opens on hover and on focus, so a mouse never has to click and a keyboard
   never has to guess. config.js adds click handling for touch, where hover
   does not exist. Below 860px the header menu is a stacked list and the
   dropdown flattens into it rather than floating over the page. */
.nav-drop { position: relative; }
.nav-drop-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--muted);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.nav-drop-btn .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4.5px solid currentColor; transition: transform .18s ease; margin-top: 1px; }
.nav-drop:hover .nav-drop-btn, .nav-drop-btn[aria-expanded="true"] { color: var(--ink); }
.nav-drop:hover .nav-drop-btn .caret, .nav-drop-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 250px; background: var(--paper); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: 0 1px 2px rgba(22,21,31,.05), 0 30px 64px -30px rgba(22,21,31,.4);
  padding: 9px; display: grid; gap: 1px; opacity: 0; visibility: hidden;
  transition: opacity .17s ease, transform .17s ease, visibility .17s; }
/* A gap between button and menu would drop the hover, so bridge it. */
.nav-drop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu, .nav-drop.open .nav-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%); }
.nav-group { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
  padding: 11px 11px 5px; }
.nav-group:first-child { padding-top: 5px; }
.nav-menu a { display: block; padding: 7px 11px; border-radius: 8px; font-size: 14.5px; color: var(--text); }
.nav-menu a:hover { background: var(--violet-soft); color: var(--violet); }
.nav-all { margin-top: 7px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px;
  padding-top: 12px !important; color: var(--violet) !important; font-weight: 500; }
.nav-all:hover { background: transparent !important; }

.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; font: inherit; }

/* Hero */
.hero { padding: 68px 0 34px; }
.hero h1 { font-size: clamp(40px, 6vw, 72px); margin: 0 0 18px; max-width: 14ch; }
.hero h1 em { font-style: italic; color: var(--faint); }
.hero p.lead { font-size: 19px; color: var(--muted); max-width: 56ch; margin: 0 0 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { font-size: 13px; color: var(--faint); }
.shot { margin-top: 48px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.shot img { width: 100%; }

/* Sections */
section { padding: 58px 0; }
section.alt { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2.display { font-size: clamp(28px, 3.4vw, 38px); margin: 8px 0 12px; max-width: 24ch; }
.section-lead { font-size: 16px; color: var(--muted); max-width: 62ch; margin: 0 0 28px; }
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card h3 { margin: 10px 0 8px; font-size: 17px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.num { width: 30px; height: 30px; border-radius: 999px; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.icon { width: 30px; height: 30px; border-radius: 9px; background: var(--bg-2); display: grid; place-items: center; color: var(--ink); }
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.split .shot { margin-top: 0; }
.checks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
/* Not flex: a flex container turns every child into a flex item, so an inline
   <b> at the start of the sentence became its own column and the text wrapped
   around it. Absolute positioning keeps the tick out of the text flow. */
.checks li { position: relative; padding-left: 23px; color: var(--text); }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 700; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plan { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
.plan.featured { border-color: var(--ink); box-shadow: var(--shadow); }
.plan .price { font-family: var(--display); font-size: 40px; margin: 6px 0 0; }
.plan .price small { font-family: var(--font); font-size: 14px; color: var(--muted); }
.plan .for { color: var(--muted); font-size: 14px; margin: 4px 0 14px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; font-size: 14px; }
.plan li::before { content: "✓ "; color: var(--green); }
.plan li.no { color: var(--faint); }
.plan li.no::before { content: "– "; color: var(--line-2); }
.plan .btn { margin-top: auto; justify-content: center; }
.badge { display: inline-block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--violet); color: #fff; border-radius: 999px; padding: 3px 9px; font-weight: 700; }
.compare { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 40px; }
.compare th, .compare td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.compare td:not(:first-child) { text-align: center; }
.table-wrap { overflow-x: auto; }

/* FAQ */
.faq details { border-top: 1px solid var(--line); padding: 14px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.faq summary::after { content: "+"; color: var(--faint); }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); margin: 8px 0 0; }

/* CTA + footer */
.cta { background: var(--ink); color: #fff; border-radius: 22px; padding: 46px 40px; text-align: center; }
.cta h2 { color: #fff; margin: 0 auto 12px; }
.cta p { color: rgba(255,255,255,.7); margin: 0 auto 24px; max-width: 50ch; }
.cta .btn-primary { background: #fff; color: var(--ink); }
.site-footer { padding: 36px 0 48px; font-size: 14px; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; }
.site-footer a { text-decoration: none; color: var(--muted); margin-right: 16px; }
.site-footer a:hover { color: var(--ink); }

@media (max-width: 900px) {
  .grid-3, .grid-2, .plans { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .nav { display: none; }
  .menu-btn { display: block; }
  .site-header.open .nav { display: flex; position: absolute; top: 64px; left: 0; right: 0; background: var(--bg); flex-direction: column; padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .site-header.open .nav-drop-btn { display: none; }
  .site-header.open .nav-menu { position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; border: 0; box-shadow: none; background: none; padding: 0; margin: 4px 0 0; }
  .site-header.open .nav-menu a { padding: 6px 0; }
  .site-header.open .nav-menu a:hover { background: none; }
  .site-header.open .nav-group { padding: 12px 0 3px; }
  .site-header.open .nav-all { border-top: 0; padding-top: 6px !important; }
  .header-cta .btn-ghost { display: none; }
}
@media (max-width: 560px) {
  .grid-3, .grid-2, .plans { grid-template-columns: 1fr; }
  .hero { padding-top: 48px; }
  .cta { padding: 40px 22px; }
}

/* ---- Hero ask box: the landing page mirrors the product's own home screen ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ask { background: var(--paper); border: 1px solid var(--line-2); border-radius: 18px; padding: 14px 14px 12px; box-shadow: var(--shadow); max-width: 760px; }
.ask textarea { width: 100%; border: 0; resize: vertical; font: inherit; font-size: 17px; line-height: 1.5; color: var(--text); background: transparent; padding: 6px 6px 10px; }
.ask textarea::placeholder { color: var(--faint); }
.ask textarea:focus { outline: none; }
.ask-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-right: auto; }
.chip { font: inherit; font-size: 13px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: background .12s ease, color .12s ease; }
.chip:hover { background: var(--bg-2); color: var(--ink); }
.hero .hero-note { display: block; margin: 12px 2px 0; }

/* What the ask box says back. Present only after a submit that did not navigate away, which
   in practice means the free document for this address has already been used today. */
.ask-status { margin: 12px 2px 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.ask-status:empty { display: none; }
.ask-status a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
/* Drafting takes a moment. The box must not look dead while it happens, and the text must
   not look editable when editing it would no longer change anything. */
form.busy textarea { opacity: .55; }
form.busy .btn[disabled] { opacity: .8; cursor: progress; }

/* ---- Proof band: the trust guarantee sits directly under the claim ---- */
.proof { padding: 44px 0; background: var(--violet-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-head { margin-bottom: 26px; }
.proof h2.display { font-size: clamp(24px, 3vw, 32px); max-width: 26ch; margin-bottom: 0; }
.proof h3 { font-size: 15px; margin: 0 0 6px; }
.proof p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---- Client page band ---- */
/* Not a box. This section used to be wrapped in a full-width bordered card that
   itself contained three more cards, so the page had a card inside a card inside
   a card and this one section shouted over every other. Sections here are open;
   only the things inside them are carded. */
.client-band .section-lead { max-width: 68ch; }

/* ---- Pull quote used in place of a screenshot we do not have ---- */
.quote-card { background: var(--ink); color: #fff; border-radius: 18px; padding: 40px 36px; box-shadow: var(--shadow); }
.quote-lead { font-family: var(--display); font-size: 24px; line-height: 1.35; margin: 0 0 18px; }
.quote-src { margin: 0; font-size: 13px; color: rgba(255,255,255,.6); }

@media (max-width: 900px) {
  .proof .grid-3 { grid-template-columns: 1fr; gap: 16px; }
  
}
@media (max-width: 560px) {
  .ask-row .btn { width: 100%; justify-content: center; }
  .ask textarea { font-size: 16px; min-height: 132px; }
  .quote-card { padding: 30px 24px; }
  .quote-lead { font-size: 20px; }
}

/* ---- Blog ---- */
.wrap-prose { width: min(720px, calc(100% - 40px)); }
.hero-blog { padding: 64px 0 8px; }
.hero-blog h1 { font-size: clamp(34px, 5vw, 56px); max-width: 18ch; margin: 0 0 14px; }
.post-list { display: grid; gap: 14px; }
.post-card { display: block; text-decoration: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; transition: border-color .12s ease, transform .12s ease; }
.post-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.post-card-meta { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.post-card h2 { font-family: var(--display); font-weight: 500; font-size: 25px; line-height: 1.2; margin: 8px 0 8px; max-width: 32ch; }
.post-card p { margin: 0; color: var(--muted); font-size: 15px; max-width: 68ch; }
.post-card-more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--violet); }

.post { padding: 48px 0 8px; }
.post .back { font-size: 14px; color: var(--muted); text-decoration: none; }
.post .back:hover { color: var(--ink); }
.post h1 { font-size: clamp(30px, 4.4vw, 46px); margin: 18px 0 12px; }
.post-meta { font-size: 14px; color: var(--faint); margin: 0 0 8px; }

.prose { font-size: 17px; line-height: 1.72; }
.prose h2 { font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 1.2; margin: 44px 0 12px; }
.prose h3 { font-size: 18px; margin: 30px 0 8px; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose a { color: var(--violet); text-underline-offset: 2px; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 38px 0; }
.prose blockquote { margin: 0 0 18px; padding: 2px 0 2px 20px; border-left: 3px solid var(--violet-soft); color: var(--muted); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { background: var(--bg-2); border-radius: 5px; padding: 2px 6px; font-size: .9em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 22px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.related { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
.related-card { display: block; text-decoration: none; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.related-card:hover { border-color: var(--line-2); }
.related-card h3 { margin: 0 0 6px; font-size: 16px; }
.related-card p { margin: 0; color: var(--muted); font-size: 14px; }

/* ---- Blog categories ---- */
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.cat-chips-top { margin: 0 0 24px; }
.cat-chip { display: inline-block; text-decoration: none; font-size: 13px; font-weight: 500; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; transition: border-color .12s ease, color .12s ease; }
.cat-chip:hover { border-color: var(--line-2); color: var(--ink); }
.cat-intro { font-size: 17px; max-width: 62ch; }
.cat-intro p { margin: 0 0 14px; }
.cat-nav { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.cat-nav .cat-chips { margin-top: 10px; }
.hero-blog .back { font-size: 14px; color: var(--muted); text-decoration: none; }

/* ---- Hero pillars: the three things every page leads with ---- */
.pillars { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 860px; }
.pillars li { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 10px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.pillars li span { grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 8px; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; font-size: 13px; }
.pillars li strong { display: block; color: var(--ink); font-size: 14px; margin-bottom: 2px; }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; gap: 14px; } }


/* ---- Layout for the animated demos ---- */
.shot-demo { border: 0; background: none; box-shadow: none; max-width: 760px; }
.demo-caption { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 62ch; }
.proof-split, .close-split { display: grid; grid-template-columns: 420px 1fr; gap: 40px; align-items: start; }
.proof-split .grid { gap: 22px; }
.grid-close { grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 940px) {
  .proof-split, .close-split { grid-template-columns: 1fr; gap: 28px; }
  .grid-close { grid-template-columns: 1fr; }
}

.hub-split { display: grid; grid-template-columns: 400px 1fr; gap: 36px; align-items: start; margin-top: 8px; }
.grid-hub { grid-template-columns: 1fr; gap: 14px; }
@media (max-width: 940px) { .hub-split { grid-template-columns: 1fr; gap: 26px; } }

/* ---- Footer columns ---- */
.site-footer .wrap { display: block; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.foot-cols h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.foot-cols a { display: block; margin: 0 0 7px; text-decoration: none; color: var(--muted); font-size: 14px; }
.foot-cols a:hover { color: var(--ink); }
.foot-base { padding-top: 20px; font-size: 14px; color: var(--faint); }
@media (max-width: 760px) { .foot-cols { grid-template-columns: 1fr 1fr; gap: 22px; } }

/* ---- Standalone pages ---- */
.hero-page { padding: 64px 0 28px; }
.hero-page h1 { font-size: clamp(32px, 4.6vw, 52px); max-width: 20ch; margin: 0 0 16px; }
.hero-page .lead { max-width: 64ch; }
.checks-x li::before { content: "✕"; color: var(--faint); }
.demo-static .brief { border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--text); }
.demo-static .arrow { text-align: center; font-size: 12px; color: var(--faint); margin: 14px 0 10px; }
.demo-static .returns { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.demo-static .returns li { display: flex; gap: 9px; font-size: 14px; color: var(--text); }
.demo-static .returns li::before { content: "✓"; color: var(--green); font-weight: 700; }

/* ---- Homepage AI grid ---- */
.ai-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ai-grid > div { font-size: 14px; color: var(--muted); line-height: 1.5; border-top: 2px solid var(--violet-soft); padding-top: 12px; }
.ai-grid b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.ai-note { margin: 30px 0 0; font-size: 15px; color: var(--muted); max-width: 74ch; }
.ai-note b { color: var(--ink); }
.ai-note a { color: var(--violet); font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 940px) { .ai-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ai-grid { grid-template-columns: 1fr; } }



/* ---- Feature pages ---- */
.feature-blocks { display: grid; gap: 30px; }
.feature-blocks h2 { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.25; margin: 0 0 8px; color: var(--ink); }
.feature-blocks p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.feature-blocks code { background: var(--bg-2); border-radius: 5px; padding: 2px 6px; font-size: .88em; }
.feature-note { margin: 26px 0 0; padding: 13px 15px; border-left: 3px solid var(--violet-soft); font-size: 15px; color: var(--muted); }
.feature-note b { color: var(--ink); }

/* ---- Hero: the pitch left, the box you are meant to use on the right ---- */
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.hero-grid .hero-copy .lead { max-width: 48ch; }
.hero-grid .pillars { grid-template-columns: 1fr; gap: 13px; max-width: none; margin-top: 26px; }
.hero-grid .ask { max-width: none; }
.hero-grid .ask textarea { min-height: 132px; }
.hero-box .hero-note { margin-top: 13px; }
/* Stay side by side well below a maximised window: a laptop at 1024, or any
   browser that is not full width, was stacking the box under the copy. */
@media (max-width: 1100px) { .hero-grid { grid-template-columns: 1.04fr .96fr; gap: 34px; } }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-grid .pillars { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) { .hero-grid .pillars { grid-template-columns: 1fr; } }

/* The caret that follows the typed example. */
.ask.typing textarea::placeholder { color: var(--faint); }
.ask .caret { position: absolute; width: 1.5px; background: var(--violet); opacity: 0; pointer-events: none; }

/* Feature cards that lead somewhere */
a.card-link { text-decoration: none; display: block; transition: border-color .12s ease, transform .12s ease; }
a.card-link:hover { border-color: var(--line-2); transform: translateY(-1px); }
a.card-link h3 { color: var(--ink); }
a.card-link::after { content: " →"; color: var(--violet); font-weight: 600; font-size: 14px; }

/* The mid-article ask. Sits in the prose column at a section break, framed
   enough to read as an aside and quiet enough not to read as an advert. */
.inline-cta { margin: 34px 0; padding: 22px 24px; background: var(--bg-2); border-radius: 13px;
  border-left: 3px solid var(--violet); display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.inline-cta p { margin: 0; flex: 1 1 320px; font-size: 15.5px; line-height: 1.6; color: var(--text); }
.inline-cta b { color: var(--ink); }
.inline-cta .btn { flex: 0 0 auto; }
@media (max-width: 560px) { .inline-cta { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* ═══════════ Homepage, rebuilt for the salesperson (Sept 2026) ═══════════
   Left: the promise and the box. Right (under it on a phone): the film, from
   film.css. Everything below the hero is short on purpose. */
.hero-v2 { padding: 52px 0 40px; }
.hero-v2 .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); grid-template-areas: "copy film" "proofs film"; gap: 0 48px; align-items: start; }
.hero-v2 .hero-copy { grid-area: copy; }
.hero-v2 .film { grid-area: film; }
.hero-v2 .proofs { grid-area: proofs; align-self: start; }
.hero-v2 h1 { font-size: clamp(42px, 5.6vw, 68px); margin-bottom: 14px; }
.hero-v2 h1 em { color: var(--violet); }
.hero-v2 p.lead { font-size: 18.5px; margin-bottom: 22px; max-width: 44ch; }
.hero-v2 .ask textarea { min-height: 112px; }
.hero-sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.hero-sub .hero-note { margin: 0; flex: 1 1 220px; }
.proofs { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }
.proofs li { font-size: 12.5px; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px 5px 9px; }
.proofs li::before { content: "\2713"; color: var(--green); font-weight: 700; margin-right: 6px; }
.hero-v2 .film { margin-top: 6px; }
@media (max-width: 1100px) { .hero-v2 .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; } }
@media (max-width: 860px) {
  .hero-v2 .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "film" "proofs"; gap: 0; }
  .hero-v2 .film { margin-top: 30px; }
  .hero-v2 .film { max-width: 600px; }
}
@media (max-width: 560px) {
  .hero-v2 { padding-top: 34px; }
  .hero-sub .btn { display: none; }   /* Draft it free already fills the row above */
}

.deals { padding: 44px 0 50px; }
.deal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.deal { font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 15px;
  transition: border-color .12s ease, transform .12s ease; color: var(--text); }
.deal:hover { border-color: var(--violet-light); transform: translateY(-1px); }
.deal-k { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--violet); font-weight: 600; }
.deal q { font-size: 14.5px; line-height: 1.45; color: var(--ink); quotes: "\201C" "\201D"; }
.deal-out { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.deal-out::before { content: "\2192  "; color: var(--violet); }
.deal-hint { margin: 12px 0 0; font-size: 13px; color: var(--faint); }
@media (max-width: 940px) { .deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .deal-grid { grid-template-columns: minmax(0, 1fr); } }

.tl-tight .beat { padding-bottom: 36px; }
.tl-tight .beat-body p { font-size: 15px; }
.tl-tight .qa-q { margin-bottom: 7px; }
.tl-tight .cert { font-size: 11px; color: var(--muted); word-break: break-all; }
.mini-brass { background: color-mix(in srgb, var(--brass) 10%, var(--paper)); }
.mini-brass b { color: #5e4419; }
.mini-brass span { color: #7a5a25; }
#how .beat-dot { border-color: var(--paper); }

.proof .proof-split { align-items: center; }
.proof .checks { margin-top: 14px; }
.more-link { margin: 18px 0 0; font-size: 15px; }
.more-link a { color: var(--violet); font-weight: 600; text-decoration: none; }
.more-link a:hover { text-decoration: underline; text-underline-offset: 2px; }

.flinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.flinks a { display: block; text-decoration: none; font-size: 13.5px; color: var(--muted); line-height: 1.45; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); transition: border-color .12s ease; }
.flinks a:hover { border-color: var(--line-2); }
.flinks b { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 2px; }
@media (max-width: 900px) { .flinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .flinks { grid-template-columns: minmax(0, 1fr); } }

.plans-note { margin-top: 16px; font-size: 14px; }
.explore { margin: 26px 0 0; font-size: 15px; color: var(--muted); max-width: 70ch; }
.explore a { color: var(--violet); text-underline-offset: 2px; }

/* ── Hero v3 (2026-09-25, "too cramped and busy"): centred copy, one slim
      input, examples as a quiet "Try:" row, the film full width below. ── */
.hero-v3 { padding: 72px 0 56px; }
.hero-center { max-width: 820px; margin: 0 auto; text-align: center; }
.hero-v3 .eyebrow { justify-content: center; }
.hero-v3 h1 { font-size: clamp(40px, 6.4vw, 80px); max-width: none; margin: 10px 0 16px; letter-spacing: -0.02em; }
.hero-v3 h1 em { color: var(--violet); }
.hero-v3 p.lead { font-size: 19px; max-width: 46ch; margin: 0 auto 30px; }
.ask-slim { max-width: 680px; margin: 0 auto; padding: 8px 8px 8px 16px; border-radius: 16px; text-align: left; }
.ask-line { display: flex; align-items: center; gap: 10px; }
.ask-slim textarea { flex: 1; min-height: 0 !important; resize: none; padding: 8px 4px; font-size: 16.5px; line-height: 1.45; }
.ask-slim .btn { flex: 0 0 auto; }
.try { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 14px; font-size: 13px; color: var(--faint); }
.try .chip { border-color: transparent; padding: 3px 9px; font-size: 13px; }
.try .chip:hover { border-color: var(--line); }
.hero-v3 .hero-note { margin: 10px 0 0; }
.hero-v3 .film { max-width: 1120px; margin: 56px auto 0; }
@media (max-width: 640px) {
  .hero-v3 { padding: 40px 0 36px; }
  .hero-v3 h1 { font-size: clamp(36px, 11vw, 48px); }
  .hero-v3 p.lead { font-size: 17px; margin-bottom: 22px; }
  .ask-slim { padding: 10px; }
  .ask-line { flex-direction: column; align-items: stretch; }
  .ask-slim textarea { min-height: 84px !important; }
  .ask-slim .btn { width: 100%; justify-content: center; }
  .hero-v3 .film { margin-top: 36px; }
}

/* v3 hero, round 2: the film starts below the fold on any laptop screen, and
   the input says it takes uploads (recordings, their documents, notes). */
.hero-v3 .hero-center { min-height: calc(100svh - 150px); display: flex; flex-direction: column; justify-content: center; }
.hero-v3 { padding-top: 40px; }
.hero-v3 .film { margin-top: 24px; }
.ask-slim .attach { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--muted);
  text-decoration: none; border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px; transition: color .12s ease, border-color .12s ease; }
.ask-slim .attach:hover { color: var(--ink); border-color: var(--line-2); }
@media (max-width: 640px) {
  .hero-v3 .hero-center { min-height: 0; }
  .ask-slim .attach { justify-content: center; }
}
/* round 3: content sits slightly above centre (less empty sky), wider input,
   icon-only Attach on desktop so the typed example has room. */
.hero-v3 .hero-center { min-height: calc(100svh - 104px); padding-bottom: 7vh; }
.hero-v3 { padding-top: 24px; }
.ask-slim { max-width: 780px; }
.ask-slim .attach { padding: 10px; }
.ask-slim .attach span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 640px) {
  .hero-v3 .hero-center { min-height: 0; padding-bottom: 0; }
  .ask-slim .attach span { position: static; width: auto; height: auto; clip: auto; }
  .ask-slim .attach { padding: 9px 12px; }
}
/* The hero-center is a flex column, so the form must claim its width explicitly. */
.hero-v3 .ask-slim { width: 100%; max-width: 780px; box-sizing: border-box; }
.hero-v3 .try, .hero-v3 .hero-note { align-self: center; }

/* Mobile menu (2026-09-25, "not autoscrolling"): the open menu was an absolute
   panel taller than the screen, so the part below the fold could not be
   reached. It now fills the screen under the header and scrolls on its own,
   and the page behind it is locked so the scroll goes to the menu. */
@media (max-width: 900px) {
  .site-header.open .nav {
    max-height: calc(100svh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 32px;
  }
  html:has(.site-header.open), body:has(.site-header.open) { overflow: hidden; }
}

/* ── "Same deal. Two very different weeks." (2026-09-25): each moment of the
      deal shown the usual way (greyed, a late clock) beside the DocuDeal way. ── */
.dl-head { max-width: 760px; }
.dl-legend { display: flex; gap: 18px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.dl-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.lg-old::before { background: #d9d4cb; }
.lg-new::before { background: var(--violet); }
.dl { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 14px; }
.dl-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: stretch;
  opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.1,1); }
html.dl-js .dl-row { opacity: 0; transform: translateY(18px); }
html.dl-js .dl-row.lit { opacity: 1; transform: none; }
.dl-when { padding: 16px 4px 0 0; border-top: 2px solid var(--violet); }
.dl-when b { display: block; font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.dl-when span { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.dl-when h3 { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.dl-old { position: relative; border-radius: var(--radius); padding: 16px 18px; background: repeating-linear-gradient(-45deg, #f1eee8 0 10px, #eeebe4 10px 20px); border: 1px dashed #d6d0c5; }
.dl-old p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: #7a746b; }
.dl-old i { font-style: normal; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.dl-clock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #b3452e; background: #fbe9e4; border-radius: 999px; padding: 3px 10px; }
.dl-clock::before { content: "\23F1"; font-size: 12px; }
.dl-new { border-radius: var(--radius); padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.dl-new > p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); font-weight: 500; }
.dl-vis { font-size: 12.5px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.dl-vis .attach { display: flex; flex-wrap: wrap; gap: 5px; }
.dl-vis .att { font-size: 11.5px; background: var(--violet-soft); color: var(--violet); border-radius: 6px; padding: 3px 7px; }
.dl-vis .rowline { display: flex; justify-content: space-between; padding: 2px 0; color: var(--text); font-variant-numeric: tabular-nums; }
.dl-vis .rowline.tot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 5px; font-weight: 700; color: var(--ink); }
.dl-vis .sentline { display: flex; justify-content: space-between; align-items: baseline; }
.dl-vis .sentline em { font-style: normal; color: var(--violet); font-weight: 600; }
.dl-vis .barrow { display: grid; grid-template-columns: 62px 1fr 48px; gap: 8px; align-items: center; padding: 2px 0; }
.dl-vis .bar { display: block; height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.dl-vis .bar i { display: block; height: 100%; width: var(--w); background: var(--violet); border-radius: 3px; }
.dl-vis .barrow em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.dl-vis .barrow.hot em, .dl-vis .barrow.hot span:first-child { color: var(--violet); font-weight: 600; }
.dl-vis .qa-q { margin-bottom: 6px; }
.dl-vis .qa-a { color: var(--violet); }
.dl-vis .signed-pill { display: inline-block; font-weight: 700; color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--paper)); border-radius: 999px; padding: 3px 10px; }
.dl-vis .cert { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.dl-vis .brassline { color: #6b4e17; }
.dl-score { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dl-score > div { border-radius: var(--radius); padding: 20px 22px; background: var(--paper); border: 1px solid var(--line); }
.dl-score > div:first-child { background: #f1eee8; border-style: dashed; }
.dl-k { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.dl-score b { display: block; margin: 6px 0 2px; font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.15; }
.dl-bad { color: #9a4a37; }
.dl-good { color: var(--violet); }
.dl-score span:last-child { font-size: 14px; color: var(--muted); }
@media (max-width: 980px) {
  .dl-row { grid-template-columns: 1fr; gap: 8px; }
  .dl-when { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-top: 12px; }
  .dl-when h3 { margin: 0; flex-basis: 100%; }
  .dl-new { grid-template-columns: 1fr; }
  .dl-score { grid-template-columns: 1fr; }
}

/* Trust section: a concrete "flagged, not invented" card instead of a quote. */
.checks li b { color: var(--ink); }
.flag-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 20px; align-self: center; }
.flag-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.flag-head em { font-style: normal; text-transform: none; letter-spacing: 0; color: #9a6a12; background: color-mix(in srgb, var(--brass) 18%, var(--paper)); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.flag-row { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent); background: color-mix(in srgb, var(--brass) 8%, var(--paper)); }
.flag-row b { display: block; font-size: 14px; color: var(--ink); }
.flag-row span { font-size: 13.5px; color: var(--muted); }
.flag-foot { margin-top: 14px; font-size: 13px; color: var(--green); font-weight: 600; }

/* ── The mark, alive (2026-09-25). The logo is two brackets that interlock:
      two sides of a deal. On load they draw in from apart and click shut; on
      hover they ease apart and snap back; when a deal closes on the page (the
      hero film reaches Signed, or a draft is started) they clasp once. ── */
.logo svg path { transform-box: fill-box; transform-origin: center; }
.logo svg path:nth-child(1), .logo svg path:nth-child(2) { stroke-dasharray: 80; stroke-dashoffset: 0; }
.logo svg path:nth-child(3) { stroke-dasharray: 10; }
@media (prefers-reduced-motion: no-preference) {
  .logo svg path:nth-child(1) { animation: dd-draw .7s cubic-bezier(.6,0,.2,1) both, dd-in-a .75s cubic-bezier(.34,1.56,.64,1) .55s backwards; }
  .logo svg path:nth-child(2) { animation: dd-draw .7s cubic-bezier(.6,0,.2,1) .12s both, dd-in-b .75s cubic-bezier(.34,1.56,.64,1) .55s backwards; }
  .logo svg path:nth-child(3) { animation: dd-draw-s .35s ease .7s both; }
  .logo svg path { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
  .logo:hover svg path:nth-child(1), .logo:hover svg path:nth-child(3) { transform: translate(-2.5px, -2px); }
  .logo:hover svg path:nth-child(2) { transform: translate(2.5px, 2px); }
  .logo.clasp svg path:nth-child(1), .logo.clasp svg path:nth-child(3) { animation: dd-clasp-a .6s cubic-bezier(.34,1.56,.64,1); }
  .logo.clasp svg path:nth-child(2) { animation: dd-clasp-b .6s cubic-bezier(.34,1.56,.64,1); }
  .logo.clasp svg { animation: dd-glow .9s ease-out; }
}
@keyframes dd-draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@keyframes dd-draw-s { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }
@keyframes dd-in-a { from { transform: translate(-5px, -3px); } to { transform: none; } }
@keyframes dd-in-b { from { transform: translate(5px, 3px); } to { transform: none; } }
@keyframes dd-clasp-a { 0% { transform: none; } 35% { transform: translate(-3px, -2px); } 70% { transform: translate(1px, 1px); } 100% { transform: none; } }
@keyframes dd-clasp-b { 0% { transform: none; } 35% { transform: translate(3px, 2px); } 70% { transform: translate(-1px, -1px); } 100% { transform: none; } }
@keyframes dd-glow { 0% { filter: drop-shadow(0 0 0 rgba(113,87,180,0)); } 40% { filter: drop-shadow(0 0 6px rgba(113,87,180,.55)); } 100% { filter: drop-shadow(0 0 0 rgba(113,87,180,0)); } }

/* The big mark over the closing ask: the two sides start far apart and lock
   when it scrolls into view. */
.clasp-mark { display: block; width: 88px; height: auto; margin: 0 auto 18px; overflow: visible; }
.clasp-mark path { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .js-clasp .clasp-mark .cm-a, .js-clasp .clasp-mark .cm-c { transform: translate(-22px, -14px) rotate(-8deg); opacity: .25; }
  .js-clasp .clasp-mark .cm-b { transform: translate(22px, 14px) rotate(8deg); opacity: .25; }
  .clasp-mark path { transition: transform 1s cubic-bezier(.34,1.56,.64,1), opacity .5s ease; }
  .js-clasp .clasp-mark.locked path { transform: none; opacity: 1; }
  .clasp-mark.locked { animation: dd-glow-big 1.1s ease-out .75s; }
}
@keyframes dd-glow-big { 0% { filter: drop-shadow(0 0 0 rgba(113,87,180,0)); } 35% { filter: drop-shadow(0 0 16px rgba(113,87,180,.6)); } 100% { filter: drop-shadow(0 0 0 rgba(113,87,180,0)); } }
/* On the dark closing card the ink bracket turns white, the violet brightens. */
.cta .clasp-mark .cm-a, .cta .clasp-mark .cm-c { stroke: #fff; }
.cta .clasp-mark .cm-b { stroke: #a48fe0; }

/* ── The mark through the page ─────────────────────────────────────────── */
.ddm { display: inline-block; vertical-align: -0.12em; line-height: 0; flex: 0 0 auto; }
.ddm svg { width: 1.25em; height: auto; overflow: visible; display: block; }
.ddm path { transform-box: fill-box; transform-origin: center; transition: transform .7s cubic-bezier(.34,1.56,.64,1), opacity .4s ease; }
.ddm .m-a, .ddm .m-c { stroke: currentColor; }
.ddm .m-b { stroke: var(--violet); }
/* eyebrows: open until the section arrives, then click shut */
.ddm-eb { margin-right: 9px; color: var(--ink); font-size: 1.15em; }
.ddm-js .ddm-eb:not(.locked) .m-a, .ddm-js .ddm-eb:not(.locked) .m-c { transform: translate(-5px, -3px); opacity: .35; }
.ddm-js .ddm-eb:not(.locked) .m-b { transform: translate(5px, 3px); opacity: .35; }
.ddm-eb.locked svg { animation: ddm-pulse .9s ease-out .45s; }
@keyframes ddm-pulse { 0%,100% { filter: none; } 40% { filter: drop-shadow(0 0 4px rgba(113,87,180,.6)); } }
.cta .ddm-eb, .dark .ddm-eb { color: #fff; }
/* primary buttons: apart at rest, shut on hover */
.btn-primary .ddm-btn { margin-left: 9px; color: currentColor; }
.btn-primary .ddm-btn .m-b { stroke: #b8a6ec; }
.btn-primary .ddm-btn .m-a, .btn-primary .ddm-btn .m-c { transform: translate(-2.5px, -2px); }
.btn-primary .ddm-btn .m-b { transform: translate(2.5px, 2px); }
.btn-primary:hover .ddm-btn path, .btn-primary:focus-visible .ddm-btn path { transform: none; }
/* featured plan badge */
.ddm-badge { margin-right: 5px; font-size: 1em; }
.ddm-badge .m-a, .ddm-badge .m-c { stroke: currentColor; }
.ddm-js .ddm-badge:not(.locked) .m-a { transform: translate(-4px, -3px); }
.ddm-js .ddm-badge:not(.locked) .m-b { transform: translate(4px, 3px); }
/* drafting: the two halves keep closing on each other */
.ddm-busy { margin-right: 8px; }
.ddm-busy .m-b { stroke: #b8a6ec; }
.ddm-busy .m-a, .ddm-busy .m-c { animation: ddm-work-a 1.1s cubic-bezier(.45,0,.2,1) infinite; }
.ddm-busy .m-b { animation: ddm-work-b 1.1s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes ddm-work-a { 0%,100% { transform: translate(-3px, -2px); } 50% { transform: none; } }
@keyframes ddm-work-b { 0%,100% { transform: translate(3px, 2px); } 50% { transform: none; } }
/* the logo on the proposal in the film clasps at Signed */
.pp-bar .lg path { transform-box: fill-box; transform-origin: center; }
.pp-bar .lg.clasp path:nth-child(1) { animation: dd-clasp-a .6s cubic-bezier(.34,1.56,.64,1); }
.pp-bar .lg.clasp path:nth-child(2) { animation: dd-clasp-b .6s cubic-bezier(.34,1.56,.64,1); }
@media (prefers-reduced-motion: reduce) {
  .ddm path, .ddm-busy path { transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important; }
}