/* --texture-paper carries a relative url(), and a relative url() in a custom property resolves
   against the stylesheet that SUBSTITUTES it — here, two levels deep — not tokens/textures.css.
   Without this re-declaration the grain 404s and every dark section renders flat, silently. */
:root{--texture-paper:url(./assets/textures/paper.png)}
.vm-paper{background-color:var(--ivory-500);background-image:var(--texture-paper);background-size:151px 151px;background-repeat:repeat}
/* Vellamore marketing site — shared layout CSS. Design tokens come from ./styles.css */
body{margin:0;background:var(--ivory-100);color:var(--ink)}
a{border:none;text-decoration:none;color:inherit}
img{max-width:100%}
button,input,select,textarea{font-family:inherit}

.vm-section{padding:clamp(64px,8vw,132px) clamp(20px,5vw,72px);position:relative}
.vm-section--tight{padding-block:clamp(44px,5vw,80px)}
.vm-wrap{max-width:1240px;margin:0 auto;width:100%}
.vm-stack{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;max-width:660px;margin:0 auto;width:100%;min-width:0}
.vm-stack--left{align-items:flex-start;text-align:left;margin:0}

.vm-h1{overflow-wrap:break-word;font-family:var(--font-display);font-weight:400;font-size:clamp(var(--step-39),5.4vw,var(--step-61));line-height:1.05;letter-spacing:-.005em;color:var(--ink)}
.vm-h2{overflow-wrap:break-word;font-family:var(--font-display);font-weight:400;font-size:clamp(var(--step-31),3.4vw,var(--step-49));line-height:1.1;color:var(--ink)}
.vm-h2--ivory{color:var(--ivory-100)}
/* The sections that carry the decision: what we are, what it costs, and the ask. */
.vm-h2--lead{font-size:clamp(var(--step-31),4.4vw,var(--step-61));line-height:1.06}
.vm-lede{font-family:var(--font-body);font-weight:400;font-size:var(--step-16);line-height:1.75;letter-spacing:var(--tracking-body);color:var(--ink);max-width:52ch}
.vm-lede+.vm-lede{margin-top:1.1em}
.vm-lede--ivory{color:var(--ivory-100)}
.vm-note--ivory{color:var(--ivory-a75)}
.vm-body{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.75;letter-spacing:var(--tracking-body);color:var(--ink)}
/* --ivory-700 measured 3.78:1 at 13px on the paper ground. */
.vm-note{font-family:var(--font-body);font-weight:500;font-size:13px;line-height:1.6;letter-spacing:var(--tracking-body);color:var(--ink-muted)}
.vm-mono{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* ── chrome ───────────────────────────────────────── */
/* Header no longer carries the number — the mobile call bar and the footer do. Retained for the
   inner-page top bar, without the header hairline. */
.vm-tel{font-family:var(--font-sans);font-stretch:expanded;font-size:15px;line-height:1.25;letter-spacing:.06em;color:var(--sand-a86);white-space:nowrap;font-variant-numeric:tabular-nums}
.vm-tel:hover{color:var(--white)}
/* Owner sign in — set apart from the marketing nav by a hairline, not by weight. */
.vm-signin{font-family:var(--font-sans);font-size:14px;letter-spacing:var(--tracking-subhead);font-stretch:expanded;color:var(--sand-a72);white-space:nowrap;padding-left:20px;border-left:1px solid var(--sand-a28);transition:color var(--duration-fast) var(--ease-standard)}
.vm-signin:hover{color:var(--white)}
@media (max-width:1099px){.vm-signin{border-left:0;padding-left:0}}
.vm-navlink{font-family:var(--font-sans);font-weight:400;font-size:17px;line-height:1.25;letter-spacing:.03em;font-stretch:expanded;color:var(--ivory-300);padding-bottom:2px;border-bottom:1px solid transparent;transition:var(--transition-action)}
.vm-navlink:hover{color:var(--white);border-bottom-color:var(--white-a50)}
.vm-navlink[aria-current="page"]{color:var(--white);border-bottom-color:var(--accent)}

/* ── trust strip ──────────────────────────────────── */
.vm-trust{background:var(--ivory-200);border-block:1px solid var(--rule-sand)}
.vm-trust__grid{display:grid;grid-template-columns:1fr;gap:0;max-width:1240px;margin:0 auto}
.vm-trust__cell{padding:18px 24px;display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--rule-sand)}
.vm-trust__cell:first-child{border-top:0}
.vm-trust__k{font-family:var(--font-sans);font-stretch:expanded;font-size:var(--step-20);line-height:1.25;letter-spacing:var(--tracking-subhead);color:var(--ink)}
/* --ivory-700 measured 3.78:1 on --ivory-200 at 13px. */
.vm-trust__v{font-family:var(--font-body);font-size:var(--step-13);line-height:1.75;color:var(--ink-muted)}

/* ── hero ─────────────────────────────────────────── */
.vm-hero{display:grid;grid-template-columns:1fr}
.vm-hero__copy{display:flex;align-items:center;padding:clamp(52px,6vw,104px) clamp(20px,4vw,72px)}
/* Native 151px — the tile was being upscaled 1.5x, which softened the grain and widened its
   seams. Multiply is safe now that the tile means 242/255: it darkens ivory ~5%, not 29%. */
.vm-paper-panel{background-color:var(--ivory-100);background-image:var(--texture-paper);background-size:151px;background-blend-mode:multiply}
.vm-hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(20px,2.4vw,32px);max-width:520px;margin:0 auto;width:100%}
.vm-hero__actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:374px}
.vm-hero__media{position:relative}
.vm-hero__media img{display:block;width:100%;height:356px;object-fit:cover;border-radius:var(--radius-image)}
.vm-hero__caption{position:absolute;left:50%;transform:translateX(-50%);top:44px;width:min(438px,74%);font-family:var(--font-body);font-weight:500;font-size:13.5px;line-height:1.75;letter-spacing:var(--tracking-body);text-align:center;color:var(--text-on-dark-strong);background:var(--scrim-70);padding:13px 17px;border-radius:var(--radius-field);box-sizing:border-box}

/* page hero (inner pages) */
.vm-phero{background-color:var(--ivory-100);background-image:var(--texture-paper);background-size:151px;background-blend-mode:multiply;border-bottom:1px solid var(--rule-sand)}

/* ── the Register index ───────────────────────────
   A set list, not a carousel. Nothing moves; density is the argument. */
.vm-index{margin-top:clamp(34px,4vw,56px);border-top:1px solid var(--rule-umber-28)}
.vm-index__grid{columns:3;column-gap:clamp(30px,4.4vw,76px)}
.vm-index__row{break-inside:avoid;display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding:9px 0;border-bottom:1px solid var(--rule-umber-15);text-decoration:none;
  transition:border-color var(--duration-fast) var(--ease-standard)}
.vm-index__row:hover{border-bottom-color:var(--wash-accent-50)}
.vm-index__name{font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1.45;
  letter-spacing:var(--tracking-body);color:var(--ink);
  transition:color var(--duration-fast) var(--ease-standard)}
.vm-index__row:hover .vm-index__name,.vm-index__row:hover .vm-index__count{color:var(--accent)}
/* .48 measured 2.40:1 on --ivory-100. */
.vm-index__count{font-family:var(--font-body);font-weight:400;font-size:12px;
  font-variant-numeric:tabular-nums;color:var(--ink-a82);flex:0 0 auto;
  transition:color var(--duration-fast) var(--ease-standard)}
.vm-index__foot{display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-top:clamp(26px,3vw,40px)}
.vm-index__meta{font-family:var(--font-body);font-weight:400;font-size:13px;line-height:1.75;
  letter-spacing:var(--tracking-body);color:var(--ink-a82);max-width:46ch} /* .7 was 3.98:1 */
@media (max-width:900px){.vm-index__grid{columns:2}}
@media (max-width:560px){.vm-index__grid{columns:1}
  .vm-index__foot{flex-direction:column;align-items:stretch;text-align:center}}

.vm-ask__frame{display:block;width:100%;border:0;height:clamp(660px,94vh,940px)}

/* ── story ────────────────────────────────────────── */
.vm-story{overflow:hidden;display:flex;align-items:center}
.vm-story__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vm-story__scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--ivory-a10) 0%,var(--ivory-a58) 100%)}
.vm-story__panel{position:relative;background:var(--white);border:1px solid var(--ivory-300);border-radius:var(--radius-panel);padding:38px 26px 44px;width:min(360px,100%);display:flex;flex-direction:column;gap:22px;margin:0 auto;box-shadow:0 20px 50px -24px var(--scrim-45)}
/* Sized to the column, not the page: the panel is 360px wide until 1024px, where a 20px
   display serif runs only ~31 characters a line. 16px here, 20px once the panel widens. */
.vm-story__body{font-family:var(--font-display);font-weight:400;font-size:var(--step-16);line-height:1.6;text-align:center;color:var(--ink)}

/* ── dark textured ground ─────────────────────────── */
.vm-textured{background-color:var(--paper-brown);background-image:var(--texture-paper);background-size:151px;background-blend-mode:multiply}
/* Head and grid share the same container, so their left and right edges agree. */
/* The title sets to three short lines, which left two thirds of the band empty beside it and a
   deep gap beneath it. Title and lede now share the row: the lede sits in the space the heading
   was not using, aligned to the heading's last baseline. */
.vm-services__head{display:grid;grid-template-columns:minmax(0,1fr);gap:14px clamp(32px,5vw,90px);
  max-width:38ch;margin-bottom:clamp(32px,3.6vw,56px)}
/* the statement carries its own bottom margin, which the grid gap then doubled */
.vm-services__head>:first-child{margin-bottom:0}
@media (min-width:1080px){
  /* fr, not ch: a ch here resolves against the container's 16px body size, which sized the
     heading column at about 160px and broke the title onto five lines. */
  .vm-services__head{max-width:1080px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:end}
  .vm-services__head>:first-child{margin:0}
  .vm-services__lede{margin:0 0 .5em;max-width:40ch}
}
.vm-services__lede{font-family:var(--font-body);font-size:var(--step-16);line-height:1.75;
  letter-spacing:var(--tracking-body);color:var(--ivory-a72)}
/* Fluid columns — never fixed px, or the block stops aligning with the heading. */
.vm-services__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.2vw,28px)}
/* Same markup below 900px: the grid becomes a swipeable snap rail. */
@media (max-width:900px){
  .vm-services__grid{display:flex;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 14px;gap:18px}
  .vm-services__grid::-webkit-scrollbar{display:none}
  .vm-services__grid{scrollbar-width:none}
  .vm-services__grid>*{flex:0 0 clamp(258px,78vw,290px);scroll-snap-align:center}
  .vm-services__head{max-width:none}
}

/* ── the note ─────────────────────────────────────── */
.vm-noteart{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,64px);align-items:center}
.vm-sheet{background:var(--white);border:1px solid var(--ivory-300);border-radius:var(--radius-panel);box-shadow:var(--shadow-soft);padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;gap:18px}
.vm-sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border-bottom:1px solid var(--rule-sand);padding-bottom:14px}
.vm-sheet__row{display:grid;grid-template-columns:16px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--ivory-200);font-family:var(--font-body);font-size:14px;line-height:1.7;letter-spacing:var(--tracking-body);color:var(--ink)}
.vm-sheet__tick{color:var(--accent);font-size:12px;line-height:1.9}
.vm-sheet__flag{color:var(--accent);font-weight:600}
.vm-sheet__shots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vm-sheet__shots img{width:100%;height:96px;object-fit:cover;border-radius:var(--radius-image);display:block}
.vm-sheet__sign{font-family:var(--font-display);font-size:18px;color:var(--ink)}

/* ── the owner app ────────────────────────────────
   A live frame, not a screenshot. The demo is the argument. */
.vm-app{display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,68px);align-items:center}
.vm-applist{display:flex;flex-direction:column;margin-top:clamp(22px,2.4vw,32px);
  border-top:1px solid var(--rule-sand)}
.vm-applist__row{display:flex;flex-direction:column;gap:4px;padding:16px 0;
  border-bottom:1px solid var(--rule-sand)}
/* No bezel here — the app draws its own iOS device, and a second frame around it
   produced two mismatched radii. This is just a transparent window onto the app. */
/* The app is not scaled here — the iframe IS its viewport, so the frame has to give it the room
   it has standing alone. At 452x944 the splash ran out of height: the hero cropped its lockup
   away and the lede collided with the button. */
.vm-appframe{width:480px;max-width:100%;height:1040px;margin:0 auto;flex:0 0 auto}
.vm-appframe iframe{display:block;width:100%;height:100%;border:0;background:transparent}
@media (min-width:1024px){.vm-app{grid-template-columns:1fr 452px}}
@media (max-width:520px){.vm-appframe{height:960px}}

/* ── the year ─────────────────────────────────────── */
.vm-year{display:grid;grid-template-columns:1fr;margin-top:clamp(30px,3.4vw,52px)}
.vm-year__col{display:flex;flex-direction:column;gap:12px;padding:26px 0;border-top:1px solid var(--rule-sand)}

.vm-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,72px);align-items:start}
.vm-form{display:flex;flex-direction:column;gap:12px;min-width:0;background:var(--surface-raised);border:1px solid var(--ivory-300);border-radius:var(--radius-panel);padding:clamp(24px,2.4vw,36px);box-shadow:var(--shadow-soft)}
.vm-steps{display:flex;flex-direction:column;gap:36px;max-width:560px;margin:0 auto;width:100%}
.vm-stats{display:grid;grid-template-columns:1fr}
.vm-stats__cell{padding:34px 20px 30px;border-top:1px solid var(--rule-sand);display:flex;justify-content:center}

/* ── register directory ───────────────────────────── */

/* ── scope list ───────────────────────────────────── */
.vm-scope{display:grid;grid-template-columns:1fr;gap:0}
.vm-scope__group{border-top:1px solid var(--rule-sand);padding:26px 0}
.vm-scope__group ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.vm-scope__group li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-family:var(--font-body);font-size:14px;line-height:1.7;color:var(--ink)}
.vm-scope__group li::before{content:"—";color:var(--accent)}

/* ── plans ────────────────────────────────────────── */
.vm-plans{display:grid;grid-template-columns:1fr;gap:20px;margin-top:clamp(28px,3vw,44px)}
.vm-plan{background:var(--white);border:1px solid var(--ivory-300);border-radius:var(--radius-panel);padding:30px 26px 34px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-soft)}
.vm-plan--feature{border-color:var(--accent)}
/* 46px is off-ladder on purpose: it matches the Stat figure size taken from the brand
   sheet, so a price and a count read at the same weight. Do not snap to 49. */
.vm-plan__price{font-family:var(--font-display);font-weight:400;font-size:46px;line-height:1.2;letter-spacing:0;color:var(--ink);margin-bottom:8px}
.vm-plan__price--sm{font-size:var(--step-25);line-height:1.25;padding-top:12px;white-space:nowrap}
/* var(--ink-soft) clears 4.5:1 on white; --ivory-700 did not. */
.vm-plan__unit{font-family:var(--font-body);font-size:13px;line-height:1.6;color:var(--ink-soft)}
.vm-plan__for{font-family:var(--font-body);font-size:var(--step-13);line-height:1.75;color:var(--ink)}
.vm-plan__items{margin-top:2px}
.vm-plan>a,.vm-plan>button{margin-top:auto}

/* The most differentiating sentence available, so it gets the width and the display face. */
.vm-nomarkup{font-family:var(--font-display);font-weight:400;font-size:clamp(var(--step-20),2vw,var(--step-25));line-height:1.4;text-align:center;color:var(--ink);max-width:46ch;margin:clamp(28px,3vw,40px) auto 0;text-wrap:pretty}
.vm-pricing__cap{text-wrap:normal;font-family:var(--font-display);font-weight:400;font-size:clamp(var(--step-20),1.9vw,var(--step-25));line-height:1.45;letter-spacing:0;color:var(--accent);max-width:44ch;margin-top:4px;text-wrap:balance}
.vm-pricing__foot{text-align:center;max-width:62ch;margin:22px auto 0}
.vm-open{display:block;max-width:62ch;margin:14px auto 0;padding:9px 14px;
  border:1px dashed var(--wash-accent-42);border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:var(--step-10);line-height:1.7;letter-spacing:.05em;
  text-transform:uppercase;text-align:center;color:var(--accent)}
/* Unconfirmed figures carry a visible mark so no one mistakes them for signed-off numbers. */
.vm-unconf{text-decoration:underline dotted var(--wash-accent-65);text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:help}
.vm-plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.vm-plan li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-family:var(--font-body);font-size:14px;line-height:1.65;color:var(--ink)}
.vm-plan li::before{content:"—";color:var(--accent)}

/* ── people ───────────────────────────────────────── */
/* Four people: 4-up on desktop, 2-up on tablet, stacked on phones. */
.vm-people{display:grid;grid-template-columns:1fr;gap:clamp(26px,2.6vw,36px);margin-top:clamp(30px,3.4vw,52px)}
@media (min-width:620px){.vm-people{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.vm-people{grid-template-columns:repeat(4,1fr)}}
.vm-person{display:flex;flex-direction:column;gap:14px}
.vm-person__shot{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-panel);display:block;background:var(--ivory-300)}
.vm-person__slot{width:100%;aspect-ratio:4/5;border-radius:var(--radius-panel);background:var(--ivory-200);border:1px dashed var(--rule-sand);display:grid;place-content:center;text-align:center;padding:20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory-700)}

@media (max-width:1023px){
  .vm-nav{display:none!important}
  .vm-burger{display:flex!important}
  .vm-logo{margin:0 auto}
  .vm-dirrow{grid-template-columns:1fr}
  .vm-dirrow__right{justify-content:space-between}
}
@media (min-width:768px){
  .vm-plans{grid-template-columns:repeat(3,1fr)}
  .vm-trust__grid{grid-template-columns:repeat(4,1fr)}
  .vm-trust__cell{border-top:0;border-left:1px solid var(--rule-sand)}
  .vm-trust__cell:first-child{border-left:0}
  .vm-scope{grid-template-columns:1fr 1fr;column-gap:56px}
}
@media (min-width:1024px){
  /* Chrome above is 102px (bar 25 + header 77). Leaving 130px below the hero puts the
     trust strip's first key above the fold on any desktop height — it is load-bearing
     and was previously sitting exactly on the fold line. Floor stops the hero
     collapsing on short laptop viewports. */
  .vm-hero{grid-template-columns:1fr 1fr;min-height:max(540px,calc(100vh - 232px))}
  .vm-hero__inner{align-items:flex-start;text-align:left;max-width:560px;margin:0}
  .vm-hero__actions{flex-direction:row;max-width:none;flex-wrap:wrap}
  .vm-hero__media img{height:100%;min-height:660px;border-radius:0}
  .vm-hero__caption{top:auto;bottom:56px;font-size:15px;width:min(438px,78%)}
  .vm-story{min-height:640px}
  .vm-story__panel{width:min(520px,46%);margin:0 0 0 auto;padding:52px 56px 58px}
  .vm-story__body{font-size:var(--step-20);line-height:1.5;text-align:left}
  .vm-noteart{grid-template-columns:0.85fr 1.15fr}
  .vm-year{grid-template-columns:repeat(4,1fr)}
  .vm-year__col{padding:26px 26px 8px;border-left:1px solid var(--rule-sand);border-top:1px solid var(--rule-sand)}
  .vm-year__col:first-child{padding-left:0;border-left:0}
  .vm-split{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .vm-steps{flex-direction:row;max-width:none;gap:28px}
  /* Step sets align-items:center inline for the mobile row; stacked, the numeral has to
     hang on the same left edge as the copy under it. */
  .vm-steps>*{flex:1;flex-direction:column;align-items:flex-start!important;gap:20px}
  .vm-stats{grid-template-columns:repeat(4,1fr)}
  /* The rule runs above the row, so the numeral needs air under it, not against it. */
  .vm-stats__cell{border-left:1px solid var(--rule-sand);padding:38px 26px 34px}
  .vm-stats__cell:first-child{border-left:0}
}


/* ── careers + vendor pages ────────────────────────── */
.vm-ivory{background:var(--ivory-200)}
.vm-hairline{display:block;height:1px;background:var(--rule-sand);margin:26px 0 0}
.vm-two{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,11fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.vm-h3{font-family:var(--font-display);font-weight:400;font-size:clamp(var(--step-25),2.6vw,var(--step-31));
  line-height:1.15;color:var(--ink)}
.vm-h3--ivory{color:var(--ivory-100)}
.vm-meta-line{font-family:var(--font-body);font-weight:500;font-size:13px;
  letter-spacing:var(--tracking-body);color:var(--ivory-700)}

.vm-role{background:var(--white);border:1px solid var(--border-hairline);border-radius:var(--radius-panel);
  padding:clamp(26px,3.2vw,44px)}
.vm-role__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  flex-wrap:wrap}

.vm-deflist{display:flex;flex-direction:column;border-top:1px solid var(--rule-sand)}
.vm-deflist>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;padding:16px 0;
  border-bottom:1px solid var(--rule-umber-15)}
.vm-deflist dt{font-family:var(--font-display);font-weight:500;font-size:11px;line-height:1.9;
  letter-spacing:var(--tracking-section-title);text-transform:uppercase;color:var(--accent)}
.vm-deflist dd{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.7;
  letter-spacing:var(--tracking-body);color:var(--ink)}

.vm-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  border-top:1px solid var(--rule-sand)}
.vm-ticks li{position:relative;padding:15px 0 15px 30px;font-family:var(--font-body);font-size:15px;
  line-height:1.7;letter-spacing:var(--tracking-body);color:var(--ink);
  border-bottom:1px solid var(--rule-umber-15)}
/* A check, not a chevron. Equal arms rotated -45° read as an accordion toggle — the short
   arm has to be the left one and the mark has to lean the other way. */
.vm-ticks li::before{content:'';position:absolute;left:6px;top:21px;width:6px;height:11px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg)}
.vm-ticks--minus li::before{border-right:none;border-bottom:1.4px solid var(--ink-a45);
  transform:none;width:11px;height:0;left:4px;top:29px}

.vm-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--rule-umber-16);border:1px solid var(--rule-umber-16);margin:22px 0 0}
.vm-terms>div{background:var(--ivory-200);padding:18px 20px}
.vm-terms dt{font-family:var(--font-display);font-weight:500;font-size:var(--step-10);line-height:1.8;
  letter-spacing:var(--tracking-section-title);text-transform:uppercase;color:var(--accent)}
.vm-terms dd{margin:5px 0 0;font-family:var(--font-body);font-size:var(--step-16);line-height:1.75;
  letter-spacing:var(--tracking-body);color:var(--ink)}

.vm-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(22px,2.6vw,40px);margin-top:26px}
.vm-rules__cell{border-top:1.6px solid var(--accent);padding-top:15px}
.vm-rules__k{display:block;font-family:var(--font-sans);font-weight:400;font-size:var(--step-20);
  line-height:1.3;letter-spacing:var(--tracking-subhead);font-stretch:expanded;color:var(--ink)}
.vm-rules__v{display:block;margin-top:9px;font-family:var(--font-body);font-size:14px;
  line-height:1.7;letter-spacing:var(--tracking-body);color:var(--ivory-800)}

.vm-chiprow{display:flex;flex-wrap:wrap;gap:10px}

.vm-formcard{background:var(--white);border:1px solid var(--border-hairline);
  border-radius:var(--radius-panel);padding:clamp(22px,2.6vw,32px)}
.vm-formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vm-formgrid__wide{grid-column:1/-1}
.vm-sent{font-family:var(--font-display);font-size:19px;line-height:1.45;color:var(--ink);
  padding:22px 0;max-width:34ch}

@media (max-width:860px){
  .vm-two{grid-template-columns:1fr}
  .vm-deflist>div{grid-template-columns:1fr;gap:6px}
  .vm-formgrid{grid-template-columns:1fr}
}


/* ── W8: hero tertiary + persistent mobile call bar ─── */
.vm-callbar{display:none}
/* Takes over exactly where the desktop nav — and with it the header's phone link —
   drops out at 1023px. Any narrower gap leaves a band with no call action on screen. */
@media (max-width:1023px){
  .vm-callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;
    grid-template-columns:1fr 96px;gap:1px;background:var(--rule-umber-30);
    padding-bottom:env(safe-area-inset-bottom)}
  .vm-callbar a{display:flex;align-items:center;justify-content:center;min-height:54px;
    font-family:var(--font-sans);font-size:var(--step-16);font-stretch:expanded;
    letter-spacing:var(--tracking-subhead)}
  .vm-callbar__add{background:var(--umber-solid);color:var(--ivory-100)}
  .vm-callbar__call{background:var(--ivory-100);color:var(--accent)}
  /* Only pages that render the bar reserve room for it — the generated category pages
     carry the number in their top bar instead and must not reserve the space. */
  body:has(.vm-callbar){padding-bottom:54px}
}

/* ── W4: the founders, inside the story panel ────── */
.vm-family{margin:4px 0 26px;display:flex;flex-direction:column;gap:12px}
.vm-family__slot{width:100%;aspect-ratio:4/3;border-radius:var(--radius-image);
  background:var(--ivory-200);border:1px dashed var(--rule-sand);display:grid;place-items:center;
  padding:18px;text-align:center}
.vm-family__slot span{font-family:var(--font-mono);font-size:10px;line-height:1.9;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)} /* 3.78:1 before */
.vm-family__cap{font-family:var(--font-sans);font-size:var(--step-16);font-stretch:expanded;
  letter-spacing:var(--tracking-subhead);color:var(--ink);text-align:center;
  text-wrap:balance;max-width:34ch;margin-inline:auto}
.vm-story__sign{font-family:var(--font-body);font-weight:500;font-size:13px;line-height:1.7;
  letter-spacing:var(--tracking-body);text-align:center;color:var(--ink);
  margin-top:22px;padding-top:20px;border-top:1px solid var(--rule-sand)}

.vm-person{display:flex;flex-direction:column;gap:12px}
.vm-person__slot{width:100%;aspect-ratio:4/5;border-radius:var(--radius-panel);
  background:var(--ivory-100);border:1px dashed var(--rule-sand);display:grid;place-items:center;
  padding:18px;text-align:center}
.vm-person__slot span{color:var(--ink-muted);font-family:var(--font-mono);font-size:var(--step-10);line-height:1.7;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ivory-700)}
.vm-person__name{font-family:var(--font-sans);font-size:var(--step-20);font-stretch:expanded;
  letter-spacing:var(--tracking-subhead);color:var(--ink)}
.vm-person__bio{font-family:var(--font-body);font-size:14px;line-height:1.7;
  letter-spacing:var(--tracking-body);color:var(--ink)}


/* ── W7: generated category pages ─────────────────── */
.vm-doc{margin:0;background:var(--ivory-100);color:var(--ink)}
.vm-doc__bar{background:var(--umber-solid);min-height:56px;display:flex;align-items:center;gap:22px;padding:0 clamp(20px,4vw,44px)}
.vm-doc__bar a{font-family:var(--font-sans);font-stretch:expanded;font-size:var(--step-16);letter-spacing:var(--tracking-subhead);color:var(--ivory-300)}
.vm-doc__bar a:hover{color:var(--white)}
.vm-doc__bar .vm-doc__tel{margin-left:auto;font-family:var(--font-sans);font-stretch:expanded;font-size:17px;letter-spacing:var(--tracking-subhead);color:var(--accent-warm)}
.vm-doc__bar .vm-doc__tel:hover{color:var(--accent-warm-light)}
.vm-doc__crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-700);margin-bottom:14px}
.vm-doc__crumb a{color:var(--accent)}
.vm-doc__legal{font-family:var(--font-body);font-size:var(--step-10);line-height:1.6;color:var(--text-secondary);margin-top:36px;max-width:64ch}
.vm-recs{list-style:none;padding:0;margin:clamp(24px,3vw,36px) 0 20px;border-top:1px solid var(--rule-sand);max-width:720px}
.vm-rec{display:grid;grid-template-columns:1fr auto;gap:2px 18px;padding:15px 2px;border-bottom:1px solid var(--rule-umber-15)}
.vm-rec__n{font-family:var(--font-sans);font-stretch:expanded;font-size:var(--step-20);letter-spacing:var(--tracking-subhead);color:var(--ink)}
.vm-rec__p{grid-row:1;grid-column:2;font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:var(--accent);white-space:nowrap}
.vm-rec__m{grid-column:1;font-family:var(--font-body);font-size:13px;color:var(--ivory-700);font-variant-numeric:tabular-nums}


/* The open role sits in the team grid but must never read as a person. */
.vm-person--open .vm-person__slot{background:transparent;border-style:dashed;border-color:var(--accent);opacity:.75}
.vm-person--open .vm-person__slot span{color:var(--accent)}
.vm-person__link{font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:var(--tracking-body);color:var(--accent);text-decoration:underline;text-underline-offset:4px;margin-top:2px}


/* ── footer credentials ───────────────────────────
   On --teal-footer-deep (var(--teal-deep)), not the mid teal: white measures 6.88:1 here against
   3.87 there, so every line clears AA at these sizes. Contrast values are annotated
   because this band is small type on color and cannot be adjusted by eye.
   A row of marks, not badges — third-party logos sit on a light plate so their color
   never fights the teal. */
.vm-creds{display:flex;flex-direction:column;gap:16px}
.vm-creds__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--white-a82)} /* 5.28:1 */
.vm-creds__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:20px 26px}
.vm-cred a{display:flex;align-items:center;gap:12px;text-decoration:none}
.vm-cred__logo{height:38px;width:auto;max-width:78px;object-fit:contain;flex:0 0 auto;background:var(--white-a96);border-radius:4px;padding:5px 7px}
.vm-cred__slot{flex:0 0 78px;height:38px;display:grid;place-items:center;padding:3px;border:1px dashed var(--white-a55);border-radius:4px;font-family:var(--font-mono);font-size:7.5px;line-height:1.35;letter-spacing:.02em;color:var(--white-a82);text-align:center;overflow:hidden;word-break:break-all} /* 5.28:1 */
.vm-cred__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.vm-cred__text strong{font-family:var(--font-body);font-weight:600;font-size:var(--step-13);line-height:1.35;letter-spacing:var(--tracking-body);color:var(--white)} /* 6.88:1 */
.vm-cred__text em{font-style:normal;font-family:var(--font-body);font-weight:400;font-size:11px;line-height:1.4;color:var(--white-a88)} /* 5.83:1 */
.vm-cred a:hover .vm-cred__text strong{text-decoration:underline;text-underline-offset:3px}

/* ── placeholder documents ────────────────────────
   Deliberately plain and slightly alarming to look at: a placeholder that reads as
   finished design is a placeholder that ships. */
.vm-placeholder{margin-top:26px;border:1px dashed var(--accent);border-radius:var(--radius-panel);padding:22px 24px;background:var(--wash-accent-04);display:flex;flex-direction:column;gap:14px}
.vm-placeholder__k{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.vm-placeholder__d{margin:0;display:flex;flex-direction:column;gap:10px}
.vm-placeholder__d>div{display:grid;grid-template-columns:104px 1fr;gap:14px}
.vm-placeholder__d dt{font-family:var(--font-mono);font-size:var(--step-10);letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-700);padding-top:3px}
.vm-placeholder__d dd{margin:0;font-family:var(--font-body);font-size:14px;line-height:1.7;color:var(--ink)}
@media (max-width:560px){.vm-placeholder__d>div{grid-template-columns:1fr;gap:2px}}


/* The key carries the point; the value explains it. Without this the two read as one
   paragraph — the numbering used to do the separating, and the numbers were not a sequence. */
.vm-applist__k{font-family:var(--font-sans);font-stretch:expanded;font-weight:500;
  font-size:var(--step-16);line-height:1.35;letter-spacing:var(--tracking-subhead);color:var(--ink)}
.vm-applist__v{font-family:var(--font-body);font-size:14px;line-height:1.7;
  letter-spacing:var(--tracking-body);color:var(--ivory-800)}
/* The index below carries its own top rule, so the last row's rule doubled it. */
.vm-applist:has(+.vm-tools__index) .vm-applist__row:last-child{border-bottom:0}
.vm-applist:has(+.vm4-tp) .vm-applist__row:last-child{border-bottom:0}
.vm-applist:has(+.vm-ownerauth__preview) .vm-applist__row:last-child{border-bottom:0}

/* Two answering statements on the vendor page. No hairlines: they sat directly above a ruled
   section title, so the pair read as a stack of rules rather than as one contrast. */
.vm-neutral{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(24px,3.4vw,56px);margin-bottom:clamp(40px,5vw,72px)}
.vm-neutral__k{display:block;margin-bottom:10px;font-family:var(--font-display);font-weight:500;
  font-size:var(--step-13);line-height:1.5;letter-spacing:var(--tracking-section-title);
  text-transform:uppercase;color:var(--accent)}
.vm-neutral__v{margin:0;max-width:46ch;font-family:var(--font-body);font-size:var(--step-16);
  line-height:1.75;letter-spacing:var(--tracking-body);color:var(--ink)}

/* The applist on the dark textured ground. */
.vm-textured .vm-applist__row{border-color:var(--ivory-a22)}
.vm-textured .vm-applist__k{color:var(--ivory-100)}
.vm-textured .vm-applist__v{color:var(--ivory-a86)}

/* Channel preference. One tap, three options — the cheapest channel is the default and
   reads first, but the owner is choosing, so nothing is being withheld from them. */
.vm-reach{border:none;margin:0;padding:0}
.vm-reach__opts{display:flex;gap:8px}
.vm-reach__opt{flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  min-height:44px;border:1px solid var(--border-field);border-radius:var(--radius-pill);
  cursor:pointer;background:var(--surface-field);font-family:var(--font-body);font-weight:500;
  font-size:var(--step-13);letter-spacing:var(--tracking-body);color:var(--field-text);
  transition:var(--transition-action)}
.vm-reach__opt:hover{border-color:var(--accent)}
.vm-reach__opt.is-on{background:var(--accent);border-color:var(--accent);color:var(--ivory-100)}
.vm-reach__opt input{position:absolute;opacity:0;width:0;height:0}

/* ── the fee schedule ──────────────────────────────
   A published price list, so it is set as a real table: ruled rows, tabular figures, the plan
   name under each cadence so the columns map to "What is included" without the reader guessing. */
.vm-fees{width:100%;max-width:760px;margin:clamp(26px,3vw,40px) auto 0;border-collapse:collapse}
.vm-fees th,.vm-fees td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--rule-sand)}
.vm-fees thead th{border-bottom:1.6px solid var(--accent);vertical-align:bottom;
  font-family:var(--font-display);font-weight:500;font-size:var(--step-13);line-height:1.5;
  letter-spacing:var(--tracking-section-title);text-transform:uppercase;color:var(--ink)}
.vm-fees thead th span{display:block;margin-top:5px;font-family:var(--font-body);font-weight:500;
  font-size:11px;letter-spacing:var(--tracking-body);text-transform:none;color:var(--accent)}
.vm-fees tbody th{font-family:var(--font-body);font-weight:500;font-size:var(--step-16);
  letter-spacing:var(--tracking-body);color:var(--ink);white-space:nowrap}
.vm-fees td{font-family:var(--font-display);font-weight:400;font-size:var(--step-25);
  line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.vm-fees tbody tr:last-child td{color:var(--accent);font-size:var(--step-20)}
.vm-fees__foot{max-width:760px;margin:20px auto 0;text-align:center}
@media (max-width:620px){
  .vm-fees th,.vm-fees td{padding:12px 8px}
  .vm-fees td{font-size:var(--step-20)}
  .vm-fees tbody th{font-size:var(--step-13);white-space:normal}
}

/* Systems surcharges — a list of equal items, so a plain ruled grid, not cards. */
.vm-systems{list-style:none;margin:clamp(24px,3vw,36px) auto 0;padding:0;max-width:760px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,56px)}
.vm-systems li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--rule-sand);
  font-family:var(--font-body);font-weight:500;font-size:var(--step-16);
  letter-spacing:var(--tracking-body);color:var(--ink)}
.vm-systems li::after{content:'+$45';font-family:var(--font-display);font-size:var(--step-16);
  color:var(--accent);font-variant-numeric:tabular-nums;flex:0 0 auto}
@media (max-width:620px){.vm-systems{grid-template-columns:1fr}}

/* Larger houses / house file / annual / term — four short notes, two up. */
.vm-fees__notes{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,3.4vw,44px) clamp(32px,5vw,72px);max-width:1000px;margin:0 auto}
.vm-fees__notes h3{margin-bottom:8px}
@media (max-width:760px){.vm-fees__notes{grid-template-columns:1fr}}

/* The fees page shows two plans, not three. */
.vm-plans--two{grid-template-columns:repeat(2,1fr);max-width:820px;margin-left:auto;margin-right:auto}
@media (max-width:860px){.vm-plans--two{grid-template-columns:1fr}}

/* ── the intake form ───────────────────────────────
   Grouped so a long form reads as three short ones. Only Name and Email are required; every
   other control is one tap, so the form can be left in twenty seconds or filled in properly. */
.vm-fgroup{border:none;margin:0;padding:0}
.vm-fgroup+.vm-fgroup{margin-top:26px;padding-top:24px;border-top:1px solid var(--rule-sand)}
.vm-fgroup>legend{padding:0 12px 0 0;background:var(--surface-field);
  font-family:var(--font-display);font-weight:500;
  font-size:var(--step-13);line-height:1.5;letter-spacing:var(--tracking-section-title);
  text-transform:uppercase;color:var(--accent)}
.vm-fgroup__note{margin:7px 0 0;font-family:var(--font-body);font-weight:400;font-size:12.5px;
  line-height:1.65;letter-spacing:var(--tracking-body);color:var(--ink-muted)}
.vm-fgroup__body{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.vm-fgroup__sub{display:block;margin-bottom:8px;font-family:var(--font-body);font-weight:600;
  font-size:var(--step-13);letter-spacing:var(--tracking-body);color:var(--ink)}

/* Native select, styled to sit level with Field. */
.vm-select{display:block}
.vm-select>span{display:block;margin-bottom:8px;font-family:var(--font-body);font-weight:600;
  font-size:var(--step-13);letter-spacing:var(--tracking-body);color:var(--ink)}
.vm-select select{width:100%;height:44px;padding:0 38px 0 15px;appearance:none;
  border:0.5px solid var(--border-field);border-radius:var(--radius-field);
  background:var(--surface-field);font-family:var(--font-body);font-size:14px;
  letter-spacing:var(--tracking-body);color:var(--text-field);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
    linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 15px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:var(--transition-action)}
.vm-select select:focus{outline:none;border-color:var(--accent)}

/* Six tick options — a wrapped set of pills, so it reads as a glance rather than a checklist. */
.vm-checks{display:flex;flex-wrap:wrap;gap:8px}
.vm-check{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;
  white-space:nowrap;
  border:0.9px solid var(--border-field);border-radius:var(--radius-pill);cursor:pointer;
  background:var(--surface-field);font-family:var(--font-body);font-weight:500;font-size:13px;
  letter-spacing:var(--tracking-body);color:var(--text-field);
  transition:var(--transition-action)}
.vm-check:hover{border-color:var(--accent)}
.vm-check.is-on{background:var(--accent);border-color:var(--accent);color:var(--ivory-100)}
.vm-check input{position:absolute;opacity:0;width:0;height:0}

.vm-thanks{padding:56px 0;text-align:center;display:flex;flex-direction:column;gap:12px}
.vm-thanks p{font-family:var(--font-display);font-weight:400;font-size:var(--step-20);
  line-height:1.45;color:var(--ink)}
.vm-thanks .vm-note{font-family:var(--font-body)}

/* ── the name ──────────────────────────────────────
   A quiet interlude between the dark textured Steps section and the flat ivory app section, so
   it needs to be neither. Light paper grain — which is also the point of the section. */
.vm-name{background-color:var(--ivory-100);background-image:var(--texture-paper);
  background-size:151px;background-blend-mode:multiply}
.vm-name .vm-stack{max-width:620px}
.vm-name__body{font-family:var(--font-display);font-weight:400;font-size:var(--step-20);
  line-height:1.5;color:var(--ink);text-wrap:pretty;max-width:56ch}

/* ── Send me the Register ──────────────────────────── */
.vm-capture{display:flex;flex-direction:column;gap:18px;background:var(--white);
  border:1px solid var(--rule-sand);border-radius:var(--radius-card);
  padding:clamp(22px,2.6vw,32px);margin-top:clamp(26px,3vw,38px)}
.vm-capture--ivory{background:var(--ivory-a07);border-color:var(--ivory-a24)}
.vm-capture__h{font-family:var(--font-display);font-weight:400;font-size:var(--step-25);
  line-height:1.2;color:var(--ink);margin:0}
.vm-capture--ivory .vm-capture__h{color:var(--ivory-100)}
.vm-capture__p{font-family:var(--font-body);font-weight:400;font-size:14px;
  line-height:1.7;letter-spacing:var(--tracking-body);color:var(--ink);margin:8px 0 0;max-width:56ch}
.vm-capture--ivory .vm-capture__p{color:var(--ivory-a86)}
.vm-capture__row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vm-capture__field{flex:1 1 240px;height:44px;padding:0 16px;
  border:0.5px solid var(--border-field);border-radius:var(--radius-field);
  background:var(--surface-field);font-family:var(--font-body);font-size:14px;
  letter-spacing:var(--tracking-body);color:var(--text-field);outline:none;
  transition:var(--transition-action)}
.vm-capture__field:focus{border-color:var(--accent)}
.vm-capture__done{font-family:var(--font-display);font-weight:400;font-size:var(--step-20);
  line-height:1.45;color:var(--ink);margin:0}
.vm-capture--ivory .vm-capture__done{color:var(--ivory-100)}

/* Under the running preview: the same card, tightened, so the ask sits against the proof
   and the demo column is not left with a foot of empty ivory under the frame. */
.vm-capture--tight{gap:14px;padding:20px 22px 22px;margin-top:20px}
.vm-capture--tight .vm-capture__h{font-size:var(--step-20);line-height:1.25}
.vm-capture--tight .vm-capture__p{font-size:13px;line-height:1.65;margin-top:6px;max-width:44ch}
.vm-capture--tight .vm-capture__done{font-size:var(--step-16);line-height:1.55}

/* ── Desktop sticky action ─────────────────────────
   Mobile has the persistent bar; above 1023px there was nothing once the hero scrolled away,
   leaving fifteen screens with no way to act without scrolling to the end. Appears after the
   hero and hides once the form itself is on screen, so it never competes with the real ask. */
.vm-sticky{position:fixed;right:24px;bottom:24px;z-index:55;display:none;align-items:center;
  gap:14px;padding:12px 14px 12px 20px;background:var(--umber-solid);
  border:1px solid var(--sand-a22);border-radius:var(--radius-pill);
  box-shadow:0 10px 30px -12px var(--scrim-60);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
.vm-sticky.is-on{opacity:1;transform:none;pointer-events:auto}
.vm-sticky__t{font-family:var(--font-body);font-weight:400;font-size:13px;line-height:1.4;
  letter-spacing:var(--tracking-body);color:var(--sand-a80);max-width:19ch}
.vm-sticky__t b{display:block;font-weight:600;color:var(--ivory-100)}
@media (min-width:1024px){.vm-sticky{display:flex}}
@media (prefers-reduced-motion:reduce){.vm-sticky{transition:none}}
/* .vm-reveal was referenced by no markup — the site has no scroll-reveal component.
   Kept out of the reduce block rather than left as a rule guarding nothing. */

/* ── Skip link ─────────────────────────────────────── */
.vm-skip{position:absolute;left:0;top:0;clip-path:inset(50%);z-index:100;min-height:44px;display:flex;align-items:center;padding:12px 20px;
  background:var(--umber-solid);color:var(--ivory-100);font-family:var(--font-body);
  font-size:14px;border-radius:0 0 var(--radius-field) 0}
.vm-skip:focus{clip-path:none}

/* Visible keyboard focus everywhere, which nothing had. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.vm-header :where(a,button):focus-visible,.vm-textured :where(a,button):focus-visible{
  outline-color:var(--ivory-100)}

/* A solid pill for the plain-HTML pages, which cannot mount the React Button. */
.vm-btn-solid{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 26px;border-radius:var(--radius-pill);background:var(--umber-solid);
  color:var(--ivory-100);font-family:var(--font-sans);font-stretch:expanded;font-size:15px;
  letter-spacing:var(--tracking-subhead);text-decoration:none;white-space:nowrap;
  transition:var(--transition-action)}
.vm-btn-solid:hover{background:var(--accent-deepest);color:var(--ivory-100)}

/* The ask at the foot of the story panel — centered on the panel, clear of the signature copy. */
.vm-story__act{display:flex;justify-content:center;margin-top:clamp(22px,2.4vw,30px)}

/* A filled photo slot drops the dashed brief chrome and keeps only the frame. */
.vm-person__slot.is-filled,.vm-family__slot.is-filled{border:none;background:none;padding:0}


/* ── The Register preview frame ─────────────────────
   Browser chrome drawn in brand terms, not an imitation of a real browser. Nothing inside is
   interactive on purpose — a preview that half-works reads worse than one that plainly does not. */
.vm-rp{margin:0;background:var(--ivory-100);border:1px solid var(--rule-sand);border-radius:9px;
  overflow:hidden;box-shadow:0 14px 34px -14px var(--scrim-34)}
.vm-rp__chrome{display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:var(--umber-solid);border-bottom:1px solid var(--shadow-a20)}
.vm-rp__dots{display:flex;gap:6px;flex:0 0 auto}
.vm-rp__dots i{width:9px;height:9px;border-radius:50%;background:var(--ivory-a32);display:block}
.vm-rp__addr{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--ivory-a72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vm-rp__screen{position:relative;background:var(--white);padding:22px 20px 0}
.vm-rp__head{border-bottom:1px solid var(--rule-sand);padding-bottom:16px;margin-bottom:4px}
.vm-rp__kicker{font-family:var(--font-display);font-weight:500;font-size:11px;
  letter-spacing:var(--tracking-section-title);text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:7px}
.vm-rp__title{font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.2;
  color:var(--ink);margin:0 0 15px}
.vm-rp__search{display:flex;align-items:center;gap:9px;border:1px solid var(--border-field);
  border-radius:var(--radius-pill);padding:10px 16px;background:var(--ivory-100)}
.vm-rp__search span{font-family:var(--font-body);font-size:13px;letter-spacing:var(--tracking-body);
  color:var(--ink-faintest)}
.vm-rp__rows{display:flex;flex-direction:column}
.vm-rp__row{display:grid;grid-template-columns:1fr;gap:2px;padding:13px 0;
  border-bottom:1px solid var(--rule-sand-50)}
.vm-rp__trade{font-family:var(--font-display);font-weight:500;font-size:10px;
  letter-spacing:var(--tracking-section-title);text-transform:uppercase;color:var(--accent)}
.vm-rp__name{font-family:var(--font-body);font-weight:600;font-size:14px;
  letter-spacing:var(--tracking-body);color:var(--ink)}
.vm-rp__phone{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--ink-muted-warm)}
.vm-rp__stars{display:flex;align-items:center;gap:1px;font-size:11px;color:var(--rule-sand);
  margin-top:2px}
.vm-rp__stars .on,.vm-rp__stars .half{color:var(--gold)}
.vm-rp__stars em{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--ink-muted-warm);
  margin-left:6px}
.vm-rp__rc{font-family:var(--font-body);font-size:11.5px;color:var(--ink-faint)}
.vm-rp__fade{position:absolute;left:0;right:0;bottom:0;height:96px;pointer-events:none;
  background:linear-gradient(to bottom,var(--white-a00),var(--white) 78%)}
.vm-rp__cap{font-family:var(--font-body);font-size:12.5px;line-height:1.6;
  letter-spacing:var(--tracking-body);color:var(--ink-muted-warm);text-align:center;margin-top:14px;
  max-width:42ch;margin-inline:auto}

/* ── The client-tools section ───────────────────────
   One section, two previews. Tabs rather than two stacked demos, so the page does not make the
   same "coming this fall" apology twice. */
.vm-tools__tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  margin-top:clamp(26px,3vw,40px)}
.vm-tools__tab{font-family:var(--font-sans);font-stretch:expanded;font-size:14px;
  letter-spacing:var(--tracking-subhead);min-height:44px;padding:0 24px;
  border-radius:var(--radius-pill);border:1px solid var(--accent);background:transparent;
  color:var(--accent);cursor:pointer;transition:var(--transition-action)}
.vm-tools__tab:hover{background:var(--wash-accent-07)}
.vm-tools__tab.is-on{background:var(--umber-solid);border-color:var(--umber-solid);
  color:var(--ivory-100)}
.vm-tools__body{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,54px);
  align-items:start;margin-top:clamp(28px,3.4vw,44px)}
.vm-tools__status{font-family:var(--font-body);font-size:13.5px;line-height:1.7;
  letter-spacing:var(--tracking-body);color:var(--ink);background:var(--wash-accent-06);
  border-left:2px solid var(--accent);padding:12px 16px;margin:0 0 22px;max-width:52ch}
.vm-tools__status strong{font-weight:600;color:var(--accent)}
.vm-tools__demo [hidden]{display:none}
@media (min-width:1024px){
  .vm-tools__body{grid-template-columns:1fr 500px}
  .vm-tools__tabs{justify-content:flex-start}
  .vm-rp__row{grid-template-columns:150px 1fr auto;align-items:baseline;gap:4px 16px}
  .vm-rp__trade{grid-row:span 2}
  .vm-rp__phone{grid-column:3;grid-row:1;text-align:right}
  .vm-rp__stars{grid-column:2}
  .vm-rp__rc{grid-column:3;text-align:right}
  .vm-rp__screen{padding:26px 26px 0}
  .vm-rp__title{font-size:25px}
}

/* Trade rows are static in this version — no page to link to — so they must not look clickable. */
.vm-index__row.is-static{cursor:default}
.vm-index__row.is-static:hover{border-bottom-color:var(--rule-umber-15)}
.vm-index__row.is-static:hover .vm-index__name,
.vm-index__row.is-static:hover .vm-index__count{color:inherit}
.vm-tools__index{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule-sand)}
.vm-tools__index .vm-index__grid{columns:2}
@media (max-width:620px){.vm-tools__index .vm-index__grid{columns:1}}

/* The Register demo frame. Taller than Vellum's because it is a page, not a phone; the app draws
   its own browser chrome, so this is only a viewport. */
.vm-regframe{width:100%;height:760px;flex:0 0 auto}
.vm-regframe iframe{display:block;width:100%;height:100%;border:0;background:transparent}
@media (max-width:620px){.vm-regframe{height:660px}}


/* ── Owner sign in ──────────────────────────────────
   A closed door, said plainly. The card is real chrome around an inert form: the fields are proper
   inputs and the submit explains rather than fails, because a login that appears to work and then
   rejects a correct password is the worst version of this page. */
.vm-ownerauth{background:var(--ivory-200)}
.vm-ownerauth__grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,60px);align-items:start}
.vm-ownerauth__copy .vm-lede{max-width:52ch}
.vm-ownerauth__preview{margin-top:30px;padding-top:22px;border-top:1px solid var(--rule-sand);
  display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.vm-ownerauth__preview .vm-note{margin:0;max-width:46ch}

.vm-ownerauth__card{background:var(--white);border:1px solid var(--rule-sand);border-radius:var(--radius-panel);
  padding:clamp(26px,3vw,36px);box-shadow:0 14px 34px -16px var(--scrim-30)}
.vm-ownerauth__brandline{display:flex;align-items:center;gap:10px;margin-bottom:22px;
  padding-bottom:18px;border-bottom:1px solid var(--rule-sand)}
.vm-ownerauth__vellum{font-family:var(--font-display);font-weight:400;font-size:20px;
  letter-spacing:.02em;color:var(--ink)}
.vm-ownerauth__h{font-family:var(--font-display);font-weight:400;font-size:25px;line-height:1.2;
  color:var(--ink);margin:0 0 5px}
.vm-ownerauth__sub{font-family:var(--font-body);font-size:13.5px;line-height:1.6;
  letter-spacing:var(--tracking-body);color:var(--ink-muted-warm);margin:0 0 22px}
.vm-ownerauth__form{display:flex;flex-direction:column;gap:12px}
.vm-ownerauth__hint,.vm-ownerauth__note{font-family:var(--font-body);font-size:13px;line-height:1.7;
  letter-spacing:var(--tracking-body);color:var(--ink);background:var(--wash-accent-06);
  border-left:2px solid var(--accent);padding:12px 15px;margin:18px 0 0}
.vm-ownerauth__hint strong{font-weight:600;color:var(--accent)}
.vm-ownerauth__foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule-sand);
  display:flex;flex-direction:column;gap:8px}
.vm-ownerauth__foot p{font-family:var(--font-body);font-size:12.5px;line-height:1.65;
  letter-spacing:var(--tracking-body);color:var(--ink-muted-warm);margin:0}
@media (min-width:1024px){
  .vm-ownerauth__grid{grid-template-columns:1fr 404px}
  .vm-ownerauth__h{font-size:28px}
}


/* ── Prose links ────────────────────────────────────
   Restores an affordance the global a{color:inherit} reset removes. Colour AND underline, because
   WCAG 1.4.1 requires more than colour alone — and here there was not even colour. */
.vm-section p a:not([class]),.vm-section li a:not([class]),
.vm-lede a:not([class]),.vm-note a:not([class]){
  color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.vm-section p a:not([class]):hover,.vm-section li a:not([class]):hover,
.vm-lede a:not([class]):hover,.vm-note a:not([class]):hover{color:var(--accent-hover)}


/* ══ Standards pass · 9 Aug 2026 ═══════════════════════════════════════════
   Every rule below closes a counted row in Vellamore Standards Audit. Values
   come from tokens; nothing here introduces a colour. */

/* 3.7 — discrete controls reach 44px on touch widths. Width was never the
   failure; height was, everywhere. */
@media (max-width:1023px){
  .vm-navlink,.vm-signin,.vm-tel,.vm-doc__bar a{min-height:44px;display:inline-flex;align-items:center}
  footer nav a{min-height:44px;display:flex;align-items:center}
  .vm-burger{min-width:44px;min-height:44px;justify-content:center;align-items:center}
  .vm-capture__row button,.vm-capture__row .vm-btn,.vm-form button{min-height:44px}
  .vm-index__row{padding-block:13px}
}
/* Prose links keep their line box and gain a 44px hit area. Growing the box
   itself would break the paragraph it sits in. */
@media (max-width:1023px){
  .vm-body a,.vm-lede a,.vm-note a,p a{position:relative}
  .vm-body a::after,.vm-lede a::after,.vm-note a::after,p a::after{
    content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}

/* 3.1 — 10px definition labels measured 4.00:1 on ivory */
.vm-placeholder__d dt{color:var(--text-secondary)}

/* 3.5 — the CSS half of reduced motion. The component half is in
   site-chrome.jsx, because a CSS-only version can strand an element at
   opacity 0 when the scroll observer never fires. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* 3.6 — nothing may exceed the viewport at 320px */
img,svg,video,iframe{max-width:100%}

/* Widow control that cannot cause overflow. The nowrap is the point at large
   sizes and the failure at 320px, so it relaxes where it would break out. */
.vm-keep{white-space:nowrap}
@media (max-width:560px){.vm-keep{white-space:normal}}

/* fieldset and input min-content is wider than a 320px column unless told otherwise */
fieldset,.vm-fgroup,.vm-fgroup__body{min-width:0}
input,select,textarea{max-width:100%;min-width:0}

/* 3.7 — min-height reaches only what is already a block or flex box, which is
   exactly the set of standalone controls. Inline prose links keep their line
   box and their ::after hit area instead. */
@media (max-width:1023px){
  a,button{min-height:44px}
  .vm-logo{min-height:44px}
  .vm-person__link,.vm-btn-solid,.vm-btn-outline{display:inline-flex;align-items:center}
  p>a,li>a,.vm-body a,.vm-lede a,.vm-note a,.vm-index__row{min-height:0}
}
/* A CTA may not exceed its column */
.vm-hero__actions>*{max-width:100%}

/* ── Standards pass, round two ──────────────────────────────────────────────
   Each of these closed a node the corrected measurement still found. */

/* 3.6 — a nowrap chip label is wider than a 320px column */
@media (max-width:520px){.vm-check{white-space:normal;text-align:left;padding:10px 14px;min-height:44px}}
/* 3.6 — no control may be wider than its column, whatever its label */
a,button{max-width:100%}

/* Type floor — the footer legal line is prose, not a label, so 12.5px is its floor.
   It was 11px, which is under the body minimum even though it clears contrast. */
.vm-doc__legal{font-size:12.5px}

/* vm-open prose floor — the draft notice is a sentence, not a label, so 12.5px
   is its minimum even though 10px cleared contrast. */
.vm-open{font-size:12.5px;line-height:1.6}

/* ── Small print: privacy, terms, accessibility ─────
   Long reference copy, read once and searched later. Sections are separated by space
   rather than rules, headings sit close to the paragraph they own, and the measure is
   held at 760px in the markup. */
.vm-legal{max-width:760px}
.vm-legal__meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin:18px 0 0}
.vm-legal h2{font-family:var(--font-display);font-weight:500;font-size:clamp(21px,2.1vw,26px);line-height:1.3;letter-spacing:0;color:var(--ink);margin:54px 0 0}
.vm-legal h3{font-family:var(--font-sans);font-stretch:expanded;font-weight:500;font-size:15px;line-height:1.45;letter-spacing:var(--tracking-subhead);color:var(--ink);margin:30px 0 0}
.vm-legal p{margin:14px 0 0;max-width:70ch}
.vm-legal ul,.vm-legal ol{margin:16px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:12px;max-width:70ch}
.vm-legal li{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.75;letter-spacing:var(--tracking-body);color:var(--ink);padding-left:4px}
.vm-legal li::marker{color:var(--accent)}
.vm-legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.vm-legal a:hover{color:var(--accent-hover)}
/* Statutory all-caps. Smaller than body would be unreadable in caps; the extra
   line-height and tracking are what make a block of capitals legible at all. */
.vm-legal__caps{font-size:13.5px;line-height:1.9;letter-spacing:.02em;color:var(--ink-muted-deep)}
.vm-legal__rule{border:0;border-top:1px solid var(--rule-sand);margin:60px 0 0}
.vm-legal__links{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:22px}
.vm-legal__links a{font-family:var(--font-body);font-size:13px;line-height:1.6;letter-spacing:var(--tracking-body);color:var(--ink-muted);text-decoration:none}
.vm-legal__links a:hover{color:var(--accent)}
.vm-legal__links a[aria-current]{color:var(--ink)}
@media (max-width:1023px){.vm-legal__links a{min-height:44px;display:inline-flex;align-items:center}}

/* ── Form state ─────────────────────────────────────
   Errors are named in text, never by color alone: the field also carries aria-invalid and
   points at its message with aria-describedby. */
.vm-fielderr{margin:7px 0 0;font-family:var(--font-body);font-weight:500;font-size:13px;
  line-height:1.6;letter-spacing:var(--tracking-body);color:var(--accent)}
/* The soft nudge — a missing number against "Text" is worth saying, not worth blocking. */
.vm-fieldnote{margin:7px 0 0;font-family:var(--font-body);font-weight:400;font-size:13px;
  line-height:1.6;letter-spacing:var(--tracking-body);color:var(--ink-muted)}
.vm-formerr{margin:12px 0 0;padding:12px 14px;border:1px solid var(--accent);
  border-radius:var(--radius-field);background:var(--wash-accent-06);
  font-family:var(--font-body);font-size:13.5px;line-height:1.65;color:var(--ink)}
.vm-formerr a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* Status for screen readers only — the button label already says it on screen. */
.vm-srlive{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
/* Character counter under a Mailchimp-capped textarea. */
.vm-fieldcount{margin:6px 0 0;text-align:right;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.06em;color:var(--ink-muted)}
/* Capture error. The ivory variant sits on the dark textured ground. */
.vm-capture__err{margin:10px 0 0;font-family:var(--font-body);font-weight:500;font-size:13px;
  line-height:1.6;letter-spacing:var(--tracking-body);color:var(--accent)}
.vm-capture__err.is-ivory{color:var(--accent-warm-light)}
.vm-capture__err a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Apply by email — what the message should contain, before it is opened. */
.vm-apply__h{font-family:var(--font-sans);font-stretch:expanded;font-weight:500;font-size:15px;
  line-height:1.4;letter-spacing:var(--tracking-subhead);color:var(--ink);margin:0 0 14px}
.vm-apply__list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.vm-apply__list li{font-family:var(--font-body);font-size:14px;line-height:1.7;
  letter-spacing:var(--tracking-body);color:var(--ink);padding-left:4px}
.vm-apply__list li::marker{color:var(--accent)}

/* ── How we're built ────────────────────────────────
   The lead headline is set at the decision-section size, but here it sits in the narrow
   column of a .72/1.28 split — four lines of 61px type against three short list rows, and the
   right column ran out half a page early. Widen the left slightly so the headline breaks in
   three, give the rows room, and centre the list against the block it is arguing with. */
@media (min-width:1024px){
  #how-were-built .vm-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    align-items:center;gap:clamp(40px,4.4vw,80px)}
  #how-were-built .vm-h2--lead{font-size:clamp(var(--step-31),3.6vw,var(--step-49))}
  #how-were-built .vm-applist{margin-top:0}
  #how-were-built .vm-applist__row{padding:22px 0;gap:6px}
}


/* ══════════════════════════════════════════════════════════════════════════
   v4 additions. Every new block is prefixed vm4- so nothing here can collide
   with a v2 name (see README — three collisions in this project's history).
   ══════════════════════════════════════════════════════════════════════════ */

/* The number, back in the desktop header. Set as a name and a number, not a
   button: the promise is "one number", so it is typeset as a fact. */
.vm4-tel{display:none;flex-direction:column;gap:1px;padding-left:clamp(14px,1.6vw,22px);border-left:1px solid var(--sand-a20)}
@media (min-width:1280px){.vm4-tel{display:flex}}
.vm4-tel__k{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-a72)}
.vm4-tel__n{font-family:var(--font-sans);font-stretch:expanded;font-size:15px;letter-spacing:var(--tracking-subhead);color:var(--ivory-100);white-space:nowrap}

/* The storm state. One band the team switches on: window.VM_STORM, or ?storm=1
   to see it. Off, it renders nothing. */
.vm4-storm{background:var(--umber-solid);padding:9px clamp(16px,3vw,28px);display:flex;gap:6px 20px;align-items:baseline;justify-content:center;flex-wrap:wrap;border-bottom:1px solid var(--sand-a20)}
.vm4-storm__k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-a72)}
.vm4-storm__v{font-family:var(--font-body);font-size:13px;line-height:1.5;color:var(--ivory-100)}
.vm4-storm__v b{font-weight:600}

/* A proof placed at the moment of its doubt, rather than banked in a strip. */
.vm4-tp{margin:22px 0 0;padding-top:12px;border-top:1px solid var(--rule-sand);display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;max-width:64ch}
.vm4-tp__k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.vm4-tp__v{font-family:var(--font-body);font-size:13.5px;line-height:1.65;letter-spacing:var(--tracking-body);color:var(--ink-muted);flex:1 1 260px}
.vm4-tp--ivory{border-top-color:var(--ivory-a22)}
/* A trust point draws its own hairline. Directly under a block that already ends in one, it doubled
   the line — so the point drops its rule and keeps the spacing. */
:is(.vm5-stamp,.vm5-entry,.vm4-rank,.vm6-vl__file,.vm6-vl__group,.vm6-vl__years,.vm5-ledger,.vm-index__grid)+.vm4-tp{border-top:0;padding-top:0}
.vm5-stamp+.vm4-tp{margin-top:0}
.vm4-tp--ivory .vm4-tp__k{color:var(--ivory-100)}
.vm4-tp--ivory .vm4-tp__v{color:var(--ivory-a86)}

/* Two speeds. The rank is read at a glance; the card body is one tap under it. */
.vm4-rank{margin-top:clamp(26px,3vw,44px);border-top:1px solid var(--ivory-a22)}
.vm4-rank__item{border-bottom:1px solid var(--ivory-a22)}
.vm4-rank__btn{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px 18px;background:none;border:0;padding:16px 0;min-height:44px;cursor:pointer;text-align:left;color:inherit}
.vm4-rank__n{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--ivory-a72)}
.vm4-rank__t{font-family:var(--font-sans);font-stretch:expanded;font-size:clamp(19px,2.1vw,25px);line-height:1.15;letter-spacing:var(--tracking-subhead);color:var(--ivory-100);display:flex;flex-direction:column;gap:5px}
.vm4-rank__s{font-family:var(--font-body);font-size:13.5px;line-height:1.5;font-stretch:normal;letter-spacing:var(--tracking-body);color:var(--ivory-a72)}
.vm4-rank__sign{font-family:var(--font-mono);font-size:17px;color:var(--ivory-a72);line-height:1}
.vm4-rank__btn:hover .vm4-rank__t{color:var(--white)}
.vm4-rank__body{font-family:var(--font-body);font-size:15px;line-height:1.75;letter-spacing:var(--tracking-body);color:var(--ivory-a86);max-width:62ch;margin:0;padding:0 0 20px}
.vm4-rank__body[hidden]{display:none}

/* The incentive, drawn rather than described. Two columns, side by side. */
.vm4-proof{font-family:var(--font-sans);font-stretch:expanded;font-size:clamp(25px,3.4vw,41px);line-height:1.12;letter-spacing:var(--tracking-subhead);color:var(--ink);margin:clamp(28px,3.4vw,48px) 0 0;max-width:20ch}
.vm4-ledger{display:grid;grid-template-columns:1fr;margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--rule-sand)}
.vm4-ledger__col{padding:22px 0;border-bottom:1px solid var(--rule-sand);display:flex;flex-direction:column;gap:10px}
.vm4-ledger__k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.vm4-ledger ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.vm4-ledger li{font-family:var(--font-body);font-size:14.5px;line-height:1.6;letter-spacing:var(--tracking-body);color:var(--ink);padding-left:18px;position:relative}
.vm4-ledger li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--accent)}
.vm4-ledger__foot{font-family:var(--font-body);font-size:13.5px;line-height:1.65;color:var(--ink-muted);margin:2px 0 0;max-width:44ch}
@media (min-width:900px){
  .vm4-ledger{grid-template-columns:1fr 1fr}
  .vm4-ledger__col+.vm4-ledger__col{padding-left:clamp(28px,3.2vw,56px);border-left:1px solid var(--rule-sand)}
}
.vm4-answer{margin-top:clamp(24px,3vw,38px);background:var(--wash-accent-06);border-left:2px solid var(--accent);padding:18px 22px;max-width:70ch;display:flex;flex-direction:column;gap:8px}
.vm4-answer p{font-family:var(--font-body);font-size:14.5px;line-height:1.7;letter-spacing:var(--tracking-body);color:var(--ink);margin:0}

/* The note, opened in place. */
.vm4-disc{border-top:1px solid var(--rule-sand)}
.vm4-disc__btn{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;padding:12px 0;cursor:pointer;font-family:var(--font-sans);font-stretch:expanded;font-size:14px;letter-spacing:var(--tracking-subhead);color:var(--ink);text-align:left}
.vm4-disc__btn span:last-child{font-family:var(--font-mono);font-size:16px;color:var(--accent)}
.vm4-disc__body{padding:0 0 16px}
.vm4-disc__body[hidden]{display:none}
.vm4-summary{font-family:var(--font-body);font-size:15.5px;line-height:1.7;letter-spacing:var(--tracking-body);color:var(--ink);margin:0}
.vm4-summary b{font-weight:600}
.vm4-set{font-family:var(--font-body);font-size:14.5px;line-height:1.7;color:var(--ink);margin:0 0 10px}

/* Response times. */
.vm4-esc{display:grid;grid-template-columns:1fr;margin-top:clamp(26px,3vw,44px);border-top:1px solid var(--rule-sand)}
.vm4-esc__col{display:flex;flex-direction:column;gap:10px;padding:24px 0;border-bottom:1px solid var(--rule-sand)}
.vm4-esc__k{font-family:var(--font-sans);font-stretch:expanded;font-size:clamp(20px,2.2vw,27px);line-height:1.1;letter-spacing:var(--tracking-subhead);color:var(--ink)}
.vm4-esc__w{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.vm4-esc__b{font-family:var(--font-body);font-size:14.5px;line-height:1.7;letter-spacing:var(--tracking-body);color:var(--ink);margin:0}
@media (min-width:900px){
  .vm4-esc{grid-template-columns:repeat(3,1fr)}
  .vm4-esc__col{padding:24px clamp(20px,2.4vw,34px) 24px 0;border-left:1px solid var(--rule-sand);padding-left:clamp(20px,2.4vw,34px)}
  .vm4-esc__col:first-child{padding-left:0;border-left:0}
}

/* A frame that did not load says so, and offers the way in. */
.vm4-frameoff{position:absolute;inset:0;height:auto;display:flex;flex-direction:column;justify-content:center;gap:10px;background:var(--white);border:1px solid var(--ivory-300);border-radius:var(--radius-card);padding:26px}
.vm4-frameoff p{font-family:var(--font-body);font-size:14px;line-height:1.7;color:var(--ink);margin:0;max-width:44ch}

/* Four taps instead of a free-text field. */
.vm4-taps{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.vm4-tap{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--rule-sand);border-radius:var(--radius-pill);background:var(--white);font-family:var(--font-body);font-size:14px;letter-spacing:var(--tracking-body);color:var(--ink);cursor:pointer}
.vm4-tap input{position:absolute;opacity:0;width:1px;height:1px}
.vm4-tap.is-on{background:var(--umber-solid);border-color:var(--umber-solid);color:var(--ivory-100)}


/* ══════════════════════════════════════════════════════════════════════════
   v5 — the record, as a design system. Prefixed vm5-.
   The brand's material is a dated, photographed, signed record. Four components
   carry it: DATELINE, ENTRY, STAMP and PAIR. Teal is now reserved for them —
   it means "we wrote this down" and it means nothing else on the site.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --record:#3F5F63;        /* the record hand — teal-band darkened; 7.1:1 on ivory-100 */
  --record-ivory:#BFD3D4;  /* the same on a dark ground */
  --found:#8C3A18;         /* "found something": the note's flag, an overdue approval, the storm */
  --found-wash:rgba(140,58,24,.08);
}

/* DATELINE — mono, small, always directly under the thing it dates. */
.vm5-date{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--record);display:block;margin:6px 0 0;font-variant-numeric:tabular-nums}
.vm5-date--above{margin:0 0 6px}
.vm5-date--ivory{color:var(--record-ivory)}

/* ENTRY — the atomic unit: dateline, one plain sentence, an optional flag. */
.vm5-entry{display:grid;grid-template-columns:1fr;gap:2px;padding:13px 0;border-bottom:1px solid var(--rule-sand)}
.vm5-entry:last-child{border-bottom:0}
.vm5-entry__t{font-family:var(--font-body);font-size:14.5px;line-height:1.6;letter-spacing:var(--tracking-body);color:var(--ink)}
.vm5-entry__d{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--record);font-variant-numeric:tabular-nums;white-space:nowrap}
.vm5-entry--found .vm5-entry__d{color:var(--found)}
.vm5-entry__f{font-family:var(--font-body);font-size:13px;line-height:1.55;color:var(--found);background:var(--found-wash);padding:2px 8px;border-radius:2px;justify-self:start;margin-top:4px}
@media (min-width:560px){
  .vm5-entry{grid-template-columns:104px 1fr;gap:4px 18px;align-items:baseline}
  .vm5-entry__f{grid-column:2}
}

/* STAMP — a fact that is a warranty. Ruled above and below, never a badge. */
.vm5-stamp{display:block;border-block:1px solid var(--rule-sand);padding:14px 0;margin:26px 0;max-width:44ch}
.vm5-stamp b{display:block;font-family:var(--font-display);font-weight:500;font-size:15px;letter-spacing:var(--tracking-section-title);text-transform:uppercase;color:var(--ink);line-height:1.35}
.vm5-stamp span{display:block;font-family:var(--font-body);font-size:13px;line-height:1.6;color:var(--ink-muted);margin-top:6px}
.vm5-stamp--ivory{border-color:var(--ivory-a22)}
.vm5-stamp--ivory b{color:var(--ivory-100)}
.vm5-stamp--ivory span{color:var(--ivory-a86)}
.vm5-stamp--wide{max-width:62ch}
/* The wide stamp's title is set in letterspaced caps, so a 48-character line turns over inside a
   62ch box and the stamp reads as two ragged lines. Above 900px the title holds one line — the
   tracking eases a little to buy the room — while the sentence beneath keeps its measure. */
@media(min-width:1100px){
  .vm5-stamp--wide{max-width:none}
  .vm5-stamp--wide>b{white-space:nowrap;letter-spacing:.17em}
  .vm5-stamp--wide>span{display:block;max-width:62ch}
}

/* PAIR — two frames, one hairline, two datelines. Before and after; found and fixed. */
.vm5-pair{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:18px 0;border:1px solid var(--rule-sand);background:var(--white)}
.vm5-pair figure{margin:0;padding:0;display:flex;flex-direction:column}
.vm5-pair figure+figure{border-left:1px solid var(--rule-sand)}
.vm5-pair img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.vm5-pair figcaption{padding:9px 12px 11px;display:flex;flex-direction:column;gap:3px}
.vm5-pair figcaption b{font-family:var(--font-body);font-weight:600;font-size:12.5px;line-height:1.4;color:var(--ink)}

/* STATEMENT — the five sentences that are brand assets. One scale, one measure,
   the period kept. Used no more than five times on a page. */
.vm5-say{font-family:var(--font-sans);font-stretch:expanded;font-weight:400;
  font-size:clamp(26px,3.6vw,44px);line-height:1.1;letter-spacing:var(--tracking-subhead);
  color:var(--ink);margin:clamp(20px,2.6vw,34px) 0;max-width:19ch;text-wrap:balance}
.vm5-say--ivory{color:var(--ivory-100)}
.vm5-say--lead{margin-top:0}

/* Numbers that are compared are always tabular. */
.vm-fees td,.vm-fees th,.vm5-num,.vm-stats__cell,.vm-index__count{font-variant-numeric:tabular-nums}

/* The letterhead on the note sheet. */
.vm5-head{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:10px}
.vm5-head__l{display:flex;flex-direction:column;gap:3px}
.vm5-head__k{font-family:var(--font-display);font-weight:500;font-size:12px;letter-spacing:var(--tracking-section-title);text-transform:uppercase;color:var(--ink)}
.vm5-head__a{font-family:var(--font-body);font-size:13px;line-height:1.5;color:var(--ink-muted);text-align:right}
.vm5-sign{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--rule-sand);padding-top:12px;margin-top:4px}
.vm5-sign__n{font-family:var(--font-display);font-size:19px;line-height:1.2;color:var(--ink)}
.vm5-sign__r{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}

/* The family signature. Six names, set once, large — a family signing the work. */
.vm5-names{font-family:var(--font-display);font-weight:400;font-size:clamp(21px,2.4vw,29px);line-height:1.25;color:var(--ink);margin:14px 0 6px;max-width:22ch}

/* The Register, set as a kept index: trade, leader rule, count. */
.vm5-ledger{display:flex;flex-direction:column}
.vm5-ledger__row{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:8px;padding:5px 0}
.vm5-ledger__n{font-family:var(--font-body);font-size:13.5px;color:var(--ink)}
.vm5-ledger__lead{height:1px;background:repeating-linear-gradient(90deg,var(--rule-sand) 0 2px,transparent 2px 5px);transform:translateY(-3px)}
.vm5-ledger__c{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* ── Motion ───────────────────────────────────────────
   Three behaviours and no others. Arrival: sections settle 8px, once. Opening:
   disclosures animate their height. Continuity: content fades in over the paper
   ground so there is no white flash between pages. */
.vm5-rise{opacity:0;transform:translateY(8px);transition:opacity 240ms var(--ease-standard),transform 240ms var(--ease-standard)}
.vm5-rise.is-in{opacity:1;transform:none}
.vm4-disc__body:not([hidden]),.vm4-rank__body:not([hidden]){animation:vm5-open 200ms var(--ease-standard)}
@keyframes vm5-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
body{animation:vm5-in 120ms var(--ease-standard)}
@keyframes vm5-in{from{opacity:.001}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .vm5-rise{opacity:1;transform:none;transition:none}
  .vm4-disc__body:not([hidden]),.vm4-rank__body:not([hidden]),body{animation:none}
}

/* Statement type holds its scale on a phone: a statement at body size is a paragraph. */
@media (max-width:560px){
  .vm5-say{font-size:30px;max-width:16ch}
  .vm5-pair{grid-template-columns:1fr}
  .vm5-pair figure+figure{border-left:0;border-top:1px solid var(--rule-sand)}
}

/* A statement inside a centred stack centres with it. */
.vm-stack .vm5-say{margin-inline:auto;text-align:center}
.vm-stack--left .vm5-say{margin-inline:0;text-align:left}
/* Buttons in a centred stack centre with it — they were left-aligned under centred type. */
.vm-stack .vm-hero__actions{justify-content:center;align-items:center;margin-inline:auto}
.vm-stack--left .vm-hero__actions{justify-content:flex-start;align-items:flex-start;margin-inline:0}

.vm-index__grid .vm5-ledger__row{break-inside:avoid}
.vm-tools__index .vm5-stamp{margin:22px 0 10px}


/* ══ v6 ══ the proof system, and the finalization details. ══════════════════ */
.vm6-proof{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px);margin-top:clamp(26px,3vw,42px)}
.vm6-proof--row{grid-template-columns:1fr}
@media (min-width:900px){.vm6-proof--row{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.vm6-proof__item{margin:0;display:flex;flex-direction:column;gap:14px;padding-top:18px;border-top:1px solid var(--rule-sand)}
.vm6-proof__item blockquote{margin:0;font-family:var(--font-body);font-size:clamp(16px,1.6vw,19px);line-height:1.65;letter-spacing:var(--tracking-body);color:var(--ink);max-width:46ch}
.vm6-proof__item figcaption{display:flex;flex-direction:column;gap:2px}
.vm6-proof__item figcaption b{font-family:var(--font-sans);font-stretch:expanded;font-size:14px;letter-spacing:var(--tracking-subhead);color:var(--ink)}
.vm6-proof__item figcaption span{font-family:var(--font-body);font-size:13px;color:var(--ink-muted)}
.vm6-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin-top:clamp(26px,3vw,40px);padding-top:20px;border-top:1px solid var(--rule-sand)}
.vm6-figures div{display:flex;flex-direction:column;gap:4px}
.vm6-figures b{font-family:var(--font-sans);font-stretch:expanded;font-size:clamp(25px,3vw,35px);line-height:1;letter-spacing:var(--tracking-subhead);color:var(--ink);font-variant-numeric:tabular-nums}
.vm6-figures span{font-family:var(--font-body);font-size:13px;line-height:1.5;color:var(--ink-muted)}

/* A quiet line under a frame or a list: what to do when the thing you wanted is not there. */
.vm6-noresult{font-family:var(--font-body);font-size:13.5px;line-height:1.7;color:var(--ink-muted);margin:12px 0 0;max-width:52ch}

/* The risk check. A useful instrument, not a lead form: no email, no gate, printable. */
.vm6-rc{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule-sand);margin-top:clamp(24px,3vw,38px)}
.vm6-rc__q{padding:clamp(22px,2.4vw,30px) 0;border-bottom:1px solid var(--rule-sand);display:grid;grid-template-columns:1fr;gap:16px;position:relative;transition:background var(--duration-base) var(--ease-standard)}
/* Two columns only when there is room for both — at 900px the options column starved the question
   to a 150px measure. */
@media (min-width:1100px){.vm6-rc__q{grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);align-items:start;gap:clamp(28px,3vw,52px)}
  .vm6-rc__opts{justify-content:flex-end}}
/* An answered question steps back so the eye goes to what is still open. */
.vm6-rc__q.is-done .vm6-rc__t{opacity:.62}
.vm6-rc__t{display:flex;flex-direction:column;gap:8px;max-width:52ch}
/* The question is the object on the page, not a line of body copy. */
.vm6-rc__t>em{font-style:normal;font-family:var(--font-sans);font-stretch:expanded;font-size:clamp(18px,1.85vw,23px);line-height:1.25;letter-spacing:var(--tracking-subhead);color:var(--ink)}
.vm6-rc__t b{display:flex;align-items:baseline;gap:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--record);font-weight:400;margin:0}
.vm6-rc__t b span{font-size:15px;color:var(--rule-sand);letter-spacing:0}
.vm6-rc__opts{display:flex;gap:8px;flex-wrap:wrap}
.vm6-rc__opt{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:72px;padding:0 16px;border:1px solid var(--rule-sand);border-radius:var(--radius-pill);background:var(--white);font-family:var(--font-body);font-size:14px;color:var(--ink);cursor:pointer}
.vm6-rc__opt input{position:absolute;opacity:0;width:1px;height:1px}
.vm6-rc__opt.is-on{background:var(--umber-solid);border-color:var(--umber-solid);color:var(--ivory-100)}
.vm6-rc__out{margin-top:clamp(26px,3vw,40px);background:var(--white);border:1px solid var(--rule-sand);border-radius:var(--radius-panel);padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:14px}
.vm6-rc__band{font-family:var(--font-sans);font-stretch:expanded;font-size:clamp(21px,2.4vw,29px);line-height:1.15;letter-spacing:var(--tracking-subhead);color:var(--ink)}
.vm6-rc__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.vm6-rc__list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;font-family:var(--font-body);font-size:14.5px;line-height:1.65;color:var(--ink)}
.vm6-rc__list li span:first-child{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--found);white-space:nowrap}
.vm6-rc__note{font-family:var(--font-body);font-size:13px;line-height:1.65;color:var(--ink-muted);margin:0}
/* ── The printed read-out ─────────────────────────────────────
   An owner prints this to take to whoever looks after the house now, or to their agent. It should
   read as a Vellamore document: the answers with their questions, the flagged items, and the
   number. Not a screenshot of a web page. */
@media print{
  @page{margin:16mm}
  .vm-callbar,.vm-sticky,.vm4-storm,.vm4-tel,.vm-nav,.vm-burger,footer,.vm-skip{display:none !important}
  header{position:static !important}
  body{background:#fff}
  .vm-section{padding-block:0 !important;background:#fff !important}
  .vm-phero{padding-bottom:8mm !important}
  .vm6-rc__q{break-inside:avoid;padding:5mm 0;grid-template-columns:1fr !important;gap:2mm}
  .vm6-rc__q.is-done .vm6-rc__t{opacity:1}
  .vm6-rc__t>em{font-size:13pt}
  .vm6-rc__t span{font-size:9.5pt}
  /* Only the chosen answer prints, set as a record line rather than a row of buttons. */
  .vm6-rc__opt{display:none !important}
  .vm6-rc__opt.is-on{display:inline-flex !important;background:none !important;color:#000 !important;
    border:0 !important;padding:0 !important;min-height:0 !important;font-size:11pt;font-weight:600}
  .vm6-rc__opts::before{content:'Answer:';font-family:var(--font-mono);font-size:8.5pt;
    letter-spacing:.14em;text-transform:uppercase;color:#3F5F63;margin-right:6px}
  .vm6-rc__out{break-inside:avoid;border:1px solid #999;box-shadow:none;padding:6mm}
  .vm6-rc__out::after{content:'Vellamore · house management on Kiawah Island · 843-619-2346 · myvellamore.com/risk-check';
    display:block;margin-top:6mm;padding-top:3mm;border-top:1px solid #ccc;
    font-family:var(--font-mono);font-size:8pt;letter-spacing:.1em;color:#555}
  .vm6-rc__out .vm-btn-solid,.vm6-rc__out a[class*="btn"],.vm6-rc__out button{display:none !important}
  .vm4-tp{break-inside:avoid}
}

/* A comparison table that stays readable on a phone. */
.vm6-cmp{width:100%;border-collapse:collapse;margin:clamp(24px,3vw,38px) 0}
.vm6-cmp th{text-align:left;font-family:var(--font-display);font-weight:500;font-size:11.5px;letter-spacing:var(--tracking-section-title);text-transform:uppercase;color:var(--accent);padding:0 14px 10px 0;border-bottom:1px solid var(--rule-sand);vertical-align:bottom}
.vm6-cmp td{font-family:var(--font-body);font-size:14px;line-height:1.6;color:var(--ink);padding:12px 14px 12px 0;border-bottom:1px solid var(--rule-sand-50);vertical-align:top}
.vm6-cmp td:last-child{color:var(--ink)}
.vm6-cmp tr td:last-child{background:var(--wash-accent-06)}
@media (max-width:700px){.vm6-cmp,.vm6-cmp tbody,.vm6-cmp tr,.vm6-cmp td{display:block;width:100%}.vm6-cmp thead{display:none}.vm6-cmp tr{border-bottom:1px solid var(--rule-sand);padding:10px 0}.vm6-cmp td{border:0;padding:4px 0}.vm6-cmp td::before{content:attr(data-h);display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}}

/* Register trade pages. */
.vm6-vendors{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--rule-sand)}
.vm6-vendor{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule-sand)}
@media (min-width:760px){.vm6-vendor{grid-template-columns:1.4fr .8fr .8fr;gap:8px 24px;align-items:baseline}}
.vm6-vendor__n{font-family:var(--font-sans);font-stretch:expanded;font-size:16px;letter-spacing:var(--tracking-subhead);color:var(--ink)}
.vm6-vendor__p{font-family:var(--font-body);font-size:14px;color:var(--ink)}
.vm6-vendor__r{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.vm6-trades{columns:2;column-gap:32px;margin:clamp(20px,2.4vw,32px) 0 0;padding:0;list-style:none}
@media (max-width:620px){.vm6-trades{columns:1}}
.vm6-trades li{break-inside:avoid;margin:4px 0;font-family:var(--font-body);font-size:14px}


/* ══ Vellum, the product page ═══════════════════════════════════════════════ */
.vm6-vl__hero{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,60px);align-items:center}
@media (min-width:1024px){.vm6-vl__hero{grid-template-columns:1fr 480px}}
.vm6-vl__device{display:flex;flex-direction:column;gap:12px;align-items:center}
.vm6-vl__device .vm-appframe{height:900px}
@media (max-width:520px){.vm6-vl__device .vm-appframe{height:820px}}
.vm6-vl__file{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,44px);margin-top:clamp(26px,3vw,42px)}
@media (min-width:860px){.vm6-vl__file{grid-template-columns:1fr 1fr}}
.vm6-vl__group{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--rule-sand);padding-top:14px}
.vm6-vl__group .vm5-ledger__k{margin-bottom:8px}
.vm6-vl__row{display:grid;grid-template-columns:1fr;gap:2px;padding:10px 0;border-bottom:1px solid var(--rule-sand-50)}
@media (min-width:620px){.vm6-vl__row{grid-template-columns:150px 1fr;gap:6px 20px;align-items:baseline}}
.vm6-vl__k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--record)}
.vm6-vl__v{font-family:var(--font-body);font-size:14px;line-height:1.6;letter-spacing:var(--tracking-body);color:var(--ink)}
.vm6-vl__years{display:grid;grid-template-columns:1fr;margin-top:clamp(26px,3vw,42px);border-top:1px solid var(--rule-sand)}
.vm6-vl__year{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule-sand)}
@media (min-width:620px){.vm6-vl__year{grid-template-columns:110px 1fr;gap:8px 26px;align-items:baseline}}
.vm6-vl__yn{font-family:var(--font-sans);font-stretch:expanded;font-size:clamp(19px,2.1vw,24px);line-height:1;letter-spacing:var(--tracking-subhead);color:var(--ink);font-variant-numeric:tabular-nums}
.vm6-vl__yt{font-family:var(--font-body);font-size:14.5px;line-height:1.65;letter-spacing:var(--tracking-body);color:var(--ink);max-width:60ch}
.vm6-vl__year--more .vm6-vl__yn{color:var(--ink-muted);font-size:15px}
.vm6-vl__does{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.4vw,32px);margin-top:clamp(26px,3vw,42px)}
@media (min-width:760px){.vm6-vl__does{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.vm6-vl__does{grid-template-columns:repeat(4,1fr)}}
.vm6-vl__does>div{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid var(--rule-sand)}
.vm6-vl__demo{display:flex;justify-content:center;margin-top:clamp(26px,3vw,42px)}
.vm6-vl__demo .vm-appframe{height:1040px}
@media (max-width:520px){.vm6-vl__demo .vm-appframe{height:900px}}
/* Six nav items and the number: tighten the row rather than drop an item. */
@media (min-width:1024px) and (max-width:1279px){.vm-nav{gap:16px !important}}

/* .vm-rp__cap is dark ink and is declared after .vm-note--ivory at equal specificity, so a caption
   on the textured ground inherited the light-ground colour (1.35:1). Scope it to the ground rather
   than reorder — other pages depend on the light-ground rule. */
.vm-textured .vm-rp__cap{color:var(--ivory-a86)}


/* ══ The story, rebuilt (v6) ════════════════════════════════════════════════
   Photograph and story side by side on the paper ground. No floating panel, no
   background image behind copy, one alignment throughout. */
.vm6-story__grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px);align-items:start}
@media (min-width:900px){.vm6-story__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
@media (min-width:1200px){.vm6-story__fig{position:sticky;top:118px}}
.vm6-story__fig{margin:0;display:flex;flex-direction:column;gap:14px}
.vm6-story__photo{width:100%;display:block;border-radius:var(--radius-image);background:var(--ivory-200);
  border:1px solid var(--ivory-300);object-fit:cover}
/* The unfilled state keeps the brief legible rather than collapsing to a grey box. */
div.vm6-story__photo{display:flex;align-items:center;justify-content:center;padding:26px;text-align:center}
div.vm6-story__photo span{font-family:var(--font-mono);font-size:11.5px;line-height:1.7;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted);max-width:26ch}
.vm6-story__fig figcaption{display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid var(--rule-sand)}
.vm6-story__fig .vm5-names{margin:0;font-size:clamp(18px,1.9vw,22px);max-width:none}
.vm6-story__copy{display:flex;flex-direction:column;align-items:flex-start}
.vm6-story__copy .vm5-say{margin:18px 0 14px}
.vm6-story__copy .vm-body{max-width:60ch;margin:11px 0}
.vm6-story__copy .vm5-stamp{margin:26px 0 4px}

/* The signature is one line at desktop — the surname is already established in the copy above it.
   Below 1200px the photo column is too narrow for 48 characters, so it balances onto two rather
   than shrinking to an illegible size. */
.vm6-story__fig .vm5-names{text-wrap:balance;font-size:clamp(15px,1.45vw,18px)}
@media (min-width:1200px){.vm6-story__fig .vm5-names{white-space:nowrap;font-size:clamp(15px,1.3vw,18px)}}

/* What happens after the form is sent. */
.vm6-next{margin:22px 0 6px;padding-top:14px;border-top:1px solid var(--rule-sand);max-width:58ch}
.vm6-next .vm5-ledger__k{display:block;margin-bottom:6px}


/* ══ Rhythm (v6.1) ══════════════════════════════════════════════════════════
   The homepage read as thirteen evenly weighted slabs: every section the same
   vertical measure, so nothing felt like a beat and the page felt longer than
   it is. Three moves, no content removed.

   1 · Sections come in three weights. Anchor sections (the problem, the note,
       the ledger) keep the full measure; supporting sections (steps, response,
       fees band, FAQ) are compressed; connective ones are tighter still.
   2 · Consecutive sections on the same ground share a hairline instead of two
       full pads of air, so a change of ground reads as a real change.
   3 · One section per screenful gets a change of ground rather than a change
       of layout — the textured bands already do this; the compression makes
       them land. */
.vm-section--beat{padding-block:clamp(38px,4.4vw,72px)}
.vm-section--quiet{padding-block:clamp(30px,3.4vw,54px)}
/* Two sections on the same ground: one rule, not two gutters of air. */
#how+#when{border-top:1px solid var(--ivory-a22)}
#fees+#faqs{border-top:1px solid var(--rule-sand)}
/* The steps and the FAQ are supporting material and were set at hero measure. */
#how .vm-steps{margin-top:clamp(26px,3vw,42px)}
#how .vm5-say{max-width:17ch}
#faqs .vm-lede{max-width:46ch}
/* The fees band is a signpost to a page, not a section of its own weight. */
#fees .vm-lede{max-width:50ch}

/* The NAP block in the footer credentials band. White on --teal-footer-deep; the label reuses
   --creds__label at 5.26:1 and the body text --white-a85 at 5.51:1. */
.vm6-nap{display:grid;gap:clamp(18px,2.4vw,40px);grid-template-columns:minmax(210px,.9fr) 2fr;padding-bottom:clamp(24px,3vw,34px);margin-bottom:clamp(22px,2.6vw,30px);border-bottom:1px solid var(--white-a16)}
/* With no credential earned yet, the NAP is the last thing in the band: its closing rule had
   nothing under it and sat in dead space above the legal strip's own rule. */
.vm6-nap:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.vm6-nap__id{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.vm6-nap__tel{font-family:var(--font-sans);font-stretch:expanded;font-size:var(--step-20);letter-spacing:var(--tracking-subhead);color:var(--white)}
.vm6-nap__mail{font-family:var(--font-body);font-size:13px;color:var(--white-a85)}
.vm6-nap__rows{display:grid;gap:12px;margin:0}
.vm6-nap__row{display:grid;grid-template-columns:minmax(120px,.5fr) 1fr;gap:clamp(12px,1.6vw,26px);align-items:baseline}
.vm6-nap__row dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--white-a82)}
.vm6-nap__row dd{margin:0;font-family:var(--font-body);font-size:13.5px;line-height:1.7;color:var(--white-a85);max-width:64ch}
@media (max-width:900px){.vm6-nap{grid-template-columns:1fr}.vm6-nap__row{grid-template-columns:1fr;gap:3px}}

/* Linked breadcrumb on the trade pages — the eyebrow used to be dead text. */
.vm6-crumb{display:block;margin-bottom:10px}.vm6-crumb a{color:var(--accent);border-bottom:1px solid var(--rule-sand)}.vm6-crumb a:hover{color:var(--ink)}.vm6-crumb span{color:var(--ink-muted)}

/* Footer grid: the lockup, then four navigation columns wide enough to hold their longest label.
   Small print is not a column — it is set inline on the legal line. */
.vm6-foot{display:grid;gap:clamp(28px,3.4vw,56px);grid-template-columns:minmax(230px,1.15fr) repeat(4,minmax(170px,1fr));align-items:start}
.vm6-foot__brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.vm6-foot__line{font-family:var(--font-body);font-size:var(--step-13);line-height:1.75;color:var(--white-a85);max-width:28ch;margin:0}
.vm6-foot__col{display:flex;flex-direction:column;gap:11px}
.vm6-foot__head{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--white-a82)}
.vm6-foot__col a{font-family:var(--font-sans);font-size:var(--step-16);font-stretch:expanded;letter-spacing:var(--tracking-subhead);color:var(--white)}
.vm6-social{display:flex;gap:6px;margin-top:2px}
.vm6-social a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--white-a16);border-radius:50%;color:var(--white-a85)}
.vm6-social a:hover{color:var(--white);border-color:var(--white-a45,rgba(255,255,255,.45))}
.vm6-legal{display:grid;gap:12px}
.vm6-legal__links{display:flex;flex-wrap:wrap;gap:8px 22px}
.vm6-legal__links a{font-family:var(--font-body);font-size:13px;color:var(--white-a85)}
.vm6-legal__links a:hover{color:var(--white)}
.vm6-legal__note{margin:0;font-family:var(--font-body);font-weight:500;font-size:12.5px;line-height:1.6;letter-spacing:var(--tracking-body);color:var(--white-a82);max-width:96ch}
/* Arithmetic, since track minimums are hard floors and a grid that does not fit overflows rather
   than shrinking. The single row needs 230 + 4x170 + 4 gaps; the gap is clamp(28px,3.4vw,56px) and
   the band padding is clamp(20px,5vw,72px) per side. At 1261px that is 1077px needed against a
   1117px content box, so 1260 is the honest wrap point with room to spare — 1230 fits on paper by
   ten pixels, which is not a margin worth shipping.
   Below it the brand spans the full width and the four navigation columns share the next row
   evenly: no empty cell, and at ~240px each the longest label still sets on one line. */
@media (max-width:1260px){
  .vm6-foot{grid-template-columns:repeat(4,minmax(150px,1fr))}
  .vm6-foot__brand{grid-column:1/-1}
  .vm6-foot__line{max-width:46ch}
}
@media (max-width:760px){.vm6-foot{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.vm6-foot{grid-template-columns:1fr}}
@media (max-width:1023px){.vm6-social a{width:44px;height:44px}}

/* A phone number is one token. In running text the browser was breaking it at the hyphens
   ("843-" / "619-2346"), which reads as two numbers. Applies sitewide, to every tel: and mailto:
   link, in prose and in the footer alike. The mailto keeps a break opportunity in reserve for
   narrow columns via anywhere, so a long address can still wrap rather than overflow. */
a[href^="tel:"]{white-space:nowrap}
/* An address gets a legitimate break after the @ (a <wbr> in the markup) rather than a break
   anywhere: "hello@myvellamore" / ".com" reads as broken in exactly the way "843-" did. */
a[href^="mailto:"]{overflow-wrap:normal}

/* Parent-company badge — flush right of the legal bar, opposite the small print. justify-self:end
   pins it to the right edge and keeps the hit area to the mark rather than the full row width.
   --white-a82 is the alpha the rest of this band uses: 5.9:1 on --teal-footer-deep. No stacked
   opacity — a second multiplier put the mark under AA. */
/* Badge and disclaimer share a baseline plane: flex-end aligns the boxes, and the 4px lifts the
   badge past the half-leading under the last line so the two bottoms read as level. */
.vm6-legal__base{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(18px,3vw,44px)}
.vm6-legal__base .vm6-parent{margin-bottom:4px}
.vm6-parent{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--white-a82,rgba(255,255,255,.82));text-decoration:none}
.vm6-parent:hover{color:var(--white)}
.vm6-parent svg{display:block}
/* On a phone the disclaimer is tall enough that a badge beside it reads as a floating object, so
   the two stack and the badge keeps the left edge with everything else. */
@media (max-width:700px){.vm6-legal__base{flex-direction:column;align-items:flex-start;gap:14px}}