/* THE PROPOSAL DOCUMENT, one shared design, rendered in two places: the
   customer page (proposal-view.html) and the editor canvas
   (proposal-studio.html). Same rule as invoice-doc.css: change it here, both
   follow. Built against design/reference-sana/ (DESIGN-NOTES.md):
   - THE WHOLE PAGE STAYS ON THE THEME, one hue family, the type in its own
     foreground colour (light themes exist now: Paper, Mint, Sky).
   - THE HERO IS A PHOTOGRAPH inside a rounded block, the theme's colour
     laid gently over it, the small type on frosted glass.
   - THE MONEY IS AN OBJECT floating on the ground.
   - air everywhere.
   The theme is a set of custom properties on .pp-card; the palette picker
   and the image sampler only ever write those. */
:root {
  --pp-ink: #241226;            /* the ground */
  --pp-ink-2: #4a2036;          /* sibling, for the light field */
  --pp-edge: #a0522d;           /* the warm light in the gradient */
  --pp-acid: #ffc24a;           /* the single accent */
  --pp-fg: #ffffff;             /* type on the ground */
  --pp-fg-dim: rgba(255,255,255,.55);
  --pp-on-ink: rgba(255,255,255,.82);
  --pp-on-ink-dim: rgba(255,255,255,.55);
  --pp-paper: #fffdf9;          /* the money object */
  --pp-paper-ink: #241a20;
  --pp-tint: rgba(255,255,255,.06);   /* tinted cards on the ground */
}
body { background: #fff; }
.pp-wrap { max-width: 1060px; margin: 0 auto; padding: 26px 22px 90px; }
.pp-card { background: var(--pp-ink); color: var(--pp-fg); border-radius: 26px; overflow: hidden; box-shadow: 0 2px 6px rgba(20,10,24,.08); }
/* LIGHT themes: the ground is pale, the type is ink */
.pp-card--light { --pp-fg: var(--pp-paper-ink); --pp-fg-dim: rgba(0,0,0,.5); --pp-on-ink: rgba(0,0,0,.72); --pp-on-ink-dim: rgba(0,0,0,.45); --pp-tint: rgba(0,0,0,.05); }

/* == THE HERO ============================================================== */
.pp-hero { position: relative; min-height: 0; display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: stretch; padding: 40px; overflow: hidden; background: var(--pp-ink); }
.pp-hero__text { display: flex; flex-direction: column; justify-content: center; padding: 48px 24px 48px 32px; text-align: left; }
/* the photo, untouched, inset with rounded corners (Sana's bevel) */
.pp-hero__photo { border-radius: 18px; background: var(--pp-photo) center / cover no-repeat; min-height: 520px; }
/* THE PHOTO IS UNTOUCHED (Peter, 30 Sep 2026: "the photo examples are all terribly dark... we can do better"):
   the 8 Sep ink wash is gone. A real, bright photograph, inset with rounded corners on the flat ground, the
   Sana way; the tie between picture and page is the accent, never a filter. */
.pp-card--photo .pp-hero__photo, .pp-card--photo .pp-close__photo { position: relative; overflow: hidden; }
.pp-card:not(.pp-card--photo) .pp-hero { grid-template-columns: 1fr; }
.pp-card:not(.pp-card--photo) .pp-hero__photo { display: none; }
.pp-eyebrow { position: relative; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--pp-acid); margin: 0 0 30px; }
.pp-title { position: relative; font-family: Fraunces, Georgia, "Times New Roman", serif; font-optical-sizing: auto; font-weight: 500; font-size: clamp(40px, 5.2vw, 78px); line-height: 1; letter-spacing: -.025em; margin: 0 0 26px; max-width: 12ch; text-wrap: balance; color: var(--pp-title, var(--pp-fg)); }
/* the client's logo above "Prepared for" (2 Oct 2026): on a white chip so any logo reads on any ground */
.pp-hero__forlogo { position: relative; display: block; align-self: flex-start; justify-self: start; height: 40px; width: auto; max-width: 220px; margin: 0 0 14px; padding: 6px 10px; background: #fff; border-radius: 10px; box-sizing: content-box; }
.pp-hero__lede { position: relative; font-size: clamp(17px, 2vw, 21px); line-height: 1.6; color: var(--pp-on-ink); max-width: 44ch; margin: 0; }
.pp-hero__meta { position: relative; margin-top: 54px; display: flex; gap: 44px; flex-wrap: wrap; justify-content: flex-start; }
.pp-hero__meta dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-on-ink-dim); margin-bottom: 7px; }
.pp-hero__meta dd { margin: 0; font-size: 16px; color: var(--pp-fg); }

/* == THE BODY, air doubled ================================================= */
.pp-body, .pp-secwrap { display: contents; }
.pp-sec { padding: 0 72px; margin-top: 110px; }
.pp-sec:last-of-type { margin-bottom: 90px; }
.pp-card--frame .pp-sec { padding: 0 58px; margin-top: 96px; }
.pp-kick { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--pp-acid); margin: 0 0 18px; }
.pp-h { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.015em; line-height: 1.08; margin: 0 0 26px; color: var(--pp-fg); }
.pp-p { font-size: 17px; line-height: 1.8; margin: 0 0 16px; color: var(--pp-on-ink); }
.pp-lead { font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: clamp(22px, 2.6vw, 29px); line-height: 1.5; color: var(--pp-fg); max-width: 30ch; margin: 0; }
.pp-deck { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pp-block { background: var(--pp-tint); border-radius: 20px; padding: 36px 34px; }
.pp-block h3 { font-size: 16px; font-weight: var(--weight-medium); color: var(--pp-acid); margin: 0 0 14px; line-height: 1.35; }
.pp-block p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--pp-on-ink); }
.pp-quote { font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(24px, 3vw, 32px); line-height: 1.45; color: var(--pp-fg); max-width: 26ch; margin: 0; }
.pp-quote strong { display: block; font-style: normal; font-family: Inter, sans-serif; font-weight: var(--weight-regular); font-size: 14px; color: var(--pp-on-ink-dim); margin-top: 22px; letter-spacing: .02em; }
.pp-proofnag { display: inline-flex; align-items: center; gap: 8px; border: 1px dashed var(--pp-acid); color: var(--pp-acid); border-radius: 999px; padding: 7px 16px; font-size: 13.5px; margin: 0; }
/* an image section: a rounded photo block, colour-tied like the hero */
.pp-image { position: relative; height: 420px; border-radius: 20px; overflow: hidden; background: var(--pp-img) center / cover no-repeat; }
.pp-caption { font-size: 13px; color: var(--pp-on-ink-dim); margin: 12px 4px 0; }

/* == THE MONEY, a light object on the ground =============================== */
.pp-money { background: linear-gradient(150deg, var(--pp-paper) 0%, color-mix(in srgb, var(--pp-paper) 92%, var(--pp-edge)) 100%); color: var(--pp-paper-ink); border-radius: 22px; padding: 42px 46px 40px; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.pp-card--light .pp-money { box-shadow: 0 18px 50px rgba(0,0,0,.14); border: 1px solid rgba(0,0,0,.06); }
.pp-pgroup + .pp-pgroup { margin-top: 30px; }
.pp-pgroup__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(36,18,38,.14); }
.pp-pgroup__name { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 22px; letter-spacing: -.01em; }
.pp-pgroup__sub { font-size: 14px; color: #8a7a6e; }
table.pp-price { width: 100%; border-collapse: collapse; }
.pp-price td { padding: 14px 0; border-bottom: 1px solid rgba(36,18,38,.09); vertical-align: top; font-size: 16px; }
.pp-price td.num { text-align: right; white-space: nowrap; position: relative; padding-right: 2px; }
.pp-price tr.is-off td { color: #a39a92; }
.pp-price tr.is-off td.num { text-decoration: line-through; }
.pp-line__meta { display: block; font-size: 12.5px; color: #8a7a6e; margin-top: 4px; }
.pp-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6f5f55; margin-top: 8px; cursor: pointer; }
.pp-opt input { width: 16px; height: 16px; accent-color: var(--pp-ink-2); }
.pp-opt--tag { border: 1px dashed #c9bfb5; border-radius: 999px; padding: 2px 9px; cursor: default; }
.pp-pnotes { font-size: 13.5px; color: #8a7a6e; line-height: 1.6; margin: 12px 0 0; }
.pp-ptotals { margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(36,18,38,.14); display: grid; gap: 8px; }
.pp-ptotals > div { display: flex; justify-content: space-between; font-size: 15px; color: #6f5f55; }
.pp-ptotals__total { font-size: 20px !important; color: var(--pp-paper-ink) !important; font-weight: var(--weight-medium); padding-top: 8px; }
.pp-ptotals__total strong { font-family: Fraunces, Georgia, serif; font-size: 30px; font-weight: 500; letter-spacing: -.01em; }
.pp-card--tinted .pp-ptotals__total strong { color: color-mix(in srgb, var(--pp-acid) 45%, var(--pp-paper-ink)); }
.pp-billnote { font-size: 13.5px; color: #8a7a6e; margin: 20px 0 0; line-height: 1.6; }
.pp-sig { display: flex; gap: 48px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(36,18,38,.12); flex-wrap: wrap; }
.pp-sig__col { flex: 1; min-width: 210px; }
.pp-sig__name { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 24px; letter-spacing: -.01em; }   /* no script "signature" (the slop tell, 2 Sep); the name, set properly */
.pp-sig__meta { font-size: 12.5px; color: #8a7a6e; border-top: 1px solid rgba(36,18,38,.18); margin-top: 8px; padding-top: 8px; }
.pp-sig__empty { height: 36px; border-bottom: 1px dashed rgba(36,18,38,.3); }
/* the editor's price tools */
.pp-pgroup__tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pp-mini { font: inherit; font-size: 12.5px; border: 1px solid rgba(36,18,38,.2); background: #fff; color: var(--pp-paper-ink); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.pp-mini:hover { border-color: var(--pp-paper-ink); }
.pp-line__x { position: absolute; right: -26px; top: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(36,18,38,.2); background: #fff; font: inherit; color: #8a7a6e; cursor: pointer; opacity: 0; }
.pp-price tr:hover .pp-line__x { opacity: 1; }
[contenteditable="true"] { outline: none; border-bottom: 1px dashed transparent; }
[contenteditable="true"]:hover { border-bottom-color: rgba(36,18,38,.35); }
[contenteditable="true"]:focus { border-bottom-color: var(--pp-acid); }

/* == THE ASK, the field of light returns =================================== */
.pp-close { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center; padding: 40px; overflow: hidden; margin-top: 96px; background: var(--pp-ink); }
.pp-close__text { text-align: left; padding: 48px 32px 48px 16px; }
.pp-close__photo { border-radius: 18px; background: var(--pp-photo-close, var(--pp-photo)) center / cover no-repeat; min-height: 360px; align-self: stretch; }
.pp-card:not(.pp-card--photo) .pp-close { grid-template-columns: 1fr; }
.pp-card:not(.pp-card--photo) .pp-close__photo { display: none; }
.pp-card:not(.pp-card--photo) .pp-close__text { text-align: center; }
.pp-close h2 { position: relative; font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: clamp(36px, 5.4vw, 60px); letter-spacing: -.02em; line-height: 1.04; margin: 0 0 18px; color: var(--pp-fg); }
.pp-close p { position: relative; color: var(--pp-on-ink); margin: 0 0 40px; max-width: 40ch; line-height: 1.65; font-size: 17px; }
.pp-card:not(.pp-card--photo) .pp-close p { margin-inline: auto; }
.pp-actions { position: relative; display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; }
.pp-card:not(.pp-card--photo) .pp-actions { justify-content: center; }
.pp-btn { border: none; border-radius: 999px; padding: 17px 38px; font: inherit; font-size: 17px; cursor: pointer; }
.pp-btn--yes { background: var(--pp-acid); color: #1c1018; font-weight: var(--weight-medium); }
.pp-btn--yes:hover { filter: brightness(1.06); }
.pp-btn--no { background: transparent; color: var(--pp-on-ink); border: 1px solid color-mix(in srgb, var(--pp-fg) 32%, transparent); }
.pp-btn--no:hover { border-color: color-mix(in srgb, var(--pp-fg) 65%, transparent); color: var(--pp-fg); }
.pp-done { position: relative; color: var(--pp-fg); font-size: 18px; line-height: 1.6; max-width: 44ch; margin: 0 auto; }
.pp-done[hidden] { display: none; }
.pp-foot { text-align: center; color: #97909a; font-size: 13px; margin-top: 26px; }
/* == FRAME variant: the hero and the close are rounded image blocks ======== */
.pp-card--frame { padding: 14px; }
.pp-card--frame .pp-hero { border-radius: 20px; }
.pp-card--frame .pp-close { border-radius: 20px; }
.pp-close .pp-actions span { cursor: default; }

/* == PHOTOS are never painted (Peter, 2 Sep, after four Sana references) ===
   The picture is real and untouched. The ground is flat and deep, the
   headline is white or the one accent, and the accent comes out of the
   photo. That is the whole tie. */
.pp-card--frame .pp-hero, .pp-card--frame .pp-close { border-radius: 20px; }
.pp-card--light .pp-hero__lede, .pp-card--light .pp-hero__meta dd { color: var(--pp-paper-ink); }

/* == THE EDITOR: handles and the + between sections ======================== */
.pp-card--edit .pp-secwrap { position: relative; display: block; }
.pp-handles { position: absolute; left: 12px; top: 8px; z-index: 5; display: flex; gap: 4px; opacity: 0; transition: opacity .18s; }
.pp-secwrap:hover .pp-handles { opacity: 1; }
.pp-handles button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(10,6,12,.55); color: #fff; font: inherit; font-size: 13px; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pp-card--light .pp-handles button { background: rgba(255,255,255,.8); color: #241a20; border-color: rgba(0,0,0,.15); }
.pp-handles button:disabled { opacity: .35; cursor: default; }
.pp-plus { position: relative; height: 0; z-index: 6; text-align: center; }
/* ONLY the + itself is the floating button; the add menu's buttons live
   inside .pp-plus too and must not inherit this (they stacked on one spot,
   Peter's screenshot, 2 Sep) */
.pp-plus > .js-pp-plus { position: absolute; left: 50%; top: 38px; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(10,6,12,.55); color: #fff; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .18s, transform .18s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* THE + IS THE OPPOSITE OF ITS GROUND (Peter, 4 Sep): white on a dark proposal, dark on a light one */
.pp-plus > .js-pp-plus { background: rgba(255,255,255,.92); color: #241a20; border-color: rgba(0,0,0,.08); }
.pp-card--light .pp-plus > .js-pp-plus { background: rgba(20,14,18,.88); color: #fff; border-color: rgba(255,255,255,.2); }
.pp-card--edit:hover .pp-plus > .js-pp-plus { opacity: .75; }
.pp-plus > .js-pp-plus:hover { opacity: 1 !important; transform: translate(-50%, -50%) scale(1.08); }
.pp-addmenu { position: absolute; left: 50%; transform: translateX(-50%); top: 62px; z-index: 40; background: #fff; color: #1c1c1c; border: 1px solid #e2dcd6; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 8px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; min-width: 460px; }
.pp-addmenu button { font: inherit; font-size: 13px; border: 1px solid #ece7e2; background: #faf8f6; border-radius: 10px; padding: 12px 8px; cursor: pointer; }
.pp-addmenu button:hover { border-color: #1c1c1c; }
.pp-addmenu button b { display: block; font-size: 18px; margin-bottom: 4px; }
.pp-card--edit [data-field] { cursor: text; }
/* a section freshly rewritten glows once */
@keyframes ppFresh { 0%, 60% { box-shadow: 0 0 0 1px var(--color-hilite-strong, #ffe135); } 100% { box-shadow: 0 0 0 1px transparent; } }   /* the app's 1px yellow, held then fading (rings-flash-never-stay) */
.pp-fresh { animation: ppFresh 2.6s ease-out both; border-radius: 10px; }

/* == PRICING, round two (30 Sep, Peter's "yes" after the legacy review) ===== */
.pp-textline td { font-weight: var(--weight-medium); padding-top: 18px; position: relative; }
.pp-line__mine { display: block; font-size: 12.5px; color: #8a6a2e; margin-top: 4px; }
.pp-show { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6f5f55; cursor: pointer; }
.pp-show input { width: 15px; height: 15px; accent-color: var(--pp-ink-2); }
.pp-mini--quiet { border-color: transparent; background: transparent; color: #8a7a6e; }
.pp-mini--quiet:hover { border-color: rgba(36,18,38,.2); }
.pp-linemenu { position: absolute; z-index: 40; background: #fff; color: #1c1c1c; border: 1px solid #e2dcd6; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; min-width: 260px; max-height: 320px; overflow-y: auto; }
.pp-linemenu p { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a7a6e; margin: 8px 10px 4px; }
.pp-linemenu button { display: flex; justify-content: space-between; gap: 12px; width: 100%; font: inherit; font-size: 14px; text-align: left; border: none; background: none; border-radius: 8px; padding: 9px 10px; cursor: pointer; color: inherit; }
.pp-linemenu button:hover { background: #f4f1ee; }
.pp-linemenu button span { color: #8a7a6e; white-space: nowrap; }
.pp-linemenu hr { border: none; border-top: 1px solid #ece7e2; margin: 6px 0; }

/* == SECTION BACKGROUNDS (30 Sep): the section toolbar's palette =========== */
.pp-sec[data-bg] { padding-top: 56px !important; padding-bottom: 56px !important; margin-left: 24px; margin-right: 24px; border-radius: 20px; }
.pp-sec[data-bg="band"] { background: var(--pp-tint); }
.pp-sec[data-bg="paper"] { background: var(--pp-paper); --pp-fg: var(--pp-paper-ink); --pp-on-ink: rgba(0,0,0,.72); --pp-on-ink-dim: rgba(0,0,0,.45); --pp-tint: rgba(0,0,0,.05); color: var(--pp-paper-ink); }
.pp-sec[data-bg="accent"] { background: var(--pp-acid); --pp-fg: #1c1418; --pp-on-ink: rgba(0,0,0,.75); --pp-on-ink-dim: rgba(0,0,0,.5); --pp-tint: rgba(0,0,0,.07); color: #1c1418; }
.pp-sec[data-bg="paper"] .pp-kick, .pp-sec[data-bg="accent"] .pp-kick { color: inherit; opacity: .7; }
/* inside an accent section, anything drawn in the accent colour would vanish into it: it takes the words' colour
   (the words themselves follow the accent's lightness, proposalDocContrast in proposal-doc.js) */
.pp-sec[data-bg="accent"] > * { --pp-acid: var(--pp-fg); }
.pp-handles button { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.pp-handles button svg { width: 15px; height: 15px; }
.pp-bgmenu { position: absolute; left: 12px; top: 46px; z-index: 41; background: #fff; color: #1c1c1c; border: 1px solid #e2dcd6; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; min-width: 210px; }
.pp-bgmenu button { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: 14px; border: none; background: none; border-radius: 8px; padding: 9px 10px; cursor: pointer; color: inherit; text-align: left; }
.pp-bgmenu button:hover { background: #f4f1ee; }
.pp-bgmenu button.is-on { font-weight: var(--weight-medium); }
.pp-bgmenu i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: none; }
/* saved sections in the + menu */
.pp-addmenu__saved { grid-column: 1 / -1; border-top: 1px solid #ece7e2; margin-top: 4px; padding-top: 8px; }
.pp-addmenu__saved p { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a7a6e; margin: 2px 4px 6px; text-align: left; }
.pp-addmenu__saved div { display: flex; gap: 6px; align-items: stretch; margin-bottom: 6px; }
.pp-addmenu .pp-addmenu__use { flex: 1; text-align: left; padding: 10px 12px; }
.pp-addmenu .pp-addmenu__forget { flex: none; width: 36px; padding: 0; color: #8a7a6e; background: #fff; }

/* == PRINT: Download as PDF (30 Sep) ======================================= */
@media print {
  @page { margin: 10mm; }
  body { background: #fff !important; }
  .pp-card { box-shadow: none !important; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pp-sec, .pp-hero, .pp-close, .pp-money, .pp-pgroup { break-inside: avoid; }
  .pp-actions, #pp-signrow, .pp-handles, .pp-plus { display: none !important; }
}

@media (max-width: 640px) {
  .pp-wrap { padding: 12px 10px 60px; }
  .pp-hero { min-height: 78vh; padding: 64px 26px 52px; }
  .pp-hero__meta { gap: 26px; margin-top: 44px; }
  .pp-hero, .pp-close { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
  .pp-hero__text, .pp-close__text { padding: 28px 12px; }
  .pp-hero__photo { min-height: 260px; order: -1; }
  .pp-close__photo { min-height: 220px; }
  .pp-sec, .pp-card--frame .pp-sec { padding: 0 22px; margin-top: 64px; }
  .pp-deck { grid-template-columns: 1fr; }
  .pp-money { padding: 28px 22px 26px; }
  .pp-close { padding: 76px 26px 70px; }
  .pp-card--frame { padding: 8px; }
  .pp-image { height: 260px; }
  .pp-addmenu { min-width: 280px; grid-template-columns: repeat(2, 1fr); }
}

/* == THE CRAFT PASS (Peter, 30 Sep 2026, Signal session 10: "the proposal looks a bit basic... a 2000 webpage,
   not very amazing or luxurious feeling") ====================================================================
   Nothing new is invented: the same sections, set like an editorial page. A bigger title, a hairline under it,
   the opening as a statement with the intro set on the right half, the plan as three numbered columns (big
   serif numerals in the accent, hairlines, no tinted boxes), a text section split heading-left / words-right,
   the proof centred and big. More air between sections. On a first look everything rises in as it scrolls into
   view (proposalDocAnimate in proposal-doc.js), once, and never again on an edit. */
.pp-title { font-size: clamp(42px, 4.6vw, 72px); line-height: 1; letter-spacing: -.028em; max-width: 13ch; }
.pp-hero__meta { margin-top: 44px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--pp-fg) 16%, transparent); gap: 18px 30px; }
.pp-hero__meta dd { font-size: 15px; }
.pp-card:not(.pp-card--photo) .pp-title { max-width: 20ch; }
.pp-card--frame .pp-sec { margin-top: 132px; }
.pp-card--frame .pp-sec[data-bg] { margin-top: 96px; }

.pp-sec[data-type="lede"] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.pp-sec[data-type="lede"] .pp-lead { grid-column: 1 / span 11; max-width: 30ch; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; letter-spacing: -.012em; }
.pp-sec[data-type="lede"] [data-sec="intro"] { grid-column: 6 / span 7; margin: 44px 0 0 !important; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--pp-fg) 16%, transparent); max-width: none !important; font-size: 17px; }

.pp-sec[data-type="deck"] .pp-h { margin-bottom: 44px; max-width: 18ch; }
.pp-deck { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 36px; counter-reset: ppstep; }
.pp-block { background: none; border-radius: 0; padding: 24px 0 0; border-top: 1px solid color-mix(in srgb, var(--pp-fg) 18%, transparent); counter-increment: ppstep; }
.pp-block::before { content: counter(ppstep, decimal-leading-zero); display: block; font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: -.02em; color: var(--pp-acid); margin: 0 0 30px; }
.pp-block h3 { color: var(--pp-fg); font-size: 18px; margin-bottom: 12px; }
.pp-block p { font-size: 16px; }

.pp-sec[data-type="text"] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
.pp-sec[data-type="text"] > .pp-kick { grid-column: 1 / -1; }
.pp-sec[data-type="text"] > .pp-h { grid-column: 1; margin: 0; }
.pp-sec[data-type="text"] > .pp-p { grid-column: 2; max-width: none !important; font-size: 18px; line-height: 1.75; margin: 6px 0 0; }

.pp-sec[data-type="quote"] { text-align: center; }
.pp-sec[data-type="quote"] .pp-kick::after { content: ''; display: block; width: 44px; height: 1px; background: var(--pp-acid); margin: 22px auto 0; }
.pp-sec[data-type="quote"] .pp-quote { margin: 12px auto 0; max-width: 22ch; font-style: normal; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.24; letter-spacing: -.015em; }
.pp-sec[data-type="quote"] .pp-quote strong { margin-top: 30px; }
.pp-sec[data-type="quote"] .pp-proofnag { margin-inline: auto; }

.pp-sec[data-type="price"] .pp-h { margin-bottom: 40px; }
.pp-close h2 { font-size: clamp(40px, 5.4vw, 68px); }

/* the editor's price tools sit back until the price is being worked on; an empty price reads as a prompt, not €0 */
.pp-card--edit .pp-pgroup__tools { opacity: .5; transition: opacity .25s ease; }
.pp-card--edit .pp-money:hover .pp-pgroup__tools, .pp-card--edit .pp-money:focus-within .pp-pgroup__tools { opacity: 1; }
.pp-addprice { color: #8a7a6e; border-bottom: 1px dashed rgba(36,18,38,.3); font-size: 15px; cursor: pointer; }
.pp-price td.num:hover .pp-addprice { color: var(--pp-paper-ink); border-bottom-color: var(--pp-paper-ink); }

/* THE FIRST LOOK: parts rise in as they arrive in view, on the app's entrance curve, once */
.pp-card [data-rv] { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--rv-d, 0s); }
.pp-card .pp-hero__photo[data-rv], .pp-card .pp-close__photo[data-rv] { transform: scale(1.035); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 2.6s cubic-bezier(0.16, 1, 0.3, 1); }
.pp-card [data-rv].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pp-card [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; } }
@media print { .pp-card [data-rv] { opacity: 1 !important; transform: none !important; } }

@media (max-width: 900px) {
  .pp-sec[data-type="lede"] { display: block; }
  .pp-sec[data-type="text"] { grid-template-columns: 1fr; row-gap: 18px; }
  .pp-sec[data-type="text"] > .pp-p { grid-column: 1; }
}
@media (max-width: 640px) {
  .pp-card--frame .pp-sec { margin-top: 76px; }
  .pp-block::before { font-size: 36px; margin-bottom: 18px; }
}

/* == THE FULL PROPOSAL (Peter, 1 Oct 2026: "I've answered 9 long questions and I've this tiny proposal") ======
   Qwilr's depth, Sana's air: every part of the proposal is its own layout so the page reads as a document, never
   one shape repeated. A headline band for the need, a lead column and a numbered list for the goal, stages down the
   page for the process, two cards for the scope, big numbers for why us, three columns for the story, people with a
   photo, an accordion for the questions, the small print folded away. Colours are the theme's custom properties
   only; photos are never painted. */
.pp-hair { border-top: 1px solid color-mix(in srgb, var(--pp-fg) 16%, transparent); }
.pp-ph { border-bottom: 1px dashed var(--pp-acid); color: var(--pp-acid); }
.pp-checknote { display: inline-block; font-size: 13.5px; line-height: 1.5; color: var(--pp-acid); border: 1px dashed color-mix(in srgb, var(--pp-acid) 70%, transparent); border-radius: 12px; padding: 9px 14px; margin: 0 0 26px; max-width: 62ch; }

/* the need: "[Client] needs" small, the outcome huge, two paragraphs under a hairline */
.pp-need__h { font-family: Fraunces, Georgia, serif; font-weight: 500; margin: 0 0 48px; letter-spacing: -.02em; }
.pp-need__who { display: block; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; color: var(--pp-on-ink-dim); font-weight: 400; margin-bottom: 10px; }
.pp-need__what { display: block; font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; color: var(--pp-title, var(--pp-fg)); max-width: 16ch; text-wrap: balance; }
.pp-need__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--pp-fg) 16%, transparent); }
.pp-need__cols .pp-p { margin: 0; font-size: 17.5px; }
.pp-need__cols .pp-p:first-child { color: var(--pp-fg); }

/* the goal: the lead on the left, the key areas as a numbered list on the right */
.pp-goal__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.pp-goal__lead .pp-h { margin-bottom: 22px; }
.pp-goal__lead .pp-p { margin: 0; }
.pp-areas { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; }
.pp-areas li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid color-mix(in srgb, var(--pp-fg) 16%, transparent); }
.pp-areas li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--pp-fg) 16%, transparent); }
.pp-areas__n { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--pp-acid); color: var(--pp-acid); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; margin-top: 2px; }
.pp-areas h3 { margin: 0 0 6px; font-size: 18px; font-weight: var(--weight-medium); color: var(--pp-fg); line-height: 1.35; }
.pp-areas p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--pp-on-ink); }
.pp-goal__close { font-family: Fraunces, Georgia, serif; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; color: var(--pp-fg); max-width: 34ch; margin: 56px 0 0; }

/* the process: stages down the page, a big numeral, the heading and a real paragraph */
.pp-steps__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: end; margin-bottom: 40px; }
.pp-steps__head .pp-h { margin: 0; }
.pp-steps__head .pp-p { margin: 0; }
.pp-stages { list-style: none; margin: 0; padding: 0; }
.pp-stages li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; padding: 34px 0; border-top: 1px solid color-mix(in srgb, var(--pp-fg) 16%, transparent); align-items: start; }
.pp-stages li > div { display: contents; }
.pp-stages__n { display: none; }
.pp-stages h3 { margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -.01em; color: var(--pp-fg); display: flex; gap: 18px; align-items: baseline; }
.pp-stages li { counter-increment: ppstage; }
.pp-stages { counter-reset: ppstage; }
.pp-stages h3::before { content: counter(ppstage, decimal-leading-zero); font-size: 15px; font-family: Inter, sans-serif; color: var(--pp-acid); letter-spacing: .04em; flex: none; }
.pp-stages p { margin: 0; font-size: 16.5px; line-height: 1.75; color: var(--pp-on-ink); }

/* scope: two cards, a tick for what is in, a dash for what is not */
.pp-scope__intro { max-width: 60ch; }
.pp-scope__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.pp-scope__col { border-radius: 20px; padding: 32px 32px 28px; }
.pp-scope__col--in { background: var(--pp-tint); }
.pp-scope__col--out { border: 1px solid color-mix(in srgb, var(--pp-fg) 18%, transparent); }
.pp-scope__col h3 { margin: 0 0 18px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: var(--weight-medium); color: var(--pp-acid); }
.pp-scope__col--out h3 { color: var(--pp-on-ink-dim); }
.pp-scope__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pp-scope__col li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--pp-on-ink); }
.pp-scope__col li i { width: 22px; height: 22px; display: inline-flex; margin-top: 2px; color: var(--pp-acid); }
.pp-scope__col--out li i { color: var(--pp-on-ink-dim); }
.pp-scope__col li svg { width: 20px; height: 20px; }
.pp-scope__col li strong { color: var(--pp-fg); font-weight: var(--weight-medium); }

/* why us: a statement, the big numbers, then the proof points */
.pp-statement { font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.08; letter-spacing: -.02em; color: var(--pp-fg); max-width: 18ch; margin: 0 0 26px; text-wrap: balance; }
.pp-stats__body { max-width: 58ch; font-size: 18px; }
.pp-bignums { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; margin: 52px 0 8px; }
.pp-bignums > div { padding-top: 20px; border-top: 1px solid var(--pp-acid); }
.pp-bignums__n { display: block; font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: clamp(54px, 7vw, 92px); line-height: .95; letter-spacing: -.035em; color: var(--pp-acid); }
.pp-bignums__l { display: block; font-size: 15px; line-height: 1.5; color: var(--pp-on-ink); margin-top: 12px; max-width: 22ch; }
.pp-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px; margin-top: 52px; }
.pp-points > div { padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--pp-fg) 16%, transparent); }
.pp-points h3 { margin: 0 0 10px; font-size: 17px; font-weight: var(--weight-medium); color: var(--pp-fg); line-height: 1.35; }
.pp-points p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--pp-on-ink); }

/* the testimonial: an initial in a ring stands in for the headshot */
.pp-quote__t::before { content: '“'; }
.pp-quote__t::after { content: '”'; }
.pp-quote__by { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; }
.pp-quote__by i { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--pp-acid); color: var(--pp-acid); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-family: Inter, sans-serif; font-size: 14px; letter-spacing: .04em; flex: none; }
.pp-sec[data-type="quote"] .pp-quote .pp-quote__by strong { margin-top: 0; display: inline; }
.pp-sec[data-type="quote"] .pp-quote { max-width: 24ch; }

/* the case story: three columns on a soft band */
.pp-story__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pp-story__cols > div { background: var(--pp-tint); border-radius: 20px; padding: 28px 28px 30px; }
.pp-story__label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--pp-acid); margin: 0 0 14px; }
.pp-story__cols .pp-p { margin: 0; font-size: 16px; line-height: 1.7; }

/* the team: a photo (or their initials until one is added), the name, the role, a short bio */
.pp-team__intro { max-width: 60ch; }
.pp-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 36px; margin-top: 28px; }
.pp-person { display: grid; grid-template-columns: 1fr; gap: 20px; }
.pp-team--one .pp-people { grid-template-columns: 1fr; }
.pp-team--one .pp-person { grid-template-columns: 200px minmax(0, 1fr); gap: 44px; align-items: center; background: var(--pp-tint); border-radius: 24px; padding: 28px; }
.pp-person__photo { position: relative; width: 132px; height: 132px; border-radius: 50%; background: color-mix(in srgb, var(--pp-acid) 22%, transparent) center / cover no-repeat; border: 1px solid color-mix(in srgb, var(--pp-acid) 60%, transparent); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; color: var(--pp-fg); font: inherit; padding: 0; overflow: hidden; }
.pp-team--one .pp-person__photo { width: 200px; height: 200px; border-radius: 18px; }
.pp-person__photo.has-photo { border-color: transparent; }
.pp-person__photo > span { font-family: Fraunces, Georgia, serif; font-size: 44px; line-height: 1; color: var(--pp-acid); }
.pp-person__photo em { font-style: normal; font-size: 12px; color: var(--pp-on-ink-dim); margin-top: 10px; }
button.pp-person__photo { cursor: pointer; }
button.pp-person__photo:hover { border-style: dashed; }
.pp-person__name { margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 28px; letter-spacing: -.01em; color: var(--pp-fg); }
.pp-person__role { margin: 6px 0 14px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--pp-acid); }
.pp-person .pp-p { margin: 0; font-size: 16px; line-height: 1.7; }

/* FAQs: an accordion on the client's page, all open in the editor */
.pp-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.pp-faq__head .pp-h { margin: 0; }
.pp-faq__list { border-top: 1px solid color-mix(in srgb, var(--pp-fg) 16%, transparent); }
.pp-faq__item { border-bottom: 1px solid color-mix(in srgb, var(--pp-fg) 16%, transparent); padding: 4px 0; }
.pp-faq__q { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 0; padding: 18px 0; font-size: 18px; font-weight: var(--weight-medium); line-height: 1.4; color: var(--pp-fg); cursor: pointer; list-style: none; }
.pp-faq__q::-webkit-details-marker { display: none; }
.pp-faq__q i { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--pp-fg) 24%, transparent); display: inline-flex; align-items: center; justify-content: center; transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1); }
.pp-faq__q i svg { width: 16px; height: 16px; }
details[open] > .pp-faq__q i { transform: rotate(45deg); }
.pp-faq__a { margin: 0 0 20px; font-size: 16px; line-height: 1.75; color: var(--pp-on-ink); max-width: 62ch; }
.pp-faq__item.is-open .pp-faq__q { cursor: text; padding-bottom: 8px; }

/* the small print: folded away on the client's page, small type in two columns */
.pp-terms__box { border-top: 1px solid color-mix(in srgb, var(--pp-fg) 16%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--pp-fg) 16%, transparent); }
.pp-terms__sum { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 24px 0; cursor: pointer; list-style: none; }
.pp-terms__sum::-webkit-details-marker { display: none; }
.pp-terms__sum .pp-kick { display: block; margin-bottom: 8px; }
.pp-terms__h { display: block; font-family: Fraunces, Georgia, serif; font-size: 26px; font-weight: 500; color: var(--pp-fg); }
.pp-terms__sum i { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--pp-fg) 24%, transparent); display: inline-flex; align-items: center; justify-content: center; color: var(--pp-fg); transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1); }
.pp-terms__sum i svg { width: 16px; height: 16px; }
details[open] > .pp-terms__sum i { transform: rotate(45deg); }
.pp-terms__hint { font-size: 12.5px; color: var(--pp-on-ink-dim); }
.pp-terms__box.is-open .pp-terms__sum { cursor: default; }
.pp-terms__list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 48px; padding: 4px 0 30px; }
.pp-terms__list h3 { margin: 0 0 6px; font-size: 14px; font-weight: var(--weight-medium); color: var(--pp-fg); }
.pp-terms__list p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--pp-on-ink-dim); }

/* the editor marks every word as editable on hover; the client's page never does */
.pp-card--edit [contenteditable="true"][data-field]:empty::before { content: 'Type here'; color: var(--pp-on-ink-dim); }
/* a section being built arrives (the Studio builds the proposal section by section after the answers) */
@keyframes ppArrive { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
.pp-arrive { animation: ppArrive .8s cubic-bezier(0.16, 1, 0.3, 1) both; }
@media (prefers-reduced-motion: reduce) { .pp-arrive { animation: none; } }
@media print {
  .pp-faq__item, .pp-scope__col, .pp-person, .pp-stages li, .pp-story__cols > div { break-inside: avoid; }
  .pp-checknote { display: none; }
}

@media (max-width: 900px) {
  .pp-goal__grid, .pp-steps__head, .pp-faq { grid-template-columns: 1fr; gap: 28px; }
  .pp-stages li { grid-template-columns: 1fr; gap: 12px; }
  .pp-story__cols { grid-template-columns: 1fr; }
  .pp-team--one .pp-person { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
  .pp-need__cols, .pp-scope__cols, .pp-terms__list { grid-template-columns: 1fr; gap: 18px; }
  .pp-need__h { margin-bottom: 32px; }
  .pp-scope__col { padding: 24px 22px; }
  .pp-bignums { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
  .pp-bignums__n { font-size: 54px; }
  .pp-points { margin-top: 36px; gap: 24px; }
  .pp-team--one .pp-person { padding: 20px; }
  .pp-team--one .pp-person__photo { width: 140px; height: 140px; }
  .pp-faq__q { font-size: 16.5px; }
}

/* the + menu lists every kind of section now (1 Oct): words only, four across */
.pp-addmenu { grid-template-columns: repeat(4, 1fr); min-width: 560px; }
.pp-addmenu > button { padding: 11px 8px; font-size: 13px; }
@media (max-width: 640px) { .pp-addmenu { min-width: 300px; grid-template-columns: repeat(2, 1fr); } }
.pp-need__what::first-letter { text-transform: uppercase; }

/* == THE PRICE, Bullet's own look (Peter, 1 Oct 2026: "Make the pricing section look identical to Bullet. Your
   version looks dated, and get rid of the shadow"). The legacy proposals pricing block: flat, hairlines, a light
   grey group, the app's type (Inter) and tokens, never the serif, never a shadow or a paper gradient. ========== */
.pp-money.pq-money { background: #fff; color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: none !important; padding: 32px; font-family: var(--font-body); }
.pp-card--light .pp-money.pq-money { box-shadow: none; }
.pq-money .pp-pgroup + .pp-pgroup, .pq-money .pq-notes + .pp-pgroup { margin-top: 22px; }
.pq-group { background: var(--color-bg-subtle-light); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: visible; }
.pq-group__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); border-radius: var(--radius-md) var(--radius-md) 0 0; padding: 22px 26px 22px 36px; }
.pq-group__name { font-size: var(--text-heading); font-weight: var(--weight-regular); letter-spacing: -.005em; color: var(--color-text); min-width: 40%; }
.pq-group__name:empty::before, .pq-notes:empty::before { content: attr(data-ph); color: #8c959f; }
.pq-bin { width: 30px; height: 30px; border: none; background: none; color: var(--color-border-strong); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; padding: 0; }
.pq-bin:hover { color: var(--color-text); background: #fff; }
.pq-bin svg { width: 16px; height: 16px; }
table.pq-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.pq-table th { text-align: left; font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--color-text); padding: 20px 12px 10px; white-space: nowrap; }
.pq-table th.pq-c-n { text-align: center; }
.pq-table th.pq-c-price { text-align: right; }
.pq-table td { padding: 15px 12px; border-bottom: 1px solid var(--color-border); vertical-align: middle; font-size: var(--text-base); color: var(--color-text); }
.pq-table tbody tr:last-child td { border-bottom: none; }
.pq-table td.pq-c-n { text-align: center; white-space: nowrap; }
.pq-table td.pq-c-price { text-align: right; }
.pq-table .pq-c-opt { width: 46px; padding-left: 20px; padding-right: 0; border-bottom: none; }
.pq-table .pq-c-desc { padding-left: 14px; }
.pq-table tr:not(:has(.pq-c-opt)) .pq-c-desc, .pq-table thead tr:not(:has(.pq-c-opt)) th.pq-c-desc { padding-left: 36px; }
.pq-table .pq-c-menu { width: 44px; padding: 0 12px 0 0; text-align: right; border-bottom-color: transparent; }
.pq-tax { color: #b3b6ba; white-space: nowrap; }
.pq-meta { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 3px; }
.pq-unit { color: var(--color-text-muted); font-size: var(--text-xs); }
.pq-off { display: block; font-size: var(--text-xs); color: var(--color-text); margin-top: 3px; }
.pq-off b { font-weight: var(--weight-bold, 700); }
.pq-table tr.is-off td { color: #a3a6aa; }
.pq-table tr.is-off td.pq-c-price { text-decoration: line-through; }
.pq-eye { width: 20px; height: 20px; margin-left: 8px; border-radius: 50%; border: 1px solid var(--color-border-strong); background: #fff; color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; vertical-align: -5px; padding: 0; cursor: pointer; }
.pq-eye svg { width: 12px; height: 12px; }
.pq-eye.is-off { color: #c3c5c8; border-color: var(--color-border); background: transparent; }
.pq-eye:hover { color: var(--color-text); border-color: var(--color-text); }
.pq-check { position: relative; display: inline-flex; width: 22px; height: 22px; cursor: pointer; vertical-align: middle; }
.pq-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pq-check i { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--color-border-strong); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: transparent; pointer-events: none; }
.pq-check i svg { width: 15px; height: 15px; }
.pq-check input:checked + i { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.pq-check input:focus-visible + i { outline: 2px solid var(--color-text); outline-offset: 2px; }
.pp-card--edit .pq-table tr:not(.is-opt) .pq-check { opacity: .35; }
.pp-card--edit .pq-table tr:hover .pq-check { opacity: 1; }
.pq-more { width: 30px; height: 30px; border: none; background: none; border-radius: 50%; color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.pq-more svg { width: 18px; height: 18px; }
.pq-more:hover { background: #fff; color: var(--color-text); }
.pp-card--edit .pq-table td.num { cursor: pointer; }
.pq-addline, .pq-addgroup { display: inline-flex; align-items: center; gap: 10px; border: none; background: none; font: inherit; font-size: var(--text-xs); color: #a3a6aa; padding: 14px 20px 18px; cursor: pointer; }
.pq-addline i, .pq-addgroup i { width: 24px; height: 24px; display: inline-flex; color: var(--color-text); }
.pq-addline i svg, .pq-addgroup i svg { width: 24px; height: 24px; }
.pq-addline:hover, .pq-addgroup:hover { color: var(--color-text); }
.pq-addgroup { padding: 16px 4px 0; }
.pq-notes { font-size: var(--text-base); color: var(--color-text); margin: 18px 12px 0; }
.pp-card--edit .pq-notes { min-height: 1.6em; }
.pq-totals { border-top: none !important; margin: 34px 12px 0 auto !important; padding-top: 0 !important; width: max-content; min-width: 260px; display: grid; gap: 10px !important; }
.pq-totals > div { display: grid !important; grid-template-columns: 1fr minmax(110px, auto); gap: 40px; font-size: var(--text-base) !important; color: var(--color-text) !important; }
.pq-totals > div > span { text-align: right; }
.pq-totals > div > strong { font-weight: var(--weight-regular); }
.pq-totals .pp-ptotals__total { font-size: var(--text-base) !important; padding-top: 2px; }
.pq-totals .pp-ptotals__total span, .pq-totals .pp-ptotals__total strong { font-weight: var(--weight-bold, 700) !important; font-family: var(--font-body) !important; font-size: var(--text-base) !important; letter-spacing: 0; color: var(--color-text) !important; }
.pq-card { margin: 40px auto 0; width: max-content; min-width: 300px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-subtle-light); padding: 28px 52px 30px; display: grid; gap: 8px; }
.pq-card > div { display: grid; grid-template-columns: 1fr auto; gap: 40px; font-size: var(--text-base); color: var(--color-text); }
.pq-card > div > span { text-align: right; }
.pq-card__total { margin-top: 4px; }
.pq-card__total span, .pq-card__total strong { font-size: var(--text-section); font-weight: var(--weight-bold, 700); }
.pq-money .pp-billnote { color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; margin-top: 18px; }
.pq-money .pp-sig { border-top-color: var(--color-border); }
.pq-money .pp-sig__name { font-family: var(--font-body); font-size: var(--text-section); font-weight: var(--weight-medium); letter-spacing: 0; }
.pq-money .pp-sig__meta { color: var(--color-text-muted); border-top-color: var(--color-border); }
.pq-money .pp-line__mine { color: #8a6a2e; font-size: var(--text-xs); display: block; margin-top: 3px; }
.pq-money .pp-addprice { color: var(--color-text-muted); border-bottom-color: var(--color-border-strong); font-size: var(--text-sm); }
.pq-money .pp-textline td { font-weight: var(--weight-medium); padding-left: 36px; position: relative; }
.pq-money .pp-line__x { right: 14px; top: 12px; }
.pp-card--edit .pq-money .pp-pgroup__tools { opacity: 1; }
.pq-money [contenteditable="true"]:hover { border-bottom-color: var(--color-border-strong); }
.pq-money [contenteditable="true"]:focus { border-bottom-color: var(--color-text); }
.pq-money .pp-linemenu { font-family: var(--font-body); }
.pq-table tr > :last-child:not(.pq-c-menu) { padding-right: 26px; }
.pq-table tr.is-off td.num:not(.pq-c-price) { text-decoration: none; }
.pq-card__total span, .pq-card__total strong { white-space: nowrap; }
@media (max-width: 760px) {
  .pp-money.pq-money { padding: 16px 12px; }
  .pq-table, .pq-table tbody { display: block; }
  .pq-table tr > :last-child:not(.pq-c-menu) { padding-right: 8px; }
  .pq-table td.pq-c-price { white-space: nowrap; padding-right: 12px !important; }
  .pq-card__total span, .pq-card__total strong { font-size: var(--text-base); }
  .pq-group__head { padding: 16px 16px; }
  .pq-group__name { font-size: var(--text-section); }
  .pq-table { font-size: var(--text-sm); }
  .pq-table thead { display: none; }
  .pq-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; border-bottom: 1px solid var(--color-border); padding: 12px 12px 12px 0; }
  .pq-table tr:last-child { border-bottom: none; }
  .pq-table td { border: none !important; padding: 2px 8px !important; }
  .pq-table td.pq-c-desc { grid-column: 2; padding-left: 8px !important; }
  .pq-table td.pq-c-opt { grid-row: 1 / span 4; padding-left: 12px !important; width: auto; }
  .pq-table td.pq-c-n:not(.pq-c-price) { grid-column: 2; text-align: left; font-size: var(--text-xs); color: var(--color-text-muted); }
  .pq-table td.pq-c-n:not(.pq-c-price)::before { content: attr(data-label) ' '; }
  .pq-table td.pq-c-price { grid-column: 3; grid-row: 1; text-align: right; }
  .pq-table td.pq-c-menu { grid-column: 3; grid-row: 2; }
  .pq-table .pp-textline { display: block; }
  .pq-totals { margin-right: 4px !important; min-width: 0; }
  .pq-card { padding: 22px 26px; min-width: 0; width: auto; }
}

/* a price not given yet (1 Oct): the editor's dashed placeholder; the client only ever reads "Price to follow" */
.pq-money .pp-addprice, .pq-ph { color: var(--color-text-muted); border-bottom: 1px dashed var(--color-border-strong); font-weight: var(--weight-regular); font-size: var(--text-sm); }
.pq-totals .pp-ptotals__total .pq-ph, .pq-card__total .pq-ph { font-weight: var(--weight-regular) !important; font-size: var(--text-sm) !important; color: var(--color-text-muted) !important; }
.pq-tofollow { margin: 0; padding: 26px 8px; text-align: center; font-size: var(--text-base); color: var(--color-text-muted); }