/* Siebert Creative — /review-checklist only.
   The $79 Review Checklist landing page. Loaded AFTER design-system.css and
   site.css, and only by review-checklist.html.

   This page is a PARALLEL of /brief-builder, not an edit of it. The shell, the
   band rhythm and every shared component come from site.css unchanged: .band /
   .band--cream / .band--sand / .band--forest, .band__inner with .w-wide /
   .w-reading / .w-narrow, .eyebrow, .title, .standfirst, .btn (.btn--primary /
   .btn--ghost), .fineprint, .s4-grid, .faq-*, .site-nav, .site-footer. None of
   it is restated here, and nothing here touches css/brief-builder.css.

   What IS here is the handful of patterns this page needs and the site has no
   component for: the §1 hero, its demo cover and the full-screen demo, the white quote card and the
   translation pair, the demo card, the scored card, the own-it aside and the
   two-tier offer. Plus two blocks REUSED from other pages, under their own
   values: the homepage's §4 old-way/system-way pair (§8) and /brief-builder's
   stepper rail, .bb-rail (§10), copied here because this page does not load
   css/brief-builder.css.

   THE NAV IS NOT HERE ANY MORE. This page used to carry its own brand label
   beside the monogram and its own rule putting the buy button back at phone
   widths. Both are gone: the shared product nav in css/site.css names the page
   in its link row and keeps one primary CTA at every width, so there is
   nothing left for this sheet to say about it.

   Colour rule inherited from design-system.css and followed throughout:
   SAND on cream, GOLD on forest. Radii are the site's 4px.

   MOBILE FIRST. Every rule below is written for the phone and widened at
   min-width, because the hero is the whole page at 390px: the pitch, the proof
   and the demo have to land before anything has to be scrolled for. Nothing
   here may set a width a 390px viewport cannot hold - no horizontal scroll is
   a hard requirement of this page, not a nicety.
   ============================================================ */

/* ============================================================
   §1 — THE HERO: copy + CTA pair, and the cover that opens the demo
   One hero at every width. Copy left and the cover right from 900px; below
   that one column, copy then cover. The columns are the site's .split,
   re-proportioned so the cover gets the larger share.
   ============================================================ */
.rc-hero__copy{text-align:center;min-width:0;}
.rc-hero__demo{min-width:0;}
.rc-hero .eyebrow{text-align:center;align-self:center;margin-bottom:16px;}
.rc-hero__h{font-family:var(--serif);font-weight:400;line-height:1.1;
  letter-spacing:-.01em;color:var(--ink);text-wrap:balance;
  font-size:clamp(34px,24px + 3.4vw,58px);margin:0;}
.rc-hero__h b{color:var(--sand-text);font-weight:400;}
.rc-hero__p{font-family:var(--sans);font-size:clamp(16px,15px + 0.3vw,19px);
  line-height:1.6;color:var(--ink-mid);margin:16px auto 0;max-width:26rem;}
.rc-hero .rc-hero__ctas{margin-top:28px;justify-content:center;}
/* #s1 is an id, so these outrank site.css's bare .split collapse at 768px;
   both widths are therefore stated here. */
#s1 .split{grid-template-columns:1fr;gap:32px;}
@media(min-width:900px){
  #s1 .split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:clamp(36px,8px + 3.2vw,64px);}
  .rc-hero__copy{text-align:left;}
  .rc-hero .eyebrow{text-align:left;align-self:flex-start;}
  .rc-hero__p{margin-left:0;}
  .rc-hero .rc-hero__ctas{justify-content:flex-start;}
}

/* THE COVER. The demo's review screen as a full-colour still in a hairline
   frame, and under it a white footer bar with the prompt and "Start the
   sample review". Nothing sits over the still: an undimmed screenshot reads
   as a product you can open. The whole thing is one link (to the demo, for a
   reader with no JavaScript) that js/review-checklist.js turns into the
   full-screen opener. It lifts a little on hover.

   From 900px the still is the landscape desk capture at its own ratio. Below
   it the phone capture is cropped from the top to a capped height, so the
   page still scrolls past it. */
/* THE MAT AND THE WINDOW (revision 3). The tool shares the page's palette, so
   on a phone, stacked under the buttons, the cover used to read as one more
   section. It now sits on a deeper sand mat, inside a browser window - a
   chrome bar with three dots and the demo's address, a real border and a
   lifted shadow - so it reads at a glance as a separate thing you open. */
.rc-hero__demo{background:#E6DFD1;border-radius:8px;
  padding:clamp(14px,6px + 2.4vw,28px);}
.rc-cover{display:flex;flex-direction:column;border:1px solid #C9C1B2;
  border-radius:8px;overflow:hidden;background:var(--color-bg-card);
  color:inherit;text-decoration:none;cursor:pointer;
  box-shadow:0 2px 4px rgba(26,25,22,.08),0 14px 36px rgba(26,25,22,.18);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);}
.rc-cover:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(26,25,22,.08),0 20px 44px rgba(26,25,22,.22);}
.rc-cover__chrome{display:flex;align-items:center;gap:12px;flex:none;
  height:34px;padding:0 12px;background:#EFEBE3;border-bottom:1px solid #D6CFC2;}
.rc-cover__dots{display:flex;gap:6px;flex:none;}
.rc-cover__dots span{width:9px;height:9px;border-radius:50%;background:#CFC7B8;}
.rc-cover__url{flex:1;min-width:0;max-width:340px;margin:0 auto;
  font-family:var(--sans);font-size:11.5px;line-height:22px;color:var(--ink-mid);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--color-bg-card);border-radius:4px;padding:0 10px;}
.rc-cover:focus-visible{outline:2px solid var(--forest);outline-offset:3px;}
.rc-cover__shot{display:block;height:min(56svh,400px);overflow:hidden;
  border-bottom:1px solid var(--line);}
.rc-cover__shot picture,.rc-cover__img{display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center;}
@media(min-width:900px){
  .rc-cover__shot{height:auto;aspect-ratio:1488/1008;}
}
.rc-cover__bar{display:flex;flex-direction:column;align-items:stretch;gap:10px;
  padding:16px;text-align:center;}
@media(min-width:520px){
  .rc-cover__bar{flex-direction:row;align-items:center;
    justify-content:space-between;gap:16px;padding:14px 16px 14px 20px;
    text-align:left;}
}
.rc-cover__prompt{font-family:var(--sans);font-size:14px;font-weight:600;
  line-height:1.4;color:var(--ink-mid);}
/* Side by side when the window is wide enough for both on one line; the
   button drops under the prompt, full width, when it is not. */
@media(min-width:520px){
  .rc-cover__bar{flex-wrap:wrap;}
  .rc-cover__prompt{flex:1 0 auto;}
  .rc-cover__btn{flex:1 0 auto;}
}
.rc-cover__btn{justify-content:center;font-size:16px;padding:14px 24px;
  min-height:52px;white-space:nowrap;}
@media(min-width:900px){
  .rc-cover__bar{gap:12px;padding:12px 12px 12px 16px;}
  .rc-cover__btn{padding:14px 18px;}
}
.rc-cover:hover .rc-cover__btn{background:var(--accent-hov);}
.rc-cover:focus-visible .rc-cover__btn{outline:none;}

/* THE FULL-SCREEN DEMO. A <dialog> opened with showModal() that fills the
   viewport at every width: a 52px bar with the title and the close control,
   and the demo under it. dvh follows the phone's browser chrome, so the
   bottom of the demo is never under the toolbar. */
.rc-dlg{position:fixed;inset:0;width:100%;height:100%;height:100dvh;
  max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--color-bg-card);color:var(--ink);}
.rc-dlg[open]{display:flex;flex-direction:column;}
.rc-dlg::backdrop{background:rgba(26,25,22,.6);}
.rc-dlg__bar{flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:12px;height:52px;padding:0 8px 0 16px;background:var(--forest);
  color:var(--cream);}
.rc-dlg__t{font-family:var(--sans);font-size:14px;font-weight:600;
  color:var(--cream);margin:0;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
@media(max-width:419px){.rc-dlg__t span{display:none;}}
.rc-dlg__x{display:inline-flex;align-items:center;gap:6px;flex:none;
  min-height:44px;padding:0 12px;border:1px solid rgba(247,244,238,.4);
  border-radius:4px;background:transparent;color:var(--cream);
  font:600 14px/1 var(--sans);cursor:pointer;}
.rc-dlg__x:hover{border-color:var(--cream);}
.rc-dlg__x:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px;}
.rc-dlg__if{flex:1;display:block;width:100%;min-height:0;border:0;}
/* The page behind does not scroll while the demo is open. */
html.rc-dlg-open,html.rc-dlg-open body{overflow:hidden;}

/* THE CTA PAIR. Demo first, $79 second, at every width. On a phone they are
   two full-width stacked buttons - a 390px screen cannot hold them side by
   side without one of them wrapping mid-word - and they sit side by side from
   520px up. */
.rc-ctas{display:flex;flex-direction:column;align-items:stretch;gap:12px;
  margin:0;}
@media(min-width:520px){
  .rc-ctas{flex-direction:row;align-items:center;flex-wrap:wrap;}
}
.rc-ctas .btn{justify-content:center;}
/* The demo button is the primary action on every band it appears on, and it
   carries the play glyph so it reads as "run something" rather than "buy
   something". */
.rc-demo-btn{gap:9px;}
.rc-demo-btn svg{width:18px;height:18px;flex:none;}
/* The $79 beside it is the secondary: the same size and the same target area,
   bordered rather than filled. A price must never be text that merely looks
   tappable, so it is a real button here and everywhere else on the page. */
.rc-buy-2nd{background:transparent!important;color:var(--forest)!important;
  border:1px solid var(--line)!important;}
.rc-buy-2nd:hover,.rc-buy-2nd:focus{background:transparent!important;
  color:var(--forest)!important;border-color:var(--forest)!important;}
/* The forest bands' pair: gold primary, hairline-cream secondary. */
.rc-buy-2nd--onforest{color:var(--cream)!important;
  border-color:rgba(247,244,238,.4)!important;}
.rc-buy-2nd--onforest:hover,.rc-buy-2nd--onforest:focus{color:var(--cream)!important;
  border-color:var(--cream)!important;}

/* ============================================================
   THE FOUNDER LINE  (top of §2)
   The human-made proof, quiet and small: it backs the quotes under it up
   rather than competing with them. It used to sit in the old static hero;
   neither of the two heroes that replaced it has room, so it is the first
   thing in the body instead and shows at both widths.
   ============================================================ */
.rc-madeby{font-family:var(--sans);font-size:14px;line-height:1.55;
  color:var(--ink-mid);margin:0 0 28px;max-width:62ch;text-wrap:pretty;}

/* ============================================================
   QUOTE CARD  (§2 proof strip)
   The §6 .proof-card anatomy from site.css - terracotta quote mark, serif
   body with a sand emphasis span, rule, attribution - on WHITE rather than
   cream, because both of this page's proof blocks sit on a light band and the
   cream card would vanish into it. Same delta, same reason, as the hero quote
   card on /brief-builder.

   The two Caitlin quotes are on the page once, here. The "From the first
   beta round" band that repeated them was cut on 2026-10-27.
   ============================================================ */
.rc-quotes{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch;}
@media(min-width:760px){
  .rc-quotes{grid-template-columns:1fr 1fr;}
}
.rc-quote{display:flex;flex-direction:column;background:var(--color-bg-card);
  border-radius:4px;padding:30px 26px 26px;}
/* The quote mark is set the way the hero card on /brief-builder sets it - a
   fixed height under a very tight line-height - rather than the sales page's
   way, because at this size .72 leaves a hole between the glyph and the first
   line of the quote. */
.rc-quote__qm{display:block;font-family:var(--serif);font-size:76px;
  color:var(--sand-text);line-height:.4;height:24px;margin:0 0 6px -3px;
  user-select:none;}
.rc-quote__body{font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,17.667px + 0.37vw,22px);line-height:1.45;color:var(--ink);
  margin:0;}
.rc-quote__body .rc-quote__e{color:var(--sand-text);}
.rc-quote__foot{margin-top:auto;padding-top:22px;}
.rc-quote__rule{border-top:1px solid var(--line);margin-bottom:13px;}
.rc-quote__name{font-family:var(--sans);font-size:13px;line-height:1.45;
  color:var(--ink-mid);margin:0;}
.rc-quote__tool{font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px;}

/* ============================================================
   TRANSLATION PAIR  (§2)
   One quiet before, one clear after, in this order of weight:
     1. the payoff - largest serif, darkest ink, its key phrase in
        terracotta: where the eye lands;
     2. the connector - a bold terracotta flow line (+ "becomes"), never a
        hairline: what moves the eye;
     3. the vague note - small, tilted, low-contrast sticky note sitting on
        the sand: what the eye leaves.
   The placed comment above the payoff is ONE quiet element (pin, words,
   area tag) with no card around it. Left to right from 620px; below it the
   three stack top to bottom, the line turning to point down.
   ============================================================ */
.rc-xl{display:grid;grid-template-columns:1fr;justify-items:start;
  gap:6px;margin-top:28px;}
@media(min-width:620px){
  .rc-xl{grid-template-columns:auto auto minmax(0,1fr);align-items:center;
    justify-items:stretch;gap:14px;margin-top:36px;}
}

/* 3. The sticky note: muted paper, soft ink, a slight tilt and a soft shadow -
   it reads as something stuck on the work, not something to act on. */
.rc-xl__from{padding:4px 0 0 4px;}
.rc-xl__said{display:inline-block;font-family:var(--sans);font-style:italic;
  font-size:15px;line-height:1.3;color:var(--ink-mid);
  background:#F6F1E3;border:1px solid #E7E0CF;border-radius:2px;
  padding:12px 16px 14px;margin:0;transform:rotate(-2.5deg);
  box-shadow:0 2px 6px rgba(26,25,22,.07);}

/* 2. The connector. Two drawings, one shown: across from 620px, down below. */
.rc-xl__flow{display:flex;align-items:center;gap:10px;color:var(--accent);
  padding:6px 0 6px 22px;}
.rc-xl__line{display:block;flex:none;}
.rc-xl__line--h{display:none;width:96px;height:32px;}
.rc-xl__line--v{width:34px;height:62px;}
.rc-xl__verb{font-family:var(--serif);font-style:italic;font-size:17px;
  color:var(--sand-text);}
@media(min-width:620px){
  .rc-xl__flow{flex-direction:column;gap:2px;padding:0 4px;}
  .rc-xl__line--h{display:block;}
  .rc-xl__line--v{display:none;}
  .rc-xl__verb{order:-1;font-size:16px;}
}

/* 1. The after: the placed comment, then the payoff, largest in the block. */
.rc-xl__to{min-width:0;}
.rc-xl__note{display:inline-flex;flex-wrap:wrap;align-items:center;
  gap:6px 10px;margin:0 0 14px;}
.rc-xl__pin{display:block;flex:none;width:22px;height:22px;color:var(--accent);}
.rc-xl__said2{font-family:var(--sans);font-size:16px;font-weight:600;
  line-height:1.3;color:var(--ink);margin:0;}
.rc-xl__area{font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.3;
  border-radius:4px;padding:4px 8px;white-space:nowrap;color:var(--forest);
  background:var(--cream);}
.rc-xl__means{font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,20px + 1.6vw,36px);line-height:1.22;
  letter-spacing:-.005em;color:var(--ink);text-wrap:pretty;margin:0;}
.rc-xl__means b{font-weight:400;color:var(--sand-text);}
/* "actually" stays in the terracotta phrase it belongs to: design-system.css
   otherwise sets every <i> in ink. */
.rc-xl__means b i{color:inherit;}

/* ============================================================
   DEMO CARD  (§3)
   The band's whole job is to get a thumb onto the demo, so the copy and the
   button live in one card and the button is full width inside it on a phone.
   The card is white on cream for the same reason the quote card is.
   ============================================================ */
.rc-demo{background:var(--color-bg-card);border:1px solid var(--line);
  border-radius:4px;padding:clamp(26px,18px + 2.2vw,40px);max-width:760px;}
.rc-demo .title{margin-bottom:16px;}
.rc-demo__body{font-family:var(--sans);font-size:17px;line-height:1.7;
  color:var(--ink-mid);margin:0 0 24px;}
.rc-demo__body b{color:var(--forest);font-weight:600;}
.rc-demo .rc-demo-btn{display:flex;width:100%;justify-content:center;
  font-size:16px;padding:16px 24px;min-height:52px;box-sizing:border-box;}
@media(min-width:520px){
  .rc-demo .rc-demo-btn{display:inline-flex;width:auto;}
}
.rc-demo__cap{font-family:var(--sans);font-size:13px;color:var(--ink-soft);
  margin:14px 0 0;}

/* ============================================================
   PAIN COLUMN  (§4)
   The same narrow centred column /brief-builder's pain band uses, so the two
   forest pain bands read as the same device. The inner padding is what keeps
   the column off the watermark ring behind it; it goes at phone widths, where
   the band's own padding is already the whole margin there is.
   ============================================================ */
.rc-pain-col{max-width:640px;padding:0 60px;}
@media(max-width:768px){
  .rc-pain-col{padding:0;}
}
.rc-fbody{font-family:var(--sans);font-size:18px;line-height:1.7;
  color:#CAD7CF;margin:0 0 18px;}
.rc-fbody i{color:var(--color-bg);}
.rc-fbody b{color:var(--color-bg);font-weight:600;}
/* The gold serif pull line on forest. One per band at most: it is the line the
   reader is meant to carry away, and two of them cancel each other out. */
.rc-fpull{font-family:var(--serif);font-style:italic;font-size:var(--text-2xl);
  line-height:1.2;color:var(--color-gold);margin:28px 0;}

/* ============================================================
   THE SCORED CARD  (§6)
   The tool's own review card, drawn from its screens so the reader sees the
   grading mechanism: a sand "Reviewing as" strip, the white card with the 12
   areas and their 1 to 5 circles, and a cream foot with the combined grade.
   One box: the pricing card's 1px hairline and 4px radius, no shadow.

   WHOSE CARD IS FILLED is one attribute on .rc-sc, data-who="m" (Maya) or
   "j" (Jordan), which initScorecard in js/review-checklist.js swaps from the
   two pill buttons. Every circle that is someone's score carries .is-m and/or
   .is-j; every flag and flagged row carries --m and/or --j. Nothing is
   re-rendered. With JavaScript off the markup's data-who="m" shows Maya.

   The tool's own values: filled circles in its muted green-grey, a flagged
   row tinted blush with a terracotta dot after the name and the flag note
   under it. Below 620px the circles drop under the description.
   ============================================================ */
.rc-sc{max-width:860px;margin:0 auto;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:var(--color-bg-card);
  color:var(--ink);text-align:left;}
.rc-sc__lab{font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin:0;}

/* 1. Reviewing as. */
.rc-sc__who{background:var(--sand);border-bottom:1px solid var(--line);
  padding:14px clamp(14px,6px + 2vw,28px);display:flex;flex-direction:column;
  gap:10px;}
@media(min-width:620px){
  .rc-sc__who{flex-direction:row;align-items:center;gap:16px;}
}
.rc-sc__tabs{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
@media(min-width:620px){
  .rc-sc__tabs{flex-direction:row;flex-wrap:wrap;align-items:center;}
}
.rc-sc__tab{display:inline-flex;align-items:center;gap:6px;min-height:40px;
  padding:0 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--cream);color:var(--forest);font:600 14px/1.2 var(--sans);
  cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.rc-sc__tab span{font-weight:400;color:var(--ink-mid);}
.rc-sc__tab:hover{border-color:var(--forest);}
.rc-sc__tab:focus-visible{outline:2px solid var(--forest);outline-offset:2px;}
.rc-sc__tab[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);
  color:var(--cream);}
.rc-sc__tab[aria-pressed="true"] span{color:#CAD7CF;}
/* "Your review here": dashed terracotta until it is picked, so it reads as an
   open seat rather than a third sample. */
.rc-sc__tab--you{border-style:dashed;border-color:var(--accent);
  color:var(--sand-text);background:transparent;}
.rc-sc__tab--you:hover{border-color:var(--sand-text);}
.rc-sc__tab[hidden]{display:none;}

/* 2. The card. */
.rc-sc__card{padding:6px clamp(14px,6px + 2vw,28px) 10px;}
.rc-sc__head{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:4px 16px;padding:14px 0 6px;}
.rc-sc__legend{font-family:var(--sans);font-size:12.5px;color:var(--ink-mid);margin:0;}
.rc-sc__gn{display:flex;align-items:center;gap:8px;font-family:var(--sans);
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--forest);margin:20px 0 4px;}
.rc-sc__gn svg{flex:none;width:14px;height:14px;}
.rc-sc__gn::after{content:"";flex:1;border-top:1px solid var(--line);margin-left:6px;}
.rc-sc__row{display:grid;grid-template-columns:22px minmax(0,1fr);
  gap:8px 8px;padding:12px 10px 14px 6px;border-bottom:1px solid #EEEBE5;
  transition:background var(--dur) var(--ease);}
.rc-sc__grp .rc-sc__row:last-child{border-bottom:0;}
@media(min-width:620px){
  .rc-sc__row{grid-template-columns:24px minmax(0,1fr) auto;gap:6px 18px;
    align-items:start;}
}
.rc-sc__n{font-family:var(--sans);font-size:12px;color:var(--ink-soft);
  padding-top:3px;}
.rc-sc__txt{min-width:0;}
.rc-sc__name{display:flex;align-items:center;gap:7px;font-family:var(--sans);
  font-size:15px;font-weight:600;line-height:1.3;color:var(--ink);margin:0 0 3px;}
.rc-sc__d{font-family:var(--sans);font-size:13.5px;line-height:1.45;
  color:var(--ink-mid);margin:0;max-width:44ch;}
.rc-sc__dot{display:none;flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--accent);}
.rc-sc__cs{grid-column:2;display:flex;gap:5px;}
@media(min-width:620px){
  .rc-sc__cs{grid-column:3;grid-row:1;}
}
.rc-sc__c{display:flex;align-items:center;justify-content:center;width:28px;
  height:28px;border-radius:50%;border:1px solid #DDD9D1;
  font-family:var(--sans);font-size:12px;color:var(--ink-soft);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
[data-who="m"] .rc-sc__c.is-m,[data-who="j"] .rc-sc__c.is-j{background:#8E9B93;
  border-color:#8E9B93;color:#fff;font-weight:600;}
/* The reader's card: the static circles give way to a radio group in the
   same place, a little larger because these ones are tapped. */
.rc-sc__ys{grid-column:2;display:none;gap:6px;}
@media(min-width:620px){
  .rc-sc__ys{grid-column:3;grid-row:1;}
}
[data-who="y"] .rc-sc__cs{display:none;}
[data-who="y"] .rc-sc__ys{display:flex;}
.rc-sc__y{position:relative;display:block;cursor:pointer;}
.rc-sc__y input{position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;}
.rc-sc__y span{display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;border:1px solid #CFC9BE;
  font-family:var(--sans);font-size:13px;color:var(--ink-mid);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.rc-sc__y:hover span{border-color:var(--forest);color:var(--forest);}
.rc-sc__y input:focus-visible + span{outline:2px solid var(--forest);outline-offset:2px;}
.rc-sc__y input:checked + span{background:var(--forest);border-color:var(--forest);
  color:#fff;font-weight:600;}
.rc-sc__flag{grid-column:2 / -1;display:none;align-items:center;gap:8px;
  font-family:var(--sans);font-size:13.5px;line-height:1.4;color:var(--ink);
  margin:2px 0 0;}
.rc-sc__flag svg{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;
  background:var(--accent);color:#fff;}
[data-who="m"] .rc-sc__row--flm,[data-who="j"] .rc-sc__row--flj{background:#FBEFE9;}
[data-who="m"] .rc-sc__row--flm .rc-sc__dot,[data-who="j"] .rc-sc__row--flj .rc-sc__dot,
[data-who="m"] .rc-sc__flag--m,[data-who="j"] .rc-sc__flag--j{display:flex;}
/* Each row's score, read out for a screen reader in place of the circles. */
.rc-sc__sr{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;margin:0;}
.rc-sc__sr span{display:none;}
[data-who="m"] .rc-sc__by-m,[data-who="j"] .rc-sc__by-j{display:inline;}

/* 3. The combined grade. */
.rc-sc__sum{background:var(--cream);border-top:1px solid var(--line);
  padding:18px clamp(14px,6px + 2vw,28px) 22px;}
.rc-sc__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;margin-top:12px;}
@media(min-width:620px){
  .rc-sc__tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
}
.rc-sc__tile{background:var(--color-bg-card);border:1px solid var(--line);
  border-radius:4px;padding:14px 14px 12px;}
/* A tile whose number just moved: a brief blush, so the reader sees their tap
   land in the grade. */
.rc-sc__tile.is-upd{animation:rc-upd 900ms var(--ease);}
@keyframes rc-upd{from{background:#FBEFE9;border-color:var(--accent);}}
@media(prefers-reduced-motion:reduce){.rc-sc__tile.is-upd{animation:none;}}
.rc-sc__tl{font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--forest);margin:0 0 6px;}
.rc-sc__tv{font-family:var(--serif);font-size:36px;line-height:1;
  color:var(--ink);margin:0;}
.rc-sc__tv::after{content:" / 5";font-family:var(--sans);font-size:13px;
  color:var(--ink-soft);}
.rc-sc__close{max-width:640px;margin:28px auto 0;text-align:center;}

/* ============================================================
   CONTRAST PAIR  (§8)
   The homepage's §4 "old way / system way" block, value for value: the
   .s4-grid columns, the muted sand card on the left with its soft label, the
   white card on the right with the green label and the larger, darker line.
   Trimmed to one line a side.
   ============================================================ */
.rc-vs{text-align:left;margin-top:40px;}
.rc-vs__old{background:#F3F0E8;border:1px solid var(--line);border-radius:8px;
  padding:26px 30px;}
.rc-vs__rc{background:#FFFFFF;border:1px solid var(--line);border-radius:8px;
  padding:30px 36px;}
.rc-vs__lbl{font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 18px;}
.rc-vs__rc .rc-vs__lbl{color:#2F6B4F;}
.rc-vs__body{font-family:var(--sans);font-size:14.5px;line-height:1.4;
  color:var(--ink-mid);margin:0;}
.rc-vs__rc .rc-vs__body{font-size:16.5px;color:var(--ink);}

/* ============================================================
   OWN IT  (§9)
   The copy carries the argument; the side math is the receipt. On a phone it
   sits under the copy, from 860px it sits beside it.
   ============================================================ */
.rc-own{display:grid;grid-template-columns:1fr;gap:28px;align-items:start;}
@media(min-width:860px){
  .rc-own{grid-template-columns:1.35fr .65fr;gap:48px;}
}
.rc-math{border:1px solid rgba(247,244,238,.25);border-radius:4px;
  padding:24px 26px;background:rgba(247,244,238,.05);}
.rc-math__lab{font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--color-gold);
  margin:0 0 12px;}
.rc-math__body{font-family:var(--serif);font-size:19px;line-height:1.45;
  color:var(--cream);margin:0;}
.rc-math__body b{color:var(--color-gold);font-weight:400;}
/* "Own" in the headline: italic, bold and terracotta. The self-hosted serif
   is the variable Source Serif 4 (wght 200 to 900), but design-system.css
   only declares its italic at 400 and 600, so a 700 here used to land on the
   600 face and barely read as bold (and site.css's .title b held it at 400
   anyway). The @font-face below declares the same
   latin italic file across the full weight range for this one word's family
   name, so 700 is a true 700 from the font itself, not the browser's faux
   bold. */
@font-face{font-family:'RC Serif Bold';font-style:italic;font-weight:200 900;
  font-display:swap;src:url("https://cdn.prod.website-files.com/6ae35babb9eec88ca1fa1306/fonts/6aea4e7fb4bcd249814e25b5-source-serif-4-italic-latin.woff2") format('woff2');}
.rc-own__own{color:var(--accent);font-weight:700;}
/* The weight goes on the <i>: site.css's .title b pins every <b> in a title
   to 400 and outranks .rc-own__own. */
.rc-own__own i{font-family:'RC Serif Bold',var(--serif);font-weight:700;}
/* design-system.css colours every <i> with the ink token; this one takes the
   terracotta it sits in. */
.rc-own__own i{color:inherit;}

/* ============================================================
   THE STEPPER RAIL  (§10)
   /brief-builder's .bb-rail, rule for rule from css/brief-builder.css (this
   page does not load that sheet). BRIEF -> VARY -> REVIEW -> LEARN, the
   current step filled forest. The one addition is .bb-rail__here, the "you're
   here" line under the filled node. If the BB rail changes, change it here.
   ============================================================ */
.bb-rail{display:flex;align-items:flex-start;justify-content:center;margin:48px auto 0;max-width:640px;}
.bb-rail__node{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto;width:112px;}
.bb-rail__dot{width:52px;height:52px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-weight:400;font-size:20px;}
.bb-rail__node--on .bb-rail__dot{background:var(--forest);color:var(--cream);}
.bb-rail__node--off .bb-rail__dot{background:transparent;border:1px solid var(--line);color:var(--ink-soft);}
.bb-rail__lab{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.bb-rail__node--on .bb-rail__lab{color:var(--forest);}
.bb-rail__node--off .bb-rail__lab{color:var(--ink-soft);}
.bb-rail__link{flex:1;height:1px;background:var(--line);margin-top:26px;min-width:14px;}
.bb-rail__here{font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.02em;color:var(--sand-text);margin-top:-5px;}
@media(max-width:768px){
  .bb-rail{flex-wrap:wrap;gap:16px;}
  .bb-rail__link{display:none;}
  .bb-rail__node{width:44%;}
}

/* ============================================================
   THE OFFER  (§11)
   Two tiers, built from the sales page's pricing card structure for structure:
   a cream panel with a 1px hairline and 4px corners, split into a price row,
   an inclusions row and a CTA row, with the same forest arrow list.

   Both prices are REAL BUTTONS. Nothing in either card is text styled to look
   tappable - the $79 and the $129 are each a full-width <a> with a 52px target.
   ============================================================ */
.rc-tiers{display:grid;grid-template-columns:1fr;gap:20px;align-items:stretch;
  text-align:left;max-width:900px;margin:0 auto;}
@media(min-width:820px){
  .rc-tiers{grid-template-columns:1fr 1fr;}
}
.rc-tier{background:var(--cream);border:1px solid var(--line);border-radius:4px;
  overflow:hidden;display:flex;flex-direction:column;}
.rc-tier--sys{border-color:var(--gold);}
.rc-tier__head{padding:28px 28px 24px;border-bottom:1px solid var(--line);}
.rc-tier__eb{font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 16px;}
.rc-tier__price{display:block;font-family:var(--serif);font-size:56px;
  font-weight:400;color:var(--ink);line-height:1;margin-bottom:4px;}
.rc-tier__term{font-family:var(--sans);font-size:15px;color:var(--ink-mid);
  margin:0;}
.rc-tier__list{padding:22px 28px;border-bottom:1px solid var(--line);flex:1;}
.rc-tier__list ul{list-style:none;padding:0;margin:0;display:flex;
  flex-direction:column;gap:10px;}
.rc-tier__list li{display:grid;grid-template-columns:16px 1fr;gap:0 8px;
  font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--ink);
  align-items:baseline;}
.rc-tier__list li::before{content:"\2192";color:var(--forest);font-weight:600;}
.rc-tier__list b{color:var(--forest);font-weight:600;}
.rc-tier__foot{padding:22px 28px;}
.rc-tier__foot .btn{display:flex;width:100%;justify-content:center;
  font-size:16px;padding:16px 20px;min-height:52px;box-sizing:border-box;
  text-align:center;}
.rc-tier__fine{font-family:var(--sans);font-size:12.5px;line-height:1.55;
  color:var(--ink-soft);margin:14px 0 0;padding:0;list-style:none;}
.rc-tier__fine li + li{margin-top:5px;}
.rc-team{font-family:var(--sans);font-size:15px;line-height:1.65;
  color:#CAD7CF;text-align:center;max-width:620px;margin:32px auto 0;}
.rc-team b{color:var(--color-bg);font-weight:600;}

/* ============================================================
   REVISION 4 (2026-10-28), all inside §6
   ============================================================ */

/* N/A, after the 5 on every row and on all three cards: an outlined pill the
   same height as the circles beside it. It is never filled on Maya's or
   Jordan's card; on the reader's it fills like a picked circle. */
.rc-sc__c--na{width:auto;padding:0 9px;border-radius:999px;font-size:11px;
  letter-spacing:.04em;}
.rc-sc__y--na span{width:auto;padding:0 10px;border-radius:999px;
  font-size:11.5px;letter-spacing:.04em;}

/* The reader's flag note. A 1 or 2 on "Your review here" blushes the row like
   the samples' flags and opens an optional field under it; a saved note
   shows as a flag line, and a tap on it edits it again. The field is 16px so
   iOS does not zoom the page when it takes focus. */
[data-who="y"] .rc-sc__row.is-yfl{background:#FBEFE9;}
[data-who="y"] .rc-sc__row.is-yfl .rc-sc__dot{display:block;}
.rc-sc__yn{grid-column:2 / -1;display:none;margin:4px 0 0;}
[data-who="y"] .rc-sc__row.is-yfl .rc-sc__yn{display:block;}
.rc-sc__yin{display:block;width:100%;max-width:420px;min-height:40px;
  padding:8px 12px;border:1px dashed var(--accent);border-radius:4px;
  background:#fff;color:var(--ink);font:16px/1.3 var(--sans);}
.rc-sc__yin::placeholder{color:var(--ink-soft);}
.rc-sc__yin:focus{outline:2px solid var(--forest);outline-offset:1px;border-style:solid;}
.rc-sc__yflag{display:flex;align-items:center;gap:8px;width:100%;
  max-width:420px;min-height:40px;padding:0;border:0;background:none;
  font:13.5px/1.4 var(--sans);color:var(--ink);text-align:left;cursor:pointer;}
.rc-sc__yflag svg{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;
  background:var(--accent);color:#fff;}
.rc-sc__yflag:focus-visible{outline:2px solid var(--forest);outline-offset:2px;}
.rc-sc__yflag[hidden],.rc-sc__yin[hidden]{display:none;}

/* "The grade" and the summary's own headers, inside the forest band. */
.rc-grade-head,.rc-rec-head{max-width:680px;margin:72px auto 32px;text-align:center;}
.rc-grade-head__eb{--eyebrow-color:var(--color-gold);text-align:center;
  align-self:center;margin-bottom:14px;}
.rc-grade-head__h,.rc-copy__h{font-family:var(--serif);font-weight:400;
  line-height:1.15;letter-spacing:-.01em;color:#F7F4EE;text-wrap:balance;
  font-size:clamp(26px,22px + 1vw,34px);margin:0 0 16px;}
.rc-rec-head .rc-grade-head__h{margin:0;}

/* ---------- NOTES + PINS ----------
   One cream box: the brief recap bar on top, then the ad and its notes, side
   by side from 820px. The ad is capped so a 4:5 image never runs a phone
   screen and a half tall. */
.rc-pins{max-width:960px;margin:0 auto;border:1px solid var(--line);
  border-radius:4px;background:var(--cream);color:var(--ink);text-align:left;}
/* The brief recap bar, after the tool's own: a light sand strip, a
   terracotta eyebrow, the round line with its stage labels in grey, then
   the four labelled columns split by hairlines. Stacked on a phone, two by
   two from 620px, four in one row under the lead from 900px. */
.rc-brief{background:var(--sand);border-bottom:1px solid var(--line);
  border-radius:3px 3px 0 0;padding:14px clamp(14px,6px + 2vw,24px);
  display:grid;grid-template-columns:1fr;gap:12px;}
.rc-brief__lead{min-width:0;}
.rc-brief__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0 0 4px;}
.rc-brief__lab{font:600 11px/1.3 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--sand-text);}
.rc-brief__camp{font:600 13px/1.3 var(--sans);color:var(--ink);}
.rc-brief__round{font:14px/1.45 var(--sans);color:var(--ink);margin:0;}
.rc-brief__round span{font-size:12.5px;color:var(--ink-soft);}
.rc-brief__round b{font-weight:400;}
.rc-brief__grid{display:grid;grid-template-columns:1fr;gap:10px;margin:0;}
@media(min-width:620px){
  .rc-brief__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 0;}
  .rc-brief__grid div:nth-child(2n){border-left:1px solid #D6D0C4;padding-left:16px;}
}
@media(min-width:900px){
  .rc-brief__grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .rc-brief__grid div{padding:0 14px;}
  .rc-brief__grid div:first-child{padding-left:0;}
  .rc-brief__grid div + div{border-left:1px solid #D6D0C4;}
}
.rc-brief__grid div{min-width:0;}
.rc-brief__grid dt{font:600 10.5px/1.3 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 2px;}
.rc-brief__grid dd{font:14px/1.45 var(--sans);color:var(--ink);margin:0;}
.rc-pins__frame{font-family:var(--serif);font-style:italic;font-size:16.5px;
  line-height:1.45;color:var(--ink-mid);margin:0;
  padding:14px clamp(14px,6px + 2vw,24px);border-bottom:1px solid var(--line);}
.rc-pins__body{display:grid;grid-template-columns:1fr;gap:20px;
  padding:20px clamp(14px,6px + 2vw,24px) 24px;}
@media(min-width:820px){
  .rc-pins__body{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;}
}
.rc-pins__stage{min-width:0;}
.rc-pins__ad{position:relative;max-width:440px;margin:0 auto;
  border:1px solid var(--line);border-radius:4px;overflow:visible;
  background:#fff;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;}
.rc-pins__ad.is-live{cursor:crosshair;}
.rc-pins__ad.is-live:focus-visible{outline:2px solid var(--forest);outline-offset:3px;}
.rc-pins__ad img{display:block;width:100%;height:auto;border-radius:3px;
  -webkit-touch-callout:none;pointer-events:none;}
.rc-pins__hint{display:flex;align-items:center;justify-content:center;gap:8px;
  font:13.5px/1.4 var(--sans);color:var(--ink-mid);margin:12px 0 0;}
.rc-pins__hint svg{flex:none;width:16px;height:16px;color:var(--accent);}
.rc-pins__hint[hidden]{display:none;}

/* A pin: a numbered teardrop whose point sits on the spot (the transform
   puts its bottom tip at left/top). 30px wide to see, with an invisible
   margin round it so the target is 46px to tap. Terracotta for the sample,
   forest for the reader's own. */
.rc-pin{position:absolute;z-index:2;width:30px;height:38px;margin:0;
  padding:7px 0 0;transform:translate(-50%,-100%);border:0;border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 1 18 23'%3E%3Cpath d='M12 22.5s7.5-6.4 7.5-12.5a7.5 7.5 0 1 0-15 0c0 6.1 7.5 12.5 7.5 12.5Z' fill='%23C47A3A' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(26,25,22,.4));cursor:pointer;
  font:700 13px/16px var(--sans);color:#fff;text-align:center;}
.rc-pin::before{content:"";position:absolute;inset:-8px;}
.rc-pin.is-new{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 1 18 23'%3E%3Cpath d='M12 22.5s7.5-6.4 7.5-12.5a7.5 7.5 0 1 0-15 0c0 6.1 7.5 12.5 7.5 12.5Z' fill='%231E4035' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E");}
.rc-pin.is-on{filter:drop-shadow(0 0 3px var(--color-gold)) drop-shadow(0 2px 3px rgba(26,25,22,.4));}
.rc-pin:focus-visible{outline:2px solid var(--forest);outline-offset:3px;}

/* The popover, placed by initPins: under the pin when the pin is in the top
   half of the ad, over it when in the bottom half, and held inside the ad's
   width. The field is 16px so iOS does not zoom on focus. */
.rc-pop{position:absolute;z-index:3;width:min(272px,calc(100% - 16px));
  padding:12px;border:1px solid var(--line);border-radius:6px;background:#fff;
  box-shadow:0 10px 30px rgba(26,25,22,.25);cursor:default;
  -webkit-user-select:text;user-select:text;}
.rc-pop__lab{font:600 11px/1 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px;}
.rc-pop__in,.rc-pop__sel{display:block;width:100%;min-height:42px;
  padding:8px 10px;border:1px solid #CFC9BE;border-radius:4px;background:#fff;
  color:var(--ink);font:16px/1.3 var(--sans);}
.rc-pop__sel{margin-top:8px;font-size:15px;}
.rc-pop__in:focus,.rc-pop__sel:focus{outline:2px solid var(--forest);outline-offset:1px;}
.rc-pop__acts{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;}
.rc-pop__acts button{min-height:40px;padding:0 14px;border-radius:4px;
  font:600 14px/1 var(--sans);cursor:pointer;}
.rc-pop__x{border:1px solid var(--line);background:#fff;color:var(--ink-mid);}
.rc-pop__ok{border:1px solid var(--forest);background:var(--forest);color:var(--cream);}

/* The notes list. */
.rc-pins__side{min-width:0;}
.rc-pins__lab{font:600 11px/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px;}
.rc-pins__list{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.rc-pnote{display:flex;align-items:flex-start;gap:10px;padding:12px;
  background:#fff;border:1px solid var(--line);border-radius:4px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.rc-pnote.is-on{border-color:var(--color-gold);box-shadow:0 0 0 1px var(--color-gold);}
.rc-pnote__n{flex:none;display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--accent);
  color:#fff;font:700 12px/1 var(--sans);}
.rc-pnote--new .rc-pnote__n{background:var(--forest);}
.rc-pnote__txt{flex:1;min-width:0;}
.rc-pnote__c{font:15px/1.4 var(--sans);color:var(--ink);margin:1px 0 6px;
  overflow-wrap:anywhere;}
.rc-pnote__area{display:inline-block;font:600 11.5px/1 var(--sans);
  color:var(--forest);background:#E8F0ED;border-radius:999px;padding:5px 9px;}
.rc-pnote__area--none{color:var(--ink-mid);background:var(--sand);}
.rc-pnote__rm{flex:none;width:32px;height:32px;margin:-4px -4px 0 0;padding:0;
  border:0;border-radius:4px;background:none;color:var(--ink-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.rc-pnote__rm:hover{color:var(--ink);}
.rc-pnote__rm svg{width:16px;height:16px;}

/* ---------- GRADE THE COPY ----------
   A compact card under the pins: header copy on the forest, then a white
   card with the four copy parts as labelled rows. Side by side from 820px. */
.rc-copy{max-width:960px;margin:40px auto 0;display:grid;
  grid-template-columns:1fr;gap:20px;align-items:center;text-align:left;}
@media(min-width:820px){
  .rc-copy{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;}
}
.rc-copy__p{font:16px/1.65 var(--sans);color:#D6DFD9;margin:0;}
.rc-copy__card{border:1px solid var(--line);border-radius:4px;
  background:#fff;color:var(--ink);overflow:hidden;}
.rc-copy__top{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 14px;background:var(--sand);border-bottom:1px solid var(--line);}
.rc-copy__lab{font:600 11px/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);margin:0;}
.rc-copy__seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;
  background:var(--cream);padding:2px;}
.rc-copy__seg button{min-height:34px;padding:0 14px;border:0;border-radius:999px;
  background:none;color:var(--ink-mid);font:600 13px/1 var(--sans);cursor:pointer;}
.rc-copy__seg button[aria-pressed="true"]{background:var(--forest);color:var(--cream);}
.rc-copy__seg button:focus-visible{outline:2px solid var(--forest);outline-offset:2px;}
.rc-copy__row{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:2px 12px;padding:11px 14px;border-bottom:1px solid #EEEBE5;}
.rc-copy__row:last-child{border-bottom:0;}
.rc-copy__k{grid-column:1;font:600 10.5px/1.3 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--forest);margin:0;}
.rc-copy__v{grid-column:1;font:14.5px/1.45 var(--sans);color:var(--ink);margin:0;}
/* The caption runs long: three lines and an ellipsis, visually only, so a
   screen reader still gets all of it. */
.rc-copy__v--clamp{display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:3;line-clamp:3;overflow:hidden;}
.rc-copy__ico{grid-column:2;grid-row:1 / span 2;align-self:center;display:flex;
  align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;border:1px solid #DDD9D1;color:var(--ink-soft);}
.rc-copy__ico svg{width:14px;height:14px;}
.rc-copy__row--on{background:#FBEFE9;}
.rc-copy__row--on .rc-copy__ico{border-color:var(--accent);background:var(--accent);color:#fff;}
.rc-copy__was{color:var(--ink-mid);text-decoration:line-through;
  text-decoration-color:var(--accent);margin-right:8px;}
.rc-copy__now{color:#2F6B4F;font-weight:600;background:#E8F0ED;
  border-radius:3px;padding:1px 5px;}
.rc-copy__ex{grid-column:1 / -1;font:13px/1.45 var(--sans);color:var(--ink-mid);
  margin:6px 0 0;}
.rc-copy__ex b{color:var(--accent);font-weight:600;}
/* The toggle. In Comment the Button row shows the pinned comment and the
   copy as written; in Suggest it shows the edit. */
[data-mode="comment"] .rc-copy__ex--suggest,[data-mode="suggest"] .rc-copy__ex--comment,
[data-mode="comment"] .rc-copy__now{display:none;}
[data-mode="comment"] .rc-copy__was{text-decoration:none;color:var(--ink);margin:0;}

/* ---------- THE SUMMARY RECORD ----------
   A filed record: white sheet, a forest index tab across the top, the one
   artwork on the left, the grades, the decision stamp and the action item
   on the right. Artwork above the facts below 620px. */
.rc-rec{max-width:820px;margin:0 auto;border:1px solid var(--line);
  border-radius:4px;background:#fff;color:var(--ink);text-align:left;
  overflow:hidden;}
.rc-rec__top{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:4px 16px;padding:12px clamp(14px,6px + 2vw,24px);
  background:var(--sand);border-bottom:1px solid var(--line);}
.rc-rec__lab{font:600 11px/1.2 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--forest);margin:0;}
.rc-rec__meta{font:13px/1.4 var(--sans);color:var(--ink-mid);margin:0;}
.rc-rec__body{display:grid;grid-template-columns:1fr;gap:20px;
  padding:20px clamp(14px,6px + 2vw,24px) 24px;}
@media(min-width:620px){
  .rc-rec__body{grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start;}
}
.rc-rec__art{max-width:200px;margin:0 auto;border:1px solid var(--line);
  border-radius:3px;overflow:hidden;}
@media(max-width:619px){.rc-rec__art{max-width:160px;}}
.rc-rec__art img{display:block;width:100%;height:auto;}
.rc-rec__main{min-width:0;}
.rc-rec__k{font:600 10.5px/1.3 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px;}
.rc-rec__grades{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;margin:0;border:1px solid var(--line);border-radius:4px;}
@media(min-width:620px){
  .rc-rec__grades{grid-template-columns:repeat(4,minmax(0,1fr));}
}
.rc-rec__grades div{padding:10px 12px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);min-width:0;}
.rc-rec__grades div:nth-child(2n){border-right:0;}
.rc-rec__grades div:nth-child(n+3){border-bottom:0;}
@media(min-width:620px){
  .rc-rec__grades div{border-bottom:0;border-right:1px solid var(--line);}
  .rc-rec__grades div:nth-child(2n){border-right:1px solid var(--line);}
  .rc-rec__grades div:last-child{border-right:0;}
}
.rc-rec__grades dt{font:600 10.5px/1.3 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--forest);margin:0 0 4px;}
.rc-rec__grades dd{font:400 28px/1 var(--serif);color:var(--ink);margin:0;}
.rc-rec__grades .is-low dd{color:var(--accent);}
.rc-rec__dec,.rc-rec__act{margin-top:18px;}
.rc-rec__stamp{display:inline-block;margin:0;padding:6px 14px;
  border:2px solid var(--accent);border-radius:4px;color:var(--accent);
  font:700 14px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  rotate:-2deg;}
.rc-rec__item{display:grid;grid-template-columns:18px minmax(0,1fr);
  gap:2px 10px;align-items:center;padding:12px;background:var(--cream);
  border:1px solid var(--line);border-radius:4px;}
.rc-rec__box{width:16px;height:16px;border:1.5px solid var(--forest);border-radius:3px;}
.rc-rec__do{font:600 15px/1.35 var(--sans);color:var(--ink);margin:0;}
.rc-rec__own{grid-column:2;font:13px/1.35 var(--sans);color:var(--ink-mid);margin:0;}
.rc-rec__line{max-width:640px;margin:28px auto 0;text-align:center;
  font-family:var(--serif);font-style:italic;font-size:var(--text-xl);
  line-height:1.35;color:#F7F4EE;}