/* ==========================================================================
   The Advocate Path: home page (src/content/Home.tsx), scoped under .ap-home, plus the two shared pieces of the
   ribbon language the home introduces (.ribbon-label, .file-card).
   Sections: 0 hero (portrait in the big oxblood circle, on parchment) - 1 letterhead practice line - 2 sentence steps (#how) -
   3 sticky heading + practice files (#areas) - 4 oxblood "why" panel under a curve - 5 the bookmarked file (one guide card
   paged by nine numbered bookmarks, #blogCarousel) - 6 bound notice - 7 questions + changing photo - 8 intake sheet on the
   oxblood curve (#get-started).
   ========================================================================== */

/* ---- the ribbon language ---------------------------------------------------------------------------------------- */
/* a flat banner ribbon with V-notched ends and a brass stitch along both long edges */
.ribbon-label {
  --rl-notch: 12px;
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 0;
  margin: 0;
  max-width: none;
  padding: 12px calc(var(--rl-notch) + 18px);
  background: var(--ox);
  color: var(--parchment);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--rl-notch)) 50%, 100% 100%, 0 100%, var(--rl-notch) 50%);
  font: 700 16px / 1.25 var(--font-heading);
  letter-spacing: 0.005em;
  text-align: center;
}
.ribbon-label::before {
  content: "";
  position: absolute;
  left: calc(var(--rl-notch) + 2px);
  right: calc(var(--rl-notch) + 2px);
  top: 4px;
  bottom: 4px;
  border-top: 1px dashed var(--brass);
  border-bottom: 1px dashed var(--brass);
  pointer-events: none;
}

/* the ribbon file card: white, square, 1 px hairline, a 14 px oxblood bookmark hanging over the top edge at the LEFT,
   beside the Courier file number, like a binding bookmark (V-notched, stitched; the top-right corner is HomeIsSecure's
   dog-ear, so it stays empty here). Hover: the ribbon grows, the edge turns oxblood. */
.file-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-hair);
  color: var(--ink-text);
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.file-card:hover, .file-card:focus-visible { border-color: var(--ox); color: var(--ink-text); }
.file-card:focus-visible { outline: 3px solid var(--ink-text); outline-offset: 3px; }
.fc-ribbon {
  position: absolute;
  z-index: 2;
  top: -7px;
  left: 14px;
  width: var(--ribbon-w);
  height: 40px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--notch)), 0 100%);
  transition: height 0.22s ease;
}
.fc-ribbon::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 9px; border-left: 1px dashed var(--brass); }
.file-card:hover .fc-ribbon, .file-card:focus-visible .fc-ribbon { height: 50px; }
.fc-no { font: 400 var(--text-meta) / 1 var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-ink); }
/* the file number starts 12 px clear of the bookmark beside it (used by .ap-file below) */
.file-card { --fc-no-indent: calc(var(--ribbon-w) + 12px); }

/* ---- page-wide ---------------------------------------------------------------------------------------------------- */
.ap-home { overflow-x: clip; }
.ap-home h2 { font-size: var(--text-h2); line-height: 1.12; letter-spacing: -0.014em; text-wrap: balance; }
@media (min-width: 768px) { .ap-home .nw-md { white-space: nowrap; } }
.ap-home .link-arrow { white-space: normal; }
/* one warm grade for every photograph on the home page, so the stock photos read as one material with the palette */
.ap-home img { filter: saturate(0.84) sepia(0.08) contrast(1.02); }

/* ==== 0. hero: R8 in the plan's colour roles - parchment ground, ink headline, the oxblood inset-rule button, the
   portrait in a circle offset inside a big oxblood circle (the oxblood shows as a crescent rim, brass ring outside it).
   Mirrored on wide screens (circle bleeding off the LEFT, text right): the plan's text-left / dark-circle-right on a
   light ground is MyHomeZilla's first screen (light page, serif headline left, photo right) and failed the gate at
   0.350 (16:51 check); mirrored it passes. The brass curve, the path, carries the hero into the next section. */
.ap-hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(28px, 3.4vw, 52px) 0 0; background: var(--parchment); color: var(--ink-text); }
.ap-hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
}
/* the left padding keeps the first line "Choose "Not sure."" whole: column width minus 9.2em of 64 px (or 4.6vw) */
.ap-hero-text { grid-column: 7 / span 6; grid-row: 1; position: relative; z-index: 3; padding: 0 0 clamp(84px, 7.6vw, 110px) clamp(8px, 7.8vw - 66px, 48px); }
.ap-hero h1 {
  margin: 0 0 clamp(20px, 2vw, 30px);
  max-width: 9.6em;
  color: var(--ink-text);
  font-size: min(var(--text-display), 4.6vw);
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.ap-hero-lede { margin: 0 0 clamp(26px, 2.6vw, 36px); max-width: 31em; color: var(--ink-text); font-size: var(--text-lede); line-height: 1.62; }
/* the lede's first sentence answers the headline, so it runs in Caslon italic (a run-in lead, not a separate deck line:
   as its own 24 px line it moved the first screen's measured structure 0.005 closer to MyHomeZilla's) */
.ap-hero-deck { font-style: italic; }
.ap-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin: 0 0 clamp(30px, 3vw, 44px); }
/* the three checks: Courier meta with oxblood ribbon bullets under a brass rule, two deliberate rows in the column */
.ap-checks {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px 32px;
  margin: 0;
  padding: 18px 0 0;
  max-width: none;
  border-top: 1px solid var(--brass);
  list-style: none;
  font: 400 var(--text-meta) / 1.3 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.ap-checks li { display: inline-flex; align-items: center; gap: 10px; max-width: none; }
.ap-checks li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 13px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}

.ap-hero-art { grid-column: 1 / span 6; grid-row: 1; position: relative; z-index: 2; aspect-ratio: 672 / 668; margin: clamp(8px, 1.2vw, 20px) 0 clamp(78px, 7.2vw, 106px); }
/* the big oxblood circle: about 1060 px at 1440, bleeding off the left edge and under the header bar */
.ap-disc {
  position: absolute;
  top: -27%;
  left: -60.5%;
  width: 164%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ox);
}
.ap-portrait { position: absolute; left: 30%; top: 26%; width: 62%; aspect-ratio: 1; border-radius: 50%; }
.ap-portrait::before {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  pointer-events: none;
}
.ap-portrait img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 40%; }
/* the flat ribbon label across the portrait's lower edge, piped in parchment over the oxblood; it stops well short of
   the text column (the checks' rule starts at the same height) */
.ap-hero-ribbon {
  position: absolute;
  z-index: 3;
  right: 10%;
  bottom: 8%;
  filter: drop-shadow(1.5px 0 0 var(--parchment)) drop-shadow(-1.5px 0 0 var(--parchment)) drop-shadow(0 1.5px 0 var(--parchment)) drop-shadow(0 -1.5px 0 var(--parchment));
}
.ap-hero-ribbon .ribbon-label { padding-block: 13px; font-size: 16px; }
.ap-hero-ribbon span + span::before { content: "\00b7"; margin: 0 12px; color: var(--brass-light); font-weight: 400; }
/* narrower desktops: a larger circle with the same top and the same right edge (the lede keeps 45 px or more of
   parchment); it still bleeds off the top and left and runs well below the hero's foot, so the curve trims it (at the
   wide size its own lowest arc ran almost parallel to the curve at 992-1100 px and left a thin parchment sliver); the
   label on two lines */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .ap-disc { left: -87%; width: 185%; }
  .ap-checks { grid-template-columns: max-content; gap: 10px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .ap-hero-ribbon .ribbon-label { flex-direction: column; gap: 1px; padding: 10px 34px; white-space: nowrap; font-size: 15px; }
  .ap-hero-ribbon span + span::before { content: none; }
  .ap-hero-ribbon span + span { font-weight: 400; font-style: italic; }
}

/* the path to the next section: one large curve rising steadily from the bottom-left corner to the top-right, a brass
   rule on it. It lies over the portrait art (same layer, later in the page), so its parchment fill trims the foot of the
   oxblood circle and the circle's lower edge IS the brass rule (no flat crop running parallel to the letterhead's
   hairline); the portrait and its ribbon label stay well above it, the text column keeps its own higher layer */
.ap-hero-curve { position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; display: block; width: 100%; height: clamp(64px, 9.7vw, 140px); pointer-events: none; }
.ap-hero-curve .fill { fill: var(--parchment); }
.ap-hero-curve .rule { fill: none; stroke: var(--brass); stroke-width: 1.25; vector-effect: non-scaling-stroke; }

/* ==== 1. the letterhead practice line =========================================================================== */
.ap-letterhead { position: relative; background: var(--parchment); padding: clamp(10px, 1.4vw, 20px) 0 clamp(24px, 3vw, 40px); text-align: center; }
/* the hairlines run to the container edges, like every other section's edges (max-width: none lifts the paragraph
   measure of base.css, which kept the label 468 px wide at the left) */
.ap-lh-label {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: none;
  margin: 0 0 18px;
  font: 400 var(--text-meta) / 1 var(--font-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.ap-lh-label::before, .ap-lh-label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--brass); }
.ap-lh-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--brass);
  list-style: none;
}
.ap-lh-list li { display: inline-flex; align-items: center; max-width: none; }
.ap-lh-list .lh-br { display: none; flex: 0 0 100%; height: 0; margin: 0; padding: 0; }
.ap-lh-list .lh-br::before { content: none; }
@media (min-width: 1200px) { .ap-lh-list .lh-br--d { display: block; } .ap-lh-list .lh-br--d + li::before { content: none; } }
@media (min-width: 700px) and (max-width: 1199.98px) { .ap-lh-list .lh-br--t { display: block; } .ap-lh-list .lh-br--t + li::before { content: none; } }
/* phones: the line set narrow, as a letterhead would be: six short centred lines, two names side by side where they fit
   at 360 px and the longest names alone (breaks .lh-br--p), so a diamond never starts a line; about half the height
   of a stacked list. Each link keeps a 30 px tap height */
@media (min-width: 360px) and (max-width: 699.98px) {
  .ap-lh-list { gap: 0; padding-bottom: 14px; }
  .ap-lh-list .lh-br--p { display: block; }
  .ap-lh-list .lh-br--p + li::before { content: none; }
  .ap-letterhead .ap-lh-list li + li::before { width: 7px; height: 7px; margin: 0 12px; }
  .ap-letterhead .ap-lh-list li a { padding: 4px 0; font-size: 16px; line-height: 1.4; }
}
/* the narrowest phones: a stacked, centred list, a small oxblood diamond on the seam between two names */
@media (max-width: 359.98px) {
  .ap-lh-list { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding-bottom: 12px; }
  .ap-lh-list li { position: relative; display: block; }
  .ap-letterhead .ap-lh-list > li + li::before { position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin: 0 0 0 -3px; }
  .ap-letterhead .ap-lh-list li a { display: block; padding: 7px 0; font-size: 17px; line-height: 1.4; }
}
.ap-lh-list li + li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 18px;
  background: var(--ox);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ap-lh-list a {
  padding: 6px 0;
  color: var(--ink-text);
  font: 400 clamp(18px, 1vw + 8px, 22px) / 1.45 var(--font-body);
  text-decoration: none;
  text-underline-offset: 6px;
  transition: color 0.18s ease;
}
.ap-lh-list a:hover { color: var(--ox); text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; }
.ap-lh-more a { font-style: italic; color: var(--ox); }

/* ==== 2. how it works: the three step titles read as one sentence =================================================== */
.ap-how { --step-gap: clamp(28px, 3.3vw, 56px); padding: clamp(48px, 5.4vw, 84px) 0 clamp(56px, 5.6vw, 84px); background: var(--parchment); }
/* the head sits on the steps' own three columns: the h2 over the first two, the lede over the third */
.ap-how-head {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--step-gap);
  align-items: end;
  margin-bottom: clamp(44px, 5vw, 76px);
}
.ap-how-head h2 { grid-column: 1 / span 2; margin: 0; max-width: 11em; }
.ap-how-head .lede { grid-column: 3; margin: 0; padding-bottom: 6px; }
.ap-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: var(--step-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.ap-steps li { display: grid; grid-row: span 2; grid-template-rows: subgrid; max-width: none; counter-increment: step; }
/* the titles stand on their last line, so a title that wraps ("It goes to / matched attorneys") still reads on one line
   with the others; the arrow keeps the middle of that line (see its margin-bottom) */
.ap-steps h3 {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin: 0;
  padding: 0 0 24px;
  color: var(--ink-text);
  font: italic 400 clamp(26px, 1.25vw + 18px, 36px) / 1.12 var(--font-body);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
/* the arrow from one step to the next runs on into the gap, like the path */
.ap-steps li:not(:last-child) h3::after {
  content: "";
  flex: 1 1 auto;
  min-width: 40px;
  height: 14px;
  margin-right: calc(-1 * var(--step-gap) + 10px);
  margin-bottom: calc((1.12em - 14px) / 2);
  background:
    linear-gradient(var(--ox), var(--ox)) left center / calc(100% - 4px) 1.25px no-repeat,
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3e%3cpath d='M1.5 1.5L8.5 7l-7 5.5' fill='none' stroke='%235E1A2A' stroke-width='1.3'/%3e%3c/svg%3e") right center / 10px 14px no-repeat;
}
.ap-steps p { margin: 0; padding-top: 22px; border-top: 1px solid var(--brass); font-size: var(--text-body); line-height: 1.65; max-width: 30em; }
.ap-steps p::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font: 400 14px / 1 var(--font-label);
  letter-spacing: 0.12em;
  color: var(--brass-ink);
}
.ap-how-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; margin-top: clamp(44px, 4.6vw, 64px); }

/* the ribbon-tab button: an oxblood tab with a V-notch on its right end (it opens the first-call card) */
.ap-tab-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 0 46px 0 26px;
  border: 0;
  background: none;
  color: var(--parchment);
  font: 700 18px / 1.2 var(--font-heading);
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: padding 0.22s ease;
}
.ap-tab-btn::before, .ap-tab-btn::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.ap-tab-btn::before { inset: 0; background: var(--ox); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); transition: background-color 0.2s ease; }
.ap-tab-btn::after { left: 6px; right: 24px; top: 5px; bottom: 5px; border-top: 1px dashed var(--brass); border-bottom: 1px dashed var(--brass); }
.ap-tab-btn:hover { padding-right: 54px; }
.ap-tab-btn:hover::before { background: var(--ox-deep); }
.ap-tab-btn:focus-visible { outline: 3px solid var(--ink-text); outline-offset: 3px; }

/* ==== 3. practice areas: sticky heading left, the twelve files right ============================================== */
.ap-areas { padding: 0 0 var(--section); background: var(--parchment); }
.ap-areas-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; padding-top: clamp(48px, 5vw, 72px); background: linear-gradient(var(--line-hair), var(--line-hair)) center top / calc(100% - 2 * var(--margin)) 1px no-repeat; }
.ap-areas-aside { grid-column: 1 / span 4; align-self: stretch; }
/* the sticky column always fits the window under the compact header: the photo takes the room that is left (140-560 px),
   so the "Not sure which one?" card stays in view while the twelve files pass */
.ap-areas-sticky {
  position: sticky;
  top: calc(var(--header-h-scrolled) + 36px);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h-scrolled) - 56px);
  max-height: 1000px;
}
.ap-areas-sticky > * { flex: none; }
.ap-areas h2 { margin: 0 0 18px; }
.ap-areas-sticky .link-arrow { align-self: flex-start; }
.ap-areas-sticky > .ap-areas-photo { position: relative; flex: 1 1 0; min-height: 140px; max-height: 560px; margin-top: clamp(28px, 3vw, 40px); }
.ap-areas-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
@media (max-height: 640px) {
  .ap-areas-sticky { position: static; height: auto; max-height: none; }
  .ap-areas-sticky > .ap-areas-photo { flex: none; max-height: none; }
  .ap-areas-photo img { height: auto; aspect-ratio: 5 / 6; }
}
/* (no bookmark on this photo: the section already carries twelve card ribbons, and the bookmark on a tall photo belongs
   to the questions' photo frame) */
.ap-unsure {
  position: relative;
  margin-top: 28px;
  padding: 26px 26px 24px;
  background: var(--ox);
  color: var(--parchment);
  box-shadow: inset 0 0 0 6px var(--ox), inset 0 0 0 7px var(--brass);
}
.ap-unsure p { margin: 0 0 14px; color: var(--parchment); font-size: 16px; line-height: 1.55; }
.ap-unsure .ap-unsure-title { margin-bottom: 8px; font: 700 22px / 1.15 var(--font-heading); letter-spacing: -0.01em; }
.ap-unsure a { color: var(--parchment); font: italic 400 18px / 1.3 var(--font-body); text-decoration: underline; text-decoration-color: var(--brass-light); text-underline-offset: 5px; }
.ap-unsure a svg { width: 18px; height: 11px; margin-left: 8px; color: var(--brass-light); vertical-align: -1px; transition: transform 0.18s ease; }
.ap-unsure a:hover { color: var(--white); }
.ap-unsure a:hover svg { transform: translateX(3px); }
.ap-unsure a:focus-visible { outline-color: var(--parchment); }
.ap-files {
  grid-column: 6 / span 7;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px var(--gutter);
  margin: 0;
  padding: 7px 0 76px;
  list-style: none;
}
.ap-files li { max-width: none; }
.ap-files li:nth-child(even) { transform: translateY(76px); }

.ap-file { height: 100%; padding: 14px 14px 22px; }
.ap-file .fc-no { display: block; padding: 4px 2px 13px var(--fc-no-indent); }
.ap-file-img { display: block; width: 100%; aspect-ratio: 16 / 9.5; object-fit: cover; }
.ap-file-body { flex: 1 1 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-content: start; padding: 18px 6px 0; }
.ap-file-body .pa-icon { grid-row: 1; width: 30px; height: 30px; margin-top: -2px; }
.ap-file h3 { grid-row: 1; margin: 0; align-self: center; font-size: 22px; line-height: 1.15; text-wrap: balance; transition: color 0.18s ease; }
.ap-file-line { grid-column: 1 / -1; margin: 12px 0 16px; font-size: 16px; line-height: 1.55; }
.ap-file-go {
  grid-column: 1 / -1;
  align-self: end;
  font: italic 400 16px / 1.3 var(--font-body);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 5px;
}
.ap-file-go svg { width: 18px; height: 11px; margin-left: 8px; color: var(--ox); vertical-align: -1px; transition: transform 0.18s ease; }
.ap-file:hover h3 { color: var(--ox); }
.ap-file:hover .ap-file-go svg { transform: translateX(3px); }

/* ==== 4. why people use us: an oxblood panel under a large curve ================================================= */
/* the top 3 px of the panel are parchment, so a fractional-pixel edge under the curve never shows as a dark seam */
.ap-why { position: relative; padding: 0 0 var(--section); background: linear-gradient(var(--parchment) 0 3px, var(--ox) 3px); color: var(--parchment); }
.ap-why-curve { position: relative; top: -1px; display: block; width: 100%; height: clamp(72px, 10.5vw, 160px); margin: 0 0 -2px; fill: var(--parchment); }
.ap-why-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: stretch; }
/* the portrait breaks out of the panel on purpose: it rises about 70 px into the parchment above the curve and runs
   down to the last row of reasons, inside a brass hairline mat 14 px all round (concentric, like the hero's ring; an
   outline offset down-right is Coupon Finders' framed-photo device) */
.ap-why-portrait { grid-column: 1 / span 4; position: relative; z-index: 1; margin: calc(-1 * clamp(120px, 13vw, 190px)) 14px 0; }
.ap-why-portrait::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid var(--brass);
  pointer-events: none;
}
.ap-why-portrait img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 46% 30%; }
.ap-why-text { grid-column: 6 / span 7; padding-top: clamp(4px, 1.4vw, 24px); }
.ap-quote { margin: 0 0 clamp(36px, 4vw, 56px); }
.ap-quote blockquote { margin: 0; }
.ap-quote p {
  margin: 0;
  max-width: 21em;
  color: var(--parchment);
  font: italic 400 var(--text-quote) / 1.28 var(--font-body);
  letter-spacing: -0.006em;
  text-indent: -0.42em;
  text-wrap: pretty;
}
.ap-quote p::before { content: "\201c"; color: var(--brass-light); }
.ap-quote p::after { content: "\201d"; color: var(--brass-light); }
.ap-quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: 20px; text-wrap: balance; color: var(--brass-light); font: 400 var(--text-meta) / 1.3 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; }
.ap-quote figcaption::before { content: ""; width: 36px; height: 1px; background: var(--brass); }
/* the brass rule runs the full width of the column (to the container edge); the quote stays the largest type here */
.ap-why h2 { margin: 0 0 30px; padding-top: 34px; border-top: 1px solid var(--brass); color: var(--parchment); font-size: clamp(22px, 1.2vw + 12.7px, 30px); max-width: none; }
.ap-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; margin: 0; padding: 0; list-style: none; }
.ap-reasons li { position: relative; max-width: none; padding-left: 28px; }
.ap-reasons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 15px;
  background: var(--parchment);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}
.ap-reasons strong { display: block; margin-bottom: 6px; color: var(--parchment); font: 700 18px / 1.25 var(--font-heading); text-wrap: balance; }
.ap-reasons span { display: block; color: var(--parchment); font-size: 16px; line-height: 1.6; }
.ap-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  margin: clamp(56px, 6vw, 88px) 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--brass);
  list-style: none;
}
.ap-strip li { max-width: none; }
.ap-strip img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ap-strip li:nth-child(3) img { object-position: 50% 22%; }

/* ==== 5. from the blog: the bookmarked file (A8) ===================================================================
   One large ribbon file card shows one guide at a time; nine short numbered oxblood bookmarks hang from its top edge
   and page through the nine newest guides, the open one 20 px longer (src/components/GuideFile.tsx: tabs and panels,
   arrow keys, swipe). Not a rail of cards with arrows and a progress line (QuoteWheels), not dated rows (Claims &
   Rights), not a lead beside a ruled list (SecureYrHome). */
.ap-guides { padding: var(--section) 0; background: var(--parchment); }
.ap-guides-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 56px; margin-bottom: clamp(40px, 4vw, 58px); }
.ap-guides-head h2 { margin: 0; max-width: 17em; }
.ap-guides-head .link-arrow { flex: none; padding-bottom: 6px; }

.ap-bfile {
  --bf-pad: clamp(14px, 1.4vw, 20px);   /* the card's inner margin round the photo */
  --bf-w: 34px;                          /* a bookmark's width */
  --bf-gap: 10px;
  --bf-len: 48px;                        /* a closed bookmark: 7 px above the card's edge, 41 px over it */
  --bf-open: 20px;                       /* the open one hangs this much longer */
  position: relative;
}
/* the row of bookmarks hangs over the text column, which starts at the middle of the card (photo 5fr, air 1fr, text 6fr) */
.ap-bf-marks { position: absolute; z-index: 2; top: -7px; left: 50%; display: flex; align-items: flex-start; gap: var(--bf-gap); }
.ap-bf-mark {
  position: relative;
  isolation: isolate;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: var(--bf-w);
  height: var(--bf-len);
  margin: 0;
  padding: 0 0 15px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--parchment);
  font: 400 var(--text-meta) / 1 var(--font-label);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: height 0.24s ease;
}
/* the ribbon itself: oxblood, V-notched at the foot, stitched in brass down both sides (like the questions' ribbon) */
.ap-bf-mark::before, .ap-bf-mark::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.ap-bf-mark::before { inset: 0; background: var(--ox); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%); transition: background-color 0.2s ease; }
.ap-bf-mark::after { left: 5px; right: 5px; top: 0; bottom: 12px; border-left: 1px dashed var(--brass); border-right: 1px dashed var(--brass); }
.ap-bf-mark:hover { height: calc(var(--bf-len) + 6px); }
.ap-bf-mark:hover::before { background: var(--ox-deep); }
.ap-bf-mark[aria-selected="true"] { height: calc(var(--bf-len) + var(--bf-open)); }
.ap-bf-mark[aria-selected="true"]::before { background: var(--ox); }
.ap-bf-mark:focus-visible { outline: 3px solid var(--ink-text); outline-offset: 3px; }

/* the file card: white, square, one hairline; every guide sits in the same cell (the card keeps the tallest one's
   height), only the open one is shown. The leaving guide goes quickly, the new one settles in */
.ap-bf-sheet { display: grid; background: var(--white); border: 1px solid var(--line-hair); transition: border-color 0.2s ease; touch-action: pan-y; }
.ap-bf-sheet:has(.ap-bf-link:hover) { border-color: var(--ox); }
.ap-bf-panel { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transition: opacity 0.16s ease, visibility 0s linear 0.16s; }
.ap-bf-panel.is-open { visibility: visible; opacity: 1; transition: opacity 0.38s ease 0.06s, visibility 0s; }
.ap-bf-link {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
  height: 100%;
  padding: var(--bf-pad);
  color: var(--ink-text);
  text-decoration: none;
}
.ap-bf-link:hover, .ap-bf-link:focus-visible { color: var(--ink-text); }
.ap-bf-link:focus-visible { outline: 3px solid var(--ink-text); outline-offset: 4px; }
/* the guide's photo in a tall frame (taller still if a long title ever needs the room) */
.ap-bf-photo { position: relative; grid-column: 1; align-self: stretch; aspect-ratio: 4 / 5; overflow: hidden; background: var(--line-hair); }
.ap-bf-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* the text column: the file stamp (number, date, reading time in Courier) right under the open bookmark; the guide
   itself (subject in brass italic, the Caslon title, the summary, "Read the guide" on a brass rule) set at the foot,
   level with the photo's foot, the way a caption stands under its plate; the free height stays between the two */
.ap-bf-text { grid-column: 3; display: flex; flex-direction: column; min-width: 0; padding: calc(var(--bf-len) + var(--bf-open) - 7px - var(--bf-pad) + 34px) clamp(0px, 2.4vw, 36px) 2px 0; }
.ap-bf-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 auto; padding-bottom: 30px; max-width: none; font: 400 var(--text-meta) / 1.4 var(--font-label); letter-spacing: 0.05em; color: var(--muted-text); }
.ap-bf-no { color: var(--brass-ink); letter-spacing: 0.1em; text-transform: uppercase; }
.ap-bf-dot { color: var(--brass); }
.ap-bf-cat { margin: 0 0 10px; max-width: none; color: var(--brass-ink); font: italic 400 clamp(17px, 0.3vw + 15.6px, 20px) / 1.3 var(--font-body); }
.ap-bf-text h3 { margin: 0 0 18px; max-width: 17em; color: var(--ink-text); font-size: clamp(26px, 0.75vw + 21.2px, 32px); line-height: 1.14; letter-spacing: -0.012em; text-wrap: balance; transition: color 0.18s ease; }
.ap-bf-sum { margin: 0 0 28px; max-width: 31em; font-size: var(--text-body); line-height: 1.65; }
.ap-bf-go { display: flex; align-items: center; gap: 10px; margin: 0; padding-top: 20px; max-width: none; border-top: 1px solid var(--brass); font: italic 400 var(--text-body) / 1.3 var(--font-body); }
.ap-bf-go span { text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color 0.18s ease, text-decoration-color 0.18s ease; }
.ap-bf-go svg { flex: none; width: 20px; height: 12px; color: var(--ox); transition: transform 0.18s ease; }
.ap-bf-link:hover h3, .ap-bf-link:focus-visible h3, .ap-bf-link:hover .ap-bf-go span { color: var(--ox); }
.ap-bf-link:hover .ap-bf-go span { text-decoration-color: var(--ox); }
.ap-bf-link:hover .ap-bf-go svg { transform: translateX(3px); }
/* desktop: a square photo and a larger title, so the guide fills its column under the stamp (a 4:5 photo left a
   250 px empty band between the stamp and the subject at 1440) */
@media (min-width: 992px) {
  .ap-bf-photo { aspect-ratio: 1 / 1; }
  .ap-bf-text h3 { font-size: clamp(30px, 1.1vw + 22px, 38px); }
}
/* tablets: narrower bookmarks, so the nine still fit over the text column; the photo a little less tall */
@media (min-width: 768px) and (max-width: 991.98px) {
  .ap-bfile { --bf-w: 30px; --bf-gap: 6px; }
  .ap-bf-photo { aspect-ratio: 3 / 4; }
  .ap-bf-text { padding-right: 0; }
}

/* ==== 6. straight talk: the bound notice ========================================================================= */
.ap-notice { padding: calc(var(--section) * 0.7) 0 calc(var(--section) + 24px); background: var(--parchment); }
.ap-notice-wrap { position: relative; }
.ap-notice-page {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(48px, 5vw, 68px) clamp(28px, 5vw, 76px) clamp(40px, 4.4vw, 60px) clamp(64px, 7vw, 104px);
  background: var(--white);
  border: 1px solid var(--line-hair);
}
/* the binding ribbon down the left edge, ending in a V-notch below the page */
.ap-notice-page::before, .ap-notice-page::after { content: ""; position: absolute; pointer-events: none; }
.ap-notice-page::before {
  left: clamp(18px, 2.4vw, 34px);
  top: -1px;
  bottom: -40px;
  width: 22px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 11px), 0 100%);
}
.ap-notice-page::after {
  left: calc(clamp(18px, 2.4vw, 34px) + 5px);
  top: 0;
  bottom: -28px;
  width: 12px;
  border-left: 1px dashed var(--brass);
  border-right: 1px dashed var(--brass);
}
/* "Straight talk" is a small ribbon tab sewn into the binding (the ribbon-tab device of "What the first call is like"),
   not an eyebrow line: it starts under the binding ribbon, whose stitches run on over it, crosses the page with its
   words in parchment Courier from the text column's edge, a brass stitch along both long edges, and ends in a V-notch.
   It sits level with the sash on the other side (the sash's axis is 51 px under the page's top edge), and the h2 keeps
   its place (the page's top padding becomes the tab's offsets) */
.ap-notice-head {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: none;
  height: 32px;
  margin: calc(35px - clamp(48px, 5vw, 68px)) 0 clamp(20px, 5vw - 28px, 40px) calc(clamp(18px, 2.4vw, 34px) - clamp(64px, 7vw, 104px));
  padding: 1px 28px 0 calc(clamp(64px, 7vw, 104px) - clamp(18px, 2.4vw, 34px));
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
  color: var(--parchment);
  font: 400 var(--text-meta) / 1 var(--font-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* the stitch starts where the tab comes out from under the binding (22 px wide) and stops short of the notch */
.ap-notice-head::after {
  content: "";
  position: absolute;
  left: 25px;
  right: 16px;
  top: 4px;
  bottom: 4px;
  border-top: 1px dashed var(--brass);
  border-bottom: 1px dashed var(--brass);
  pointer-events: none;
}
.ap-notice-sash { position: absolute; top: 30px; right: -20px; z-index: 2; padding: 11px 32px; font-size: 16px; }
.ap-notice-page h2 { margin: 0 0 24px; font-size: var(--text-h2); max-width: 13em; }
.ap-notice-page > p:not(.ap-notice-head):not(.ap-notice-sash) { max-width: 36em; margin: 0 0 18px; font-size: var(--text-body); line-height: 1.7; }
.ap-notice-page > p:last-child { margin-bottom: 0; }
.ap-notice-page strong { color: var(--ox); }

/* ==== 7. common questions: accordion left, a photo that follows the open question right =========================== */
.ap-faq { padding: calc(var(--section) * 0.4) 0 var(--section); background: var(--parchment); }
.ap-faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.ap-faq-main { grid-column: 1 / span 7; }
.ap-faq-main h2 { margin: 0 0 clamp(28px, 3vw, 40px); max-width: 14em; }
.ap-faq .accordion { border-top: 1px solid var(--brass); margin-bottom: 30px; }
.ap-faq .accordion-item { border-bottom: 1px solid var(--line-hair); }
.ap-faq .accordion-button {
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  color: var(--ink-text);
  font: 400 clamp(18px, 0.4vw + 16.4px, 22px) / 1.3 var(--font-body);
}
.ap-faq .accordion-button:hover { color: var(--ox); text-decoration: none; }
.ap-faq .accordion-button:not(.collapsed) { color: var(--ox); }
.ap-faq .accordion-button::after {
  content: "+";
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 38px;
  margin: -8px 0 0 auto;
  padding-top: 6px;
  background: var(--ox);
  color: var(--parchment);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%);
  font: 400 22px / 1 var(--font-body);
  transition: height 0.2s ease;
}
.ap-faq .accordion-button:not(.collapsed)::after { content: "\2013"; height: 46px; background: var(--ox); }
.ap-faq .accordion-body { padding: 0 52px 26px 0; max-width: 38em; font-size: var(--text-body); line-height: 1.7; }
.ap-faq-photos { grid-column: 9 / span 4; position: relative; margin-top: 10px; aspect-ratio: 3 / 4; background: var(--line-hair); }
.ap-faq-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.55s ease; }
.ap-faq-photos .q1 { opacity: 1; object-position: 44% 50%; }
.ap-faq-photos .q2 { object-position: 36% 50%; }
.ap-faq-photos .q3 { object-position: 70% 40%; }
.ap-faq-photos .q4 { object-position: 46% 40%; }
.ap-faq-grid:has([data-bs-target="#hf1"][aria-expanded="true"]) .ap-faq-photos .q2,
.ap-faq-grid:has([data-bs-target="#hf2"][aria-expanded="true"]) .ap-faq-photos .q3,
.ap-faq-grid:has([data-bs-target="#hf3"][aria-expanded="true"]) .ap-faq-photos .q4 { opacity: 1; }
.ap-faq-grid:has([data-bs-target="#hf1"][aria-expanded="true"]) .ap-faq-photos .q1,
.ap-faq-grid:has([data-bs-target="#hf2"][aria-expanded="true"]) .ap-faq-photos .q1,
.ap-faq-grid:has([data-bs-target="#hf3"][aria-expanded="true"]) .ap-faq-photos .q1 { opacity: 0; }
.ap-faq-ribbon {
  position: absolute;
  z-index: 2;
  top: -9px;
  left: 30px;
  width: 38px;
  height: 92px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
}
.ap-faq-ribbon::before { content: ""; position: absolute; left: 5px; right: 5px; top: 0; bottom: 14px; border-left: 1px dashed var(--brass); border-right: 1px dashed var(--brass); }
.ap-faq-ribbon::after {
  content: "01";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  color: var(--parchment);
  font: 400 var(--text-meta) / 1 var(--font-label);
  letter-spacing: 0.06em;
  text-align: center;
}
.ap-faq-grid:has([data-bs-target="#hf1"][aria-expanded="true"]) .ap-faq-ribbon::after { content: "02"; }
.ap-faq-grid:has([data-bs-target="#hf2"][aria-expanded="true"]) .ap-faq-ribbon::after { content: "03"; }
.ap-faq-grid:has([data-bs-target="#hf3"][aria-expanded="true"]) .ap-faq-ribbon::after { content: "04"; }

/* ==== 8. get matched: the intake sheet on the oxblood curve ======================================================= */
.ap-get { position: relative; isolation: isolate; padding: var(--section) 0 calc(var(--section) + 16px); background: var(--parchment); overflow: hidden; }
.ap-get-curve {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 52%;
  background: var(--ox);
  /* the curve widens early (it reaches its full width at 55 % of the height), so the heading can sit level with the
     intake sheet's title; the solid oxblood under the content is the curve's broad base */
  border-top-right-radius: 100% 55%;
}
.ap-get-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.ap-get-aside { grid-column: 1 / span 5; align-self: stretch; display: flex; flex-direction: column; padding: clamp(28px, 3.5vw, 50px) 48px 0 0; color: var(--parchment); }
.ap-get-aside h2 { margin: 0 0 20px; color: var(--parchment); max-width: 9em; }
.ap-get-aside .lede { margin: 0 0 32px; color: var(--parchment); font-size: var(--text-lede); max-width: 22em; }
/* the note is bound by an oxblood ribbon with the brass stitch of the card ribbons; it overhangs the note's top edge.
   Two groups on the oxblood: the heading and lede at the top (level with the sheet's title), the note, the portrait and
   the contact line together at the foot (the note's auto top margin takes the room between them) */
.ap-handy { position: relative; margin: auto 0 28px; padding: 20px 22px 22px 46px; background: var(--parchment); color: var(--ink-text); max-width: 26em; }
.ap-handy::before, .ap-handy::after { content: ""; position: absolute; pointer-events: none; }
.ap-handy::before {
  left: 16px;
  top: -8px;
  bottom: 0;
  width: 14px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%);
}
.ap-handy::after { left: 19px; top: -8px; bottom: 9px; width: 8px; border-left: 1px dashed var(--brass); border-right: 1px dashed var(--brass); }
.ap-handy p { margin: 0; font-size: 16px; line-height: 1.6; }
.ap-handy strong { color: var(--ox); }
.ap-get-person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 0; padding-top: 0; max-width: 30em; }
.ap-get-portrait { position: relative; width: clamp(150px, 16.7vw, 240px); aspect-ratio: 1; border-radius: 50%; }
.ap-get-portrait::before { content: ""; position: absolute; inset: -10px; border: 1px solid var(--brass-light); border-radius: 50%; pointer-events: none; }
.ap-get-portrait img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 50%; }
.ap-talk { margin: 0; color: var(--parchment); font-size: 16px; line-height: 1.6; }
.ap-talk a { color: var(--parchment); text-decoration-color: var(--brass-light); text-underline-offset: 4px; overflow-wrap: anywhere; }
/* the phone number never breaks; only the long email address may */
.ap-talk a[href^="tel:"] { white-space: nowrap; overflow-wrap: normal; }
.ap-talk a:hover { color: var(--white); }
.ap-get a:focus-visible { outline-color: var(--parchment); }

.ap-intake { grid-column: 6 / span 7; position: relative; z-index: 1; }
.ap-intake .form-card {
  padding: clamp(28px, 3.6vw, 52px) clamp(22px, 3.6vw, 52px) clamp(28px, 3.2vw, 44px);
  background: var(--white);
  border: 1px solid var(--line-hair);
}
.ap-intake .form-card h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--brass);
  font-size: clamp(24px, 1.1vw + 14.2px, 30px);
}
.ap-intake form { counter-reset: fld; }
.ap-intake .form-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; font: 700 15px / 1.3 var(--font-heading); }
.ap-intake .form-label::before { counter-increment: fld; content: counter(fld, decimal-leading-zero); font: 400 var(--text-meta) / 1 var(--font-label); letter-spacing: 0.06em; color: var(--brass-ink); }
.ap-intake .form-label .form-text { font-size: 14px; }
.ap-intake .form-control, .ap-intake .form-select { min-height: 52px; border-color: var(--line-ui); background-color: var(--white); }
.ap-intake .form-control:focus, .ap-intake .form-select:focus { border-color: var(--ox); }
.ap-intake textarea.form-control { min-height: 120px; }
.ap-intake hr { margin: 28px 0 22px !important; border-top: 1px solid var(--brass) !important; opacity: 1; }
.ap-intake .consent { margin: 0 0 14px; padding: 18px 20px; border: 1px solid var(--line-hair); background: var(--parchment); font-size: 15px; line-height: 1.6; }
.ap-intake .consent.is-invalid { border-color: var(--ox); box-shadow: inset 4px 0 0 var(--ox); }
.ap-intake .consent a { color: var(--ox); }
.ap-intake .form-check-input { width: 22px; height: 22px; margin-top: 1px; border-color: var(--ox); background-color: var(--white); }
.ap-intake .form-check-input:checked { background-color: var(--ox); border-color: var(--ox); }
.ap-intake .success { padding: 8px 0; }
.ap-intake .success h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; color: var(--ox); }

/* ==== narrower screens ============================================================================================ */
@media (max-width: 1199.98px) {
  .ap-files { gap: 26px 20px; }
  .ap-why-text { grid-column: 6 / span 7; }
  .ap-reasons { gap: 26px 32px; }
}

@media (max-width: 991.98px) {
  /* hero: the portrait sitting in an oxblood half-disc (an arch whose ends run off the screen), 12 % of it below the
     arch's base, the ribbon label across its foot; the text below on parchment, the main button inside the first screen */
  .ap-hero { padding-top: 0; }
  .ap-hero-grid { display: flex; flex-direction: column; align-items: stretch; }
  .ap-hero-art {
    --arch: min(116vw, 640px);
    --pt: clamp(216px, 40vw, 300px);
    --base: calc(12px + var(--arch) / 2);
    order: -1;
    width: 100%;
    aspect-ratio: auto;
    height: calc(var(--base) + var(--pt) * 0.12 + 30px);
    margin: 0;
  }
  .ap-disc { top: 12px; left: 50%; width: var(--arch); aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; transform: translateX(-50%); }
  .ap-portrait { left: 50%; top: calc(var(--base) - var(--pt) * 0.88); width: var(--pt); transform: translateX(-50%); }
  .ap-hero-ribbon { left: 50%; right: auto; bottom: 0; transform: translateX(-50%); }
  .ap-hero-ribbon .ribbon-label { flex-direction: column; gap: 1px; padding: 10px 34px; white-space: nowrap; font-size: 15px; }
  .ap-hero-ribbon span + span::before { content: none; }
  .ap-hero-ribbon span + span { font-weight: 400; font-style: italic; }
  .ap-hero-text { padding: 22px 0 clamp(84px, 16vw, 120px); }
  .ap-hero h1 { max-width: 12em; margin-bottom: 16px; font-size: clamp(40px, 6vw, 56px); }
  .ap-hero-lede { margin-bottom: 24px; }

  .ap-how-head { display: block; }
  .ap-how-head .lede { margin-top: 18px; }
  .ap-steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ap-steps li { display: block; grid-row: auto; }
  .ap-steps h3 { padding-bottom: 16px; font-size: clamp(26px, 4vw + 12px, 32px); }
  .ap-steps li:not(:last-child) h3::after { display: none; }
  .ap-steps p { padding-top: 18px; }
  .ap-steps li:not(:last-child)::after {
    content: "";
    display: block;
    width: 14px;
    height: 56px;
    margin: 22px 0 22px 4px;
    background:
      linear-gradient(var(--ox), var(--ox)) center top / 1.25px calc(100% - 4px) no-repeat,
      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3e%3cpath d='M1.5 1.5L7 8.5l5.5-7' fill='none' stroke='%235E1A2A' stroke-width='1.3'/%3e%3c/svg%3e") center bottom / 14px 10px no-repeat;
  }

  .ap-areas-grid { display: block; padding-top: 48px; }
  .ap-areas-aside { margin-bottom: 40px; }
  .ap-areas-sticky { position: static; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 var(--gutter); align-items: start; height: auto; max-height: none; }
  .ap-areas-sticky h2, .ap-areas-sticky .link-arrow { grid-column: 1; justify-self: start; }
  .ap-areas-sticky > .ap-areas-photo { grid-column: 2; grid-row: 1 / span 3; min-height: 0; max-height: none; margin: 0; }
  .ap-areas-photo img { height: auto; aspect-ratio: 4 / 3; }
  .ap-unsure { grid-column: 1; }
  .ap-files { padding-bottom: 0; }
  .ap-files li:nth-child(even) { transform: none; }

  .ap-why-grid { display: block; }
  /* the portrait rises about 65 px above the curve here too, so the section above keeps 56 px more room under its files */
  .ap-areas { padding-bottom: calc(var(--section) + 56px); }
  .ap-why-portrait { width: min(72%, 340px); margin: calc(-1 * (clamp(72px, 10.5vw, 160px) + 48px)) 0 52px 14px; }
  .ap-why-portrait img { height: auto; aspect-ratio: 3 / 4; }
  .ap-reasons { gap: 26px 28px; }

  .ap-faq-grid { display: flex; flex-direction: column; }
  .ap-faq-photos { order: -1; width: 100%; aspect-ratio: 16 / 11; margin: 0 0 40px; }

  .ap-get { padding-top: 0; }
  .ap-get-curve { display: none; }
  .ap-get-grid { display: block; }
  .ap-get-aside {
    position: relative;
    display: block;
    margin: 0 calc(-1 * var(--margin));
    padding: clamp(96px, 20vw, 150px) var(--margin) clamp(120px, 20vw, 150px);
    background: var(--ox);
    border-top-right-radius: 100% clamp(90px, 22vw, 170px);
  }
  .ap-get-person { margin-top: 0; padding-top: 0; }
  /* stacked: the portrait's brass ring keeps 30 px clear of the note */
  .ap-handy { margin-bottom: 40px; }
  .ap-get-aside h2 { max-width: none; }
  .ap-intake { margin-top: calc(-1 * clamp(84px, 15vw, 110px)); }
}

@media (max-width: 767.98px) {
  .ap-hero h1 { font-size: min(40px, 9.6vw); line-height: 1.06; }
  .ap-hero-lede { font-size: 17px; line-height: 1.55; }
  .ap-hero-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .ap-hero-actions .btn { width: 100%; }
  .ap-hero-actions .link-arrow { align-self: flex-start; }
  .ap-checks { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* phones: the arch already carries the curve; the hero ends on the checks, the letterhead hairlines follow */
  .ap-hero-curve { display: none; }
  .ap-hero-text { padding-bottom: 44px; }


  .ap-how-actions { flex-direction: column; align-items: flex-start; gap: 18px; }

  .ap-areas-sticky { display: block; }
  .ap-areas-sticky > .ap-areas-photo { margin-top: 28px; }
  .ap-areas-photo img { aspect-ratio: 16 / 10; }
  .ap-unsure { margin-top: 20px; padding: 22px 22px 8px; }
  /* "Get matched" as a 44 px tap target; the card's foot padding gives back what the link adds */
  .ap-unsure p { margin-bottom: 4px; }
  .ap-unsure a { display: inline-block; padding: 12px 0; }
  .ap-files { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ap-file { display: grid; grid-template-columns: 100px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; padding: 12px 14px 14px 12px; }
  .ap-file .fc-no { grid-column: 2; grid-row: 1; padding: 2px 0 8px var(--fc-no-indent); }
  .ap-file-img { grid-column: 1; grid-row: 1 / span 2; width: 100px; height: 100%; min-height: 128px; aspect-ratio: auto; }
  .ap-file-body { grid-column: 2; grid-row: 2; padding: 0; column-gap: 9px; }
  .ap-file-body { display: block; }
  .ap-file-body .pa-icon { display: none; }
  .ap-file h3 { font-size: 18px; line-height: 1.18; text-wrap: wrap; }
  .ap-file-line { margin: 6px 0 8px; font-size: 15px; line-height: 1.5; }
  .ap-file-go { display: none; }
  .ap-file-line { margin-bottom: 0; }
  /* the bookmark hangs at the start of the text column (12 px padding + 100 px photo + 16 px gap), beside the number */
  .ap-file .fc-ribbon { left: 128px; height: 32px; }
  .ap-file:hover .fc-ribbon { height: 38px; }

  .ap-why-portrait { width: min(74%, 300px); }
  .ap-reasons { grid-template-columns: minmax(0, 1fr); }
  .ap-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .ap-guides-head { display: block; margin-bottom: 40px; }
  .ap-guides-head h2 { margin-bottom: 14px; }
  /* phones: the bookmarks become a row that scrolls sideways along the card's top edge (the open one is scrolled into
     view, see GuideFile), the photo sits on top inside the card and the text follows */
  /* nine 30 px bookmarks with 4 px gaps take 316 px with the inset: they fit the 344 px track at 390 and the 328 px
     track at 360, so none is clipped and the row never needs to scroll */
  .ap-bfile { --bf-pad: 14px; --bf-w: 30px; --bf-gap: 4px; --bf-len: 46px; }
  .ap-bf-marks {
    left: 0;
    right: 0;
    top: -15px;
    padding: 8px 0 10px var(--bf-pad);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .ap-bf-marks::-webkit-scrollbar { display: none; }
  .ap-bf-link { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--bf-len) + var(--bf-open) - 7px + 14px); }
  .ap-bf-photo { aspect-ratio: 3 / 2; align-self: start; }
  .ap-bf-text { grid-column: 1; padding: 20px 2px 4px; }
  /* the stamp on two lines (number and date, then the reading time), so no middot is left hanging at a line's end; the
     free height of a shorter guide goes above "Read the guide" here */
  .ap-bf-meta { margin-bottom: 0; padding-bottom: 16px; }
  .ap-bf-dot--min { display: none; }
  .ap-bf-min { flex-basis: 100%; }
  .ap-bf-go { margin-top: auto; }
  .ap-bf-cat { margin-bottom: 6px; }
  .ap-bf-text h3 { margin-bottom: 12px; font-size: 24px; line-height: 1.18; }
  .ap-bf-sum { margin-bottom: 22px; font-size: 16px; line-height: 1.6; }
  .ap-bf-go { padding-top: 14px; font-size: 17px; }

  .ap-notice { padding-top: calc(var(--section) * 0.7 + 18px); }
  .ap-notice-page { padding: 56px 18px 36px 50px; }
  .ap-notice-page::before { left: 14px; width: 18px; }
  .ap-notice-page::after { left: 18px; width: 10px; }
  .ap-notice-sash { top: -19px; right: -10px; font-size: 15px; padding: 10px 30px; }
  /* phones: the sash straddles the page's top edge right across, so the tab comes off the binding (14 px in, 18 px
     wide) under it; its words still start on the text column's edge (50 px) */
  .ap-notice-head { height: 30px; margin: -12px 0 22px -36px; padding-left: 36px; }
  .ap-notice-head::after { left: 21px; }

  .ap-faq .accordion-button { gap: 16px; padding: 18px 0; }
  .ap-faq .accordion-body { padding-right: 0; }
  .ap-faq-photos { aspect-ratio: 4 / 3; margin-bottom: 32px; }

  .ap-get-person { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ap-get-portrait { width: 150px; margin-left: 10px; }
  .ap-intake .form-card { padding: 26px 18px 26px; }
  .ap-intake .form-card h3 { font-size: 24px; }
  .ap-intake .consent { padding: 14px; }
  .ap-intake .btn-lg { width: 100%; }
}

@media (max-width: 374.98px) {
  .ap-hero-ribbon .ribbon-label { font-size: 13px; padding-inline: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-faq-photos img, .file-card, .fc-ribbon, .ap-tab-btn, .ap-tab-btn::before { transition: none; }
  .ap-bf-panel, .ap-bf-panel.is-open, .ap-bf-mark, .ap-bf-mark::before, .ap-bf-sheet, .ap-bf-go svg { transition: none; }
}

/* wide screens: the files in three columns (the middle one set lower), the line drawing above each title */
@media (min-width: 1280px) {
  .ap-files { grid-column: 5 / span 8; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; padding-bottom: 64px; }
  .ap-areas-aside { padding-right: 24px; }
  .ap-files li:nth-child(even) { transform: none; }
  .ap-files li:nth-child(3n + 2) { transform: translateY(64px); }
  .ap-file { padding: 12px 12px 20px; }
  .ap-file .fc-ribbon { left: 12px; }
  .ap-file-body { display: block; padding: 16px 6px 0; }
  .ap-file-body .pa-icon { display: block; width: 28px; height: 28px; margin: 0 0 10px; }
  .ap-file h3 { font-size: 22px; }
  .ap-file-line { margin: 9px 0 14px; font-size: 16px; }
  .ap-file-go { display: block; font-size: 16px; }
}

/* ==== photos on every device: every head whole, at every size (photos + devices pass, 2026-10-15) ==================
   Head boxes for every photo are in the review notes; each rule below keeps every marked head whole at all 19 measured
   screen sizes. */
/* practice photo beside the twelve files: its three heads span two thirds of the photo, so on large screens the sticky
   frame stays about as wide as it is tall (it reached 400 x 500 and cut the outer heads) and the photo sits high */
.ap-areas-photo img { object-position: 50% 10%; }
@media (min-width: 992px) and (max-height: 640px) { .ap-areas-photo img { aspect-ratio: 6 / 5; } }
@media (min-width: 992px) {
  .ap-areas-sticky { container-type: inline-size; }
  .ap-areas-sticky > .ap-areas-photo { max-height: min(560px, 86cqw); }
}
/* the twelve practice files: the photos sit a little high (the five photos whose own edge cut a head were replaced by
   photos from the same shoots with every head whole, step 5) */
.ap-file-img { object-position: 50% 25%; }
@media (max-width: 767.98px) {
  /* phones: the thumbnail keeps the photo’s own 3:2 shape (the tall 100 px strip cut the heads in every photo of two or
     three people) */
  .ap-file-img { height: auto; min-height: 0; aspect-ratio: 3 / 2; align-self: start; }
}
/* the portrait in the why panel: from 992 to 1199 px the column is narrow and the panel tall (a 270 x 870 frame cut his
   head at the sides), so there the frame keeps a 9:20 shape and stands at the top of its column */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .ap-why-portrait { align-self: start; }
  .ap-why-portrait img { height: auto; aspect-ratio: 9 / 20; }
}

/* ==== every device looks finished (photos + devices pass, step 5, 2026-10-15) ======================================= */
/* the guide's photo keeps its own column: from 768 to 1279 px the text beside it is taller than the photo's frame, and
   the frame (which took its width from that height) ran up to 100 px into the text column over the start of every line;
   it now keeps the column's width and its own shape, and stands at the foot of the column, level with "Read the guide" */
@media (min-width: 768px) {
  .ap-bf-photo { width: 100%; min-width: 0; align-self: end; }
}
/* the third question's photo is a crop of the attorney (the client seen from behind at the photo's left edge is left
   out: no frame shape could hold both heads); his head stays in the upper part of every frame */
.ap-faq-photos .q3 { object-position: 50% 20%; }
/* the form section on wide screens: the oxblood curve keeps its 1440 px arc beside the content (at 52 % of a wider
   window its arc ran through the heading: "What happe..." at 2560, a half "?" at 1920); the margin of the window to the
   left of it is plain oxblood. One shape: a box from the window's left edge with a fixed 749 px horizontal radius (a
   separate band beside the curve left a thin light seam between the two at 2560) */
@media (min-width: 1441px) {
  .ap-get-curve { left: 0; width: calc(50% + 29px); border-top-right-radius: 749px 55%; }
}
/* from 992 to 1399 px the portrait stands above the contact line (beside it the line had 130-200 px and broke the email
   address in the middle) */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .ap-get-person { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ap-get-portrait { width: clamp(150px, 14vw, 190px); margin-left: 10px; }
}
/* phones under 375 px: the nine bookmarks close up so all of them show on the card (the ninth was cut at the card edge) */
@media (max-width: 374.98px) {
  .ap-bfile { --bf-w: 28px; --bf-gap: 2px; }
}
/* the second question's photo is now the couple on the sofa without the person seen from behind (her head was cut by
   the old photo's top edge); her portrait shape keeps both heads in the upper part of every frame */
.ap-faq-photos .q2 { object-position: 50% 15%; }
/* phones: the ribbon-tab button's label wraps in balanced lines ("like" was left alone on the second line at 320 px) */
.ap-tab-btn { text-wrap: balance; }
/* tablets (768-991 px): the quote stands beside the portrait (alone at the left of the panel the portrait left about
   330 px of empty oxblood beside it); the heading and the reasons run below across the whole width. The steps' text
   uses the page width (in a 490 px column the right third of the page stayed empty) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .ap-why-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--gutter) + 14px); align-items: start; }
  .ap-why-text { display: contents; }
  .ap-why-portrait { grid-column: 1; grid-row: 1; width: auto; }
  .ap-quote { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 52px; }
  .ap-why h2, .ap-reasons { grid-column: 1 / -1; }
  .ap-steps p { max-width: none; }
}
/* phones: a link's arrow never stands alone on a new line ("Read all frequently asked questions" and "How matching
   works, including ..." wrapped with only the arrow on their last line): their lines are balanced. The questions'
   column is a flex column there, so its closing link is a block (its 12 px tap padding is given back by the margins) */
@media (max-width: 767.98px) {
  .ap-how-actions .link-arrow { text-wrap: balance; }
  .ap-faq-main { display: flex; flex-direction: column; }
  .ap-faq-main > .link-arrow { align-self: flex-start; margin-block: -12px; text-wrap: balance; }
}
/* phones: a field number never stands alone above its label (a label too long for the line wrapped away from it: "06"
   over "What kind of legal matter is this?"); the label wraps beside its number with a hanging indent, the help text
   ("optional ...") under it */
@media (max-width: 575.98px) {
  .ap-intake .form-label { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
  .ap-intake .form-label .form-text { grid-column: 2; }
}
/* the form section from 992 px: the note, the portrait and the contact line follow the lede (held at the foot of the
   column by an auto margin, they left a 360-480 px empty band of oxblood between the lede and the note) */
@media (min-width: 992px) {
  .ap-handy { margin-top: clamp(28px, 2.6vw, 44px); }
}
/* wide screens (2025 px and up): the hero's big oxblood circle still bleeds off the left edge of the window, as it does
   up to 1920 px (in the 1320 px frame it floated about 230 px in from the edge at 2560); it grows to the left and keeps
   its right edge and its top, so the portrait keeps its crescent rim */
@media (min-width: 2025px) {
  .ap-disc { left: calc((100vw - var(--container)) / -2 - 40px); width: calc(103.5% + (100vw - var(--container)) / 2 + 40px); }
}
/* the guide file's stamp breaks only before a dot, never after one, so no dot is left hanging at a line's end
   ("No. 01 of 09 ·" at 320 px, "... 2026 ·" at 768 px); each part stays whole. Phones keep the reading time on its
   own line */
.ap-bf-meta { display: block; }
.ap-bf-meta > * { white-space: nowrap; }
.ap-bf-meta > :not(:last-child) { margin-right: 10px; }
.ap-bf-dot::before { content: "\200B"; }
@media (max-width: 767.98px) {
  .ap-bf-min { display: block; }
}
.ap-bf-meta > .ap-bf-dot { white-space: normal; }

/* ==== every device looks finished (photos + devices pass, step 5 continued, 2026-10-16) ============================= */
/* the guide's stamp is a wrapping row again (as one line of inline text the date and the reading time ran together in
   the page's text: "September 14, 20266 min read"). The dots are drawn in front of the date and of the reading time,
   so a line breaks only before a dot and never leaves one hanging at its end; phones keep the reading time on its own
   line, without a dot */
.ap-bf-meta { display: flex; }
.ap-bf-meta > :not(:last-child) { margin-right: 0; }
.ap-bf-meta > .ap-bf-dot { display: none; }
.ap-bf-meta > time::before, .ap-bf-meta > .ap-bf-min::before { content: "\00b7"; content: "\00b7" / ""; margin-right: 10px; color: var(--brass); }
@media (max-width: 767.98px) {
  .ap-bf-meta > .ap-bf-min::before { content: none; }
}

/* ==== fresh-eyes device check (final fix, 2026-10-16) ==================================================================
   Findings of three fresh lookers who saw every page at 7 sizes; no wording changed anywhere. */
/* the hero's foot: a 2 px parchment band over its last rows, so the big oxblood circle never shows through the curve's
   anti-aliased bottom row as a stray light-brown line at the left (seen at 1024 and 1280 px) */
@media (min-width: 768px) {
  .ap-hero::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 2px; background: var(--parchment); pointer-events: none; }
}
/* the step arrow runs on into the column gap inside its title's own box (a right padding as wide as that run), so the
   title's box holds everything it draws; the arrow and the line breaks are exactly where they were */
@media (min-width: 992px) {
  .ap-steps li:not(:last-child) h3 { margin-right: calc(-1 * var(--step-gap) + 10px); padding-right: calc(var(--step-gap) - 10px); }
}
/* the practice areas' sticky column on short laptop screens (992 px and up, 820 px tall or less): a smaller heading, so
   the heading, the photo and the "Not sure which one?" card fit the window while the column is stuck (at 1024 x 768 the
   card's link sat about 90 px below the screen, at 1280 x 720 about 40 px) */
@media (min-width: 992px) and (max-height: 820px) {
  .ap-areas-sticky h2 { font-size: 32px; }
  .ap-areas-sticky > .ap-areas-photo { margin-top: 24px; }
  .ap-unsure { margin-top: 20px; }
}
/* the questions on tablets (768-991 px): the list runs the full width, level with the photo above it (it shrank to its
   content and stopped about 46 px short of the photo's right edge) */
@media (max-width: 991.98px) {
  .ap-faq-grid { align-items: stretch; }
}
/* the guide file on tablets (768-991 px): the photo across the top of the card, the guide under it, as on phones (beside
   the text the 3:4 frame stood at the foot of its column under an empty band of about 110 px); the nine bookmarks hang
   from the card's top edge at the left, over the margin above the photo */
@media (min-width: 768px) and (max-width: 991.98px) {
  .ap-bfile { --bf-w: 34px; --bf-gap: 10px; }
  .ap-bf-marks { left: 0; padding-left: var(--bf-pad); }
  .ap-bf-link { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--bf-len) + var(--bf-open) - 7px + 14px); }
  .ap-bf-photo { grid-column: 1; aspect-ratio: 3 / 2; align-self: start; }
  .ap-bf-text { grid-column: 1; padding: 24px 2px 4px; }
  .ap-bf-meta { margin-bottom: 0; padding-bottom: 16px; }
  .ap-bf-go { margin-top: auto; }
}
/* from 992 to 1279 px the guide's photo fills its column's height (the square frame stood at the foot of the column
   under an empty band of up to 115 px) */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .ap-bf-photo { align-self: stretch; aspect-ratio: auto; }
}
/* the why panel from 992 to 1199 px: the tablet arrangement (the portrait beside the quote, the heading and the reasons
   across the width under both); the narrow 9:20 portrait beside them ended about 245 px above the last reasons */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .ap-why-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--gutter) + 14px); align-items: start; }
  .ap-why-text { display: contents; }
  .ap-why-portrait { grid-column: 1; grid-row: 1; align-self: start; }
  .ap-why-portrait img { height: auto; aspect-ratio: 3 / 4; }
  .ap-quote { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 52px; }
  .ap-why h2, .ap-reasons { grid-column: 1 / -1; }
}
/* the twelve practice files on phones: the title stands beside the photo and the line runs under both, across the card
   (in the 140-190 px column beside the photo the title and the line took five to seven short lines, with an empty block
   under the thumbnail) */
@media (max-width: 767.98px) {
  .ap-file { grid-template-rows: auto auto 1fr; }
  .ap-file-body { display: contents; }
  .ap-file h3 { grid-column: 2; grid-row: 2; align-self: start; }
  .ap-file-line { grid-column: 1 / -1; grid-row: 3; margin: 12px 0 0; }
}
/* phones: the letterhead's practice links get rows of 40 px or more (30 px before) */
@media (max-width: 699.98px) {
  .ap-letterhead .ap-lh-list li a { padding-block: 9px; }
}
/* phones: each guide bookmark's tap area takes its whole share of the row (the gaps between the buttons closed), while
   the ribbon drawn inside it keeps its width (30 px, 28 px under 375 px): targets of about 35-40 px from 360 px (30 px
   before); the nine still fit the card, so none is cut and the row never has to scroll */
@media (max-width: 767.98px) {
  .ap-bfile { --bf-gap: 0px; --bf-w: min(40px, calc((100vw - 2 * var(--margin) - var(--bf-pad) - 2px) / 9)); --bf-rib: 30px; }
  .ap-bf-mark::before { inset: 0 max(0px, calc((var(--bf-w) - var(--bf-rib)) / 2)); }
  .ap-bf-mark::after { left: calc(max(0px, (var(--bf-w) - var(--bf-rib)) / 2) + 5px); right: calc(max(0px, (var(--bf-w) - var(--bf-rib)) / 2) + 5px); }
}
@media (max-width: 374.98px) {
  .ap-bfile { --bf-rib: 28px; }
}
/* phones under 375 px: the bound notice and the request form keep wider text columns (about 26 characters a line in the
   notice, a 185 px consent box); the binding ribbon and the tab narrow with the page's margin. The consent text wraps
   round its checkbox and uses the box's full width under it (wording, checkbox and order unchanged) */
@media (max-width: 374.98px) {
  .ap-notice-page { padding: 52px 14px 32px 40px; }
  .ap-notice-page::before { left: 10px; width: 16px; }
  .ap-notice-page::after { left: 13px; width: 10px; }
  .ap-notice-head { margin-left: -30px; padding-left: 30px; }
  .ap-notice-head::after { left: 19px; }
  .ap-intake .form-card { padding-inline: 14px; }
  .ap-intake .consent { display: flow-root; padding: 12px; }
  .ap-intake .consent > .form-check-input { float: left; margin: 3px 10px 2px 0; }
}
/* wide screens shown at 125 % (2200 px and up, 1300 px tall or more; frame.css): lengths in vw/vh grow with the zoom, so
   the hero circle's formula and the sticky column's height use the zoomed page's own window (100vw / 1.25, 100vh / 1.25) */
@media (min-width: 2200px) and (min-height: 1300px) {
  .ap-disc { left: calc((100vw / 1.25 - var(--container)) / -2 - 40px); width: calc(103.5% + (100vw / 1.25 - var(--container)) / 2 + 40px); }
  .ap-areas-sticky { height: calc(100vh / 1.25 - var(--header-h-scrolled) - 56px); }
}

/* ==== in-between widths (2026-10-16) ==================================================================================
   The form section's heading from about 1132 to 1299 px: on one line ("What happened?") it ran past the oxblood curve,
   which is still narrow at the heading's height there, so its last letter and the "?" stood on the parchment in
   parchment colour and could not be read (seen at 1200 px; at 1280 px the "?" still touched the curve's edge). It now
   breaks as it does from 992 px, "What / happened? / Tell us below.", every line well inside the curve; from 1300 px
   the one-line heading clears the curve with room to spare. */
@media (min-width: 992px) and (max-width: 1299.98px) {
  .ap-get-aside h2 { max-width: 8em; }
}