/* draft-surface.css — extracted from draft.html 2026-07-30 so the SAME surface can be
 * mounted inside the slide-out sheet on grant pages.
 *
 * ⚠ Tokens are scoped to `.ds-scope`, NOT `:root`. This file now loads on ~690 grant
 * pages that define their own --forest/--sienna/--cream; a :root block here would
 * silently restyle every one of them. Put `.ds-scope` on whatever element wraps the
 * surface (draft.html puts it on <body>; the sheet puts it on the panel).
 * The `*`, `html` and `body` rules deliberately stayed inline on draft.html. */
/* Design tokens defined LOCALLY — this page must survive without homepage-v7.css.
   Palette + type per .impeccable.md (warm editorial, light mode only). */
.ds-scope{
  --paper:#FFFDF9; --cream:#FAF7F2; --cream-dk:#F1EBE1;
  --ink:#1C1917; --ink-60:#5C5550; --ink-40:#8B837C;
  --forest:#2D6A4F; --forest-dk:#1B4332; --forest-lt:#D8F3DC;
  --sienna:#C4532B; --sienna-dk:#A3401F;
  --gold:#B8860B; --gold-lt:#FEF3C7;
  --line:rgba(28,25,23,.12); --line-soft:rgba(28,25,23,.07);
  --serif:'Fraunces',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
}



.ds-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ⚠ THE EXTRACTION BUG (2026-07-30). draft.html styled this content through
   `body{font-family:var(--sans);line-height:1.6;color:var(--ink)}`, which stayed inline on
   that page when the tokens moved here. On a grant page nothing then set a font at all:
   <body> there resolves `var(--sans)` against a token it does not define, so the
   declaration is invalid at computed-value time and the whole sheet fell back to TIMES
   beside a site running DM Sans. Whatever carries `.ds-scope` must carry the typography
   too — the tokens and the rule that consumes them cannot live on different surfaces. */
.ds-scope{font-family:var(--sans);line-height:1.6;color:var(--ink);-webkit-font-smoothing:antialiased}
.ds-scope h1,.ds-scope h2,.ds-scope h3{color:var(--ink)}

.ds{max-width:1080px;margin:0 auto;padding:clamp(26px,5vw,60px) clamp(16px,4vw,40px) 80px}
.ds-head{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:clamp(20px,3vw,32px)}
.ds-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--forest);margin:0 0 10px}
.ds-title{font-family:var(--serif);font-weight:600;font-size:clamp(25px,3.6vw,40px);line-height:1.1;letter-spacing:-.02em;margin:0;max-width:22ch}

.ds-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,34px)}
@media(min-width:900px){.ds-grid{grid-template-columns:minmax(0,1fr) 320px;align-items:start}}
.ds-main{min-width:0}

/* progress — denominator is the APPLICATION, never the free section */
.ds-prog{margin-bottom:18px}
.ds-prog-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.ds-prog-label{font-size:14.5px;font-weight:500}
.ds-prog-count{font-family:var(--mono);font-size:11.5px;color:var(--ink-60);letter-spacing:.04em}
.ds-meter{height:5px;border-radius:3px;background:var(--cream-dk);overflow:hidden}
.ds-meter i{display:block;height:100%;background:var(--forest);border-radius:3px;transition:width .32s cubic-bezier(.22,1,.36,1)}

.ds-doc{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,32px)}
.ds-sec-title{font-family:var(--serif);font-size:clamp(18px,2.2vw,22px);font-weight:600;letter-spacing:-.012em;margin:0 0 14px}
.ds-prose p{margin:0 0 14px;font-size:16px;line-height:1.75;color:#2E2A26}
.ds-prose p:last-child{margin-bottom:0}

/* tokens — the trust claim made visible.
   ⚠ These are drawn as EMPTY FIELDS, not as tinted words. Tinted words are indistinguishable
   from emphasis when you are scanning a paragraph, and real model output on 2026-07-30 read as
   "...for vulnerable children your target." — grammatically broken prose rather than a gap to
   fill. A dashed field with a pencil is the one convention no reader has to be taught.
   `display:inline` + box-decoration-break:clone so a long label wraps across lines like text
   instead of forcing its own box wider than the column (an inline-flex chip cannot wrap and
   overflows at 320px). */
.ds-tok{display:inline;font:inherit;cursor:pointer;padding:1px 7px;border-radius:6px;
  line-height:inherit;text-align:left;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background .16s ease,border-color .16s ease}
.ds-tok-ico{display:inline-block;width:11px;height:11px;margin-right:5px;vertical-align:-1px;opacity:.85}
.ds-tok-ico svg{width:100%;height:100%;display:block}
.ds-tok-lab{font-style:italic}
.ds-tok--fill{background:rgba(196,83,43,.07);color:var(--sienna-dk);border:1.5px dashed rgba(196,83,43,.55)}
.ds-tok--fill:hover{background:rgba(196,83,43,.15);border-color:var(--sienna)}
.ds-tok--confirm{background:rgba(184,134,11,.09);color:#7A5A08;border:1.5px dashed rgba(184,134,11,.55)}
.ds-tok--confirm:hover{background:var(--gold-lt);border-color:var(--gold)}
.ds-tok:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
/* A FILLED blank keeps a field treatment, in a different grammar from an empty one: SOLID
   hairline (dashed means "not answered"), tinted forest (this is settled, not outstanding), no
   pencil icon, upright text. It says "your answer, placed here, not yet written in" — which is
   the truth until the weave runs, and it is the only thing standing between a founder's phrase
   and a model's sentence colliding into broken English. Still a button: an answer they can see
   is an answer they must be able to change. */
.ds-tok--filled{display:inline;background:rgba(45,106,79,.08);color:var(--ink);
  border:1px solid rgba(45,106,79,.3);padding:1px 6px;border-radius:6px}
.ds-tok--filled:hover{background:rgba(45,106,79,.15);border-color:rgba(45,106,79,.6)}
.ds-tok-val{font-style:normal}

.ds-trust{margin:16px 0 0;font-size:14px;color:var(--ink-60);background:rgba(45,106,79,.06);
  border-left:3px solid var(--forest);border-radius:0 9px 9px 0;padding:13px 16px}
.ds-trust b{color:var(--forest-dk);font-weight:500}

/* masthead */
.ds-mast{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1080px;margin:0 auto;padding:16px clamp(16px,4vw,40px) 0}
.ds-mast-brand{display:inline-flex;align-items:center;gap:8px;color:var(--forest-dk);
  text-decoration:none;font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:-.01em}
.ds-mast-brand:hover{color:var(--sienna-dk)}
.ds-mast-mark{width:20px;height:20px;flex:0 0 auto}
.ds-mast-mark svg{width:100%;height:100%;display:block}
.ds-mast-back{color:var(--ink-60);text-decoration:none;font-size:13.5px;
  padding:8px 4px;border-radius:6px}
.ds-mast-back:hover{color:var(--forest-dk);text-decoration:underline;text-underline-offset:3px}

/* the section map — one place that answers "how much is left" */
.ds-map{background:var(--paper);border:1px solid var(--line-soft);border-radius:13px;
  padding:16px 18px;margin-bottom:14px}
.ds-map-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-40);margin:0 0 12px;font-weight:500}
.ds-map-list{list-style:none;margin:0;padding:0}
.ds-map-row{display:block;padding:0;border-top:1px solid var(--line-soft)}
.ds-map-row:first-child{border-top:0}
/* Every row is a real control (2026-08-30) — the flex layout moved from the <li> to the
   button so the whole row is one press target. */
.ds-map-btn{display:flex;gap:11px;align-items:flex-start;width:100%;padding:9px 4px;margin:0;
  background:none;border:0;font:inherit;text-align:left;color:inherit;cursor:pointer;
  border-radius:8px}
.ds-map-row:first-child .ds-map-btn{padding-top:0}
.ds-map-btn:hover{background:rgba(45,106,79,.05)}
.ds-map-btn:hover .ds-map-t{color:var(--forest-dk)}
.ds-map-btn:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.ds-map-note{margin:10px 0 0;font-size:12px;color:var(--ink-60);line-height:1.45}
/* the ask card's answer to a locked-row press: come here, once, briefly */
.ds-ask--pulse{animation:dsAskPulse 1.1s ease 1}
@keyframes dsAskPulse{0%{box-shadow:0 0 0 0 rgba(196,83,43,.35)}100%{box-shadow:0 0 0 16px rgba(196,83,43,0)}}
@media (prefers-reduced-motion: reduce){.ds-ask--pulse{animation:none}}
.ds-map-ico{width:15px;height:15px;color:var(--ink-40);flex:0 0 auto;margin-top:3px}
.ds-map-ico svg{width:100%;height:100%;display:block}
.ds-map-row--now .ds-map-ico{color:var(--forest)}
.ds-map-t{margin:0;font-size:14.5px;font-weight:500;line-height:1.35}
.ds-map-row--now .ds-map-t{color:var(--forest-dk)}
.ds-map-s{margin:2px 0 0;font-size:12.5px;color:var(--ink-60);line-height:1.45}
.ds-map-row--now .ds-map-s{color:var(--forest);font-weight:500}

/* the ask rail */
.ds-rail{position:relative}
@media(min-width:900px){.ds-rail{position:sticky;top:24px}}
.ds-ask{background:var(--paper);border:1px solid rgba(196,83,43,.3);border-radius:13px;padding:20px}
.ds-ask--premium{border-color:rgba(45,106,79,.4);background:linear-gradient(180deg,rgba(216,243,220,.4),var(--paper) 55%)}
.ds-ask--quiet{border-color:var(--line-soft);background:transparent}
.ds-ask-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);margin:0 0 9px}
.ds-ask-h{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.014em;margin:0 0 8px;line-height:1.22}
.ds-ask-p{font-size:14px;color:var(--ink-60);margin:0 0 15px}

/* ⚠ `text-decoration:none` belongs on the CLASS, not on an inline style on whichever <a>
   happened to exist when it was written. The premium-member CTA is an <a class="ds-btn"> and
   shipped underlined, because the one anchor that already used this class carried the fix
   inline. Any future anchor button would have inherited the same defect. */
.ds-btn{display:block;width:100%;background:var(--sienna);color:#fff;font-family:var(--sans);font-weight:500;
  font-size:15px;padding:12px 18px;border-radius:9px;border:0;cursor:pointer;text-align:center;
  text-decoration:none;transition:background .16s ease}
.ds-btn:hover,.ds-btn:focus,.ds-btn:visited,.ds-btn:active{background:var(--sienna-dk);color:#fff;text-decoration:none}
.ds-btn:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.ds-btn--sm{width:auto;font-size:13.5px;padding:9px 15px}
/* ⚠ COLOUR SEMANTICS, set 2026-07-30. Sienna means MONEY OR ACCOUNT (Sign Up Free, Get
   Premium, Finish all 4). Forest means the FREE DRAFTING ACTION. Before this, "Write my
   opening" was forest on the grant page and sienna one screen later — the same action, two
   colours across a single handoff — while on this page the free action and the $39/mo ask
   were both sienna, so the page's only colour signal distinguished nothing. */
.ds-btn--draft{background:var(--forest)}
.ds-btn--draft:hover,.ds-btn--draft:focus,.ds-btn--draft:active{background:var(--forest-dk)}
.ds-link{background:none;border:0;color:var(--forest-dk);font-family:var(--sans);font-size:14px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.ds-link--sm{font-size:13px}
.ds-micro{font-size:12.5px;color:var(--ink-40);margin:10px 0 0}

/* ask state */
.ds-askbox{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:clamp(22px,3.5vw,38px);max-width:560px}
.ds-ask-title{font-family:var(--serif);font-size:clamp(21px,2.8vw,28px);font-weight:600;letter-spacing:-.018em;margin:0 0 8px;line-height:1.18}
.ds-ask-sub{font-size:15px;color:var(--ink-60);margin:0 0 20px}
.ds-askbox > .ds-ask-title + .ds-btn{margin-top:14px}
.ds-err-alt{margin:8px 0 0}
.ds-err-alt .ds-link{min-height:44px}
.ds-form{display:flex;flex-direction:column;gap:10px}
@media(min-width:560px){.ds-form{flex-direction:row}.ds-form .ds-btn{width:auto;flex:0 0 auto}}
.ds-input{box-sizing:border-box;flex:1 1 auto;min-width:0;font-family:var(--sans);font-size:15.5px;padding:12px 14px;
  border:1px solid var(--line);border-radius:9px;background:var(--cream);color:var(--ink)}
.ds-input:focus{outline:2px solid var(--forest);outline-offset:1px;background:var(--paper)}
/* The description route is a FIRST-CLASS route (half of real users have no website), so it
   gets a field sized for a sentence or two. ⚠ `.ds-form` turns into a row at 560px, which
   would stand a 3-row textarea beside a button; the description form stays stacked. */
.ds-input--area{width:100%;resize:vertical;line-height:1.55;min-height:88px}
/* the funder's second question, asked up front on a two-answer form (2026-10-30): the question in its own words,
   one muted line under it, a short field. Optional, so it never outweighs the main field. */
.ds-ask2{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.ds-ask2-q{font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ink);text-wrap:balance}
.ds-ask2-opt{font-size:12.5px;line-height:1.4;color:var(--ink-60);margin-bottom:4px}
.ds-input--short{min-height:64px}
.ds-form--stack{flex-direction:column}
@media(min-width:560px){.ds-form--stack{flex-direction:column}
  .ds-form--stack .ds-btn{width:auto;align-self:flex-start}}

/* the two-way door — the other route, on screen, at the same time */
.ds-alt{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-soft)}
.ds-alt-lab{margin:0 0 8px;font-size:13.5px;color:var(--ink-60)}
.ds-alt-btn{display:inline-block;font-family:var(--sans);font-size:14.5px;font-weight:500;
  color:var(--forest-dk);background:var(--cream);border:1px solid rgba(45,106,79,.35);
  border-radius:9px;padding:11px 16px;min-height:44px;cursor:pointer;text-align:left;
  max-width:100%;transition:background .16s ease,border-color .16s ease}
.ds-alt-btn:hover{background:var(--forest-lt);border-color:rgba(45,106,79,.6)}
.ds-alt-btn:focus-visible{outline:2px solid var(--forest);outline-offset:2px}

/* provenance — what this draft is being written from, and one click to change it */
.ds-prov{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;
  font-size:13px;color:var(--ink-60)}
.ds-prov-t{min-width:0;overflow-wrap:anywhere}
.ds-prov-edit{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:13px;
  color:var(--forest-dk);background:none;border:0;padding:6px 4px;min-height:32px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.ds-prov-edit:hover{color:var(--sienna-dk)}
.ds-prov-edit:focus-visible{outline:2px solid var(--forest);outline-offset:2px;border-radius:6px}
/* touch: "Change" (32px) and "Copy this draft" (29px) measured under 44px at 390 (2026-10-22 sweep); the hit area grows, the text does not move */
@media (pointer:coarse),(max-width:640px){.ds-prov-edit,.ds-link--sm{min-height:44px;display:inline-flex;align-items:center}}
.ds-prov-ico{width:12px;height:12px;flex:0 0 auto}
.ds-prov-ico svg{width:100%;height:100%;display:block}

/* the website OFFER — never a gate, and it keeps what you typed across a re-render.
   ⚠ It now lives INSIDE `.ds-prov`, beside Edit, because it is a statement about the source.
   ⚠ And its border is SOLID: dashed is the grammar of an unfilled blank on this surface, and
   wearing it made an optional enrichment read as something missing from the draft. */
.ds-offerwrap{min-width:0}
.ds-offerwrap--open{flex:1 1 100%;margin-top:4px}
.ds-offer-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13px;
  color:var(--forest-dk);background:transparent;border:1px solid rgba(45,106,79,.32);border-radius:8px;
  padding:6px 11px;min-height:32px;cursor:pointer;text-align:left;max-width:100%}
.ds-offer-btn:hover{background:var(--forest-lt);border-color:rgba(45,106,79,.65)}
.ds-offer-btn:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.ds-offer-ico{width:13px;height:13px;flex:0 0 auto}
.ds-offer-ico svg{width:100%;height:100%;display:block}
.ds-offer-form{display:flex;gap:10px;flex-direction:column}
@media(min-width:560px){.ds-offer-form{flex-direction:row;align-items:center}
  .ds-offer-form .ds-btn{width:auto;flex:0 0 auto}}
.ds-input--sm{font-size:14.5px;padding:10px 12px}
.ds-offer-lab{margin:0 0 9px;font-size:13px;color:var(--ink-60)}

/* loading — the wait is ~20s median, so it has to be worth looking at */
.ds-loadbox{max-width:560px;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:clamp(20px,3vw,28px)}
.ds-load-why{margin:16px 0 0;padding-top:15px;border-top:1px solid var(--line-soft);
  font-size:13.5px;line-height:1.6;color:var(--ink-60)}
.ds-load-why b{color:var(--forest-dk);font-weight:500}
.ds--load .ds-load{display:flex;align-items:center;gap:10px;font-size:15.5px;color:var(--ink);margin:0}
.ds-dot{width:8px;height:8px;border-radius:50%;background:var(--sienna);animation:dspulse 1.5s ease-out infinite}
@keyframes dspulse{0%{opacity:1;transform:scale(1)}70%{opacity:.2;transform:scale(1.6)}100%{opacity:1;transform:scale(1)}}

/* editor popover */
/* ⚠ `position:fixed`, not absolute, and above the sheet. Absolute + window.scrollY is
   document-relative, but the sheet scroll-locks <body> to position:fixed, so the editor
   landed far off its blank; and z-index 9999 sat UNDER the sheet panel (10001), so it was
   invisible even when correctly placed. Clicking a blank did nothing at all — the single
   most important interaction on the surface, dead, while every component test passed. */
.ds-pop{position:fixed;z-index:10050;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:15px 16px;box-shadow:0 12px 34px -14px rgba(28,25,23,.35);width:min(320px,calc(100vw - 24px))}
.ds-pop-q{font-family:var(--serif);font-size:16px;font-weight:600;margin:0 0 6px;line-height:1.3}
.ds-pop-h{font-size:12.5px;color:var(--ink-40);margin:0 0 12px}
.ds-pop-in{width:100%;font-family:var(--sans);font-size:15px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--cream);margin-bottom:11px}
.ds-pop-in:focus{outline:2px solid var(--forest);outline-offset:1px}
.ds-pop-row{display:flex;gap:12px;align-items:center}
.ds-chips{display:flex;gap:8px;flex-wrap:wrap}
.ds-chip{font-family:var(--sans);font-size:13.5px;padding:8px 14px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--cream);color:var(--ink)}
.ds-chip:hover{background:var(--forest-lt);border-color:rgba(45,106,79,.4)}
.ds-chip:focus-visible{outline:2px solid var(--forest);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* Export affordance + provenance + the locks' unlock path (2026-07-30, founder lens and
   blind review). */
.ds-doc-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0}
/* short-form preview (2026-10-29): the server sent only the opening of answer 1; say so where the text stops */
.ds-preview-note{margin:12px 0 0;padding:10px 0 0;border-top:1px dashed var(--line);font:500 14px/1.45 var(--sans);color:var(--ink)}
/* ⚠ The promoted Copy button is a real touch target, not a small one. `.ds-btn--sm` computes to
   35px, which the 9-width stress test flags on every phone size — and this is the payoff
   control at the surface's highest-investment moment, on the 38% of traffic that is mobile. */
.ds-doc-act .ds-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.ds-doc-act-note{font-size:12.5px;color:var(--forest);min-height:1em}
.ds-doc-act-note:empty{display:none}
/* QA r2 G1: the one-line jump to the offer card, under the free draft's Copy button (phones/tablets only: at 900px+
   the card sits beside the draft) */
.ds-ar-jump{margin:4px 0 0}
.ds-ar-jump .ds-link{min-height:44px;display:inline-flex;align-items:center;padding:0;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(min-width:900px){.ds-ar-jump{display:none}}
.ds-trust-src{display:block;margin-top:5px;color:var(--ink-40);font-size:12.5px}

/* THE LADDER (2026-07-30). Two asks can now stand in the rail at once — the free door and,
   below it, the paid one. They need a real gap: adjacent offer blocks read as a paywall, and
   the free ask is not an offer at all, so it must not look like the first half of one. */
.ds-ask + .ds-ask{margin-top:18px}

/* The program's intake status, disclosed once, quietly, under the title. Not an alert: it does
   not stop anything, and a founder may well want the draft ready for the next intake. */
.ds-statusnote{margin:0 0 clamp(16px,2.4vw,24px);font-size:13.5px;line-height:1.55;
  color:var(--ink-60);border-left:3px solid rgba(184,134,11,.55);
  background:rgba(184,134,11,.06);border-radius:0 8px 8px 0;padding:10px 14px;max-width:62ch}

/* The handover, when prose typed into the website field becomes the description. An
   explanation, not an error: forest, not red, and their sentence is still in the field. */
.ds-ask-hand{margin:-8px 0 18px;font-size:13.5px;line-height:1.55;color:var(--forest-dk);
  background:rgba(45,106,79,.07);border-radius:8px;padding:9px 12px}

/* the weave — "my answers make the draft better" (spec §W4, 2026-07-30).
   Deliberately the same visual language as the two-way door and the website offer: a bordered
   forest affordance on cream, 44px minimum, never a sienna button. It is a FREE action on the
   draft the visitor already has, and colour on this surface means money-or-account. */
.ds-weave{margin:0 0 16px}
.ds-weave-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14.5px;
  font-weight:500;color:var(--forest-dk);background:var(--cream);border:1px solid rgba(45,106,79,.35);
  border-radius:9px;padding:11px 16px;min-height:44px;cursor:pointer;text-align:left;max-width:100%;
  transition:background .16s ease,border-color .16s ease}
.ds-weave-btn:hover{background:var(--forest-lt);border-color:rgba(45,106,79,.6)}
.ds-weave-btn:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.ds-weave-ico{width:13px;height:13px;flex:0 0 auto}
.ds-weave-ico svg{width:100%;height:100%;display:block}
.ds-weave-sub{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-60);max-width:56ch}
.ds-weave-note{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--forest);max-width:56ch}
.ds-weave-note:empty{display:none}
/* the working state: a line, not a spinner over the page — the draft must stay readable */
.ds-weave--busy{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-60);
  background:var(--cream);border:1px solid var(--line-soft);border-radius:9px;padding:11px 14px}
.ds-weave--busy .ds-dot{flex:0 0 auto}
/* ⚠ Both halves are needed. `pointer-events` is the visible half (the cursor stops offering an
   edit); the JS guard in wire() is the real one, because a stylesheet that fails to load must
   not be able to re-enable an interaction whose result we would have to throw away. */
.ds-doc--weaving{opacity:.72;transition:opacity .2s ease}
.ds-doc--weaving .ds-tok{pointer-events:none}

/* ══ "Finish this application" — the B1 card (2026-10-06) ═══════════════════════════════════════
   Plan docs/superpowers/plans/2026-10-04-finish-this-application.md Task 10; approved design
   dev-assets/apply-ready-canada-2026-10-04/v2/variants2.js (B1_CSS), ported verbatim and scoped under
   .ds-scope so the grant page's own element rules can never reach inside it.
   ⚠ The compact rules are a CONTAINER query on the card, not a viewport query: the same card sits
   full-width in the sheet AND in the 320px desktop rail on /draft.html, and both must read as a phone.
   ⚠ Sienna = the one priced button. Forest = something she already has. */
.ds-scope .ar{container-type:inline-size;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 0 rgba(28,25,23,.03),0 14px 34px -20px rgba(28,25,23,.3);overflow:hidden;font-family:var(--sans);color:var(--ink);line-height:1.5}
.ds-scope .ar *{box-sizing:border-box}
.ds-scope .ar-head{padding:22px 22px 4px}
.ds-scope .ar-k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--forest);margin:0 0 8px;line-height:1.5}
.ds-scope .ar-h{font-family:var(--serif);font-size:24px;line-height:1.18;font-weight:600;letter-spacing:-.015em;margin:0;text-wrap:balance;color:var(--ink)}
.ds-scope .ar-sub{font-size:14.5px;line-height:1.45;color:var(--ink-60);margin:6px 0 0}
.ds-scope .ar-sub b{color:var(--forest-dk);font-weight:600}
.ds-scope .ar-list{list-style:none;margin:14px 22px 0;padding:4px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.ds-scope .ar-list.is-folded li.fold{display:none}
.ds-scope .ar-fine.ar-fine--next{margin-top:2px}
.ds-scope .ar-more{display:inline-flex;align-items:center;min-height:44px;margin:2px 22px 0;padding:0;border:0;background:none;font:600 14px/1.2 var(--sans);color:var(--forest-dk);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ds-scope .ar-more:focus-visible{outline:2px solid var(--forest);outline-offset:2px;border-radius:4px}
.ds-scope .ar-list li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 0;margin:0}
.ds-scope .ar-list .ic{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.ds-scope .ar-list .ic svg{width:13px;height:13px}
.ds-scope .ar-list li.done .ic{background:var(--forest);color:#fff}
/* QA r2 G1 (blind P2-1): a part not bought yet is a short neutral dash, never a hollow circle (that read as an
   unticked checkbox next to the real one) */
.ds-scope .ar-list li.next .ic::before{content:"";display:block;width:10px;height:2px;border-radius:1px;background:var(--ink-40)}
.ds-scope .ar-list li.writing .ic{border:2px solid var(--forest-lt);border-top-color:var(--forest);color:transparent;animation:arSpin .9s linear infinite}
@keyframes arSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.ds-scope .ar-list li.writing .ic{animation:none}}
.ds-scope .ar-list li.prev .ic::before{content:"";display:block;width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,var(--forest) 50%,var(--forest-lt) 50%)}/* short-form preview: begun, not done (a half dot; a hollow circle reads as an unticked box, QA r2 G1) */
.ds-scope .ar-list .tx{min-width:0}
.ds-scope .ar-list .tx b{display:block;font-size:14.5px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.ds-scope .ar-list .tag{font-size:12px;font-weight:600;color:var(--forest);white-space:nowrap;padding-top:3px}
.ds-scope .ar-list li.grp{grid-template-columns:24px 1fr;padding:8px 0 0}
.ds-scope .ar-list li.grp span:last-child{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}
.ds-scope .ar-list li.writing .tag{color:var(--ink-60);font-weight:500}
/* QA r1 B-1 / B-11, r2 G1: a part that still needs her is a solid sienna dot with a sienna tag, never a tick and never
   a hollow (checkbox-like) circle; the remaining parts of an offer are neutral dashes, with no second set of numbers
   under the form's own "PART 3" labels. */
.ds-scope .ar-list li.ask .ic::before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:var(--sienna,#C4532B)}
.ds-scope .ar-list li.ask .tag{color:#8a3415}
.ds-scope .ar-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ds-scope .ar-body{padding:16px 22px 22px}
.ds-scope .ar-why{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.ds-scope .ar-why li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;font-size:14px;line-height:1.45;color:var(--ink-60);margin:0}
.ds-scope .ar-why .wi{width:26px;height:26px;border-radius:8px;background:var(--forest-lt);color:var(--forest-dk);display:flex;align-items:center;justify-content:center}
.ds-scope .ar-why .wi svg{width:14px;height:14px}
.ds-scope .ar-why b{color:var(--ink);font-weight:600}
.ds-scope .ar-why li > span:last-child{text-wrap:pretty}
.ds-scope .ar-caution{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;margin:0 0 14px;padding:10px 12px;border-radius:10px;background:var(--gold-lt);color:#5b4206;font-size:13.5px;line-height:1.45}
.ds-scope .ar-caution svg{width:16px;height:16px;margin-top:2px}
.ds-scope .ar-caution b{font-weight:600}
.ds-scope .ar-note{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:#EAF4EC;color:var(--forest-dk);font-size:13.5px;line-height:1.45}
.ds-scope .ar-pack{display:grid;grid-template-columns:22px minmax(0,1fr);gap:11px;align-items:start;margin:0 0 14px;padding:13px 14px;border:1.5px dashed rgba(45,106,79,.5);border-radius:12px;background:#F3F8F4;cursor:pointer}
.ds-scope .ar-pack.on{border-style:solid;border-color:var(--forest);background:#EAF4EC}
.ds-scope .ar-pack input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:1px 0 0;border:2px solid var(--forest);border-radius:6px;background:#fff;display:grid;place-content:center;cursor:pointer}
.ds-scope .ar-pack input:checked{background:var(--forest)}
.ds-scope .ar-pack input:checked::after{content:"";width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.ds-scope .ar-pack input:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.ds-scope .ar-pack .pt{font-size:14.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.ds-scope .ar-pack .pt b{font-weight:600}
.ds-scope .ar-pack .pp{display:block;font-size:13px;color:var(--ink-60);margin-top:4px}
.ds-scope .ar-pack .pp[hidden]{display:none}
.ds-scope .ar-pack.is-locked{cursor:progress;opacity:.75}
.ds-scope .ar-pack.is-locked input{cursor:progress}
/* one line per programme, "Name, up to $X" (QA r1 B-3) */
.ds-scope .ar-pack-l{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:3px}
.ds-scope .ar-pack-l li{margin:0;font-size:14.5px;line-height:1.4;color:var(--ink);text-wrap:pretty}
.ds-scope .ar-pack-l li b{font-weight:600}
.ds-scope .ar-amt{white-space:nowrap}
.ds-scope .ar-pack-same{display:block;font-size:13.5px;line-height:1.45;color:var(--ink-60)}
.ds-scope .ar-pack .pp strong{color:var(--forest-dk);font-weight:600}
.ds-scope .ar-buy{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:54px;padding:0 20px;border:0;border-radius:12px;background:var(--sienna);color:#fff;font-family:var(--sans);font-size:16.5px;font-weight:600;line-height:1.25;cursor:pointer;box-shadow:0 8px 18px -10px rgba(196,83,43,.85);text-align:left;text-decoration:none}
.ds-scope .ar-buy:hover{background:var(--sienna-dk);color:#fff}
.ds-scope .ar-buy:focus-visible,.ds-scope .ar-buy2:focus-visible,.ds-scope .ar-link:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.ds-scope .ar-buy[disabled]{cursor:progress;opacity:.92}
.ds-scope .ar-buy .p{white-space:nowrap;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center}
.ds-scope .ar-buy svg,.ds-scope .ar-buy2 svg{width:18px;height:18px}
.ds-scope .ar-buy--forest{background:var(--forest-dk);box-shadow:0 8px 18px -10px rgba(27,67,50,.8)}
.ds-scope .ar-buy--forest:hover{background:var(--forest)}
.ds-scope .ar-buy2{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:0 18px;border:1.5px solid var(--forest);border-radius:11px;background:#fff;color:var(--forest-dk);font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer;text-decoration:none}
.ds-scope .ar-buy2:hover{background:#F3F8F4;color:var(--forest-dk)}
.ds-scope .ar-fine{font-size:12.5px;line-height:1.45;color:var(--ink-60);margin:9px 0 0;text-align:center}
.ds-scope .ar-err{margin:10px 0 0;padding:9px 12px;border-radius:9px;background:rgba(196,83,43,.08);color:#8a3415;font-size:13.5px;line-height:1.45}
.ds-scope .ar-err[hidden]{display:none}
.ds-scope .ar-save{font-size:13.5px;color:var(--ink-60);margin:6px 0 -10px;text-align:center;line-height:1.4}
.ds-scope .ar-sub,.ds-scope .ar-fine,.ds-scope .ar-err,.ds-scope .ar-caution span{text-wrap:pretty}
/* the owned card's named "$29 counts" offer (the B1owned mock's .ar-up block) */
.ds-scope .ar-up{margin:16px 0 0;padding:14px;border-radius:12px;background:#F3F8F4;border:1px solid rgba(45,106,79,.22)}
.ds-scope .ar-up-h{margin:0;font-size:14.5px;line-height:1.45;font-weight:600;color:var(--ink)}
.ds-scope .ar-up .ar-pack-l{margin:6px 0 2px}
.ds-scope .ar-up-same{margin:0 0 12px;font-size:13.5px;line-height:1.45;color:var(--ink-60)}
.ds-scope .ar-up .ar-buy2 .p{white-space:nowrap;display:inline-flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1.2}
.ds-scope .ar-up .ar-buy2{padding-top:8px;padding-bottom:8px}
.ds-scope .ar-until{font-size:12px;font-weight:500;color:var(--ink-60);margin-top:2px}
.ds-scope .ar-confirm p{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--ink)}
.ds-scope .ar-up .ar-save{margin:4px 0 -6px}
.ds-scope .ar-buy2[disabled]{cursor:progress;opacity:.92}
.ds-scope .ar-h:focus{outline:none}
.ds-scope .ar-h:focus-visible,.ds-scope .ar-note:focus-visible,.ds-scope .ar-err:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.ds-scope .ar-link{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;color:var(--forest-dk);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@container (max-width:560px){
  .ds-scope .ar-head{padding:18px 16px 2px}.ds-scope .ar-h{font-size:22px}.ds-scope .ar-list{margin:12px 16px 0}.ds-scope .ar-body{padding:14px 16px 18px}
  .ds-scope .ar-list .tx b{font-size:14px}
  .ds-scope .ar-list li{padding:6px 0}.ds-scope .ar-list li.grp{padding:6px 0 0}.ds-scope .ar-list{margin-top:10px}
  .ds-scope .ar-pack{padding:12px 13px;margin-bottom:12px}
  /* every trust row keeps its benefit sentence on a phone too (QA r1 nit 3), just set a touch smaller */
  .ds-scope .ar-why{gap:8px;margin-bottom:14px}.ds-scope .ar-why li{font-size:13.5px}
  .ds-scope .ar-buy{font-size:16px;padding:0 16px}
}
/* The card leads the box when she owns it / it is being written / Premium includes it (QA r1 B-5): the rail comes
   first in the DOM; on the two-column /draft.html it keeps its right-hand column, and it never sticks over the
   draft that now sits under it. Her free first part folds behind a disclosure. */
.ds-scope .ds-grid--arfirst > .ds-rail{position:relative;top:auto;margin:0 0 22px}
@media(min-width:900px){.ds-scope .ds-grid--arfirst > .ds-rail{grid-column:2;grid-row:1}.ds-scope .ds-grid--arfirst > .ds-main{grid-column:1;grid-row:1}}
.ds-scope .ds-free{border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.ds-scope .ds-free-sum{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:13px 44px 13px 18px;cursor:pointer;list-style:none;position:relative}
.ds-scope .ds-free-sum::-webkit-details-marker{display:none}
.ds-scope .ds-free-sum::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid var(--forest-dk);border-bottom:2px solid var(--forest-dk);transform:translateY(-70%) rotate(45deg);transition:transform .15s ease}
.ds-scope .ds-free[open] > .ds-free-sum::after{transform:translateY(-30%) rotate(-135deg)}
.ds-scope .ds-free-sum:focus-visible{outline:2px solid var(--forest);outline-offset:2px;border-radius:14px}
.ds-scope .ds-free-k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--forest)}
.ds-scope .ds-free-t{font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.ds-scope .ds-free[open]{padding:0 14px 14px}
.ds-scope .ds-free[open] > .ds-free-sum{padding-left:4px}
/* In an offer the free Copy button is secondary (outlined): the one filled button on the box is the priced one. */
.ds-scope .ds-btn--quiet,.ds-scope .ds-btn--quiet:visited{background:#fff;color:var(--forest-dk);border:1.5px solid var(--forest)}
.ds-scope .ds-btn--quiet:hover,.ds-scope .ds-btn--quiet:focus,.ds-scope .ds-btn--quiet:active{background:#F3F8F4;color:var(--forest-dk)}
/* A bought programme: the page's own "subscribe" banner stays out of her way. */
html[data-ar-owned] .gp-upsell-banner{display:none !important}

/* ══ "Finish this application", named before the free draft (2026-10-07) ══════════════════════════════════════════
   C1 the hero band (.are-hb, 50/50 ar_hero_v1) · C2 the eligibility-result box upgraded in place (.gv-draft.are-up)
   · the part bar (.are-bar). Literal values, no tokens: this file loads on ~690 grant pages (see .ds-scope above).
   Mocks + review: dev-assets/apply-ready-visibility-2026-10-07/. */
.are-hb{margin:22px 0 2px;padding:18px 20px 16px;border-radius:12px;background:#F1EBE1;
  display:grid;grid-template-columns:1fr auto;gap:10px 28px;align-items:center;
  font-family:'DM Sans',system-ui,sans-serif;color:#1C1917}
.are-hb__h{margin:0 0 3px;font:600 19px/1.3 'Fraunces',Georgia,serif;letter-spacing:-.005em;color:#1C1917}
.are-hb__p{margin:0;font-size:14.5px;line-height:1.5;color:#5C5550}
.are-hb .are-barw{grid-column:1/-1;margin-top:6px}
.are-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;
  border-radius:10px;border:1.5px solid #2D6A4F;background:#2D6A4F;color:#FFFDF9;
  font:600 15.5px/1.2 'DM Sans',system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.are-btn:hover{background:#1B4332;border-color:#1B4332}
.are-btn:focus-visible{outline:3px solid #C4532B;outline-offset:2px}
.are-bar{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.are-bar li{flex:1 1 0;height:8px;border-radius:999px;border:1.5px solid rgba(45,106,79,.45)}
.are-bar li:first-child{background:#2D6A4F;border-color:#2D6A4F}
.are-bar--preview li:first-child{background:linear-gradient(90deg,#2D6A4F 40%,transparent 40%)}/* short form: a preview, not answer 1 */
.are-bar li.are-bar__sheet{flex:2 1 0;border-style:dashed}/* the tick-box sheet (pv.sheet, 2026-10-21) */
.are-cap{display:flex;justify-content:space-between;gap:12px;margin-top:7px;font-size:13px;line-height:1.35;color:#5C5550}
.are-cap b{color:#1C1917;font-weight:600}
.are-cap .r{text-align:right}
/* short-form caption (2026-10-30): one line at every width; ", one time" drops below 360px (the button says $15 too) */
.are-cap--short span{white-space:nowrap}
@media (max-width:359px){.are-cap--short .are-ot{display:none}}
@media (max-width:700px){
  .are-hb{grid-template-columns:1fr;margin-top:16px;padding:16px 16px 14px}
  .are-hb .are-btn{width:100%;grid-row:3}
  .are-hb .are-barw{grid-row:2;margin:4px 0}
  .are-hb__h{font-size:18px}
}

.gv-draft.are-up .gv-draft__title{font-size:21px;letter-spacing:-.01em}
.gv-draft.are-up .gv-draft__lead{font-size:15px;line-height:1.55}
.gv-draft.are-up .gv-draft__lead b{color:#1C1917}
/* "and N more, on the funder's own questions" is a sentence, not a part title: never clamp it ("own…"), full row (2026-10-22 sweep) */
.gv-draft.are-up .are-parts li.more{grid-column:1/-1}
.gv-draft.are-up .are-parts li.more .are-t{display:block;overflow:visible}
.are-parts{margin:4px 0 16px;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px 28px;
  font-family:'DM Sans',system-ui,sans-serif}
.are-parts li{display:flex;gap:10px;align-items:baseline;padding:5px 0;font-size:14.5px;line-height:1.4;min-width:0;color:#1C1917}
.are-parts .are-n{flex:0 0 18px;font-weight:600;font-size:12.5px;color:#5C5550;text-align:right}
.are-parts .are-t{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.are-parts li.free .are-t{font-weight:600}
.are-parts li.free em{flex:none;font-style:normal;font-size:12px;font-weight:600;color:#1B4332;background:#E3F0E8;padding:2px 8px;border-radius:999px}
.are-parts li.more{color:#5C5550}
@media (max-width:700px){.are-parts{grid-template-columns:1fr}}

/* deadline-run date strip under the grant-page hero buttons (draft-surface areRunStrip, 2026-10-21) */
.are-rs{display:block;margin:14px 0 0;padding:10px 14px;border-radius:10px;background:#F3F8F4;border:1px solid rgba(45,106,79,.22);font-size:14.5px;line-height:1.45;color:#2B2622;max-width:640px}
.are-rs b{color:#1B4332}
.are-rs__left{display:inline-block;margin-left:8px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#1B4332;white-space:nowrap}
.are-rs--soon{background:#FFF4EE;border-color:rgba(196,83,43,.3)}
.are-rs--soon .are-rs__left{color:#A3401F}