/* The backstage page: what changes on top of ../style.css.
 *
 * Kept as a layer rather than a copy so that promoting this page later is
 * reading one file of differences. Same CSP rules as the base: nothing
 * loaded from elsewhere, no inline styles in the markup.
 */

/* ------------------------------------------------------ the notes strip */
/* Says "this is a test area" above everything, and folds away so the page
   can still be judged as it will look. Amber, not red: red on this site
   means the product, and this strip is about the page. */
.backstage { background: #2A2108; color: #F3D98B; font-size: 14px;
             border-bottom: 1px solid #5A4712; }
.backstage summary { cursor: pointer; padding: 9px 24px; list-style: none;
                     text-align: center; }
.backstage summary::-webkit-details-marker { display: none; }
.backstage summary::after { content: " ▾"; }
.backstage[open] summary::after { content: " ▴"; }
.backstage ul { margin: 0; padding: 4px 0 16px 20px; line-height: 1.55; }
.backstage li { margin: 6px 0 0; }
.backstage b { color: #FFE9A8; }

/* ----------------------------------------------------------- the header */
/* The logo is a raster on BLACK, not transparent. On the page's #0A0A0B
   behind a translucent bar its rectangle showed as a faint box, so the bar
   goes to the same black as the artwork. */
header { background: #000; backdrop-filter: none; }
.bar { height: 96px; }
.brand img { width: 216px; height: auto; max-width: 100%;
             object-fit: contain; }
[id] { scroll-margin-top: 112px; }

/* Five items do not fit beside a 216px logo below ~900px. The text links
   go first, as they already did on a phone in the base sheet; the button
   stays because it is the one that matters. */
@media (max-width: 900px) {
  .bar nav a:not(.btn) { display: none; }
}
@media (max-width: 720px) {
  /* The base sheet shrinks a 34px icon here; the lockup is a different
     shape and must stay legible, so it gets its own size. */
  .brand img { width: 168px; height: auto; }
  .bar { height: 80px; }
  [id] { scroll-margin-top: 96px; }
}
@media (max-width: 400px) {
  .brand img { width: 148px; }
  .bar nav .btn { padding: 10px 12px; font-size: 13.5px; }
}

/* ---------------------------------------------------------- the grids */
/* Three by two on a desktop, exactly - auto-fit made it 3+3 at 1080 but
   2+2+2 at some widths and 4+2 at none, which the brief asks for by name. */
.grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid.three { grid-template-columns: 1fr; } }
/* No category tags any more, so the heading opens the card. */
.grid.three .card h3 { line-height: 1.25; }
#how .grid.three { margin-top: 28px; }

/* Three steps side by side on a desktop, stacked on a phone. */
.steps.across { grid-template-columns: repeat(3, 1fr); }
.steps.across li { flex-direction: column; gap: 10px; }
@media (max-width: 820px) {
  .steps.across { grid-template-columns: 1fr; }
  .steps.across li { flex-direction: row; gap: 22px; }
}

/* -------------------------------------------------------------- pricing */
.plans { display: grid; gap: 16px; margin-top: 44px; align-items: stretch;
         grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

.plan { background: var(--card); border: 1px solid var(--line);
        border-radius: 12px; padding: 28px; position: relative;
        display: flex; flex-direction: column; }
.plan h3 { font-size: 22px; font-weight: 800; }
.plan .amount { display: flex; align-items: baseline; gap: 8px;
                margin-top: 16px; }
.plan .amount b { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.plan .amount span { color: var(--ink-soft); font-size: 16px; }
.plan .facts { margin: 22px 0 26px; flex: 1; }
.plan .facts li { font-size: 15.5px; }
.plan .btn { width: 100%; text-align: center; padding: 15px; font-size: 16px; }
.plan .btn[aria-disabled="true"] { cursor: not-allowed; }

/* ------------------------------------------- monthly / yearly, no script */
/* The radios are hidden from sight and NOT from the keyboard: display:none
   or visibility:hidden would take them out of the tab order and the toggle
   would be mouse-only. This is the clip-rect technique, which leaves them
   focusable. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px;
      padding: 0; border: 0; overflow: hidden; white-space: nowrap;
      clip: rect(0 0 0 0); clip-path: inset(50%); }

/* EQUAL WIDTHS COME FROM THE GRID, not from a min-width guess: two 1fr
   columns in a max-content box are both as wide as the wider label, so
   "Yearly -17%" sets the size and "Monthly" matches it exactly. */
.switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
          width: max-content; margin: 30px auto 0; padding: 4px;
          background: var(--card); border: 1px solid var(--line);
          border-radius: 10px; }
.switch label { display: flex; align-items: center; justify-content: center;
                gap: 8px; cursor: pointer; padding: 11px 20px;
                border-radius: 7px; font-size: 15px; font-weight: 700;
                color: var(--ink-soft); white-space: nowrap;
                transition: background .15s ease, color .15s ease; }
.switch label:hover { color: var(--white); }
.switch .off { background: var(--red); color: var(--white); font-size: 11px;
               font-weight: 800; letter-spacing: 0.04em; padding: 3px 6px;
               border-radius: 5px; }
#bill-m:checked ~ .switch label[for="bill-m"],
#bill-y:checked ~ .switch label[for="bill-y"] {
  background: var(--grey); color: var(--white);
  box-shadow: inset 0 0 0 1px var(--line); }
/* The focus ring belongs on the label, because that is the thing on screen.
   :focus-visible only, so a mouse click does not leave a ring behind. */
#bill-m:focus-visible ~ .switch label[for="bill-m"],
#bill-y:focus-visible ~ .switch label[for="bill-y"] {
  outline: 2px solid var(--red); outline-offset: 2px; }

/* Monthly is what the markup shows; yearly is revealed by the radio. Two
   rules rather than one because .amount is a flex row and .detail is not,
   and a shared "display: block" would break the price baseline. */
.plans .amount.y, .plans .detail.y { display: none; }
#bill-y:checked ~ .plans .amount.m,
#bill-y:checked ~ .plans .detail.m { display: none; }
#bill-y:checked ~ .plans .amount.y { display: flex; }
#bill-y:checked ~ .plans .detail.y { display: block; }
/* RESERVED, never removed: visibility keeps the line's height in the
   monthly state, so switching back and forth does not move the buttons. */
.plan .saving { visibility: hidden; }
#bill-y:checked ~ .plans .saving { visibility: visible; }

/* ------------------------------------------------------ the two cards */
/* Everything above .facts is a fixed set of rows that BOTH cards carry,
   present even when empty, so the headings, prices, details and buttons
   line up across the cards and across both toggle states. .facts is the
   only thing that grows, and it pushes the button to the bottom. */
.plan .ribbon { margin: -8px 0 16px; padding: 7px 10px; line-height: 1.2;
                border-radius: 6px; background: var(--red); color: var(--white);
                font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
                text-transform: uppercase; text-align: center; }
/* An EMPTY block is not as tall as one with a word in it - no content, no
   line box, so the hole would have been 14px of padding against the
   ribbon's 27px. An inline-block ::before makes a line box without putting
   anything in it, and a line box is exactly one line-height tall;
   visibility:hidden takes the red with it. */
.plan .ribbon.hole { visibility: hidden; }
.plan .ribbon.hole::before { content: ""; display: inline-block; }
.plan .claim { margin: 10px 0 0; font-size: 15px; line-height: 1.4;
               min-height: 2.8em; }
.plan .claim b { color: var(--ink); font-weight: 800; }
.plan .claim span { color: var(--ink-soft); }
/* 32px, NOT the 40px the single-price cards used, and measured rather than
   chosen: a card is 333px wide on a desktop (1080px wrap, three columns,
   16px gaps), which leaves 276px inside the padding. Two 40px prices and
   "/ month" need 314px. The row did not overflow - it shrank the label and
   wrapped "/ month" onto a second line, which made the Bouncer price box
   14px taller than Keeper's and pushed its details, features and button
   out of line with the card beside it. At 32px with a 6px gap the widest
   row fits with pixels to spare. Both cards take the size, so the two
   prices stay the same size as each other and as their neighbour.
   WHITE-SPACE: NOWRAP is the guard rail. If a longer price ever turns up,
   the row overflows where somebody can see it instead of quietly growing a
   line and taking the alignment with it. */
.plan .amount { margin-top: 6px; line-height: 1.1; gap: 6px; }
.plan .amount b { font-size: 32px; }
.plan .amount span { white-space: nowrap; font-size: 15px; }
.plan .amount del { font-size: 32px; font-weight: 800; letter-spacing: -0.03em;
                    color: var(--red); text-decoration-line: line-through;
                    text-decoration-thickness: 3px; }
.plan .detail { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-faint); }
.plan .saving { margin: 4px 0 0; font-size: 13.5px; font-weight: 700;
                color: var(--red); }

/* Bouncer: the one the page recommends. */
.plan.top { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }

/* A dead control must not light up under the cursor. The base sheet's
   .btn.ghost:hover outranks its own .btn[disabled], so a disabled Keeper
   still went pale grey and white on hover - an affordance for a button
   that does nothing. */
.plan .btn[disabled]:hover { background: var(--grey); color: var(--ink-faint); }

@media (max-width: 900px) {
  /* Stacked cards: the reserved rows have done their job and only add
     empty space when nothing is beside them to line up with. */
  .plan .claim { min-height: 0; }
  .plan .ribbon.hole { display: none; }
}
@media (max-width: 400px) {
  .switch { width: auto; }
  .switch label { padding: 11px 10px; font-size: 14px; }
  .plan .amount del, .plan .amount b { font-size: 30px; }
}

/* Final Boss: a teaser, not an offer. No price, no list, no button. */
.plan.teaser { background: transparent; border-style: dashed;
               justify-content: center; align-items: center;
               text-align: center; min-height: 200px; }
.plan.teaser h3 { color: var(--ink-soft); }
.plan.teaser .soon { margin: 10px 0 0; font-size: 12px; font-weight: 700;
                     letter-spacing: 0.2em; text-transform: uppercase;
                     color: var(--ink-faint); }

.preview-note { margin: 18px 0 0; font-size: 13px; color: #C9AE5D; }

/* ----------------------------------------------------------- newsletter */
/* Compact and quieter than the buy buttons: one row on a desktop, a ghost
   button, smaller heading. */
.list { padding: 56px 0; }
.signup { display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
          align-items: start; padding: 28px; }
@media (max-width: 820px) { .signup { grid-template-columns: 1fr; gap: 8px; } }
.signup h2 { font-size: 24px; }
.signup p { margin: 10px 0 0; color: var(--ink-soft); font-size: 15.5px; }
.signup label { margin-top: 0; }
.signup .inline { display: flex; gap: 10px; }
.signup .inline input { flex: 1; min-width: 0; }
.signup .inline .btn { width: auto; margin: 0; padding: 0 20px;
                       background: transparent; color: var(--ink);
                       box-shadow: inset 0 0 0 1px var(--line);
                       white-space: nowrap; }
.signup .inline .btn:hover { background: var(--grey); }
@media (max-width: 400px) {
  .signup .inline { flex-direction: column; }
  .signup .inline .btn { padding: 14px; }
}
.signup .check { display: flex; gap: 10px; align-items: flex-start;
                 margin: 16px 0 0; text-transform: none; letter-spacing: 0;
                 font-weight: 400; font-size: 14px; color: var(--ink-soft); }
.signup .check input { width: 18px; height: 18px; margin: 2px 0 0;
                       flex: none; accent-color: var(--red); }
.signup .note { margin-top: 10px; }
.signup input[aria-invalid="true"] { border-color: var(--red); }

/* ------------------------------------------------- FAQ / contact pages */
.page { padding: 56px 0 84px; border-bottom: none; }
.page .wrap { max-width: 760px; }
.page h1 { font-size: clamp(30px, 5vw, 42px); font-weight: 800; }
.page .intro { margin-top: 16px; }
.page .back { display: inline-block; margin-bottom: 30px; font-size: 14px;
              color: var(--ink-faint); text-decoration: none; }
.page .back:hover { color: var(--white); }
.page form { margin-top: 32px; }
.empty { margin-top: 32px; border: 1px dashed #5A4712; border-radius: 12px;
         padding: 24px; color: #C9AE5D; font-size: 15px; }

/* ------------------------------------------------------------- the FAQ */
/* Native <details>: no script, keyboard and screen readers for free. The
   question is the summary; the short answer comes first inside, in the
   page's own ink, and anything longer under it in the softer grey. */
.faq h2 { font-size: 22px; margin: 56px 0 14px; padding-top: 4px; }
.faq .toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.faq .toc a { font-size: 14px; text-decoration: none; color: var(--ink-soft);
              border: 1px solid var(--line); border-radius: 999px;
              padding: 6px 12px; }
.faq .toc a:hover { color: var(--white); border-color: var(--ink-faint); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq h2 + details { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; position: relative;
               padding: 16px 36px 16px 0; font-weight: 700; font-size: 17px;
               line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 13px;
                      color: var(--red); font-size: 22px; font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--white); }
.faq details p, .faq details ul { margin: 0 0 14px; color: var(--ink-soft);
                                  font-size: 16px; line-height: 1.65; }
.faq details ul { padding-left: 20px; }
.faq details li { margin: 6px 0 0; }
.faq details .short { color: var(--ink); }
.faq details b { color: var(--ink); }
.faq code { font-size: 14px; background: var(--card);
            border: 1px solid var(--line); border-radius: 5px;
            padding: 1px 5px; word-break: break-all; }
.bar nav a[aria-current="page"] { color: var(--white); }