/* ============================================================
   RRK Labs — content pages (legal policies + contact)
   Extends homepage.css tokens. Load order: homepage.css -> page.css
   ============================================================ */

.wrap-narrow{max-width:940px}

/* Breadcrumb */
.crumb{font-family:var(--fm);font-size:.78rem;color:var(--ink-3);display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;padding-top:1.5rem}
.crumb a{transition:color .2s}
.crumb a:hover{color:var(--ink)}
.crumb i{font-size:.9rem;color:var(--ink-4)}
.crumb span[aria-current]{color:var(--ink-1)}

/* Legal / policy header */
.legal-head{padding-block:1.3rem clamp(1.6rem,3vw,2.4rem);border-bottom:1px solid var(--border);margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.legal-head .eyebrow{display:block;margin-bottom:.85rem}
.legal-head h1{font-size:clamp(2.2rem,5.5vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.02;color:var(--ink)}
.legal-head .lead{margin-top:1rem}
.legal-head .updated{margin-top:1.1rem;font-family:var(--fm);font-size:.8rem;color:var(--ink-4);display:inline-flex;align-items:center;gap:.4rem}
.legal-head .updated i{color:var(--accent-ink);font-size:.95rem}

/* Prose */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:2.2rem 0 .7rem;scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.08rem;font-weight:600;color:var(--ink);margin:1.6rem 0 .5rem}
.prose p{color:var(--ink-2);margin:0 0 1rem;line-height:1.7}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{margin:0 0 1.1rem;padding-left:1.3rem;display:flex;flex-direction:column;gap:.45rem}
.prose li{color:var(--ink-2);line-height:1.6}
.prose li::marker{color:var(--ink-4)}
.prose strong,.prose b{color:var(--ink-1);font-weight:600}

/* Comparison table (RUO) */
.tbl-wrap{overflow-x:auto;margin:0 0 1.2rem;border:1px solid var(--border);border-radius:var(--r-sm)}
.tbl-wrap table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.tbl-wrap thead th{background:var(--surface-2);color:var(--ink-1);font-weight:600;text-align:left;padding:.75rem .95rem;font-size:.85rem}
.tbl-wrap tbody td{padding:.7rem .95rem;border-top:1px solid var(--border);color:var(--ink-2)}
.tbl-wrap tbody td:first-child{color:var(--ink-1);font-weight:500}

/* Closing note box */
.note-box{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-sm);
  padding:1.1rem 1.3rem;margin:1.8rem 0 0;color:var(--ink-2);font-size:.95rem;line-height:1.65}

/* ============================================================
   Contact page
   ============================================================ */
.contact{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,4rem);align-items:start;padding-block:clamp(1rem,3vw,1.6rem) clamp(2.4rem,5vw,3.6rem)}
.contact-info .lead{margin-bottom:1.6rem}
.ci-block{display:flex;gap:.9rem;align-items:flex-start;padding:1.15rem 0;border-top:1px solid var(--border)}
.ci-block:first-of-type{border-top:0;padding-top:0}
.ci-icon{width:42px;height:42px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;flex:none;color:var(--accent-ink);font-size:1.2rem}
.ci-body{min-width:0}
.ci-block h3{font-family:var(--fm);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);margin-bottom:.35rem}
.ci-main{font-size:1.05rem;color:var(--ink);font-weight:500;word-break:break-word}
.ci-main a{color:var(--ink);transition:color .2s}
.ci-main a:hover{color:var(--accent-ink)}
.ci-sub{font-size:.9rem;color:var(--ink-2);margin-top:.35rem;line-height:1.55}
.ci-ph{color:var(--ink-4)}
.hours{list-style:none;margin-top:.2rem;display:flex;flex-direction:column;gap:.45rem;max-width:360px}
.hours li{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;white-space:nowrap;font-family:var(--fm);font-size:.8rem;color:var(--ink-1)}
.hours li .d{white-space:nowrap}
@media (max-width:400px){.hours li{font-size:.72rem;gap:.5rem}}
.hours li .d{color:var(--ink-3)}
.hours .tz{justify-content:flex-start;color:var(--ink-4);font-size:.78rem;margin-top:.25rem}
.ci-highlight{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fm);font-size:.8rem;color:var(--accent-ink);
  background:var(--accent-bg);border-radius:var(--pill);padding:.45rem .9rem;margin-top:1.5rem}

/* Contact form */
.contact-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2rem);position:relative}
.contact-form h2{font-size:1.3rem;font-weight:600;color:var(--ink);margin-bottom:.35rem}
.contact-form .cf-sub{color:var(--ink-3);font-size:.9rem;margin-bottom:1.4rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--fm);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.45rem}
.field label .req{color:var(--accent-ink)}
.field input,.field textarea{width:100%;font-family:var(--fs);font-size:1rem;color:var(--ink);background:var(--bg);
  border:1.5px solid var(--border-2);border-radius:var(--r-sm);padding:.78rem .9rem;transition:border-color .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink-1)}
.field textarea{min-height:140px;resize:vertical}
.field .err{display:none;color:#B3261E;font-size:.8rem;margin-top:.35rem}
.field.invalid input,.field.invalid textarea{border-color:#B3261E}
.field.invalid .err{display:block}
.contact-form .btn{width:100%;min-height:52px;margin-top:.3rem}
.cf-note{font-family:var(--fm);font-size:.72rem;color:var(--ink-4);text-align:center;margin-top:1rem}
.cf-success{display:none;text-align:center;padding:1.6rem .5rem}
.cf-success.show{display:block}
.cf-success i{font-size:2.6rem;color:#3F7A4E}
.cf-success h2{font-size:1.5rem;margin:.6rem 0 .35rem}
.cf-success p{color:var(--ink-2)}
.contact-form.done .cf-form{display:none}

/* JetPack (Grunion) contact form — styled to match (used on WordPress) */
.contact-form .wp-block-jetpack-contact-form,.contact-form .wp-block-jetpack-contact-form form{margin:0;display:block}
.contact-form .grunion-field-wrap,.contact-form .wp-block-jetpack-field-name,.contact-form .wp-block-jetpack-field-email,.contact-form .wp-block-jetpack-field-text,.contact-form .wp-block-jetpack-field-textarea{margin:0 0 1.1rem}
.contact-form .grunion-field-label,.contact-form .wp-block-jetpack-field-label{display:block;font-family:var(--fm);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.45rem}
.contact-form .grunion-field-label .lp-form-required,.contact-form .wp-block-jetpack-field-label .required{color:var(--accent-ink)}
.contact-form input[type="text"],.contact-form input[type="email"],.contact-form input[type="url"],.contact-form input[type="tel"],.contact-form input[type="number"],.contact-form select,.contact-form textarea{
  width:100%;font-family:var(--fs);font-size:1rem;color:var(--ink);background:var(--bg);border:1.5px solid var(--border-2);border-radius:var(--r-sm);padding:.78rem .9rem;transition:border-color .2s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--ink-1)}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form .wp-block-button{margin-top:.3rem}
.contact-form .wp-block-button__link,.contact-form button[type="submit"],.contact-form input[type="submit"]{
  width:100%;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--fs);font-weight:600;font-size:1rem;line-height:1;
  border-radius:var(--pill);border:1.5px solid transparent;background:var(--ink);color:var(--bg);cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.contact-form .wp-block-button__link:hover,.contact-form button[type="submit"]:hover,.contact-form input[type="submit"]:hover{background:#000;transform:translateY(-2px)}
.contact-form .contact-form-submission{font-family:var(--fs);color:var(--ink-2)}
.contact-form .contact-form-submission h4{color:var(--ink);font-size:1.4rem;margin-bottom:.4rem}

@media (max-width:820px){
  .contact{grid-template-columns:1fr;gap:2.2rem}
}

/* ============================================================
   COA Library
   ============================================================ */
.coa-verified{margin-top:1.15rem;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--fm);font-size:.78rem;letter-spacing:.02em;
  color:var(--accent-ink);background:var(--accent-bg);border-radius:var(--pill);padding:.42rem .9rem}
.coa-verified i{font-size:1rem}

.coa{padding-bottom:clamp(2rem,5vw,3.4rem)}
.coa-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.coa-table{width:100%;border-collapse:collapse;min-width:720px}
.coa-table thead th{font-family:var(--fm);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);
  font-weight:500;text-align:left;padding:.95rem 1.15rem;background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap}
.coa-table tbody tr{border-top:1px solid var(--border);transition:background .18s var(--ease)}
.coa-table tbody tr:first-child{border-top:0}
.coa-table tbody tr:hover{background:var(--surface-2)}
.coa-table td{padding:1rem 1.15rem;vertical-align:middle}

.coa-prod{display:flex;align-items:center;gap:.9rem;min-width:230px}
.coa-thumb{width:52px;aspect-ratio:600/804;height:auto;object-fit:cover;border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--bg);flex:none}
.coa-name{font-weight:600;font-size:.98rem;color:var(--ink);line-height:1.2}
.coa-datev{font-family:var(--fm);font-size:.85rem;color:var(--ink-2);white-space:nowrap}

.coa-results{display:flex;flex-direction:column;gap:.3rem}
.coa-res{display:flex;gap:.55rem;align-items:baseline;font-size:.86rem}
.coa-res .k{font-family:var(--fm);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);min-width:74px}
.coa-res .v{font-family:var(--fm);color:var(--ink-1);font-weight:500}

.coa-docs{display:flex;flex-wrap:wrap;gap:.5rem}
.coa-doc{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fs);font-weight:500;font-size:.82rem;color:var(--ink);
  background:var(--bg);border:1.5px solid var(--border-2);border-radius:var(--pill);padding:.42rem .85rem;cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease);white-space:nowrap}
.coa-doc i{font-size:1rem;color:var(--accent-ink)}
.coa-doc:hover{border-color:var(--ink-1);color:var(--ink)}
.coa-doc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.coa-foot{display:flex;gap:.55rem;align-items:flex-start;margin-top:1.1rem;font-size:.85rem;color:var(--ink-3);line-height:1.6;max-width:74ch}
.coa-foot i{color:var(--accent-ink);font-size:1.05rem;flex:none;margin-top:.05rem}

@media (max-width:720px){
  .coa-table-wrap{border:0;border-radius:0;background:transparent;overflow:visible}
  .coa-table{min-width:0}
  .coa-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .coa-table tbody tr{display:block;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);margin-bottom:1rem;padding:.4rem .2rem}
  .coa-table tbody tr:first-child{border-top:1px solid var(--border)}
  .coa-table tbody tr:hover{background:var(--surface)}
  .coa-table td{display:block;padding:.6rem 1.05rem;border-top:1px solid var(--border)}
  .coa-table td:first-child{border-top:0}
  .coa-table td::before{content:attr(data-label);display:block;font-family:var(--fm);font-size:.62rem;letter-spacing:.11em;
    text-transform:uppercase;color:var(--accent-ink);margin-bottom:.5rem}
  .coa-prod::before{margin-bottom:.6rem}
  .coa-thumb{width:46px}
  .coa-res .k{min-width:70px}
}

/* Certificate viewer (lightbox) */
.coa-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(.8rem,3vw,2rem);
  opacity:0;transition:opacity .18s var(--ease)}
.coa-modal.active{opacity:1}
.coa-modal[hidden]{display:none}
.coa-modal__backdrop{position:absolute;inset:0;background:rgba(20,18,14,.72);backdrop-filter:blur(3px)}
.coa-modal__box{position:relative;z-index:1;display:flex;flex-direction:column;width:min(760px,100%);max-height:90vh;
  background:var(--bg);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4);
  transform:translateY(8px) scale(.99);transition:transform .2s var(--ease)}
.coa-modal.active .coa-modal__box{transform:none}
.coa-modal__bar{display:flex;align-items:center;gap:.9rem;padding:.7rem .9rem .7rem 1.1rem;border-bottom:1px solid var(--border);background:var(--surface)}
.coa-modal__title{font-weight:600;font-size:.92rem;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coa-modal__open{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--fm);font-size:.76rem;color:var(--accent-ink);white-space:nowrap}
.coa-modal__open:hover{text-decoration:underline}
.coa-modal__close{width:34px;height:34px;flex:none;display:grid;place-items:center;border:1px solid var(--border-2);border-radius:var(--pill);
  background:var(--bg);color:var(--ink);cursor:pointer;font-size:1.1rem;transition:background .18s var(--ease),border-color .18s var(--ease)}
.coa-modal__close:hover{background:var(--surface-2);border-color:var(--ink-1)}
.coa-modal__stage{overflow:auto;padding:1rem;display:flex;align-items:flex-start;justify-content:center;background:var(--surface-2)}
.coa-modal__stage img{max-width:100%;height:auto;border-radius:var(--r-sm);background:#fff;display:block}

/* ============================================================
   Legal pages built with the block/page-builder editor
   The live legal pages use Gutenberg wp-block-group wrappers with preset
   background colors (amber highlight boxes) and preset font sizes that clash
   with the clean prose look. These normalize that block formatting so the
   content reads like the rest of the prose. Semantic prototype pages are
   unaffected (they have no wp-block-* markup).
   ============================================================ */
.prose .wp-block-group{background:transparent !important;border:0 !important;padding:0 !important;margin:0 0 1rem !important;box-shadow:none !important}
.prose .has-background{background:transparent !important;padding:0 !important}
.prose [class*="-background-color"]{background:transparent !important}
.prose .has-text-color{color:var(--ink-2) !important}
.prose [class*="font-size"]{font-size:inherit !important}
/* Force the RRK sans font on all legal content (some pages, e.g. Refund and
   Shipping, ship block content in a serif). Makes every legal page match the
   Terms of Service page. */
.prose, .prose p, .prose li, .prose span, .prose strong, .prose b, .prose em,
.prose a, .prose div, .prose td, .prose th,
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6,
.prose .wp-block-heading{font-family:var(--fs) !important}
.prose .wp-block-heading{font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:600;color:var(--ink);margin:2rem 0 .6rem}
.prose .wp-block-columns{gap:1.4rem}

/* Refund & Returns page — force all content to LEFT alignment so every block
   lines up on the same left edge (some blocks were centered/inconsistent).
   Scoped to that page only. */
.rrk-legal--refund_returns .prose,
.rrk-legal--refund-and-returns-policy .prose,
.rrk-legal--refund_returns .prose *,
.rrk-legal--refund-and-returns-policy .prose *{text-align:left}

/* Dark footer (match shop / product) */
.foot{background:var(--dark);border-top:0;color:#C9C1B2;position:relative}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,74,28,.55),transparent)}
.foot .foot-brand img{filter:brightness(0) invert(1);opacity:.85}
.foot .foot-brand p{color:#A79E8C}
.foot .foot-col h4{color:#8F8778}
.foot .foot-col a{color:#D6CFC2}
.foot .foot-col a:hover{color:#fff}
.foot .disclaimer{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09);color:#A79E8C}
.foot .disclaimer i{color:#FF6A3D}
.foot .foot-bot{border-top-color:rgba(255,255,255,.11);color:#8F8778}
.foot .pay{color:#8F8778}
.nav-links a.active{color:var(--ink)}