/* ============================================================
   Guides — loaded on /guides/ pages only, on top of pages.css.
   ============================================================ */

/* breadcrumb and byline sit around the H1 in the teal page head */
.pagehead .crumb{margin:0 0 .9rem;font-size:.92rem}
.pagehead .crumb a{color:var(--blue);text-decoration:none;font-weight:700;letter-spacing:.04em}
.pagehead .crumb a:hover{color:var(--cream);text-decoration:underline}
.pagehead .byline{
  margin:1.4rem 0 0;padding-top:1.1rem;
  border-top:1px solid rgba(164,205,213,.28);
  font-size:.88rem;color:rgba(164,205,213,.85);max-width:60ch;
}

/* a guide is read, not scanned: a little more air than the legal pages */
.guide .shell > *{max-width:72ch}
.guide h2{margin-top:3rem}
.guide p,.guide li{font-size:1.06rem;line-height:1.75}
.guide ol,.guide ul{gap:.7rem}

/* the answer up top, so the page gives it away before anyone scrolls */
.answerbox{
  background:var(--teal);color:var(--cream);
  border-radius:18px;padding:clamp(1.3rem,3vw,1.9rem);margin:0 0 2.4rem;
}
.answerbox h2{
  font-family:var(--display);font-weight:700;font-style:oblique;
  text-transform:uppercase;font-size:1.1rem;letter-spacing:.04em;
  margin:0 0 .7rem;color:var(--blue);
}
.answerbox p{margin:0;color:var(--cream);font-size:1.08rem;line-height:1.7}
.answerbox strong{color:var(--cream);font-weight:700}

/* the one thing that costs real money if they get it wrong */
.callout{
  border-left:5px solid var(--red);background:rgba(174,21,30,.07);
  border-radius:0 14px 14px 0;padding:1.1rem 1.35rem;margin:0 0 1.5rem;
}
.callout p:last-child{margin-bottom:0}

.tablewrap{overflow-x:auto;margin:0 0 1.6rem;-webkit-overflow-scrolling:touch}
.guide table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.97rem}
.guide th,.guide td{
  text-align:left;vertical-align:top;padding:.8rem .9rem;
  border-bottom:1px solid rgba(2,43,56,.16);line-height:1.55;
}
.guide thead th{
  font-family:var(--display);font-weight:700;font-style:oblique;
  text-transform:uppercase;font-size:.84rem;letter-spacing:.05em;
  color:var(--teal);border-bottom:2px solid var(--teal);
}
.guide tbody th{font-weight:700;color:var(--teal);white-space:nowrap}

.ctabox{
  background:rgba(164,205,213,.3);border-radius:18px;
  padding:clamp(1.3rem,3vw,1.9rem);margin:2.75rem 0 0;
}
.ctabox p{margin:0 0 1.1rem}
.ctabox__btns{display:flex;flex-wrap:wrap;gap:.8rem;margin:0}

.disclaimer{
  margin:2.25rem 0 0;padding-top:1.4rem;
  border-top:1px solid rgba(2,43,56,.16);
  font-size:.88rem;font-style:italic;color:rgba(2,43,56,.65);
}

/* ---- the index ---- */
/* the cards are the page, not a column of prose: .prose caps its children at
   the reading measure, so the grid opts out */
.prose .shell > .gcards{max-width:none}
.gcards{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:1.1rem}
@media (min-width:900px){ .gcards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.gcards .gcard{
  background:var(--teal);border-radius:18px;
  padding:clamp(1.3rem,3vw,1.8rem);border-top:4px solid var(--red);
}
.gcard h2{
  font-family:var(--display);font-weight:700;font-style:oblique;
  text-transform:uppercase;font-size:clamp(1.15rem,2.6vw,1.5rem);
  line-height:1.1;margin:0 0 .7rem;
}
.prose .gcard h2 a,.prose .gcard h2 a:not(.btn){color:var(--cream);text-decoration:none}
.prose .gcard h2 a:hover,.prose .gcard h2 a:not(.btn):hover{color:var(--blue);text-decoration:none}
.gcard p{margin:0;color:rgba(254,248,232,.86);font-size:1rem;line-height:1.65}
.gcard__more{margin-top:1rem !important}
.prose .gcard__more a,.prose .gcard__more a:not(.btn){color:var(--blue);font-weight:700;text-decoration:none}
.prose .gcard__more a:hover,.prose .gcard__more a:not(.btn):hover{color:var(--cream);text-decoration:underline}

/* The nav rule for the Guides link lives in pages.css, which these pages also
   load. An earlier copy here was a contradictory pair that cancelled itself
   out and, worse, hid Guides from the phone dropdown below 619px. Removed:
   do not re-add a nav rule to this file. */

/* a long guide headline would otherwise run the full width of a 49in monitor */
.pagehead h1{max-width:26ch}