/* ============================================================
   Aurabill blog and guides — /blog/, articles, /cancel/, guide pages, notices
   Loaded after /assets/site.css on every blog page. Colours, radii and
   type come from the tokens defined there; the only additions are the
   two warm tokens below, because --tag-warn (#C0703A) is 3.2:1 on its
   own tint and badges here are real text, not mockup labels.
   No colour carries meaning on its own: every badge and callout has a
   text label, and warnings also differ in shape (border).

   Sections:
     1. Tokens
     2. Notices (404 / 503)
     3. Article: meta line, prose extras, sources
     4. After the article: related links, call-to-action, disclaimer
     5. Guide page: header, badges, callouts, methods, steps, phone, facts
     5b. Guide page, writer's-template form: quick answer, facts table,
         who-bills-you table, ways out, offers, FAQ, sources, related
     6. Cards, A-Z index, blog home
     7. Responsive, contrast and print
   ============================================================ */

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  --warn-ink: #8A4513;   /* 6.2:1 on --tag-warn-bg, 7.1:1 on white */
  --warn-line: #D9955F;  /* borders only */
}

/* ============================================================
   2. Notices (404 / 503)
   ============================================================ */
.notice__links { display: grid; gap: 8px; max-width: 640px; padding: 0; list-style: none; }
.notice__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.notice__links a:hover { color: var(--accent-hover); }

/* ============================================================
   3. Article: meta line, prose extras, sources
   ============================================================ */
.post-meta__cat {
  display: inline-block; margin-right: 8px; padding: 3px 10px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; vertical-align: 1px;
}

/* In the grid layout the article and the blocks after it share one column. */
.doc__main { min-width: 0; }

.prose blockquote { margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--line-2); color: var(--ink-soft); }
.prose blockquote > * + * { margin-top: 12px; }
.prose em { font-style: italic; }

/* Wide tables scroll inside their own box instead of the page. */
.prose table { display: block; max-width: 100%; overflow-x: auto; }
.prose th[scope="row"] { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--divider); color: var(--ink); font-weight: 600; text-align: left; vertical-align: top; }

/* The closing "Sources" list is reference material: smaller, long URLs may wrap. */
.prose #sources ~ ul, .prose #sources ~ p { font-size: 14px; line-height: 1.6; }
.prose #sources ~ ul li { overflow-wrap: anywhere; }

/* ============================================================
   4. After the article: related links, call-to-action, disclaimer
   ============================================================ */
.postend, .pagetail { display: grid; gap: 16px; max-width: 820px; margin-top: 16px; }
.postend > *, .pagetail > * { margin: 0; }
.postend .related, .pagetail .related { padding: 40px 48px; border-radius: var(--radius-panel); background: var(--paper); }
.postend h2, .pagetail h2 { margin-bottom: 14px; color: var(--ink); font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.03em; }

.related__note { margin: -4px 0 16px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.linklist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--divider); }
.linklist li { padding: 14px 0; border-bottom: 1px solid var(--divider); overflow-wrap: anywhere; }
.linklist a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: color .15s; }
.linklist a:hover { color: var(--accent); text-decoration-color: currentColor; }
.linklist__meta { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }

/* App call-to-action: the download panel in miniature, with the App Store badge (site.css). */
.cta { position: relative; overflow: hidden; padding: 44px 48px; border-radius: var(--radius-panel); background: var(--ink); color: #fff; }
.cta::before {
  content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 360px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(225, 148, 191, .28), rgba(167, 123, 243, .16) 50%, rgba(91, 108, 246, 0) 100%);
}
.cta > * { position: relative; }
.postend .cta h2, .pagetail .cta h2 { max-width: 520px; margin: 0; color: #fff; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -.04em; }
.cta p { max-width: 520px; margin: 14px 0 26px; color: var(--on-dark-2); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
.cta :focus-visible { outline-color: #fff; }

/* Standing disclaimer */
.disclaimer { padding: 8px 4px 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.disclaimer p + p { margin-top: 8px; }

/* ============================================================
   5. Guide page
   ============================================================ */
.mono { display: block; flex: none; border-radius: 25%; box-shadow: 0 0 0 1px rgba(10, 16, 34, .08); }
.mono text { font-family: var(--font); letter-spacing: 0; }
.mono--md { width: 44px; height: 44px; }
.mono--lg { width: 64px; height: 64px; }
/* The catalog's brand logo (assets/guide-logos/), framed as the app's ServiceAvatar frames a
   downloaded one: a white tile clipped to its 0.29 x side corner with an 8% hairline. LogoFit's
   full-bleed artwork fills the tile; an inset mark sits 12% in from its edges. */
.gtile {
  --tile: 44px; display: block; flex: none; box-sizing: border-box; width: var(--tile); height: var(--tile);
  border-radius: calc(var(--tile) * .29); background: #fff; object-fit: cover; box-shadow: 0 0 0 1px rgba(10, 16, 34, .08);
}
.gtile--lg { --tile: 64px; }
.gtile--inset { padding: calc(var(--tile) * .12); object-fit: contain; }

.guidehead { display: flex; align-items: center; gap: 20px; }
.guidehead h1 { min-width: 0; overflow-wrap: anywhere; }
.pagehead--guide .lead { margin-top: 18px; }

/* Badges mirror the app's: short uppercase labels, warm only where the app is warm
   (Difficult, May be outdated, Not yet checked). The level also shows as filled pips. */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.gbadge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 12px;
  border: 1px solid transparent; border-radius: 99px; background: var(--tag-neutral-bg); color: var(--ink);
  font-size: 11px; font-weight: 500; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; white-space: nowrap;
}
.gbadge__pips { display: inline-flex; align-items: flex-end; gap: 2px; }
.gbadge__pips i { width: 4px; height: 10px; border: 1px solid currentColor; border-radius: 2px; }
.gbadge__pips i.on { background: currentColor; }
.gbadge--l3, .gbadge--stale { background: var(--tag-warn-bg); color: var(--warn-ink); }
.gbadge--unverified { background: var(--tag-warn-bg); border: 1px dashed var(--warn-line); color: var(--warn-ink); }
.gbadge--rec { background: var(--accent-soft); color: var(--accent); }
.gbadge--fees { border-color: var(--line-2); }
.gbadge--kind { border-color: var(--line); background: var(--paper); }

/* Callouts. "Before you cancel" is the app's dark note; the caution is a dashed warm box. */
.gcallout { padding: 18px 22px; border-radius: 18px; }
.gcallout p { color: inherit; }
.gcallout__label { margin-bottom: 6px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.gcallout--fees { background: var(--ink); color: #D5D8E2; }
.gcallout--fees .gcallout__label { color: var(--peach); }
.prose .gcallout--fees strong, .prose .gcallout--fees a { color: #fff; }
.gcallout--fees :focus-visible { outline-color: #fff; }
.gcallout--caution { max-width: 720px; margin-top: 20px; border: 1px dashed var(--warn-line); background: var(--tag-warn-bg); color: var(--ink); font-size: 15px; line-height: 1.6; }
.gcallout--caution strong { color: var(--warn-ink); font-weight: 600; }

/* Methods: one card per way to cancel. */
.prose .method { margin-top: 24px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 22px; }
.prose .method > * + * { margin-top: 12px; }
.prose .method h3 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.02em; overflow-wrap: anywhere; }
.prose .method__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.method__time { color: var(--muted); font-size: 14px; }
.method__link { font-size: 15px; }

/* Steps: only real actions are numbered; notes, warnings and lines to say carry a text label. */
.prose .gsteps { display: grid; gap: 14px; margin-top: 18px; padding: 0; list-style: none; counter-reset: step; }
.prose .gstep, .prose .gstep + .gstep { position: relative; margin: 0; }
.gstep__label { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.gstep__text { overflow-wrap: anywhere; }
.gstep--action { min-height: 30px; padding-left: 44px; counter-increment: step; }
.gstep--action::before {
  content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 500; line-height: 1;
}
.gstep--info, .gstep--warning, .gstep--retention { padding: 14px 18px; border-radius: 16px; }
.gstep--info { background: var(--bg); }
.gstep--info .gstep__label { color: var(--muted); }
.gstep--warning { border-left: 4px solid var(--warn-line); background: var(--tag-warn-bg); color: var(--ink); }
.gstep--warning .gstep__label { color: var(--warn-ink); }
.gstep--retention { background: var(--accent-soft); color: var(--ink); font-style: italic; }
.gstep--retention .gstep__label { color: var(--accent); font-style: normal; }

/* Phone route (site.css owns .phone for the hero mockup, hence .gphone). */
.gphone { padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.prose .gphone > * + * { margin-top: 4px; }
.gphone__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.gphone__label { color: var(--muted); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.prose .gphone__num { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 19px; font-weight: 500; overflow-wrap: normal; }
.gphone__title { color: var(--muted); font-size: 13px; }
.prose .gphone__hours { margin: 4px 0 0; padding: 0; font-size: 14px; list-style: none; }
.prose .gphone__hours li { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 0; }
.gphone__days { min-width: 5.5em; color: var(--ink); font-weight: 500; }
.gphone__time { white-space: nowrap; }

/* Retention offers and post-cancel checks */
.prose .retention, .prose .checks { display: grid; gap: 10px; margin-top: 16px; padding: 0; list-style: none; }
.prose .retention li, .prose .checks li { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.prose .retention li { padding: 16px 20px; border-radius: 16px; background: var(--bg); }
.prose .retention__offer { color: var(--ink); font-weight: 500; }
.prose .retention__reply { margin-top: 4px; }
.prose .checks li { position: relative; padding-left: 32px; }
.prose .checks li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 5px; }

/* Facts about the service */
.facts { margin: 16px 0 0; border-top: 1px solid var(--divider); }
.facts__row { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.facts dt { color: var(--ink); font-size: 14.5px; font-weight: 500; }
.facts dd { margin: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.prose .facts__prices { margin: 0; padding: 0; list-style: none; }
.prose .facts__prices li { margin: 0 0 4px; }
.num { font-variant-numeric: tabular-nums; }
.facts__note { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.prose .guide__legal { margin-top: 28px; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* ============================================================
   5b. Guide page, writer's-template form (docs/guides/reference-netflix.html
       on the site's tokens). One reading column: answer and facts first.
   ============================================================ */
/* Quick answer: the accent-tinted box, its heading a small label. */
.prose .gqa { padding: 20px 24px; border-radius: 18px; background: var(--accent-soft); color: var(--ink); }
.prose .gqa > * + * { margin-top: 10px; }
.prose .gqa__h { margin: 0; color: var(--accent); font-size: 12px; font-weight: 500; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.prose .gqa__steps { font-size: 17px; line-height: 1.6; }
.prose .gqa__steps li + li { margin-top: 4px; }
.prose .gqa__note { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }

/* Facts: label/value rows under a heavy rule; real table semantics, never wider than the column.
   Labels wrap only between words: the label column takes its share (38%, 42% on phones) but never
   less than its longest word ("CANCELLATION"), which the automatic table layout guarantees. Values
   may break anywhere (long URLs), so the value column can always give way and the table stays
   within the column down to 320px. */
.prose .gfacts { border-top: 2px solid var(--ink); }
.prose .gfacts table { display: table; width: 100%; table-layout: auto; font-size: 15px; }
.prose .gfacts th[scope="row"], .prose .gfacts td { padding: 10px 0; border-bottom: 1px solid var(--divider); vertical-align: top; }
.prose .gfacts th[scope="row"] {
  width: 38%; padding-right: 16px; color: var(--muted); font-size: 12px; font-weight: 500;
  letter-spacing: .05em; line-height: 1.9; text-transform: uppercase; overflow-wrap: normal;
}
.prose .gfacts td { color: var(--ink); overflow-wrap: anywhere; }
/* "Not yet" / "May be outdated": the page form's only status mark (no badges), so never neutral. */
.prose .gfacts__flag { color: var(--warn-ink); }

/* Fee warning: warm, with a heavier left edge so it does not rely on colour. */
.gcallout--warn { border-left: 4px solid var(--warn-line); background: var(--tag-warn-bg); color: var(--ink); font-size: 15.5px; line-height: 1.6; }
.gcallout--warn .gcallout__label { color: var(--warn-ink); }
.prose .gcallout--warn > * + * { margin-top: 0; }

/* Wide tables scroll inside their own box (keyboard focusable), never the page. */
.prose .gtable { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.prose .gtable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.prose .gtable table { display: table; width: 100%; min-width: 520px; font-size: 14.5px; }
.prose .gtable thead th {
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg); color: var(--muted);
  font-size: 12px; font-weight: 500; letter-spacing: .05em; line-height: 1.3; text-transform: uppercase; vertical-align: bottom;
}
.prose .gtable td { padding: 10px 14px; border-bottom: 1px solid var(--divider); }
.prose .gtable tr:last-child td { border-bottom: 0; }

/* Ways out: one section each, "Done when" as a tinted box, notes quieter. */
.prose .gmethod > * + * { margin-top: 12px; }
.prose .gmethod__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prose .gsteplist li + li { margin-top: 6px; }
.prose .gdone { padding: 12px 16px; border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.6; }
.prose .gnotes { color: var(--muted); font-size: 15px; line-height: 1.6; }
.prose .gnotes li + li { margin-top: 6px; }
.gmethod__link { font-size: 15px; }

/* What they show before you leave: offer -> what to select or say. */
.prose .goffers { display: grid; gap: 8px; padding: 0; list-style: none; }
.prose .goffers li { margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--bg); overflow-wrap: anywhere; }
.goffers__offer { color: var(--ink); font-weight: 600; }
.goffers__arrow { color: var(--muted); }

/* Questions people ask: the support page's FAQ cards, outlined because they sit on paper. */
.prose .gfaq { display: grid; gap: 8px; }
.prose .gfaq .faq { border: 1px solid var(--line); }
.prose .gfaq .faq > summary { padding: 16px 0; font-size: 16.5px; font-weight: 500; }
.prose .gfaq .faq__body { padding-bottom: 18px; }

/* Sources: reference material, long titles may wrap. */
.prose .gsources__date { color: var(--muted); font-size: 14px; }
.prose .gsources { font-size: 14.5px; line-height: 1.6; }
.prose .gsources li { overflow-wrap: anywhere; }
.gsources__host { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* Related guides as pills (44px targets). */
.gpills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gpills a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--paper); color: var(--ink);
  font-size: 15px; font-weight: 500; overflow-wrap: anywhere; transition: border-color .15s, color .15s;
}
.gpills a:hover { border-color: var(--accent); color: var(--accent); }
.gpills .gpills__all { border-color: transparent; background: var(--accent-soft); color: var(--accent); }

/* ============================================================
   6. Cards, A-Z index, blog home
   ============================================================ */
.gcards, .acards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }

.gcard, .acard { position: relative; min-width: 0; padding: 24px; border-radius: 22px; background: var(--paper); transition: box-shadow .15s; }
.gcard:hover, .acard:hover { box-shadow: 0 6px 18px rgba(10, 16, 34, .06); }
.gcard:has(:focus-visible), .acard:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.gcard { display: flex; align-items: flex-start; gap: 16px; }
.gcard__body { flex: 1; min-width: 0; }
.gcard__title, .acard__title { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.gcard__link, .acard__title a { color: var(--ink); transition: color .15s; }
.gcard:hover .gcard__link, .acard:hover .acard__title a { color: var(--accent); }
.gcard__link:focus-visible, .acard__title a:focus-visible { outline: none; }
/* The whole card is the link's hit area. */
.gcard__link::after, .acard__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.gcard__ways { margin-top: 4px; color: var(--muted); font-size: 14px; }
.gcard__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.acard { padding: 28px; }
.acard__meta { margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.acard__title { font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
.acard__summary { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.6; text-wrap: pretty; }

.jump ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.jump a {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--paper); font-size: 14px; font-weight: 500;
  transition: background-color .15s, border-color .15s;
}
.jump a:hover { border-color: var(--line-2); background: var(--bg); }
.az h2 { margin: 40px 0 16px; font-size: 26px; font-weight: 500; letter-spacing: -.03em; scroll-margin-top: 32px; }
.guides__missing { margin-top: 32px; }
.guides__missing a, .hub__note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.small { color: var(--muted); font-size: 13px; line-height: 1.55; }
.hub__more { margin-top: 24px; }
.hub__note { margin-top: 14px; max-width: 640px; }
/* A secondary action: the header pill's look. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--paper); color: var(--ink);
  font-size: 14px; font-weight: 500; transition: background-color .15s, border-color .15s;
}
.btn:hover { border-color: var(--line-2); background: var(--bg); }

/* ============================================================
   7. Responsive, contrast and print
   ============================================================ */
@media (min-width: 640px) {
  .facts__row { grid-template-columns: 12rem minmax(0, 1fr); gap: 16px; }
}
@media (min-width: 680px) {
  .gcards, .acards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .gcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .postend .related, .pagetail .related { padding: 28px 22px; border-radius: 22px; }
  .cta { padding: 32px 22px 34px; border-radius: 22px; }
  .cta .primary-cta { width: 100%; justify-content: space-between; }
  .prose .method { padding: 18px 18px 20px; border-radius: 18px; }
  .prose .gqa { padding: 18px; }
  .prose .gfacts th[scope="row"] { width: 42%; }
  .guidehead { gap: 14px; }
  .mono--lg { width: 52px; height: 52px; }
  .gtile--lg { --tile: 52px; }
  .gcard, .acard { padding: 20px; }
}

@media (prefers-contrast: more) {
  .gbadge, .gcallout--caution, .gstep--info, .gstep--retention, .gphone, .prose .method { border: 2px solid currentColor; }
  .prose .gqa, .prose .gdone, .prose .goffers li, .gpills a { border: 2px solid currentColor; }
  .gcallout--warn { border-left-width: 6px; }
  .gstep--warning { border-left-width: 6px; }
}

@media (forced-colors: active) {
  .gbadge, .gcallout, .gstep--info, .gstep--warning, .gstep--retention, .gphone, .gcard, .acard, .cta { border: 1px solid CanvasText; }
  .prose .gqa, .prose .gdone, .prose .goffers li, .gpills a { border: 1px solid CanvasText; }
  .gstep--action::before, .prose .checks li::before { border: 1px solid CanvasText; }
  /* Inset logos need their white tile: the monogram SVG keeps its own fill in this mode too. */
  .gtile { forced-color-adjust: none; }
}

@media print {
  .cta, .related__note, .jump, .hub__more, .gcard__link::after, .acard__title a::after { display: none; }
  .postend .related, .pagetail .related { padding: 0; }
  .disclaimer { padding: 0; color: inherit; }
  .gcard, .acard, .gphone, .prose .method, .gstep, .gcallout { break-inside: avoid; }
  .prose .gqa, .prose .gfacts, .prose .gdone, .prose .goffers li { break-inside: avoid; }
  .prose .gtable { overflow: visible; border: 0; }
  .prose .gtable table { min-width: 0; }
  .prose .gqa, .prose .gdone, .prose .goffers li { background: none; border: 1px solid #000; }
  .gbadge, .gcallout, .gstep--warning, .gstep--retention, .gstep--info { background: none; color: inherit; }
  .gcallout--fees { border: 1px solid #000; }
  .gcallout--fees .gcallout__label, .prose .gcallout--fees strong, .prose .gcallout--fees a { color: inherit; }
  .prose .gphone__num { color: inherit; }
}