/* Trust & Will page: the TEST COPY's stylesheet (hub.myanchorgroup.com/estate/tw-test-4q8z). Loaded after hub-v2.css, whose
   tokens it uses. tw.css is the live page's copy of this file: change this one, check the test copy, then copy it over tw.css
   and deploy (hub-pages/README.md, "Trust & Will files"). Sources: gohighlevel/trust-will/build_pages.py writes the markup.
   1. The headline, price and checkout (Michael's lock, 2026-11-04)
   2. The scroll sections, design D (Michael, 2026-11-11: A's big, calm sections with C's gold thread through all of them;
      mockups and critic record in trust-will/redesign/). Everything hidden waits for html.rd-go, which tw-motion-test.js
      sets only when it runs, so a failed script leaves the page whole.
   3. The free-plan check page (2026-11-11) */

/* ======== 1. The top ======== */
/* ---- The headline and price (2026-11-04) ---- */
.hub-tw-hero h1 { text-wrap: balance; }
.hub-tw-price { margin: 28px 0 0; }
.hub-tw-was { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--text); font: 500 17px/1.3 var(--font); }
.hub-tw-was s { position: relative; text-decoration: none; color: var(--text); }
.hub-tw-was s::after { content: ""; position: absolute; left: -3px; right: -3px; top: 52%; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: left; animation: hub-tw-strike .5s var(--ease) .2s both; }
.hub-tw-now { margin: 6px 0 0; color: var(--text-strong); font: 600 clamp(64px, 9vw, 84px)/1 var(--font); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
@keyframes hub-tw-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hub-tw-was s::after { animation: none; } }

/* ---- The thank-you page's How it works box (2026-11-04) ---- */
.hub-tw-how { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--hair); }
.hub-tw-how.hub-section { margin-top: 40px; }

/* Trust & Will checkout, Michael 2026-11-04: the card panel felt tight, and GoHighLevel's gold spinner on the gold button was
   invisible. While it works, the button holds a .v-spinner and is disabled: it turns navy with a brass edge, a moving ring and words. */
.c-column > .inner:has(.tw-hero) .container-order-form-two-step .payment-form { padding: 28px 28px 30px; }
.c-column > .inner:has(.tw-hero) .payment-content .form-btn { margin-top: 26px !important; }
.c-column > .inner:has(.tw-hero) .form-btn:has(.v-spinner) {
  gap: 12px;
  background: #101B2E !important;
  box-shadow: inset 0 0 0 1.5px var(--accent) !important;
  cursor: wait;
  transform: none !important;
}
.c-column > .inner:has(.tw-hero) .form-btn:has(.v-spinner) .v-spinner { display: none !important; }
.c-column > .inner:has(.tw-hero) .form-btn:has(.v-spinner)::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  border: 2.5px solid rgba(232, 197, 137, .28);
  border-top-color: var(--accent-hi);
  animation: hub-tw-spin .8s linear infinite;
}
.c-column > .inner:has(.tw-hero) .form-btn:has(.v-spinner)::after {
  content: "One moment";
  color: var(--accent-hi);
  font: 600 16px/1.2 var(--font);
  letter-spacing: -0.01em;
}
.c-column > .inner:has(.tw-hero) .payment-content .form-btn:has(.v-spinner)::after { content: "Processing your payment"; }
@keyframes hub-tw-spin { to { transform: rotate(360deg); } }
@media (max-width: 1023px) {
  .c-column > .inner:has(.tw-hero) .container-order-form-two-step .payment-form { padding: 20px 20px 22px; }
}

/* ---- How it works: gold circles, a dark number badge, a dashed line between them (Danny's "How the call works", Michael 2026-11-04).
   The same markup in three layouts. The line sits on each step but the last. ---- */
.tw-how { --c: 72px; --dash: 2px dashed rgba(213, 176, 108, .55); }
.tw-steps { list-style: none; margin: 0; padding: 0; }
.tw-steps li { position: relative; }
.tw-step-ico { position: relative; display: grid; place-items: center; width: var(--c); height: var(--c); border-radius: 50%; background: linear-gradient(180deg, var(--accent-hi), var(--accent) 60%, var(--accent-strong)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 30px -14px rgba(190, 151, 73, .7); color: var(--on-accent); }
.tw-step-ico svg { width: 46%; height: 46%; fill: currentColor; display: block; }
.tw-step-ico b { position: absolute; top: -3px; right: -5px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1.5px var(--accent-strong); color: var(--accent-text); font: 600 13px/1 var(--font); font-variant-numeric: tabular-nums; }
/* the type matches the sales page's How it works (design D): 22px titles, 17px words */
.tw-steps strong { display: block; margin: 0 0 8px; color: var(--text-strong); font: 600 22px/1.25 var(--font); letter-spacing: -0.015em; }
.tw-steps p { margin: 0; color: var(--text); font: 400 17px/1.6 var(--font); text-wrap: pretty; }
.tw-steps li:last-child::after { display: none; }

/* Up and down: the base for every layout, and what a phone gets */
.tw-steps li { display: grid; grid-template-columns: var(--c) minmax(0, 1fr); column-gap: 20px; min-height: calc(var(--c) + 56px); padding-bottom: 32px; }
.tw-steps li:last-child { min-height: 0; padding-bottom: 0; }
.tw-steps li > div { padding-top: 6px; }
.tw-steps li::after { content: ""; position: absolute; left: calc(var(--c) / 2 - 1px); top: calc(var(--c) + 8px); bottom: 8px; border-left: var(--dash); }

/* What's coming, pictured under its step (Michael, 2026-11-06): the real email, then Trust & Will's plan screen. A thin
   brass edge like the sales page's medallions, the picture's own corners, no card around it. */
.tw-shot { margin: 22px 0 6px; max-width: 320px; }
.tw-shot img { display: block; width: 100%; height: auto; border: 1.5px solid transparent; border-radius: 22px;
  background: linear-gradient(145deg, #FBEFCF 0%, #E2C383 22%, #A07A35 52%, #6A4A18 78%, #C9A25C 100%) border-box;
  box-shadow: 0 28px 56px -28px rgba(0, 0, 0, .95); }
.tw-shot figcaption { margin: 14px 0 0; color: var(--text); font: 400 16px/1.5 var(--font); text-wrap: pretty; }

@media (max-width: 560px) {
  .tw-how { --c: 60px; }
  .tw-steps li { column-gap: 16px; }
  .tw-step-ico b { width: 26px; height: 26px; font-size: 12px; }
  .tw-steps strong { font-size: 20px; }
  .tw-shot { max-width: none; }
}

/* ---- The page: one grid at every width. The price block and GoHighLevel's order form stay separate elements,
   one centered column on the silk, no card. The top may run wider than the form, the form stays 500. ---- */
.c-column > .inner:has(.tw-hero) {
  --card: 500px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: repeat(8, auto) !important;
  column-gap: 0 !important;
}
.hub-hero.tw-hero { display: contents; }
.c-column > .inner:has(.tw-hero) .hub-top { grid-column: 1 / -1; grid-row: 1; }
.c-column > .inner:has(.tw-hero) .tw-cardtop, .c-column > .inner:has(.tw-hero) > .c-order { grid-column: 1; justify-self: center; position: relative; z-index: 1; }
.c-column > .inner:has(.tw-hero) .tw-cardtop { grid-row: 2; width: min(100%, 900px); margin: 36px 0 0; padding: 28px 0 30px; text-align: center; }
.c-column > .inner:has(.tw-hero) > .c-order { grid-row: 3; width: min(100%, var(--card)); align-self: start; margin: 0 !important; padding: 0; }
.c-column > .inner:has(.tw-hero) .hub-hero h1 { margin: 0; font-size: clamp(40px, 5vw, 56px); line-height: 1.04; }
.c-column > .inner:has(.tw-hero) .hub-fine { grid-column: 1 / -1; grid-row: 5; justify-self: center; width: 100%; max-width: 64ch; margin: 8px 0 0; text-align: center; }
.c-column > .inner:has(.tw-hero) .hub-foot { grid-column: 1 / -1; grid-row: 7; }
@media (max-width: 560px) {
  .c-column > .inner:has(.tw-hero) .tw-cardtop, .c-column > .inner:has(.tw-hero) > .c-order { width: auto; justify-self: stretch; }
  .c-column > .inner:has(.tw-hero) .tw-cardtop { margin-top: 24px; }
}

/* ---- 13. The research's size rule: the sale price bigger than the old price, a little over 2 to 1 (Dyson's deals page is
   36 to 16, Saatva's mattress 24 to 24; nothing measured goes near the 10 to 1 this replaced). The old price stays
   grey and the new one bright, so they read as two different things. ---- */
.tw-c .hub-tw-price { margin-top: 28px; }
.tw-c .hub-tw-was { justify-content: center; align-items: baseline; gap: 8px; }
.tw-c .hub-tw-was s { font: 500 clamp(32px, 3.2vw, 42px)/1.15 var(--font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tw-c .hub-tw-was s::after { top: 50%; height: 3px; }
.tw-c .hub-tw-was span { color: var(--text); font: 400 clamp(16px, 1.4vw, 18px)/1.3 var(--font); }
.tw-h13 .hub-tw-now { margin: 2px 0 0; font: 600 clamp(72px, 7.4vw, 96px)/1 var(--font); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }

/* ---- The price count, driven by tw-motion.js. Only under html.tw-anim, so reduced motion and a failed script get the plain page */
.tw-lead { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: top; transition: max-width .4s var(--ease), opacity .12s linear; }
.tw-lead.is-gone { max-width: 0 !important; opacity: 0; }

/* ======== 2. The sections (design D) ======== */

/* ---- Grid: the locked top keeps rows 1 to 3; the free line and the questions line go under the form, then the sections */
.c-column > .inner:has(.tw-hero) .hub-tw-free { grid-column: 1 / -1; grid-row: 4; justify-self: center; margin: 24px 0 0; text-align: center; }
.c-column > .inner:has(.tw-hero) .rd { grid-column: 1 / -1; grid-row: 6; min-width: 0; }

/* ---- The free line: a plain link in the brand's gold, one size up from the fine print */
.hub-tw-free { margin: 0; font: 500 16px/1.45 var(--font); letter-spacing: -0.01em; text-wrap: balance; }
.hub-tw-free a { color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(232, 197, 137, .38); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color .2s, color .2s; }
.hub-tw-free a:hover { color: var(--accent-hi); text-decoration-color: var(--accent-hi); }

/* ---- Shared type for the sections. Body 17px (older readers), titles 20, section headings 40 desktop / 30 phone */
.rd { --rd-h2: clamp(30px, 3.6vw, 44px); --rd-body: 17px; color: var(--text); }
.rd h2 { margin: 0; color: var(--text-strong); font: 600 var(--rd-h2)/1.08 var(--font); letter-spacing: -0.032em; text-wrap: balance; }
.rd p { text-wrap: pretty; }
.rd svg { display: block; fill: currentColor; }

/* ---- Back up to the form: the form's own gold button, sized to its words */
.rd-up {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-strong));
  color: var(--on-accent); font: 600 16px/1.2 var(--font); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -12px rgba(190, 151, 73, .7);
  cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.rd-up:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 4px rgba(213, 176, 108, .2), 0 16px 30px -12px rgba(190, 151, 73, .8); }
.rd-up svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
.rd-up:hover svg { transform: translateY(-2px); }

/* When a button lands someone back on the form, the name field glows once, so they see where to start */
.c-order.rd-flash .form-input[name="name"] { animation: rd-flash 1.8s var(--ease) both; }
@keyframes rd-flash { 0% { box-shadow: 0 0 0 0 rgba(213, 176, 108, 0); } 25% { box-shadow: 0 0 0 6px rgba(213, 176, 108, .32); } 100% { box-shadow: 0 0 0 14px rgba(213, 176, 108, 0); } }

/* ---- The live page's blur fade, for anything marked .rd-f */
html.rd-go .rd-f { transition: opacity .9s var(--ease) var(--d, 0ms), filter .9s var(--ease) var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms); }
html.rd-go .rd-f:not(.is-in) { opacity: 0; filter: blur(8px); transform: translate3d(0, 14px, 0); }
@media (max-width: 560px) { html.rd-go .rd-f:not(.is-in) { filter: blur(6px); } }

@media (prefers-reduced-motion: reduce) {
  .rd *, .rd-up, .rd-up svg { transition: none !important; animation: none !important; }
}

/* ---- D: the thread leaves the form, comes round the right side and draws the line the price columns stand on (right to
   left), runs down the How it works ladder, becomes the spine the seven things hang from, snakes through the plan's
   documents and ends in the button back up. Each stop lights as the thread reaches it. Every icon below How it works sits
   on a medallion: smoked glass with a brass edge. Without html.rd-go the whole thread shows and everything is lit. */
.rd-d { --rail: 88px; --gap: 36px; --in: calc(var(--rail) + var(--gap)); --rung: 200px; --edge: 24px;
  position: relative; margin: 40px 0 0; padding: 150px 0 0; display: grid; gap: 168px; }
.d-thread { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.d-dash { fill: none; stroke: rgba(213, 176, 108, .62); stroke-width: 2; stroke-dasharray: 7 8; stroke-linecap: round; }
.d-reveal { fill: none; stroke: #fff; stroke-width: 14; }
.d-sec, .d-end { position: relative; z-index: 1; min-width: 0; }
.rd-d .d-in { margin-left: var(--in); }
.rd-d .d-h { max-width: 15em; margin-left: var(--in); }  /* every heading starts where the content does, right of the thread */

/* The medallion: smoked glass, a thin brass edge, the icon in gold. Quiet at rest; it comes up when the thread arrives. */
.d-medal { --m: 72px; display: grid; place-items: center; width: var(--m); height: var(--m); flex: none; border: 2.5px solid transparent; border-radius: 50%; color: var(--accent-text);
  background:
    radial-gradient(85% 65% at 32% 16%, rgba(255, 255, 255, .10), transparent 62%) padding-box,
    radial-gradient(120% 120% at 50% 100%, rgba(213, 176, 108, .10), transparent 55%) padding-box,
    linear-gradient(180deg, #1E2E46, #0C1726) padding-box,
    linear-gradient(145deg, #FBEFCF 0%, #E2C383 22%, #A07A35 52%, #6A4A18 78%, #C9A25C 100%) border-box;
  box-shadow: inset 0 0 0 1px rgba(6, 12, 22, .75), inset 0 2px 6px rgba(255, 255, 255, .05), 0 14px 28px -14px rgba(0, 0, 0, .95); }
.d-medal svg { width: 48%; height: 48%; display: block; fill: currentColor; }

/* ---- D1. What attorneys charge: A's columns, standing on the thread. No hover: once they've risen they stay. */
.d-price .d-h { margin-bottom: 8px; }
.d-cols { --plot: 340px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; max-width: 880px; margin: 0 0 0 var(--in); padding-top: 80px; }
.d-col { position: relative; height: var(--plot); min-width: 0; }
.d-col i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); border-radius: 8px 8px 0 0; transform-origin: 50% 100%;
  background: linear-gradient(0deg, #56678A var(--solid), rgba(86, 103, 138, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.d-col strong { position: absolute; left: 0; right: 0; bottom: var(--h); margin-bottom: 14px; color: var(--text); font: 500 24px/1.15 var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.d-col span { position: absolute; left: 0; top: 100%; margin-top: 18px; color: var(--text); font: 400 var(--rd-body)/1.3 var(--font); }
.d-mine strong { color: var(--accent-hi); font: 600 40px/1.05 var(--font); letter-spacing: -0.035em; white-space: nowrap; }
.d-mine span { color: var(--accent-text); }
.d-mine i { background: linear-gradient(180deg, var(--accent-hi), var(--accent) 60%, var(--accent-strong)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.rd-d .d-note { margin-top: 84px; max-width: 64ch; color: var(--text); font: 400 var(--rd-body)/1.6 var(--font); }
.d-exit { margin-top: 48px; }
.d-exit--how { margin-left: calc(var(--rung) * 2); }

/* ---- D2. How it works: the locked ladder; its dashed line is the thread */
.d-how .d-h { margin-bottom: 48px; }
.d-ladder { list-style: none; margin: 0; padding: 0; }
.d-ladder li { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: 28px; padding-bottom: 52px; }
.d-ladder li:nth-child(2) { margin-left: var(--rung); }
.d-ladder li:nth-child(3) { margin-left: calc(var(--rung) * 2); padding-bottom: 0; }
.d-ladder .d-node { --c: var(--rail); width: var(--c); height: var(--c); }
.d-ladder .d-body { max-width: 56ch; padding-top: 12px; }
.d-ladder strong { display: block; margin: 0 0 8px; color: var(--text-strong); font: 600 22px/1.25 var(--font); letter-spacing: -0.015em; }
.d-ladder p { margin: 0; color: var(--text); font: 400 var(--rd-body)/1.6 var(--font); }

/* ---- D3. Seven things: A's split, the heading on the left and the seven on the right, each on its medallion on the thread,
   which keeps straight on down from step 3 */
.d-seven { display: grid; grid-template-columns: calc(var(--rung) * 2 - var(--edge)) minmax(0, 1fr); column-gap: var(--edge); align-items: start; }
.rd-d .d-seven .d-h { max-width: 9em; margin-left: 0; }  /* except the side column's, which the thread passes on its right */
.d-spine { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.d-spine li { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: 28px; align-items: start; }
.d-spine .d-medal { justify-self: center; }
.d-spine .d-body { max-width: 50ch; padding-top: 14px; }
.d-spine strong { display: block; margin: 0 0 8px; color: var(--text-strong); font: 600 24px/1.2 var(--font); letter-spacing: -0.022em; text-wrap: balance; }
.d-spine p { margin: 0; color: var(--text); font: 400 var(--rd-body)/1.6 var(--font); }
.d-exit--seven { margin-top: 48px; }

/* ---- D4. What's in the plan: A's box of contents, two rows of four, each document on a larger medallion. The thread runs
   along the first row left to right, turns down and runs the second row right to left, so the second row is set from
   the right. */
.d-plan .d-h { margin-bottom: 64px; }
.d-docs { list-style: none; margin: 0 56px 0 var(--in); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 24px; }
.d-docs li { display: grid; justify-items: start; align-content: start; gap: 20px; min-width: 0; }
.d-docs li:nth-child(5) { grid-area: 2 / 4; }
.d-docs li:nth-child(6) { grid-area: 2 / 3; }
.d-docs li:nth-child(7) { grid-area: 2 / 2; }
.d-docs li:nth-child(8) { grid-area: 2 / 1; }
.d-medal--doc { --m: 84px; }
.d-docs .d-body { color: var(--text-strong); font: 500 19px/1.3 var(--font); letter-spacing: -0.012em; text-wrap: balance; max-width: 13em; }
.d-end { display: flex; justify-content: flex-start; padding: 8px 0 0; }  /* on the left-hand line, like the other buttons */

/* ---- Lighting: a stop waits quiet until the thread reaches it */
html.rd-go .d-stop .d-medal, html.rd-go .d-stop .d-node, html.rd-go .d-stop .d-body { transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
html.rd-go .d-stop:not(.is-lit) :is(.d-medal, .d-node) { opacity: .3; transform: scale(.84); filter: saturate(.15); }
html.rd-go .d-stop:not(.is-lit) .d-body { opacity: 0; filter: blur(6px); transform: translate3d(0, 10px, 0); }
html.rd-go .d-exit, html.rd-go .d-end { transition: opacity .9s var(--ease); }
html.rd-go .d-exit:not(.is-lit), html.rd-go .d-end:not(.is-lit) { opacity: 0; }
/* Keyboard (Codex review, 2026-11-11): a stop or button still waiting for the thread shows at once when focus reaches it */
html.rd-go .d-stop:focus-within, html.rd-go .d-stop:focus-within :is(.d-medal, .d-node, .d-body) { opacity: 1; transform: none; filter: none; transition: none; }
/* the columns rise once, attorneys first and ours last, and stay */
html.rd-go .d-col i { transition: transform 1.5s cubic-bezier(.22, 1, .36, 1) var(--rise, 0s); }
html.rd-go .d-col :is(strong, span) { transition: opacity 1s var(--ease) calc(var(--rise, 0s) + .45s), filter 1s var(--ease) calc(var(--rise, 0s) + .45s), transform 1s var(--ease) calc(var(--rise, 0s) + .45s); }
html.rd-go .d-cols:not(.is-lit) .d-col i { transform: scaleY(0); }
html.rd-go .d-cols:not(.is-lit) .d-col :is(strong, span) { opacity: 0; filter: blur(6px); transform: translate3d(0, 10px, 0); }
.d-col:nth-child(1) { --rise: .1s; }
.d-col:nth-child(2) { --rise: .4s; }
.d-col:nth-child(3) { --rise: 1s; }

/* ---- Below desktop: the thread runs down the left side and everything hangs to its right */
@media (max-width: 1023px) {
  .rd-d { --rung: 120px; gap: 128px; }
  .d-seven { display: block; }
  .rd-d .d-seven .d-h { margin-left: var(--in); }
  .d-seven .d-h { margin-bottom: 48px; }
  .d-exit--how { margin-left: 0; }
  .d-docs { margin: 0; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 24px 0; }
  .d-docs li, .d-docs li:nth-child(n) { grid-area: auto; grid-column: 1 / -1; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gap); align-items: center; }
  .d-docs .d-medal { justify-self: center; }
  .d-docs .d-body { max-width: none; }
  .d-medal--doc { --m: 56px; }
  .d-plan .d-h { margin-bottom: 40px; }
}
@media (max-width: 720px) {
  .rd-d { --rail: 48px; --gap: 16px; --edge: 16px; margin-top: 24px; padding-top: 120px; gap: 104px; }
  .d-cols { --plot: 230px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; padding-top: 64px; margin-left: var(--in); border-bottom: 1px solid rgba(251, 248, 242, .16); }
  .d-col strong { font-size: 15px; margin-bottom: 8px; }
  .d-mine strong { font-size: 19px; white-space: normal; }
  .d-col span { font-size: 15px; margin-top: 14px; }
  .d-col i { border-radius: 6px 6px 0 0; }
  .rd-d .d-note { margin-top: 84px; }
  .d-ladder li, .d-ladder li:nth-child(2), .d-ladder li:nth-child(3) { margin-left: 0; column-gap: var(--gap); padding-bottom: 40px; }
  .d-ladder li:last-child { padding-bottom: 0; }
  .d-ladder .d-body { padding-top: 2px; }
  .d-ladder .d-node b { width: 22px; height: 22px; font-size: 11px; top: -5px; right: -7px; }
  .d-ladder strong { font-size: 20px; }
  .d-spine { gap: 32px; }
  .d-spine li { column-gap: var(--gap); }
  .d-medal { --m: 50px; border-width: 2px; }
  .d-spine .d-body { padding-top: 6px; }
  .d-spine strong { font-size: 20px; }
  .d-docs { margin: 0 34px 0 var(--in); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
  .d-docs li, .d-docs li:nth-child(n) { grid-column: auto; display: grid; grid-template-columns: none; justify-items: start; align-content: start; gap: 14px; }
  .d-docs li:nth-child(1) { grid-area: 1 / 1; } .d-docs li:nth-child(2) { grid-area: 1 / 2; }
  .d-docs li:nth-child(3) { grid-area: 2 / 2; } .d-docs li:nth-child(4) { grid-area: 2 / 1; }
  .d-docs li:nth-child(5) { grid-area: 3 / 1; } .d-docs li:nth-child(6) { grid-area: 3 / 2; }
  .d-docs li:nth-child(7) { grid-area: 4 / 2; } .d-docs li:nth-child(8) { grid-area: 4 / 1; }
  .d-docs .d-medal { justify-self: start; }
  .d-docs .d-body { font-size: 16px; }
  .d-medal--doc { --m: 56px; }
  /* the price columns lie down as the live page's bars: a phone is too narrow for three columns' words */
  .d-cols { --plot: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 32px; border-bottom: 0; }
  .d-col { height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; row-gap: 10px; }
  .d-col span { position: static; grid-row: 1; grid-column: 1; margin: 0; font-size: 15px; }
  .d-col strong { position: static; grid-row: 1; grid-column: 2; margin: 0; font-size: 17px; white-space: nowrap; }
  .d-mine strong { font-size: 26px; }
  .d-col i { position: static; grid-row: 2; grid-column: 1 / -1; width: var(--h); height: 20px; border-radius: 5px; transform-origin: 0 50%;
    background: linear-gradient(90deg, #56678A var(--solid), rgba(86, 103, 138, .06)); }
  .d-mine i { background: linear-gradient(180deg, var(--accent-hi), var(--accent) 60%, var(--accent-strong)); }
  html.rd-go .d-cols:not(.is-lit) .d-col i { transform: scaleX(0); }
  .rd-d .d-note { margin-top: 40px; }
  .d-end .rd-up { width: 100%; }
}

/* ---- Michael's pick after seeing D on the test copy (2026-11-11, mockup 1, "the heading stays"; trust-will/redesign/v1.css):
   the down arrows under the form, the seven's and the plan's headings held beside their lists until the section's button,
   the documents in one column on the thread, and on a phone a slim bar with the heading at the top of the screen. */
.d-more { position: absolute; z-index: 2; top: -24px; left: 50%; width: 56px; height: 60px; margin-left: -28px; display: grid; place-items: center;
  color: var(--accent-text); border-radius: 14px; text-decoration: none; transition: opacity .7s var(--ease), color .2s; }
.d-more svg { grid-area: 1 / 1; width: 28px; height: 28px; fill: currentColor; }
.d-more svg:first-child { transform: translateY(-7px); }
.d-more svg:last-child { transform: translateY(7px); opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .d-more svg, .d-more svg:last-child { animation: d-more 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }
  .d-more svg:last-child { animation-delay: .3s; }
}
@keyframes d-more { 0% { opacity: 0; transform: translateY(-14px); } 35% { opacity: 1; } 70% { opacity: .85; } 100% { opacity: 0; transform: translateY(14px); } }
.d-more:hover { color: var(--accent-hi); }
.d-more:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.d-more.is-done { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s .7s; }  /* out of the tab order too */

@media (min-width: 1024px) {
  .rd-d .d-seven .d-h, .rd-d .d-plan .d-h { position: sticky; top: 112px; align-self: start; }
  .rd-d .d-plan { display: grid; grid-template-columns: calc(var(--rung) * 2 - var(--edge)) minmax(0, 1fr); column-gap: var(--edge); align-items: start; }
  .rd-d .d-plan .d-h { max-width: 9em; margin: 0; }
}
.rd-d .d-docs { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.rd-d .d-docs li, .rd-d .d-docs li:nth-child(n) { grid-area: auto; grid-column: auto; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: 28px; align-items: center; justify-items: start; gap: 0 28px; }
.rd-d .d-docs .d-medal { justify-self: center; }
.rd-d .d-medal--doc { --m: 64px; }
.rd-d .d-docs .d-body { max-width: none; font: 500 21px/1.3 var(--font); letter-spacing: -0.015em; }
.rd-d .d-plan .d-end { padding-top: 52px; }
@media (max-width: 720px) {
  .rd-d .d-docs { gap: 18px; }
  .rd-d .d-docs li, .rd-d .d-docs li:nth-child(n) { column-gap: var(--gap); }
  .rd-d .d-medal--doc { --m: 46px; }
  .rd-d .d-docs .d-body { font-size: 17px; }
}
.tw-bar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; padding: 14px 20px 13px; pointer-events: none;
  background: rgba(8, 15, 27, .84); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 -1px 0 rgba(213, 176, 108, .24); color: var(--text-strong); font: 600 16px/1.3 var(--font); letter-spacing: -0.01em;
  transform: translateY(-100%); opacity: 0; transition: transform .45s var(--ease), opacity .3s var(--ease); }
.tw-bar.is-on { transform: none; opacity: 1; }
@media (min-width: 1024px) { .tw-bar { display: none; } }

/* ======== 3. The free-plan check ======== */
.tw-free { max-width: 560px; margin: 8px 0 0; }
.tw-free h2 { margin: 0 0 14px; color: var(--text-strong); font: 600 20px/1.35 var(--font); letter-spacing: -0.015em; text-wrap: balance; }
.tw-free-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.tw-free-list li { border-bottom: 1px solid var(--hair); }
.tw-free-list button {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 4px;
  border: 0; background: none; color: var(--text-strong); font: 500 17px/1.3 var(--font); text-align: left; cursor: pointer;
  transition: color .2s var(--ease), padding .3s var(--ease);
}
.tw-free-list button::after {
  content: ""; width: 9px; height: 9px; margin-left: 16px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .35; transition: opacity .2s var(--ease), transform .3s var(--ease);
}
.tw-free-list button:hover { color: var(--accent-text); padding-left: 10px; }
.tw-free-list button:hover::after { opacity: 1; transform: translateX(2px) rotate(45deg); }
.tw-free-list button[aria-pressed="true"] { color: var(--accent-text); }
.tw-free-list button[aria-pressed="true"]::after { opacity: 1; }
.tw-free-list.has-pick button:not([aria-pressed="true"]) { color: var(--text-dim); }
.tw-free-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.tw-free-no, .tw-free-yes { margin: 28px 0 0; animation: tw-free-in .7s var(--ease) both; }
@keyframes tw-free-in { from { opacity: 0; filter: blur(8px); transform: translateY(8px); } }
.tw-free-no p, .tw-free-yes p { margin: 0 0 18px; color: var(--text); font: 400 17px/1.55 var(--font); text-wrap: pretty; }
.tw-free-back {
  display: inline-block; padding: 14px 32px; border-radius: 999px; color: var(--on-accent); font: 600 16px/20px var(--font);
  text-decoration: none; background: linear-gradient(180deg, var(--accent-hi), var(--accent) 60%, var(--accent-strong));
}
.tw-free-back:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
/* The main account's form sits on the silk with no card (its own Custom CSS, gohighlevel/forms/trust-will-free-check.css);
   color-scheme dark on the frame, or Chrome paints a white backdrop behind a dark page inside a light one. */
.tw-free-form iframe { display: block; width: 100%; min-height: 720px; border: 0; background: transparent; color-scheme: dark; }
/* The booking page: Khris's calendar in the hub's call card (hub-v2.css .hub-call-*) */
.tw-book { max-width: 560px; margin: 8px 0 0; }
.tw-book .hub-call-card { margin: 0; }
.tw-book-after { margin: 16px 0 0; color: var(--text); font: 400 15px/1.5 var(--font); text-wrap: pretty; }
.tw-book-after a { color: var(--accent-text); text-underline-offset: 4px; text-decoration-color: rgba(232, 197, 137, .38); }
.tw-book-after a:hover { color: var(--accent-hi); }
@media (prefers-reduced-motion: reduce) { .tw-free-list button, .tw-free-list button::after { transition: none; } .tw-free-no, .tw-free-yes { animation: none; } }


/* ==== The page audit's fixes (trust-will/audit-2026-11-11/, proposed/tw-patch.css), applied 2026-11-11 on Michael's yes
   ("I do agree with all of the changes"). Numbered as in that file. ==== */

/* ---- 1. TESTED. Phone gutters: GoHighLevel's section already pads 20px each side, and our 16px on top of it made 36.
   The reading column goes from 254px to 286px (about 32 to 36 characters a line) and the page gets shorter. */
@media (max-width: 560px) {
  .c-section > .inner:has(.tw-hero) { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---- 2. TESTED. The attorney chart on a phone: each label on its own line above its figure, so nothing wraps
   mid-word ("Attorney-" / "drafted") and the gold row reads top to bottom as a sentence. */
@media (max-width: 720px) {
  .d-col { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .d-col span { grid-row: 1; grid-column: 1; }
  .d-col strong { grid-row: 2; grid-column: 1; justify-self: start; font-size: 20px; }
  .d-mine strong { font-size: 28px; }
  .d-col i { grid-row: 3; margin-top: 6px; }
}

/* ---- 3. TESTED. The phone bar's heading stays on one line and ends in "..." when it can't fit (his rule for a title
   in a top bar). It wrapped to two lines at 375px and narrower. */
.tw-bar { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(14px, 4.1vw, 16px); }


/* ---- 5. TESTED. Reduced motion: the field's moving edge really stops. The rule in hub-v2.css
   (.c-order .form-input:focus) loses to the two-step form's more specific one, so the sheen kept turning. */
@media (prefers-reduced-motion: reduce) {
  .c-order .container-order-form-two-step .form-input:hover,
  .c-order .container-order-form-two-step .form-input:focus { animation: none !important; }
}

/* ---- 6. TESTED. A field with a mistake looks like one: a red edge instead of the brass, and the message at a size an
   older reader can see. Our own border rules were covering GoHighLevel's red. */
.c-order .container-order-form-two-step .form-input.is-danger:not(:focus) {
  background: linear-gradient(160deg, #26354C, #172336) padding-box, linear-gradient(160deg, #FCA5A5, #B91C1C 55%, #F87171) border-box !important;
}
.c-order .container-order-form-two-step .order-validation-error { display: block; margin: 8px 2px 2px; font-size: 15px !important; line-height: 1.35; }

/* ---- 7. TESTED. Placeholders are the fields' only labels, so they meet 4.5 to 1 on the field (were 3.6 to 4.5). */
.c-order .container-order-form-two-step .form-input::placeholder { color: #9AA1AB !important; }

/* ---- 8. TESTED. Small links get a finger-sized target without moving anything you can see. */
.hub-foot nav a, .hub-fine a { display: inline-block; padding: 13px 0; margin: -13px 0; }

/* ---- 9. TESTED. The silk arrives with a fade instead of popping in when the page finishes loading. */
canvas.hub-silk { animation: tw-silk-in 1.2s var(--ease) both; }
@keyframes tw-silk-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { canvas.hub-silk { animation: none; } }

/* ---- 10. TESTED. Short screens: the top block eases down with the screen's height, so the gold button is on the
   first screen of a 1366x768 laptop and a small iPhone. svh is the height with the browser's bars showing and does not
   change while scrolling, so nothing jumps. On a 1440x900 screen or a standard iPhone the sizes are today's sizes. */
@media (min-width: 1024px) {
  .hub-top { padding-top: clamp(14px, 3.4svh, 28px); }
  .c-column > .inner:has(.tw-hero) .tw-cardtop { margin-top: clamp(4px, 4.4svh, 36px); padding: clamp(10px, 3.4svh, 28px) 0 clamp(14px, 3.7svh, 30px); }
  .c-column > .inner:has(.tw-hero) .hub-hero h1 { font-size: clamp(40px, min(5vw, 7.1svh), 56px); }
  .tw-c .hub-tw-price { margin-top: clamp(12px, 3.5svh, 28px); }
  .tw-c .hub-tw-was s { font-size: clamp(30px, min(3.2vw, 5.3svh), 42px); }
  .tw-h13 .hub-tw-now { font-size: clamp(68px, min(7.4vw, 12.2svh), 96px); }
}
@media (max-width: 560px) {
  .hub-top { padding-top: clamp(12px, 3svh, 20px); }
  .c-column > .inner:has(.tw-hero) .tw-cardtop { margin-top: clamp(0px, calc(8.5svh - 32px), 24px); padding: clamp(8px, calc(9svh - 32px), 28px) 0 clamp(10px, calc(9.5svh - 33px), 30px); }
  .c-column > .inner:has(.tw-hero) .hub-hero h1 { font-size: clamp(32px, 6svh, 40px); }
  .tw-c .hub-tw-price { margin-top: clamp(12px, 4.2svh, 28px); }
  .tw-c .hub-tw-was s { font-size: clamp(26px, 4.8svh, 32px); }
  .tw-h13 .hub-tw-now { font-size: clamp(56px, 10.8svh, 72px); }
}

/* ---- 11. TESTED (with tw-patch.js, which moves the line). The free line leaves the first screen for the end of
   What attorneys charge, Khris's other named spot, and never shows on the card step. */
.d-free { margin: 28px 0 0 var(--in); font: 500 16px/1.45 var(--font); letter-spacing: -0.01em; }
.d-free a { color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(232, 197, 137, .38); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.c-column > .inner.tw-step2 .hub-tw-free, .c-column > .inner.tw-step2 .d-free { display: none; }

/* ---- 12. TESTED. What's in the plan: a plain line under each document (the words are in the report). */
.rd-d .d-docs .d-body small { display: block; margin-top: 4px; color: var(--text); font: 400 16px/1.45 var(--font); letter-spacing: 0; text-wrap: pretty; max-width: 46ch; }
.rd-d .d-docs li, .rd-d .d-docs li:nth-child(n) { align-items: start; }
.rd-d .d-docs .d-body { padding-top: 6px; }
@media (max-width: 720px) { .rd-d .d-docs .d-body small { font-size: 15px; } .rd-d .d-docs { gap: 22px; } }

/* ---- 13. CARD STEP, untested. One product, so the first table (the row with the tick box) only repeats the summary
   under it. Hide it, drop the Quantity column, and let the item line explain the fee beside one total. Turning off
   "multi-product selection" in the order form's settings removes the tick box at the source. */
.c-order .container-order-form-two-step .form-body > div > .product-title,
.c-order .container-order-form-two-step .form-body > div > .divider-product,
.c-order .container-order-form-two-step .product-detail { display: none !important; }
.c-order .container-order-form-two-step .product-cost-total .product-title,
.c-order .container-order-form-two-step .product-cost-total .item.text-center { display: none !important; }
/* after the press, the queued state reads as working (the same look as "Processing your payment") */
.c-column > .inner:has(.tw-hero) .form-btn[data-tw-wait] { gap: 12px; background: #101B2E !important; box-shadow: inset 0 0 0 1.5px var(--accent) !important; cursor: wait; }
.c-column > .inner:has(.tw-hero) .form-btn[data-tw-wait] .main-text { color: var(--accent-hi) !important; }
.c-column > .inner:has(.tw-hero) .form-btn[data-tw-wait]::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2.5px solid rgba(232, 197, 137, .28); border-top-color: var(--accent-hi); animation: hub-tw-spin .8s linear infinite; }
/* a switched-off button lets the press through to our script, which holds it until the button wakes */
.c-column > .inner:has(.tw-hero) .c-order .form-btn:disabled { pointer-events: none; }


/* ---- Michael's answers to the audit (2026-11-11) ---- */
/* The box being typed in gets a plain, solid gold edge, so it reads apart from the other two at a glance. Hover keeps the
   moving brass of his October lock; typing is now still and solid. */
.c-order .container-order-form-two-step .form-input:focus {
  background: linear-gradient(var(--field-bg), var(--field-bg)) padding-box, linear-gradient(var(--accent-text), var(--accent-text)) border-box !important;
  border-width: 2px !important;
  animation: none !important;
}
/* One line under the headline: what this is and who sent it. Quiet, so the price stays the loudest thing after the headline. */
.c-column > .inner:has(.tw-hero) .tw-sub { margin: 14px auto 0; max-width: 34ch; color: var(--text); font: 400 18px/1.4 var(--font); letter-spacing: -0.01em; text-wrap: balance; }
/* The line costs a line or two of height, so the space around it gives that back and the gold button stays on the first
   screen at every size the audit measured (its after-fold sizes, real browser heights). */
@media (min-width: 1024px) {
  .c-column > .inner:has(.tw-hero) .tw-sub { max-width: none; margin-top: clamp(6px, 1.4svh, 14px); font-size: clamp(17px, 2.4svh, 19px); }
  .c-column > .inner:has(.tw-hero) .tw-sub + .hub-tw-price { margin-top: clamp(8px, 2.6svh, 24px); }
}
@media (max-width: 560px) {
  .c-column > .inner:has(.tw-hero) .tw-sub { margin-top: 6px; font-size: 15px; line-height: 1.38; max-width: 30ch; }
  .c-column > .inner:has(.tw-hero) .tw-cardtop:has(.tw-sub) { margin-top: clamp(0px, calc(8.5svh - 48px), 16px); padding-top: clamp(4px, calc(9svh - 44px), 20px); }
  .c-column > .inner:has(.tw-hero) .tw-sub + .hub-tw-price { margin-top: clamp(8px, calc(4.2svh - 12px), 24px); }
  .tw-h13:has(.tw-sub) .hub-tw-now { font-size: clamp(52px, 10svh, 72px); }
}
/* The card step's button says the amount (Michael's yes); a quiet line under it says who takes the card. */
.c-column > .inner.tw-step2 .tw-secure { margin: 12px 0 0; text-align: center; color: var(--text-dim); font: 400 15px/1.4 var(--font); }
.c-column > .inner.tw-step2 .tw-secure a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* The down arrows (audit 7): pinned to the bottom of the screen until the first scroll, clear of Safari's floating bar,
   and left out where the button already sits near the bottom (tw-motion-test.js adds .is-done). */
.d-more { position: fixed; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
@media (max-width: 1023px) { .d-more { bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); } }
/* The silk (audit 15): capped at its peak so the fine print over it keeps its contrast, and soft where it meets the top
   of the screen. The fade in is block 9 above. */
canvas.hub-silk { filter: brightness(.86); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 72px); mask-image: linear-gradient(to bottom, transparent 0, #000 72px); }
/* "Trust & Will" never breaks across two lines (the words carry   from build_pages.py; this covers GoHighLevel's own). */
.tw-nb { white-space: nowrap; }
/* The thank-you page (audit 9): says it once. The inbox line is drawn, not a picture of the email, so there's no gold
   button on screen that does nothing. */
.tw-ty { max-width: 560px; margin: 8px auto 0; }
.tw-thanks .hub-lede b { color: var(--text-strong); font-weight: 600; overflow-wrap: anywhere; }
.tw-inbox { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px;
  border-radius: 16px; background: rgba(16, 27, 46, .72); border: 1px solid rgba(232, 197, 137, .22); }
.tw-inbox img { width: 40px; height: 40px; padding: 8px 10px; box-sizing: border-box; border-radius: 50%; background: #0B1424; border: 1px solid rgba(232, 197, 137, .3); }
.tw-inbox p { margin: 0; }
.tw-inbox-from { display: flex; justify-content: space-between; gap: 12px; color: var(--text-strong); font: 600 16px/1.35 var(--font); }
.tw-inbox-from span { color: var(--text-dim); font-weight: 400; font-size: 14px; }
.tw-inbox-subj { margin-top: 2px !important; color: var(--text-strong); font: 500 16px/1.35 var(--font); }
.tw-inbox-pre { margin-top: 2px !important; color: var(--text); font: 400 15px/1.4 var(--font); }
.tw-ty-cap { margin: 10px 0 0; text-align: center; color: var(--text-dim); font: 400 15px/1.4 var(--font); }
.tw-ty .tw-mail { display: flex; width: fit-content; margin: 24px auto 0; }
.tw-ty .tw-mail[hidden] { display: none; }
.tw-ty .tw-how { margin-top: 40px; }
.tw-paid { display: flex; justify-content: space-between; align-items: baseline; margin: 36px 0 0; padding: 16px 0 0;
  border-top: 1px solid rgba(232, 197, 137, .22); color: var(--text); font: 400 17px/1.4 var(--font); }
.tw-paid b { color: var(--text-strong); font: 600 22px/1.2 var(--font); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tw-ty .hub-fine { margin-top: 18px; text-align: left; }
/* The free check (audit 10): one question with its reason, a note on the answer staying here, the form's room held while
   it loads (no gap then jump), and a way to just buy. */
.tw-free-priv { margin: 12px 0 0; color: var(--text-dim); font: 400 15px/1.45 var(--font); }
.tw-free-form iframe { min-height: 380px; }
.tw-free-form.is-loading { min-height: 380px; border-radius: 14px; background: linear-gradient(100deg, rgba(38, 53, 76, .35) 30%, rgba(232, 197, 137, .08) 50%, rgba(38, 53, 76, .35) 70%) 0 0 / 300% 100%; }
@media (prefers-reduced-motion: no-preference) { .tw-free-form.is-loading { animation: tw-shimmer 1.6s linear infinite; } }
@keyframes tw-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.tw-free-form.is-loading iframe { opacity: 0; }
.tw-free-form iframe { transition: opacity .4s var(--ease); }
.tw-free-buy { margin: 18px 0 0 !important; text-align: center; }
.tw-free-buy a { color: var(--accent-text); font: 500 16px/1.45 var(--font); text-decoration: underline; text-decoration-color: rgba(232, 197, 137, .38); text-underline-offset: 5px; }