/* The policy pages: /delivery, /returns and /track (src/site/pages/). Read
   pages, landed on from Google Shopping, the product page and the footer, and
   read on a phone: the answer first (the header's three facts), then short
   sections with plain headings, an index beside them on a wide screen. Built
   from site.css's tokens and its .prose, .bcrumb and .phero; nothing here
   moves except the header's own entrance, which site.css owns. */

/* ── the header ─────────────────────────────────────────────────────────── */
.pol-hero{padding-bottom:clamp(28px,3.4vw,48px)}
.pol-hero h1{max-width:14ch;margin:var(--s2) 0 var(--s2)}
.pol-hero .lede{max-width:52ch}

/* The three facts a visitor came for, answered before anything else. A ruled
   row of label and value, not tiles: this is a list of answers, and it reads
   as one on a phone, where the three stack. */
.pol-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,3vw,44px);
  border-top:1.5px solid var(--ink)}
.pol-facts>div{padding:18px 24px 4px 0}
.pol-facts>div+div{padding-left:24px;border-left:1px solid var(--hair)}
.pol-facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.pol-facts dd{margin-top:8px;font-family:var(--disp);font-weight:700;font-size:clamp(21px,2vw,26px);
  letter-spacing:-.03em;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.pol-facts dd small{display:block;margin-top:6px;font-family:var(--body);font-weight:400;font-size:14.5px;
  letter-spacing:-.005em;line-height:1.45;color:var(--ink2)}
@media(max-width:760px){
  .pol-facts{grid-template-columns:1fr}
  .pol-facts>div,.pol-facts>div+div{padding:14px 0;border-left:0}
  .pol-facts>div+div{border-top:1px solid var(--hair)}
  .pol-facts dd{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px}
  .pol-facts dd small{margin-top:2px}
}

/* ── the body ───────────────────────────────────────────────────────────── */
.pol{padding:0 0 var(--s6)}
.pol-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
@media(min-width:1000px){
  .pol-grid{grid-template-columns:minmax(180px,.28fr) minmax(0,1fr);gap:clamp(40px,5vw,96px)}
}

/* The index: only where there is room beside the text. A phone has the
   headings themselves, one short scroll apart. */
.pol-toc{display:none}
@media(min-width:1000px){
  .pol-toc{display:block;position:sticky;top:calc(var(--header-h) + 28px);align-self:start;padding-top:22px}
}
.pol-toc p{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.pol-toc ol{list-style:none;display:grid;gap:2px;border-left:1px solid var(--hair)}
.pol-toc a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:1.5px solid transparent;
  font-size:15px;line-height:1.35;color:var(--ink2);text-decoration:none;transition:transform .16s var(--ease-out)}
.pol-toc a:hover{color:var(--ink);border-left-color:var(--ink)}
.pol-toc a:active{transform:translateX(2px)}
.pol-toc a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}

.pol-body{max-width:68ch}
.pol-sec{padding:clamp(26px,2.8vw,38px) 0 clamp(8px,1vw,14px);border-top:1px solid var(--hair);scroll-margin-top:calc(var(--header-h) + 16px)}
.pol-sec:first-child{border-top:1.5px solid var(--ink)}
.pol-body h2{font-size:clamp(25px,2.5vw,33px);letter-spacing:-.036em;line-height:1.12;margin-bottom:16px;text-wrap:balance}
.pol-body h3{font-size:19px;letter-spacing:-.02em;margin:26px 0 4px}
.pol-body p+p{margin-top:14px}
.pol-body ul+p,.pol-body ol+p,.pol-body .pol-table-wrap+p{margin-top:18px}
.pol-body a:active{opacity:.7}
.pol-body li b{color:var(--ink);font-weight:500}

/* Where we deliver: a real table, with the destination as each row's header.
   On a phone each row becomes a small block, its cells labelled from the
   column they came from. Figures line up in tabular numerals. */
.pol-table-wrap{margin:4px 0 0}
.pol-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:16px}
.pol-table thead th{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink3);text-align:left;padding:0 16px 10px 0;border-bottom:1.5px solid var(--ink)}
.pol-table tbody th,.pol-table td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--hair);
  color:var(--ink2);line-height:1.45}
.pol-table tbody th{font-weight:400;width:42%}
.pol-table tbody th b{display:block;color:var(--ink);font-weight:500}
.pol-table .pol-line{display:block;white-space:nowrap}
.pol-table tbody th small,.pol-table tbody td small{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--ink3)}
.pol-table td:last-child,.pol-table thead th:last-child{padding-right:0}
@media(max-width:640px){
  .pol-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .pol-table,.pol-table tbody,.pol-table tr,.pol-table tbody th,.pol-table td{display:block;width:auto}
  .pol-table tr{padding:14px 0;border-bottom:1px solid var(--hair)}
  .pol-table tbody tr:first-child{border-top:1.5px solid var(--ink)}
  .pol-table tbody th,.pol-table td{padding:0;border:0}
  .pol-table tbody th{margin-bottom:8px}
  .pol-table td{display:flex;justify-content:space-between;gap:16px;padding:3px 0}
  .pol-table td::before{content:attr(data-label);color:var(--ink3)}
  .pol-table td{color:var(--ink)}
  .pol-table td .pol-cost{text-align:right}
}

/* How long: three steps, the sequence being the point. Numbers set in the
   margin as text, so they read as order, not ornament. */
/* Every numbered list here: the number on the first line's own baseline
   (site.css sets it .62em down in an 11px box, which reads as a superscript
   beside 16.5px text). 26px is that text's line box, 16.5 x 1.58. */
.pol-body ol li::before{top:0;font-size:12px;line-height:26px}
.prose ol.pol-steps{gap:0;border-top:1px solid var(--hair);margin-top:4px}
.prose ol.pol-steps li{padding:14px 0 14px 34px;border-bottom:1px solid var(--hair)}
.prose ol.pol-steps li::before{top:14px}

/* The estimated arrival for each destination: the date right-aligned so a
   column of dates can be compared at a glance. */
.prose ul.pol-eta{gap:0;margin-top:10px}
.prose ul.pol-eta li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--hair);font-variant-numeric:tabular-nums}
.prose ul.pol-eta li::before{content:none}
.prose ul.pol-eta li span{color:var(--ink);white-space:nowrap}
@media(max-width:420px){
  .prose ul.pol-eta li{flex-direction:column;gap:2px}
}

.pol-help{margin-top:var(--s4);padding-top:var(--s3);border-top:1.5px solid var(--ink);font-size:16px;color:var(--ink2)}

/* ── /track ─────────────────────────────────────────────────────────────── */
/* One measure for the form, its answer and the line under them, so their
   rules end at the same place; the column stays in the site's own .wrap. */
.pol-track .pol-form,.pol-track .pol-sent,.pol-track .pol-help{max-width:620px}
.pol-form{border-top:1.5px solid var(--ink);padding-top:var(--s3)}
.pol-form label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:10px}
.pol-form-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.pol-form input{width:100%;min-height:52px;border:0;border-radius:0;background:rgba(255,255,255,.8);
  box-shadow:0 0 0 1.5px var(--hair) inset;padding:13px 14px;font:400 17px var(--body);letter-spacing:-.012em;color:var(--ink);
  caret-color:var(--blue)}
.pol-form input::placeholder{color:var(--ink3)}
.pol-form input:hover{box-shadow:0 0 0 1.5px var(--ink3) inset}
.pol-form input:focus{outline:none;box-shadow:0 0 0 2.5px var(--blue) inset}
.pol-form input[aria-invalid="true"]{box-shadow:0 0 0 2px #b3261e inset}
.pol-form .btn{min-height:52px}
@media(max-width:560px){.pol-form-row{grid-template-columns:1fr}}
.pol-alert{margin:0 0 16px;color:#b3261e;font-size:16px}
.pol-sent{border-top:1.5px solid var(--ink);padding-top:var(--s3);max-width:60ch}
.pol-sent p{color:var(--ink2);font-size:17px;line-height:1.62}
.pol-sent p+p{margin-top:14px}
.pol-sent b{color:var(--ink);font-weight:500}
.pol-track a{color:var(--blue);text-decoration:none;box-shadow:0 1px 0 rgba(2,95,253,.35)}
.pol-track a:hover{box-shadow:0 1.5px 0 var(--blue)}
.pol-track a:active{opacity:.7}
.pol-track a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}