/* ============================================================================
   Parcel Risk Report — marketing design system
   Direction A · "Linen & Sun"  (facelift 2026-06)
   Warm, restrained, clearly California. Linen paper, navy + valley-green ink,
   terracotta + sun-gold accents pulled from the vintage postcards. Real-postcard
   framing. Brand tokens are sourced from the canonical kit (single source of truth):
   ui-kit/colors_and_type.css. The short names below are thin aliases onto the
   --prr-* layer so every rule in this stylesheet keeps working unchanged.
   ========================================================================== */
@import url('ui-kit/colors_and_type.css');  /* canonical --prr-* tokens + Domine/Public Sans — load FIRST */

:root{
  /* aliases → canonical kit. Change a brand value in colors_and_type.css, not here. */
  --ink:var(--prr-ink);
  --green:var(--prr-green);
  --paper:var(--prr-paper);
  --paper-2:var(--prr-paper-2);
  --card:var(--prr-card);
  --line:var(--prr-line);
  --line-soft:var(--prr-line-soft);
  --terra:var(--prr-terra);
  --terra-deep:var(--prr-terra-deep);
  --gold:var(--prr-gold);
  --sky:var(--prr-sky);
  --muted:var(--prr-muted);
  --accent:var(--prr-terra-deep);  /* .a / .active / .chip.hot — terracotta-deep */
  --sun:var(--prr-sun-tint);       /* pale peach for card-icon chips */
  --serif:var(--prr-serif);
  --sans:var(--prr-sans);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;
  /* faint linen weave */
  background-image:
    repeating-linear-gradient(0deg, rgba(140,120,80,.030) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(140,120,80,.030) 0 1px, transparent 1px 3px);
}
a{color:var(--terra-deep);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
.muted{color:var(--muted);}

/* ---- Buttons (raised, postcard-print feel) ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:15px;border-radius:9px;padding:13px 22px;border:2px solid var(--ink);cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s;}
.btn.primary{background:var(--terra);color:#fff;border-color:var(--terra);box-shadow:0 6px 0 -1px var(--terra-deep);}
.btn.primary:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 9px 0 -1px var(--terra-deep);}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.ghost:hover{text-decoration:none;background:rgba(22,52,76,.06);}

/* ---- Nav ---- */
nav.site{display:flex;align-items:center;justify-content:space-between;padding:20px 0;flex-wrap:wrap;gap:12px;border-bottom:1px solid var(--line);}
.herowrap nav.site{border-bottom:none;}  /* hero pages: the herowrap's own bottom rule does the separating */
.brand{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:9px;}
.brand .sun{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--gold),var(--terra));box-shadow:0 0 0 3px rgba(224,160,50,.22);flex:none;}
.brand .a{color:var(--terra);}
nav.site .links{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
nav.site .links a{color:var(--ink);font-weight:600;font-size:15px;}
nav.site .links a.active{color:var(--terra);}
nav.site .links a:hover{text-decoration:none;color:var(--terra);}

/* ---- Hero ---- */
.herowrap{position:relative;overflow:hidden;border-bottom:2px solid var(--ink);
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(188,220,236,.85), transparent 55%),
    radial-gradient(90% 80% at 5% 110%, rgba(224,160,50,.20), transparent 60%),
    linear-gradient(180deg,var(--paper-2),var(--paper));}
header.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:center;padding:54px 0 64px;}
header.hero.solo{display:block;}  /* hero variant with no side art (inner pages) */
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--terra-deep);font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:12px;}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--terra);flex:none;}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(34px,4.4vw,52px);line-height:1.06;margin:16px 0 18px;color:var(--green);letter-spacing:-.018em;max-width:18ch;}
h1 .u{background:linear-gradient(transparent 62%, rgba(224,160,50,.45) 62%);}
.lede{font-size:19px;color:#42504b;max-width:56ch;margin:0 0 26px;}
.lede b{color:var(--ink);}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.badge-nhd{display:inline-flex;align-items:center;gap:8px;margin-top:22px;background:var(--green);color:#fff;font-weight:600;font-size:13px;border-radius:24px;padding:8px 16px;}
.badge-nhd .ck{width:16px;height:16px;border-radius:50%;background:var(--gold);color:var(--green);font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:none;}
.sources{margin-top:26px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;max-width:64ch;}
.sources b{color:var(--ink);}

/* ---- Postcards, framed as real postcards ---- */
.pc-feature{position:relative;}
.postcard{background:#fff;padding:10px 10px 12px;border-radius:4px;border:1px solid #ece3cf;margin:0;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 18px 40px rgba(22,52,76,.26);}
.postcard img{display:block;width:100%;height:auto;border-radius:2px;}
.postcard .cap{font-family:var(--serif);font-size:12.5px;color:var(--muted);padding:9px 4px 2px;letter-spacing:.01em;}
.pc-feature .postcard{transform:rotate(-2.2deg);}
/* stamp + postmark on the featured card */
.stamp{position:absolute;top:-16px;right:14px;width:62px;height:74px;background:var(--sky);
  border:2px solid #fff;padding:5px;transform:rotate(7deg);filter:drop-shadow(0 5px 8px rgba(22,52,76,.28));z-index:3;
  -webkit-mask:radial-gradient(circle 3px at 0 50%, transparent 96%, #000) -3px 0/100% 8px,
        radial-gradient(circle 3px at 100% 50%, transparent 96%, #000) 3px 0/100% 8px,
        radial-gradient(circle 3px at 50% 0, transparent 96%, #000) 0 -3px/8px 100%,
        radial-gradient(circle 3px at 50% 100%, transparent 96%, #000) 0 3px/8px 100%;
  -webkit-mask-composite:source-in;mask-composite:intersect;background-clip:padding-box;}
.stamp .inner{width:100%;height:100%;background:linear-gradient(160deg,var(--gold),var(--terra));
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-weight:700;font-size:22px;border:1px dashed rgba(255,255,255,.7);}
.postmark{position:absolute;top:6px;right:-6px;width:78px;height:78px;border:2px solid var(--terra-deep);border-radius:50%;
  opacity:.5;transform:rotate(-12deg);display:flex;align-items:center;justify-content:center;text-align:center;z-index:2;
  color:var(--terra-deep);font-size:8px;font-weight:700;letter-spacing:.06em;line-height:1.25;pointer-events:none;}

/* ---- Sections ---- */
section{padding:66px 0;border-top:1px solid var(--line);}
.kicker{font-family:var(--sans);color:var(--terra-deep);font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:12px;margin:0 0 10px;}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3vw,34px);color:var(--green);margin:0 0 10px;letter-spacing:-.012em;}
.sub{color:var(--muted);margin:0 0 32px;max-width:64ch;font-size:17px;}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}  /* shared: 3 cards → 3-up at desktop, but tolerates 2/4 on sibling pages */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 24px 26px;position:relative;transition:transform .15s, box-shadow .15s;}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(22,52,76,.10);}
.card .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--sun);color:var(--terra-deep);}
.card h3{font-family:var(--serif);margin:0 0 8px;font-size:18px;color:var(--ink);}
.card p{margin:0;color:var(--muted);font-size:15px;}
.card p a{font-weight:700;}

/* sample shots */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:34px;}
.shots a{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 4px 16px rgba(22,52,76,.08);transition:transform .15s, box-shadow .15s;}
.shots a:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(22,52,76,.16);text-decoration:none;}
.shots img{display:block;width:100%;height:auto;}
.shots figcaption{font-size:12px;color:var(--muted);padding:10px 12px;border-top:1px solid var(--line);}
.more{margin-top:26px;}

/* postcard celebration band */
.pc-band{background:linear-gradient(180deg,#fbf6ea,#f3ead6);border-top:1px solid var(--line);border-bottom:2px solid var(--ink);}
.pc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:6px;}
.pc-row .postcard{transition:transform .2s ease, box-shadow .2s ease;}
.pc-row .postcard:nth-child(1){transform:rotate(-2.4deg);}
.pc-row .postcard:nth-child(2){transform:rotate(1.3deg) translateY(10px);}
.pc-row .postcard:nth-child(3){transform:rotate(2.8deg);}
.pc-row .postcard:hover{transform:rotate(0) translateY(-6px) scale(1.02);box-shadow:0 22px 44px rgba(22,52,76,.28);z-index:2;}

/* CTA band */
.cta-band{position:relative;overflow:hidden;background:var(--green);color:#fff;border-radius:18px;padding:46px 32px;text-align:center;margin:8px 0;}
.cta-band::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--gold),transparent 70%);opacity:.5;}
.cta-band h2{color:#fff;}
.cta-band p{color:#d5e4dc;max-width:54ch;margin:8px auto 22px;}
.cta-band .btn.primary{background:var(--gold);color:var(--green);border-color:var(--gold);box-shadow:0 6px 0 -1px #b97f1f;}
.cta-band .btn.primary:hover{box-shadow:0 9px 0 -1px #b97f1f;}

/* ============================================================================
   Inherited components from sibling pages (how-it-works / pricing / faq /
   methodology / privacy / terms). Restyled into the Linen & Sun palette so the
   pages already lean toward the new look; structure unchanged pending roll-out.
   ========================================================================== */

/* step numbers (how-it-works) */
.num{display:inline-flex;width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--serif);font-weight:700;align-items:center;justify-content:center;font-size:15px;margin-bottom:10px;}

/* hazard chips */
.haz{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.chip{background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 13px;font-size:14px;font-weight:600;color:var(--ink);}
.chip.hot{border-color:var(--accent);color:var(--accent);}

/* old scattered hero postcards (kept for any page still using it) */
.postcards{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;margin:34px 0 8px;padding:8px 0;}
.postcards img{width:220px;max-width:44vw;height:auto;background:#fff;padding:8px 8px 18px;border:1px solid #ece3cf;border-radius:4px;box-shadow:0 14px 30px rgba(22,52,76,.22);transition:transform .18s, box-shadow .18s;}
.postcards img:nth-child(1){transform:rotate(-4deg);}
.postcards img:nth-child(2){transform:rotate(2deg) translateY(8px);}
.postcards img:nth-child(3){transform:rotate(5deg);}
.postcards img:hover{transform:rotate(0) scale(1.03);box-shadow:0 20px 38px rgba(22,52,76,.30);z-index:2;}

/* optional framed hero image */
.heroimg{margin-top:26px;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 16px 38px rgba(22,52,76,.16);}
.heroimg img{display:block;width:100%;height:auto;}

/* pricing */
.price{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.price .card{display:flex;flex-direction:column;}
.price .amt{font-family:var(--serif);font-size:36px;font-weight:700;color:var(--green);} .price .amt span{font-family:var(--sans);font-size:15px;color:var(--muted);font-weight:600;}
.price .resell{margin-top:auto;padding-top:12px;color:var(--muted);font-size:14px;border-top:1px dashed var(--line);}
.price .card.feat{border-color:var(--green);box-shadow:0 12px 30px rgba(15,77,54,.14);}

/* FAQ */
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px 18px;margin:10px 0;}
.faq summary{font-family:var(--serif);font-weight:700;cursor:pointer;padding:13px 0;font-size:16px;color:var(--ink);}
.faq details[open] summary{color:var(--green);}
.faq p{color:var(--muted);margin:0 0 14px;}

/* source table (methodology) */
table.src{width:100%;border-collapse:collapse;font-size:15px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
table.src th,table.src td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
table.src th{background:#f3ead6;color:var(--ink);font-size:13px;text-transform:uppercase;letter-spacing:.03em;font-weight:700;}
table.src tr:last-child td{border-bottom:none;}
table.src .res{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;}

/* long-form legal pages (privacy / terms) */
.legalpage{max-width:820px;}
.legalpage h1{font-size:32px;color:var(--green);margin:32px 0 8px;max-width:none;}
.legalpage h2{font-size:20px;color:var(--green);margin:28px 0 8px;}
.legalpage .note,.note{background:#fff7e3;border:1px solid var(--gold);border-radius:10px;padding:12px 14px;font-size:14px;margin:16px 0;}

/* misc inherited */
.why blockquote{margin:0;font-size:18px;color:var(--ink);border-left:4px solid var(--terra);padding-left:16px;}
.legal{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:10px;padding:16px 20px;} .legal p{margin:0 0 10px;} .legal p:last-child{margin:0;}

/* footer */
footer{padding:40px 0 56px;color:var(--muted);font-size:13px;border-top:2px solid var(--ink);background:var(--paper-2);margin-top:10px;}
footer .disc{max-width:84ch;}
footer .disc b{color:var(--ink);}
footer .ftnav{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center;}

/* ---- responsive ---- */
@media(max-width:860px){
  header.hero{grid-template-columns:1fr;gap:38px;}
  .pc-feature{max-width:420px;}
  .grid,.shots,.pc-row{grid-template-columns:1fr;}
}