/* ============================================================
   Plavidian marketing redesign (v1) - navy base + logo orange
   Load AFTER style.css. Pairs with redesigned home.html,
   political_mail.html, and job_accuracy.html templates.
   Class prefix: rd-
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap');

/* v31.836 -- images carrying intrinsic width/height attributes.
   v31.835 added width/height to 16 public images to reserve layout space and
   stop CLS. That broke the homepage. Those attributes are presentational hints
   that map to the CSS width and height properties, so wherever the stylesheet
   set only one dimension the attribute supplied the other and the aspect ratio
   went with it: the USPS logo has an inline height:26px and no width rule, so
   the width attribute made it 1759px wide; .rd-split-card img sets width:100%
   and no height, so the franked sample rendered 1605px tall.

   :where() has zero specificity, so this loses to every author rule (including
   .rd-product-card img, which sets both dimensions on purpose and must keep
   them) but still beats the attribute hints, which sit below the author origin.
   Where the stylesheet says nothing, the computed value returns to auto, which
   is exactly what it was before the attributes existed.

   The attributes stay, and stay useful: browsers derive the intrinsic aspect
   ratio from them and reserve the right box even with height:auto. That is the
   documented pairing, not a workaround. Adding width/height to an image without
   this rule in place is what caused the regression.

   Position matters: this must stay BELOW the @import above. A stylesheet's
   @import rules have to precede every other rule except @charset and @layer,
   so putting this at the top of the file silently invalidated the Source
   Serif 4 import and dropped the homepage H1 to a fallback serif (v31.836).
   Comments are fine anywhere; qualified rules are not. */
:where(img[width][height]){width:auto;height:auto;}


:root{
  --rd-orange:#E2703A;
  --rd-orange-deep:#C95F2E;
  --rd-orange-ink:#B4542C;
  --rd-orange-soft:#F2A47E;
  --rd-brick:#A93B2E;
  --rd-brick-deep:#7E2C21;
  --rd-serif:'Source Serif 4',Georgia,serif;
}

/* ---- layout helpers ---- */
.rd-wrap{max-width:1360px;margin:0 auto;}
.rd-section{padding:64px 0 56px;}
.rd-section-tint{background:#F5F9FD;padding:56px 24px;margin:0 -24px;}
/* v31.846: warm variant of the tint band, used once, on /mail-expert. Only the
   background differs, so padding and the negative margins (including the mobile
   override further down) still come from .rd-section-tint. Scoped deliberately:
   .rd-section-tint is used on most public pages and must stay blue-grey. */
.rd-section-warm{background:#fce9d5;}
@media(max-width:950px){.rd-section{padding:40px 0 32px;}}

/* ---- type ---- */
.rd-kicker{margin:0 0 10px;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:800;color:var(--rd-orange-ink);}
.rd-h1{font-family:var(--rd-serif);font-weight:600;font-size:54px;line-height:1.06;letter-spacing:-.01em;color:#fff;margin:0 0 20px;}
.rd-h2{font-family:var(--rd-serif);font-weight:600;font-size:36px;line-height:1.12;color:var(--navy-ink,#0E2A47);margin:0 0 14px;}
.rd-h3{margin:0 0 10px;font-size:19px;color:var(--navy-ink,#0E2A47);}
.rd-intro{margin:0 0 36px;font-size:17px;line-height:1.6;color:#475569;}
.rd-band-navy .rd-h2,.rd-hero .rd-h2{color:#fff;}
.rd-band-navy .rd-kicker,.rd-hero .rd-kicker{color:var(--rd-orange-soft);}
@media(max-width:950px){.rd-h1{font-size:36px;}.rd-h2{font-size:28px;}}

/* ---- buttons ---- */
.rd-btn{display:inline-block;background:var(--rd-orange);color:#fff !important;padding:14px 26px;border-radius:6px;font-weight:700;font-size:16px;text-decoration:none;border:none;}
.rd-btn:hover{background:var(--rd-orange-deep);}
.rd-btn-ghost{display:inline-block;border:1.5px solid rgba(255,255,255,.45);color:#fff !important;padding:13px 26px;border-radius:6px;font-weight:700;font-size:16px;text-decoration:none;}
.rd-btn-ghost:hover{background:rgba(255,255,255,.1);}
.rd-btn-navy{display:inline-block;background:var(--navy,#0F3A63);color:#fff !important;padding:13px 24px;border-radius:6px;font-weight:700;text-decoration:none;}
.rd-btn-navy:hover{background:var(--navy-2,#174E7F);}
.rd-btn-outline{display:inline-block;border:1.5px solid var(--navy,#0F3A63);color:var(--navy,#0F3A63) !important;padding:12px 24px;border-radius:6px;font-weight:700;text-decoration:none;}
.rd-btn-outline:hover{background:#F5F9FD;}
.rd-btn-white{display:inline-block;background:#fff;color:var(--rd-brick) !important;padding:14px 26px;border-radius:6px;font-weight:700;text-decoration:none;}
.rd-btn-brick{display:inline-block;background:var(--rd-brick);color:#fff !important;padding:14px;border-radius:6px;font-weight:700;text-decoration:none;text-align:center;}
.rd-btn-brick:hover{background:var(--rd-brick-deep);}
.rd-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 36px;}

/* ---- hero ---- */
.rd-hero{background:linear-gradient(150deg,#0A2440 0%,#0F3A63 70%,#174E7F 100%);color:#fff;border-radius:18px;padding:64px 56px 56px;margin:12px 0 26px;}
.rd-hero-brick{background:linear-gradient(150deg,#4E1B13 0%,#7E2C21 55%,#A93B2E 100%);}
.rd-hero-ja{background:linear-gradient(150deg,#081D33 0%,#0E2A47 55%,#1E5A8F 100%);}
.rd-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:center;}
.rd-hero .rd-lede{margin:0 0 30px;font-size:19px;line-height:1.6;color:#D6E4F5;}
.rd-hero-brick .rd-lede{color:#F6E3DA;}
.rd-hero-brick .rd-kicker{color:#F5C6A8;}
.rd-trust{display:flex;flex-wrap:wrap;align-items:center;gap:22px;font-size:13.5px;color:#AFC6DE;}
.rd-hero-brick .rd-trust{color:#EBC4B4;}
.rd-trust img{background:#fff;padding:6px 10px;border-radius:4px;}
.rd-hero-card{background:#fff;color:var(--text,#1f2937);border-radius:10px;padding:32px;box-shadow:0 24px 60px rgba(0,0,0,.35);}
.rd-hero-card h2{margin:0 0 10px;font-family:var(--rd-serif);font-size:23px;color:var(--navy,#0F3A63);}
.rd-hero-brick .rd-hero-card h2{color:var(--rd-brick-deep);}
.rd-hero-card .note{margin:0 0 16px;font-size:14px;color:var(--muted,#334155);}
.rd-hero-card .rd-btn-navy,.rd-hero-card .rd-btn-brick{display:block;text-align:center;margin-top:22px;}
@media(max-width:950px){.rd-hero{padding:32px 24px;}.rd-hero-grid{grid-template-columns:1fr;gap:28px;}}
/* v31.849 lifted the lede cap for single-column heroes; v31.853 lifted it
   globally, so this rule is now a no-op kept only so the class in templates
   stays defined. */
.rd-hero-wide .rd-lede{}
/* Balance the ragged edge on multi-line hero-card headings; supported browsers
   even the two lines, others ignore it. */
.rd-hero-card h2{line-height:1.25;text-wrap:balance;letter-spacing:-.01em;}

/* ---- hero cycler (home page) ---- */
.rd-hero-cycle{position:relative;overflow:hidden;background:#0A2440;}
.rd-hero-bg{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;border-radius:inherit;}
.rd-hero-bg.active{opacity:1;}
.rd-hero-bg-home{background:linear-gradient(150deg,#0A2440 0%,#0F3A63 70%,#174E7F 100%);}
.rd-hero-bg-pm{background:linear-gradient(150deg,#4E1B13 0%,#7E2C21 55%,#A93B2E 100%);}
.rd-hero-bg-ja{background:linear-gradient(150deg,#081D33 0%,#0E2A47 55%,#1E5A8F 100%);}
.rd-hero-cycle .rd-hero-grid{position:relative;}
/* v31.838 -- hero height follows the active slide.
   These three slides used to share one grid cell (.rd-hero-slides{display:grid}
   with every slide on grid-area:1/1), so the container was always as tall as the
   TALLEST slide no matter which was showing. Slide 1 is the tall one: it is the
   only slide carrying an .rd-hero-eyebrow line and its H1 is by far the longest
   string, so slides 2 and 3 rendered inside a box sized for slide 1 with dead
   space underneath.

   Now only the active slide is in flow; the others are absolutely positioned on
   top of it. The container therefore takes its height from whichever slide is
   showing. This is the whole fix, and it works with JavaScript disabled. The
   script in home.html only animates the change between heights, so if it never
   runs the height is still correct, it just snaps instead of sliding. */
.rd-hero-slides{position:relative;transition:height .45s ease;}
/* Clipped only while the height is animating. At rest the container ends exactly
   at the content, so a permanent overflow:hidden would shave the focus ring off
   the last link in each slide. */
.rd-hero-slides.is-animating{overflow:hidden;}
.rd-hero-slide{position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s;}
.rd-hero-slide.active{position:relative;opacity:1;pointer-events:auto;visibility:visible;transition:opacity .9s ease,visibility 0s;}
@media(prefers-reduced-motion:reduce){.rd-hero-slides{transition:none;}}
.rd-hero-slide .rd-lede-pm{color:#F6E3DA;}
.rd-hero-slide .rd-kicker-pm{color:#F5C6A8;}
.rd-hero-dots{display:flex;gap:10px;margin-top:22px;position:relative;z-index:1;}
/* v31.882 -- converge the three slide heights. Measured at the 1240px content
   cap with Source Serif 4 loaded: slide 1 was 464px against 400/403 for slides
   2 and 3, so every rotation onto or off the primary slide moved the hero 61px
   even with the v31.841 floor in place. The 61px lives entirely in slide 1's
   internal spacing (its H1 and lede both run a line longer), so the trims are
   scoped to :first-child and the other two slides keep the roomier defaults.
   Values below land slide 1 at 418px, cutting the rotation movement to 15px.
   If exact parity is ever wanted, dropping the lede to three lines (about ten
   words shorter) is worth another 29px; spacing alone cannot close that gap
   without looking cramped next to slides 2 and 3. */
.rd-hero-slide:first-child .rd-kicker{margin-bottom:6px;}
.rd-hero-slide:first-child .rd-h1{margin-bottom:10px;}
.rd-hero-slide:first-child .rd-lede{margin-bottom:14px;line-height:1.5;}
.rd-hero-slide:first-child .rd-actions{margin-bottom:12px;}
/* v31.884 -- Full-Service Certified badge, restored from the approved mock.
   Lives INSIDE the actions flex row so it wraps with the buttons on narrow
   screens. Sized to ride with the row: the mock's ~98px badge inside a 52px
   button row is what created the dead band v31.882 removed, so the label and
   logo are budgeted to ~56px and the row keeps its height. The image has no
   inline height (the :where() width/height reset would fight it); the height
   comes from this rule. */
.rd-hero-cert{display:flex;flex-direction:column;gap:3px;margin-left:6px;}
.rd-hero-cert-label{background:#0B1D30;color:var(--rd-orange-soft);font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:3px;text-align:center;white-space:nowrap;}
.rd-hero-cert img{background:#fff;border-radius:4px;padding:4px 10px;height:26px;width:auto;display:block;margin:0 auto;}
.rd-hero-dot{width:10px;height:10px;border-radius:50%;border:none;padding:0;cursor:pointer;background:rgba(255,255,255,.35);transition:background .3s;}
.rd-hero-dot.active{background:rgba(255,255,255,.95);}
@media (prefers-reduced-motion:reduce){.rd-hero-bg,.rd-hero-slide{transition:none;}}

/* ---- checklists ---- */
.rd-check{display:flex;flex-direction:column;gap:11px;font-size:15px;color:#334155;margin:0;padding:0;list-style:none;}
.rd-check li{display:flex;gap:10px;margin:0;}
.rd-check li:before{content:"✓";color:var(--rd-orange);font-weight:800;flex:none;}
.rd-band-navy .rd-check{color:#E5EFF9;font-size:15.5px;gap:12px;}

/* ---- grids & cards ---- */
.rd-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.rd-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.rd-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.rd-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.rd-grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
@media(max-width:1100px){.rd-grid-4,.rd-grid-5,.rd-grid-6{grid-template-columns:repeat(3,1fr);}}
@media(max-width:800px){.rd-grid-2,.rd-grid-3,.rd-grid-4,.rd-grid-5,.rd-grid-6{grid-template-columns:1fr;}}
.rd-card{background:#fff;border:1px solid var(--border,#D7DEE8);border-radius:10px;padding:28px;}
.rd-card p{margin:0;font-size:15px;line-height:1.6;color:#475569;}
.rd-card-rule{border-top:4px solid var(--rd-orange);}
.rd-num{font-family:var(--rd-serif);font-size:15px;font-weight:700;color:var(--rd-orange);margin-bottom:14px;}
.rd-step-num{width:38px;height:38px;border-radius:50%;background:var(--rd-orange);color:#fff;font-weight:800;display:grid;place-items:center;margin-bottom:16px;}

/* ---- section head with side button ---- */
.rd-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:36px;}
.rd-section-head>a{flex:none;}
@media(max-width:800px){.rd-section-head{flex-direction:column;align-items:flex-start;}}

/* ---- navy band ---- */
.rd-band-navy{background:var(--navy-ink,#0E2A47);color:#fff;border-radius:18px;padding:56px;margin:0 0 26px;}
.rd-band-navy p{color:#C9DAEC;}
.rd-band-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;}
@media(max-width:950px){.rd-band-navy{padding:28px 24px;}.rd-band-split{grid-template-columns:1fr;}}
.rd-shot{border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.12);margin:0;}
.rd-shot img{display:block;width:100%;}
.rd-shot-caption{margin:14px 0 0;font-size:13.5px;color:#7E99B5;}

/* ---- brick band (political) ---- */
.rd-band-brick{background:linear-gradient(140deg,#7E2C21,#A93B2E);border-radius:14px;padding:52px 48px;color:#fff;margin:0 0 26px;}
.rd-band-brick .rd-kicker{color:#F5C6A8;}
.rd-band-brick h2{font-family:var(--rd-serif);font-size:32px;color:#fff;margin:0 0 16px;}
.rd-band-brick p{color:#F6E3DA;font-size:16px;line-height:1.65;}
.rd-band-brick-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
@media(max-width:950px){.rd-band-brick{padding:28px 24px;}.rd-band-brick-grid{grid-template-columns:1fr;}}
.rd-chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:#fff;}
.rd-chip-row{display:flex;flex-wrap:wrap;gap:10px;}
.rd-chip-light{background:#fff;border:1px solid var(--border,#D7DEE8);padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:#334155;}
.rd-chip-tint{background:#F5F9FD;border:1px solid var(--border,#D7DEE8);padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:#334155;}
@media(max-width:800px){.rd-pm-cols{grid-template-columns:1fr!important;}}

/* ---- tools ---- */
.rd-tool-card{background:#fff;border:1px solid var(--border,#D7DEE8);border-radius:10px;padding:22px;}
.rd-tool-card h3{margin:0 0 6px;font-size:16px;color:var(--navy,#0F3A63);}
.rd-tool-card p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted,#334155);}
.rd-tool-card-cta{background:linear-gradient(140deg,#0F3A63,#174E7F);border:none;display:flex;flex-direction:column;justify-content:center;}
.rd-tool-card-cta h3{color:#fff;}
.rd-tool-card-cta p{color:#C9DAEC;}

/* ---- products ---- */
.rd-product-card{border:1px solid var(--border-soft,#E4E7EC);border-radius:10px;padding:16px;text-align:center;text-decoration:none;display:block;background:#fff;}
.rd-product-card:hover{box-shadow:0 6px 18px rgba(15,45,80,.12);border-color:#9cc2ec;}
.rd-product-card img{width:100%;height:110px;object-fit:contain;}
.rd-product-card span{display:block;margin-top:10px;font-weight:700;font-size:14.5px;color:var(--navy,#0F3A63);}

/* ---- capacity stats (political) ---- */
.rd-capacity-card{border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:30px;}
.rd-capacity-card .rd-cap-label{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#AFC6DE;margin-bottom:12px;display:block;}
.rd-capacity-card .rd-cap-val{font-family:var(--rd-serif);font-size:44px;font-weight:600;color:#fff;}
.rd-capacity-card .rd-cap-val small{font-size:18px;color:#AFC6DE;font-weight:400;}
.rd-capacity-total{background:var(--rd-orange);border:none;}
.rd-capacity-total .rd-cap-label{color:#FBE0CE;}
.rd-capacity-total .rd-cap-val small{color:#FBE0CE;}

/* ---- FAQ ---- */
.rd-faq details{border:1px solid var(--border-soft,#E4E7EC);border-radius:10px;padding:18px 22px;margin-bottom:12px;background:#fff;}
.rd-faq summary{font-weight:700;font-size:16px;color:var(--navy-ink,#0E2A47);cursor:pointer;}
.rd-faq p{margin:12px 0 0;font-size:15px;line-height:1.6;color:#475569;}

/* ---- CTA band / pre-footer ---- */
.rd-cta-band{background:#0A2440;color:#fff;border-radius:18px;padding:48px 56px;margin:0 0 18px;}
.rd-cta-band-inner{display:flex;justify-content:space-between;align-items:center;gap:48px;}
.rd-cta-band h2{margin:0 0 8px;font-family:var(--rd-serif);font-size:30px;color:#fff;}
.rd-cta-band p{margin:0;font-size:15.5px;color:#E3ECF7;}
.rd-cta-band .rd-actions{margin:0;flex:none;}
@media(max-width:950px){.rd-cta-band{padding:28px 24px;}.rd-cta-band-inner{flex-direction:column;align-items:flex-start;gap:24px;}}

/* ---- informed delivery split ---- */
.rd-split-card{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;border:1px solid var(--border-soft,#E4E7EC);border-radius:14px;padding:48px;margin:0 0 26px;background:#fff;}
.rd-split-card img{width:100%;border-radius:10px;}
@media(max-width:950px){.rd-split-card{grid-template-columns:1fr;padding:24px;}}

/* ---- prose block ---- */
.rd-prose{}
.rd-prose p{font-size:17px;line-height:1.7;color:#475569;}

/* ============================================================
   Portal sidebar (authenticated shell) - dark navy redesign
   Overrides the .sidebar look from style.css (loads after it).
   ============================================================ */
.rd-sidebar{background:#0E2A47;color:#C9DAEC;display:flex;flex-direction:column;}
.rd-sidebar .side-brand{display:flex;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.1);}
.rd-sidebar .side-logo-plate{background:#fff;border-radius:8px;padding:5px 7px;flex:none;display:inline-flex;}
.rd-sidebar .side-logo{height:30px;width:auto;display:block;}
.rd-sidebar .side-brand b{font-size:14.5px;color:#fff;display:block;line-height:1.25;}
.rd-sidebar .side-brand span{font-size:11.5px;color:#7E99B5;display:block;}
.rd-sidebar .side-search{padding:12px 14px 4px;}
.rd-sidebar .side-search input{width:100%;box-sizing:border-box;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#fff;font-size:13px;padding:8px 12px;outline:none;}
.rd-sidebar .side-search input::placeholder{color:#7E99B5;}
.rd-sidebar .side-search input:focus{border-color:rgba(255,255,255,.35);}
.rd-sidebar .side-nav{flex:1;overflow-y:auto;padding:8px 10px 16px;display:flex;flex-direction:column;gap:2px;font-size:13.5px;}
.rd-sidebar .side-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;text-decoration:none;color:#C9DAEC;font-weight:500;border:none;background:transparent;}
.rd-sidebar .side-link:hover{background:rgba(255,255,255,.08);color:#fff;}
.rd-sidebar .side-link.active{background:rgba(226,112,58,.28);color:#fff;font-weight:700;}
.rd-sidebar .side-link .ic{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;opacity:.85;}
.rd-sidebar .side-link.side-cta{background:var(--rd-orange,#E2703A);color:#fff;font-weight:700;margin:4px 2px 8px;}
.rd-sidebar .side-link.side-cta:hover{background:var(--rd-orange-deep,#C95F2E);}
.rd-sidebar .side-sublink{padding:8px 12px 8px 30px;}
.rd-sidebar .side-badge{margin-left:auto;background:var(--rd-orange,#E2703A);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;line-height:1.4;}
/* collapsible groups */
.rd-sidebar details.side-group{margin-top:6px;}
.rd-sidebar details.side-group summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:7px 12px;border-radius:8px;color:#7E99B5;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;user-select:none;list-style:none;}
.rd-sidebar details.side-group summary::-webkit-details-marker{display:none;}
.rd-sidebar details.side-group summary:hover{color:#AFC6DE;}
.rd-sidebar details.side-group summary .chev{display:inline-block;width:0;height:0;border-style:solid;border-width:4px 0 4px 5.5px;border-color:transparent transparent transparent currentColor;transition:transform .15s;flex:none;}
.rd-sidebar details.side-group[open] summary .chev{transform:rotate(90deg);}
.rd-sidebar .side-group-items{display:flex;flex-direction:column;gap:1px;padding:2px 0 4px;}
/* legacy flat group label (kept for any page still using it) */
.rd-sidebar .side-grp{padding:12px 12px 4px;color:#7E99B5;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;}
/* footer */
.rd-sidebar .side-foot{border-top:1px solid rgba(255,255,255,.1);padding:12px 14px;}
.rd-sidebar .side-user{display:flex;align-items:center;gap:10px;}
.rd-sidebar .side-uchip{width:34px;height:34px;flex:none;border-radius:50%;background:var(--rd-orange,#E2703A);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;}
.rd-sidebar .side-umeta{flex:1;min-width:0;line-height:1.3;}
.rd-sidebar .side-uname{display:block;font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rd-sidebar .side-ulinks{display:block;font-size:11.5px;color:#7E99B5;}
.rd-sidebar .side-ulinks a{color:#7E99B5;text-decoration:none;}
.rd-sidebar .side-ulinks a:hover{color:#AFC6DE;}
.rd-sidebar .side-logout{flex:none;color:#7E99B5;padding:6px;border-radius:6px;display:inline-flex;}
.rd-sidebar .side-logout:hover{background:rgba(255,255,255,.08);color:#fff;}
.rd-sidebar .side-logout .ic{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;}

/* ============================================================
   Job detail header, grouped tabs, action banner (mockups 1c/1d)
   ============================================================ */
.rd-job-header{background:#fff;border:1px solid var(--border-soft,#E4E7EC);border-radius:12px;padding:16px 22px 0;margin-bottom:20px;}
.rd-job-header-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.rd-job-back{color:var(--muted,#334155);text-decoration:none;font-size:13px;flex:none;}
.rd-job-num{font-family:var(--rd-serif);font-size:24px;font-weight:700;color:var(--navy-ink,#0E2A47);}
.rd-job-name{font-size:16px;font-weight:600;color:#334155;}
.rd-job-rush{font-size:12px;font-weight:800;padding:4px 12px;border-radius:999px;background:var(--rd-brick-deep,#7E2C21);color:#fff;}
.rd-job-actions{margin-left:auto;display:flex;gap:10px;align-items:center;}
.rd-job-actions .button{margin:0;}
.rd-job-sub{font-size:13px;color:var(--muted,#334155);margin-top:2px;}
.rd-job-sub b{color:var(--rd-orange-ink,#B4542C);}
/* progress rail */
.rd-progress{display:flex;gap:6px;margin-top:14px;}
.rd-progress-step{flex:1;text-align:center;}
.rd-progress-step .bar{height:5px;border-radius:3px;background:#E4E7EC;}
.rd-progress-step .lbl{font-size:11px;font-weight:600;color:#98A2B3;margin-top:5px;}
.rd-progress-step.complete .bar{background:#0E7A4E;}
.rd-progress-step.complete .lbl{color:#0E7A4E;font-weight:700;}
.rd-progress-step.current .bar{background:var(--rd-orange,#E2703A);}
.rd-progress-step.current .lbl{color:var(--rd-orange-ink,#B4542C);font-weight:800;}
/* grouped tabs */
.rd-job-tabs{display:flex;gap:4px;margin-top:14px;overflow-x:auto;}
.rd-job-tabs .tab-button{background:none;border:none;border-bottom:3px solid transparent;border-radius:0;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--muted,#334155);cursor:pointer;white-space:nowrap;}
.rd-job-tabs .tab-button:hover{color:var(--navy,#0F3A63);}
.rd-job-tabs .tab-button.active{color:var(--navy,#0F3A63);font-weight:700;border-bottom-color:var(--rd-orange,#E2703A);}
.rd-tab-hint{color:#98A2B3;font-weight:500;}
.rd-tab-badge{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:#FFF7E6;color:#8A6116;margin-left:6px;}
.rd-tab-badge.ok{background:#E9F7EF;color:#0E7A4E;}
/* customer action banner */
.rd-action-banner{background:linear-gradient(140deg,#7E2C21,#A93B2E);border-radius:12px;padding:20px 24px;color:#fff;display:flex;align-items:center;gap:24px;margin-bottom:20px;}
.rd-action-banner .eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#F5C6A8;}
.rd-action-banner h2{margin:4px 0 0;font-family:var(--rd-serif);font-size:22px;font-weight:600;color:#fff;}
.rd-action-banner p{margin:4px 0 0;font-size:13.5px;color:#F6E3DA;}
.rd-action-banner .rd-btn-white{flex:none;font-size:15px;font-weight:800;padding:13px 26px;border-radius:8px;}
@media(max-width:800px){.rd-action-banner{flex-direction:column;align-items:flex-start;}}

/* ============================================================
   Job ticket in-portal preview (mockup 1a)
   ============================================================ */
.rd-ticket{color:#111827;}
.rd-ticket h3{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:#6B7280;margin:0 0 8px;}
.rd-ticket-head{display:flex;align-items:flex-start;gap:24px;border-bottom:3px solid #111827;padding-bottom:14px;margin-bottom:14px;}
.rd-ticket-title{flex:1;display:flex;flex-direction:column;}
.rd-ticket-eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:#6B7280;}
.rd-ticket-num{font-family:var(--rd-serif);font-size:40px;font-weight:700;line-height:1.05;}
.rd-ticket-sub{font-size:15px;font-weight:600;color:#374151;}
.rd-2d{display:block;width:88px;height:88px;border:2px solid #111827;background:conic-gradient(from 45deg,#111 25%,#fff 0 50%,#111 0 75%,#fff 0) 0 0/14.66px 14.66px;margin:0 auto;}
.rd-2d-sm{width:72px;height:72px;background-size:12px 12px;}
.rd-2d-caption{display:block;font-size:10px;font-weight:700;text-align:center;margin-top:5px;color:#111827;}
.rd-ticket-code{flex:none;text-align:center;}
.rd-ticket-strip{display:grid;grid-template-columns:auto repeat(4,1fr);border-bottom:2px solid #111827;margin-bottom:14px;}
.rd-ticket-strip>div{padding:12px 16px;border-right:1px solid #D1D5DB;}
.rd-ticket-strip>div:last-child{border-right:none;}
.rd-ticket-strip span{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:#6B7280;}
.rd-ticket-strip b{font-size:17px;font-weight:800;}
.rd-ticket-priority{background:#F3F4F6;}
.rd-ticket-priority.is-rush{background:#111827;color:#fff;}
.rd-ticket-priority.is-rush span{color:#9CA3AF;}
.rd-ticket-specs{display:grid;grid-template-columns:1fr 1fr 240px;gap:0;border-bottom:2px solid #111827;margin-bottom:14px;}
.rd-ticket-specs>div{padding:0 16px 14px 0;border-right:1px solid #D1D5DB;}
.rd-ticket-specs>div+div{padding-left:16px;}
.rd-ticket-specs>div:last-child{border-right:none;}
.rd-ticket-kv{width:100%;border-collapse:collapse;font-size:13px;}
.rd-ticket-kv td{padding:3px 0;}
.rd-ticket-kv td:first-child{color:#6B7280;width:46%;}
.rd-ticket-kv td:last-child{font-weight:700;}
.rd-ticket-kv .rd-big{font-weight:800;font-size:15px;}
.rd-ticket-plan-table{width:100%;}
.rd-ticket-plan-table th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;border-bottom:2px solid #111827;}
.rd-ticket-plan-table .rd-op{font-weight:800;}
.rd-ticket-plan-table .rd-machine{font-weight:700;}
.rd-ticket-plan-table .rd-qty{text-align:right;}
.rd-ticket-plan-table .rd-notes{color:#6B7280;}
.rd-ticket-plan-table .rd-done{text-align:center;}
.rd-done-box{display:inline-block;width:18px;height:18px;border:2px solid #111827;}
.rd-ticket-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-top:3px solid #111827;padding-top:14px;margin-top:16px;}
.rd-ticket-foot-meta{font-size:12px;color:#374151;line-height:1.6;}
.rd-ticket-foot-codes{display:flex;gap:22px;flex:none;}
@media(max-width:900px){.rd-ticket-specs{grid-template-columns:1fr;}.rd-ticket-specs>div{border-right:none;padding-left:0;}.rd-ticket-strip{grid-template-columns:1fr 1fr;}}

/* ============================================================
   v31.463 - Public page harmonization + vertical density pass
   Unifies every public (logged-out) marketing/info page onto the
   rd- redesign language: one consistent card, page title, intro,
   kicker, and section rhythm - and trims excess vertical white
   space to a moderate, tighter cadence. Scoped to body.public so
   the authenticated portal shell (which has its own density pass
   in style.css) is untouched. Appended last so these rules win.
   ============================================================ */

/* ---- 1. Page shell: tighter top/bottom rhythm ---- */
body.public .content-shell > main{padding:18px 24px 30px;}
@media(max-width:950px){body.public .content-shell > main{padding:12px 16px 22px;}}

/* ---- 2. One consistent card across every public page ---- */
body.public .card{
  border:1px solid var(--border,#D7DEE8);
  border-radius:12px;
  padding:22px 24px;
  margin:0 0 16px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(15,45,80,.05);
}
body.public .card > *:first-child{margin-top:0;}
body.public .card > *:last-child{margin-bottom:0;}

/* ---- 3. Consistent page title, intro, and kicker ---- */
body.public .content-shell > main > h1,
body.public .card h1{
  font-family:var(--rd-serif,'Source Serif 4',Georgia,serif);
  font-weight:600;font-size:34px;line-height:1.12;letter-spacing:-.01em;
  color:var(--navy-ink,#0E2A47);margin:0 0 10px;
}
@media(max-width:950px){
  body.public .content-shell > main > h1,
  body.public .card h1{font-size:27px;}
}
/* Lead paragraph directly under the page title reads as a proper intro */
body.public .card > h1 + .note,
body.public .card > h1 + p,
body.public h1 + .resource-intro{
  font-size:16px;line-height:1.6;color:#475569;max-width:920px;margin:0 0 14px;
}
/* Consistent kicker / eyebrow */
body.public .eyebrow{
  text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:800;
  color:var(--rd-orange-ink,#B4542C);margin:0 0 8px;display:block;
}

/* ---- 4. Tighter prose + heading rhythm inside legacy cards ---- */
body.public .card p{margin:0 0 12px;}
body.public .card ul,body.public .card ol{margin:0 0 12px;}
body.public .card li{margin:5px 0;}
body.public .card h2{margin:18px 0 10px;}
body.public .card h3{margin:14px 0 7px;}

/* ---- 5. rd- section rhythm: EVEN vertical gaps (v31.464) ----
   Full-width sections stack as block siblings. Using top+bottom PADDING for
   spacing doubled the gap between any two sections (bottom padding of one +
   top padding of the next = ~80px). Switch to vertical MARGINS, which collapse
   between adjacent siblings, so every section-to-section gap is a single, even
   value regardless of which section types are adjacent. Filled sections keep
   internal padding for their backgrounds; transparent ones use margin only. */
.rd-section{padding:0;margin:28px 0;}
/* The horizontal padding must be cancelled by an equal negative margin, or tinted
   sections indent their content relative to plain sections and the page zigzags.
   24px matches the main content padding, so the tint spans edge to edge. */
.rd-section-tint{padding:30px 24px;margin:28px -24px;}
.rd-hero{padding:36px 48px 30px;margin:8px 0 40px;} /* v31.882: was 44/40 vertical; shell tightened with the slide-height convergence */
.rd-band-navy{padding:40px;margin:40px 0;}
.rd-band-brick{padding:38px 40px;margin:40px 0;}
.rd-cta-band{padding:36px 48px;margin:40px 0 8px;}
.rd-split-card{padding:36px;gap:44px;margin:40px 0;}
.rd-intro{margin:0 0 24px;}
.rd-actions{margin:0 0 24px;}
.rd-section-head{margin-bottom:26px;}
.rd-h1{margin:0 0 16px;}
.rd-h2{margin:0 0 12px;}
/* first/last block: trim the outer gap so pages don't start/end too airy */
.content-shell > main > section:first-child,
.content-shell > main > div:first-child{margin-top:8px;}
.content-shell > main > section:last-child{margin-bottom:8px;}
@media(max-width:950px){
  .rd-section{margin:28px 0;}
  .rd-section-tint{padding:26px 18px;margin:28px 0;}
  .rd-hero{padding:28px 22px;margin:6px 0 28px;}
  .rd-band-navy,.rd-band-brick,.rd-cta-band{padding:26px 22px;margin:28px 0;}
  .rd-split-card{padding:22px;gap:24px;margin:28px 0;}
}

/* ---- 6. Legacy public hero + grids: tighter, same family ---- */
body.public .public-hero{margin:8px 0 20px;}
body.public .public-hero-copy{padding:34px;}
body.public .public-grid{margin:0 0 18px;gap:16px;}
body.public .hero-actions{margin:16px 0 18px;}
@media(max-width:950px){body.public .public-hero-copy{padding:24px;}}

/* ============================================================
   v31.464 - interior public page kit
   Shared building blocks so every rebuilt public page matches the
   home/political/job-accuracy redesign: a compact navy page hero,
   a light kicker header for interior sections, prose + info tables,
   pill rows, and a centered auth layout for login/register.
   ============================================================ */

/* ---- Interior page hero (compact navy band, one per page) ---- */
.rd-page-hero{
  background:linear-gradient(150deg,#0A2440 0%,#0F3A63 70%,#174E7F 100%);
  color:#fff;border-radius:16px;padding:38px 44px;margin:8px 0 22px;
}
.rd-page-hero .rd-kicker{color:var(--rd-orange-soft);}
.rd-page-hero .rd-h1{color:#fff;font-size:40px;line-height:1.08;margin:0 0 14px;}
.rd-page-lede{margin:0;font-size:17px;line-height:1.6;color:#D6E4F5;}
.rd-page-hero .rd-page-lede a,.rd-page-hero p a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.rd-page-hero .rd-actions{margin:22px 0 0;}
.rd-page-hero-split{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:center;}
.rd-page-hero-aside{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:22px 24px;}
.rd-page-hero-aside h2{font-family:var(--rd-serif);font-size:18px;color:#fff;margin:0 0 10px;}
.rd-page-hero-aside .rd-check{color:#E5EFF9;}
@media(max-width:950px){
  .rd-page-hero{padding:28px 22px;}
  .rd-page-hero .rd-h1{font-size:30px;}
  .rd-page-hero-split{grid-template-columns:1fr;gap:22px;}
}

/* ---- Interior section header (light background) ---- */
.rd-section-lead{margin:0 0 26px;}
.rd-section-lead .rd-kicker{color:var(--rd-orange-ink);}
.rd-section-lead .rd-h2{margin:0 0 12px;}
.rd-section-lead p{margin:0;font-size:16.5px;line-height:1.65;color:#475569;}

/* ---- Prose / long-form content (legal, guides) ---- */
.rd-prose h2{font-family:var(--rd-serif);font-weight:600;font-size:24px;color:var(--navy-ink,#0E2A47);margin:30px 0 10px;letter-spacing:-.01em;}
.rd-prose h3{font-size:18px;color:var(--navy,#0F3A63);margin:20px 0 8px;}
.rd-prose p{font-size:16px;line-height:1.7;color:#334155;margin:0 0 14px;}
.rd-prose ul,.rd-prose ol{margin:0 0 16px;padding-left:20px;}
.rd-prose li{margin:7px 0;font-size:16px;line-height:1.6;color:#334155;}
.rd-prose>*:first-child{margin-top:0;}
.rd-prose a{color:var(--navy,#0F3A63);font-weight:600;}
.rd-callout{background:#FFF6EE;border:1px solid #F3D3BC;border-left:4px solid var(--rd-orange,#E2703A);border-radius:8px;padding:16px 20px;margin:0 0 18px;font-size:15px;line-height:1.6;color:#5C3B26;}

/* ---- Info table (rates, turnaround, reference data) ---- */
.rd-table-card{border:1px solid var(--border-soft,#E4E7EC);border-radius:12px;overflow:hidden;margin:0 0 18px;background:#fff;}
.rd-table{width:100%;border-collapse:collapse;font-size:14.5px;}
.rd-table th{background:#0E2A47;color:#fff;text-align:left;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;padding:11px 16px;}
.rd-table td{padding:10px 16px;border-bottom:1px solid #EEF2F7;color:#334155;}
.rd-table tr:last-child td{border-bottom:none;}
.rd-table tbody tr:nth-child(even){background:#F7FAFD;}

/* ---- Pill / chip rows on light sections ---- */
.rd-pill-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 6px;}
.rd-pill{background:#F5F9FD;border:1px solid var(--border,#D7DEE8);padding:8px 15px;border-radius:999px;font-size:13.5px;font-weight:600;color:#334155;text-decoration:none;}
a.rd-pill:hover{border-color:#9cc2ec;color:var(--navy,#0F3A63);}

/* ---- Centered auth layout (login / register / forgot) ---- */
body.public .content-shell > main.rd-auth-main{max-width:940px;}
.rd-auth{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:18px 0 26px;border-radius:16px;overflow:hidden;border:1px solid var(--border,#D7DEE8);box-shadow:0 18px 44px rgba(15,45,80,.12);background:#fff;}
.rd-auth-aside{background:linear-gradient(155deg,#0A2440 0%,#0F3A63 72%,#174E7F 100%);color:#fff;padding:40px 36px;display:flex;flex-direction:column;justify-content:center;}
.rd-auth-aside .rd-kicker{color:var(--rd-orange-soft);}
.rd-auth-aside h2{font-family:var(--rd-serif);font-weight:600;font-size:28px;line-height:1.12;margin:0 0 14px;color:#fff;}
.rd-auth-aside p{color:#D6E4F5;font-size:15px;line-height:1.6;margin:0 0 16px;}
.rd-auth-aside .rd-check{color:#E5EFF9;font-size:14.5px;}
.rd-auth-form{padding:38px 36px;}
.rd-auth-form h1{font-family:var(--rd-serif);font-weight:600;font-size:27px;color:var(--navy-ink,#0E2A47);margin:0 0 6px;}
.rd-auth-form>.note{margin:0 0 18px;color:var(--muted,#334155);font-size:14px;}
.rd-auth-form .button,.rd-auth-form button[type=submit]{width:100%;text-align:center;padding:12px;font-size:15px;font-weight:700;margin-top:6px;}
.rd-auth-foot{margin:16px 0 0;font-size:14px;color:var(--muted,#334155);text-align:center;}
@media(max-width:820px){.rd-auth{grid-template-columns:1fr;}.rd-auth-aside{display:none;}}



/* ---- verification vs tracking comparison (v31.766) ---- */
.rd-vt{margin-top:32px;align-items:stretch;}
.rd-vt-col{background:#fff;border:1px solid var(--border,#D7DEE8);border-radius:12px;padding:28px;}
.rd-vt-verify{border-top:4px solid var(--rd-orange);box-shadow:0 18px 40px -26px rgba(14,42,71,.5);}
.rd-vt-tier{margin:0 0 6px;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;font-weight:800;color:var(--muted,#334155);}
.rd-vt-verify .rd-vt-tier{color:var(--rd-orange-ink);}
.rd-vt-col h3{margin:0 0 4px;font-size:22px;color:var(--navy-ink,#0E2A47);}
.rd-vt-who{margin:0 0 18px;font-size:13.5px;color:var(--muted,#334155);}
.rd-vt-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.rd-vt-list li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:#334155;}
.rd-vt-list li:before{content:"\203A";position:absolute;left:4px;top:-1px;font-weight:800;color:#475569;}
.rd-vt-list-ok li:before{content:"\2713";color:var(--rd-orange);left:2px;}
.rd-vt-foot{margin:22px 0 0;font-size:14px;color:var(--muted,#334155);}
/* v31.766: tool CTA card is now a link on home + tools page */
a.rd-tool-card{text-decoration:none;color:inherit;}
a.rd-tool-card-cta h3,a.rd-tool-card-cta p{color:#fff;}


/* v31.791 accessibility: keep focused and anchor-linked content clear of the
   sticky header, and give keyboard users a way past the nav. */
html{scroll-padding-top:90px;}   /* sticky header is 77px; keeps focused and
                                     anchor-linked content clear of it */
:target,main:focus,h1,h2,h3{scroll-margin-top:90px;}
main:focus{outline:none;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:#1c2b46;color:#fff;padding:10px 16px;border-radius:0 0 6px 0;text-decoration:none;}
.skip-link:focus{left:0;}
.footer-org{margin-bottom:10px;}
.footer-org-name{margin:0 0 4px;font-weight:700;color:#1c2b46;}
.footer-org-meta{margin:0 0 2px;font-size:13px;color:#334155;}

/* v31.805: Mailing Intelligence Center pillars. Equal-height cards with the
   kicker acting as a small step label above each heading. */
.rd-mic-pillar{display:flex;flex-direction:column;text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease;}
.rd-mic-pillar:hover{border-color:#2f5597;box-shadow:0 2px 10px rgba(28,43,70,.08);}
.rd-mic-pillar .rd-kicker{margin:0 0 6px;}
.rd-mic-pillar h3{margin:0 0 8px;}
.rd-mic-pillar p:last-child{margin:0;}

/* v31.806: Mailing Intelligence Center tool pages */
.rd-mic-shot-wrap{margin-top:26px;max-width:760px;}
.rd-mic-shot{width:100%;height:auto;border-radius:12px;box-shadow:0 6px 24px rgba(28,43,70,.10);display:block;}
.rd-mic-h3{margin:22px 0 6px;color:#1c2b46;font-size:1.05rem;}
.rd-mic-steps{margin:10px 0 0;padding-left:20px;}
.rd-mic-steps li{margin:7px 0;}


/* v31.807: .rd-btn-ghost is defined white-on-transparent for dark heroes and the
   navy CTA band. On a light section that renders white text on a near-white
   background, effectively invisible. Restore contrast in light contexts and keep
   the dark band as-is. */
.rd-section .rd-btn-ghost,
.rd-section-tint .rd-btn-ghost{color:#1c2b46!important;border-color:#9db3cf;}
.rd-section .rd-btn-ghost:hover,
.rd-section-tint .rd-btn-ghost:hover{background:#eaf0f7;}
.rd-cta-band .rd-btn-ghost,
.rd-hero .rd-btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.45);}

/* The U+2122 glyph does not sit pre-raised in system-ui: measured against cap
   height it hung 6-9px low, worst on large headings. Offsetting by .45em of its
   own size lands it on the cap line at every size (h1 -1px, h2 +1px, kicker +2px).
   position/top is used rather than vertical-align:super because it does not
   stretch the line box, and because super overshot on large headings. */
.tm{
  font-size:.62em;
  font-weight:600;
  letter-spacing:.01em;
  vertical-align:baseline;
  position:relative;
  top:-.45em;
}

/* v31.809: full-width two-column prose. Long copy in a single narrow column runs
   tall; two columns use the page width and roughly halve the height. */
.rd-twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;max-width:none;}
.rd-twocol p{margin:0 0 10px;}
@media(max-width:800px){.rd-twocol{grid-template-columns:1fr;}}
/* .rd-vt-track was in the markup but never styled, so the comparison pair looked
   lopsided next to .rd-vt-verify's accent border. Neutral rule keeps them a set. */
.rd-vt-track{border-top:4px solid #c7d2e0;}

/* v31.814: article dates. A visible, honest date is half the freshness signal;
   the other half is dateModified in the Article schema. */
.rd-article-dates{margin:14px 0 0;color:#334155;font-size:14px;}


/* v31.820: guide and article page styling. These live here rather than in
   ai_assistant.css because that stylesheet only loads on the dashboard and the
   Mail Expert page, so every guide and article was rendering with no styling at
   all: full-viewport line lengths, default headings, unstyled lists. */
/* ---- Public guide pages -------------------------------------------------- */
/* Guides are reference pages people scan, so they carry a wider measure than
   long-form prose: ~96 characters instead of 76, using more of the page. */
/* v31.843 unified this column to one measure (820px) after four different
   right edges shipped on a single page. v31.853 widens that single measure to
   the full section width by direction: site policy is that text fills the
   width of the section it sits in, matching the headings. The one-right-edge
   principle from v31.843 still holds - it is simply the section edge now. Do
   not reintroduce per-element max-widths inside this wrapper. */
.rd-guide-wrap { }
.rd-guide-toc {
  margin: 22px 0 8px;
  padding: 14px 18px;
  background: #f4f6fa;
  border-left: 3px solid #2f5597;
  border-radius: 6px;
}
.rd-guide-toc-title {
  margin: 0 0 8px;
  font-weight: 700;
  color: #1c2b46;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rd-guide-toc ul { margin: 0; padding-left: 18px; }
.rd-guide-toc li { margin: 3px 0; }
.rd-guide-body { margin-top: 22px; font-size: 17px; line-height: 1.75; color: #1a2230; }
.rd-guide-body p { margin: 0 0 24px; }
.rd-guide-h2 {
  /* 24px bottom instead of 10px: the body line-height is 29.8px, so a 10px gap
     put the heading closer to the paragraph above it than to the one it labels.
     1.5rem instead of 1.35rem gives the section headings a visible step over
     17px body copy; 21.6px was only 1.27x and read as bold body text. */
  margin: 40px 0 14px;
  font-size: 1.5rem;
  color: #1c2b46;
  scroll-margin-top: 80px;
}
.rd-guide-list { margin: 0 0 24px; padding-left: 22px; }
.rd-guide-list li { margin: 12px 0; }
.rd-guide-ref { color: #2f5597; font-size: 0.92em; text-decoration: none; }
.rd-guide-ref:hover { text-decoration: underline; }
/* v31.844: Mail Expert call to action.
   Two changes. The panel was #f4f6fa, the same blue-grey as the table of
   contents box above it, so the one thing on the page asking for an action
   looked like another reference block. It is now a warm tint, which is the only
   warm surface on the page and reads as a distinct thing rather than more of
   the same.
   The paragraph also carried max-width:62ch (~580px) inside an 820px panel, so
   the text stopped roughly 240px short of the background behind it. The panel
   sets the measure; nothing inside it needs its own.
   #fce9d5 is 1.18:1 against white, enough to register without shouting, and
   holds 11.97:1 on the heading and 8.75:1 on body copy. Orange stays an accent:
   this is a wash and a rule, never a fill behind white text. */
.rd-guide-cta {
  margin: 34px 0 0;
  padding: 22px 24px;
  background: #fce9d5;
  border: 1px solid #f3d8bd;
  border-top: 3px solid #e8791f;
  border-radius: 8px;
}
.rd-guide-cta h3 { margin: 0 0 8px; color: #1c2b46; }
.rd-guide-cta p { margin: 0 0 16px; color: #3a3226; }


.rd-mailexpert-narrow{max-width:1180px;}

/* v31.823: page intros. .rd-lede caps at 640px, which suits a hero over a dark
   background but starves a landing-page intro sitting above a full-width card
   grid: 569px of text over 1192px of cards. Long-form article and guide body copy
   deliberately keeps its narrower reading measure. */
.rd-page-intro{}
@media(max-width:900px){.rd-page-intro{max-width:none!important;}}

/* v31.827: exact USPS source versions under the Mail Expert, so an answer can be
   checked against the same edition we answered from. */
.pc-ai-sources-line{margin:8px 0 0;font-size:12.5px;color:#334155;line-height:1.5;}
/* v31.827: hero eyebrow above the H1, keeping the original line as a lead-in. */
.rd-hero-eyebrow{margin:0 0 6px;font-size:15px;font-weight:600;color:#D6E4F5;opacity:.9;}

/* v31.889: unfilled legal placeholders. Highlighted so a value that still needs
   to be supplied (legal entity name, per-department emails) cannot ship
   unnoticed. Remove the rule when every .legal-ph is filled, or just delete the
   spans as each value lands. */
.legal-ph{background:#FEF3C7;color:#92400E;border:1px dashed #D97706;border-radius:3px;padding:0 4px;font-weight:600;font-size:.92em;white-space:nowrap;}

/* v31.895: trust strip at conversion points (register / login / quote).
   Quiet by design - it reassures without shouting, navy text on a faint tint,
   lock glyph in orange as an accent only (per house convention). Links use the
   standard navy. Sits directly under the submit action where a hesitant user
   looks for reassurance before committing. */
.rd-trust-strip{display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;padding:10px 12px;background:#F5F9FD;border:1px solid #E2ECF6;border-radius:8px;font-size:13px;line-height:1.5;color:var(--navy-ink,#0E2A47);}
.rd-trust-lock{color:var(--rd-orange,#E2703A);font-size:15px;line-height:1.4;flex:none;}
.rd-trust-text a{color:var(--navy,#0F3A63);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(15,58,99,.25);}
.rd-trust-text a:hover{border-bottom-color:var(--navy,#0F3A63);}

/* v31.896: interactive Job Control Center walkthrough on the tour page.
   Self-advancing stage stepper with a live production panel. Navy structure,
   orange only as the active-stage and pulse accent, per house convention. */
.jcc-walk{border:1px solid #E2ECF6;border-radius:14px;overflow:hidden;background:#fff;max-width:840px;margin:0 auto;}
.jcc-walk-stages{display:flex;flex-wrap:wrap;gap:2px;background:#F5F9FD;padding:8px;border-bottom:1px solid #E2ECF6;}
.jcc-stage{flex:1 1 auto;min-width:104px;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;border:none;background:transparent;border-radius:8px;font-size:14px;font-weight:700;color:#5B7A9B;cursor:pointer;transition:background .15s,color .15s;}
.jcc-stage:hover{background:#EAF2FB;color:var(--navy,#0F3A63);}
.jcc-stage.is-active{background:var(--navy,#0F3A63);color:#fff;}
.jcc-stage-n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.18);font-size:12px;font-weight:800;}
.jcc-stage:not(.is-active) .jcc-stage-n{background:#DCE8F5;color:var(--navy,#0F3A63);}
.jcc-walk-stage-progress{height:3px;background:#EDF3FA;}
.jcc-walk-bar{display:block;height:100%;width:0;background:var(--rd-orange,#E2703A);}
.jcc-walk-screen{padding:26px 28px;min-height:210px;position:relative;}
.jcc-panel{display:none;animation:jccFade .4s ease;}
.jcc-panel.is-active{display:block;}
@keyframes jccFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.jcc-panel-head{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--navy-ink,#0E2A47);font-size:16px;margin-bottom:8px;}
.jcc-panel-lead{color:#475569;font-size:15px;line-height:1.6;margin:0 0 16px;}
.jcc-dot{width:11px;height:11px;border-radius:50%;flex:none;}
.jcc-dot-blue{background:#378ADD;} .jcc-dot-amber{background:var(--rd-orange,#E2703A);} .jcc-dot-ok{background:#1D9E75;}
.jcc-pulse{animation:jccPulse 1.1s ease-in-out infinite;}
@keyframes jccPulse{0%,100%{box-shadow:0 0 0 0 rgba(226,112,58,.5);}50%{box-shadow:0 0 0 6px rgba(226,112,58,0);}}
.jcc-rows{display:flex;flex-direction:column;gap:8px;}
.jcc-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;background:#F7FAFD;border:1px solid #E9F0F8;border-radius:8px;font-size:14px;color:var(--navy-ink,#0E2A47);}
.jcc-row-total{background:#FFF6EE;border-color:#F3D3BC;font-weight:700;}
.jcc-ic{font-style:normal;margin-right:6px;}
.jcc-badge{font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap;}
.jcc-badge-ok{background:#E1F5EE;color:#0F6E56;} .jcc-badge-navy{background:#E6F1FB;color:#0C447C;}
.jcc-meter{height:12px;background:#EDF3FA;border-radius:20px;overflow:hidden;margin:4px 0 18px;}
.jcc-meter-fill{display:block;height:100%;width:0;background:var(--rd-orange,#E2703A);border-radius:20px;}
.jcc-stats{display:flex;gap:14px;}
.jcc-stat{flex:1;text-align:center;background:#F7FAFD;border:1px solid #E9F0F8;border-radius:8px;padding:12px 8px;}
.jcc-stat b{display:block;font-size:22px;color:var(--navy,#0F3A63);}
.jcc-stat span{font-size:12px;color:#64748B;text-transform:uppercase;letter-spacing:.05em;}
.jcc-walk-foot{display:flex;align-items:center;gap:14px;padding:14px 28px;border-top:1px solid #E2ECF6;background:#FBFDFF;}
.jcc-ctrl{background:#fff;border:1.5px solid var(--navy,#0F3A63);color:var(--navy,#0F3A63);font-weight:700;font-size:13px;padding:7px 16px;border-radius:6px;cursor:pointer;}
.jcc-ctrl:hover{background:#F5F9FD;}
.jcc-walk-note{font-size:12.5px;color:#64748B;line-height:1.4;}
.jcc-video-frame{position:relative;padding-bottom:56.25%;height:0;border-radius:12px;overflow:hidden;background:#0E2A47;max-width:840px;margin:0 auto;}
.jcc-video-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.jcc-video-placeholder{max-width:840px;margin:0 auto;text-align:center;padding:44px 24px;background:#F5F9FD;border:1px dashed #C6D8EC;border-radius:12px;}
.jcc-video-play{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--navy,#0F3A63);color:#fff;font-size:20px;margin-bottom:14px;}
.jcc-video-placeholder p{color:#475569;font-size:15px;max-width:440px;margin:0 auto 18px;line-height:1.6;}
@media(max-width:640px){.jcc-stage{min-width:0;flex-basis:30%;font-size:13px;padding:9px 4px;}.jcc-stat b{font-size:18px;}}

/* v31.898: security data-flow pipeline diagram on /security. Navy nodes,
   orange connectors and the terminal purge node as the accent. The SVG scales
   with its container; on narrow screens it would shrink below legibility, so
   under 720px it is allowed to scroll horizontally inside a bordered frame
   rather than crush to unreadable. */
.sec-flow{margin:0 auto;max-width:900px;}
.sec-flow-svg{display:block;width:100%;height:auto;}
.sec-flow-cap{margin:16px auto 0;max-width:760px;text-align:center;font-size:14px;line-height:1.6;color:#475569;}
@media(max-width:720px){
  .sec-flow{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #E2ECF6;border-radius:12px;padding:14px 12px;background:#FBFDFF;}
  .sec-flow-svg{min-width:640px;}
  .sec-flow-cap{padding:0 4px;}
}
