:root {
  --ink: #14262e;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #e9eef0;
  color: #172a33;
  font: 16px/1.45 var(--sans);
}

button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.mast {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  background: #fff;
  border-bottom: 1px solid #d7ddda;
}

.brand {
  font: 28px/1 var(--serif);
  letter-spacing: -0.04em;
  text-decoration: none;
  color: var(--ink);
}

.brand span { color: #176d70; }

.mast nav {
  margin-left: auto;
  display: flex;
  gap: 18px;
  font-size: 14px;
}

.mast nav a {
  text-decoration: none;
  color: #405963;
}

.stage { padding: 28px 20px 48px; }

.sheet {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  color: #172a33;
  padding: 32px 36px 28px;
  box-shadow: 0 2px 7px #0006, 0 0 0 12px #808080;
  font: 12pt/1.45 var(--serif);
}

.sheet.wide { max-width: 1040px; }

h1 {
  margin: 0 0 16px;
  color: #1a3f6e;
  font: 400 2em/1.15 var(--serif);
  letter-spacing: -0.03em;
}

p { margin: 0 0 12px; }

.modes {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
}

.modes button {
  border: 1px solid #d5dee2;
  background: #fff;
  color: #172a33;
  padding: 6px 12px;
  font: 12pt var(--serif);
}

.modes button.is-on {
  border-color: #808080;
  background: #f4f7f8;
}

label {
  display: block;
  margin: 14px 0 0;
  font: 12pt/1.3 var(--serif);
}

input {
  width: 100%;
  margin-top: 4px;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid #d5dee2;
  background: transparent;
  color: #172a33;
  font: 12pt/1.4 var(--serif);
}

.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}

.fields .full,
.fields .gold,
.fields .note { grid-column: 1 / -1; }

.gold {
  margin-top: 22px;
  border: 1px solid #081820;
  background: #081820;
  color: #fff;
  padding: 8px 14px;
  font: 13px var(--sans);
}

.gold:disabled {
  border-color: #c5ced2;
  background: #e4e8ea;
  color: #8aa0a8;
  cursor: default;
}

.textish {
  border: 0;
  background: transparent;
  color: #215c6c;
  font: 13px var(--sans);
  padding: 8px 0;
}

.quiet { color: #5f737c; font-size: 11pt; }

#login[hidden] { display: none; }
#providers[hidden], .modes button[hidden] { display: none; }

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 100%;
  padding: 18px 16px 20px;
  border: 1px solid #d5dee2;
  background: #fff;
  color: #172a33;
  font: 12pt/1.4 var(--serif);
  text-align: left;
}

.plan.is-on {
  border-color: #081820;
  box-shadow: 0 0 0 1px #081820;
}

.plan-name {
  color: #1a3f6e;
  font: 400 1.45em/1.15 var(--serif);
  letter-spacing: -0.03em;
}

.plan-price {
  display: flex;
  flex-direction: column;
  min-height: 3em;
  margin: 10px 0 4px;
}

.plan-price b { font-weight: 400; }
.plan-price b + b { color: #5f737c; }
.plan-lead { margin-top: 8px; color: #1a3f6e; }
.plan-copy { margin-top: 6px; }

.plan-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

#folder-help[hidden] { display: none; }

body[data-page="plans"] { min-height: 100vh; }
body[data-page="plans"] .stage { min-height: 0; padding: 6px 10px 10px; display: block; }
body[data-page="plans"] .sheet.wide { width: min(1240px, calc(100vw - 20px)); max-width: none; max-height: none; overflow: visible; padding: 10px 14px 8px; box-shadow: 0 2px 7px #0006, 0 0 0 8px #808080; }
body[data-page="plans"] h1 { margin-bottom: 8px; }
body[data-page="plans"] .choose { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
body[data-page="plans"] .choose:has(#checkout:not([hidden])) { grid-template-columns: minmax(0, 1fr) 300px; }
body[data-page="plans"] .plans { gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-page="plans"] .choose:has(#checkout:not([hidden])) .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { body[data-page="plans"] .plans, body[data-page="plans"] .choose:has(#checkout:not([hidden])) .plans { grid-template-columns: 1fr; } body[data-page="plans"] .choose:has(#checkout:not([hidden])) { grid-template-columns: 1fr; } }
body[data-page="plans"] .plan { padding: 12px 12px 14px; }
body[data-page="plans"] .plan-price { min-height: 0; margin: 6px 0 2px; }
body[data-page="plans"] .plan-lead { margin-top: 6px; color: #1a3f6e; }
body[data-page="plans"] .plan-list { gap: 4px; margin-top: 8px; }
body[data-page="plans"] .plan-list span { display: block; padding-left: 12px; text-indent: -12px; }
body[data-page="plans"] .plan-list span::before { content: "• "; color: #176d70; }
body[data-page="plans"] .plan-close { display: block; margin-top: 8px; color: #172a33; }
body[data-page="plans"] .choose-plans .gold,
body[data-page="plans"] .checkout .gold,
body[data-page="plans"] .textish,
body[data-page="plans"] .pay-card { font: 12pt/1.2 var(--serif); }
body[data-page="plans"] .choose-plans .gold { margin-top: 10px; }
body[data-page="plans"] .checkout { margin: 0; padding: 12px 12px 10px; border: 1px solid #d5dee2; }
body[data-page="plans"] .checkout[hidden] { display: none; }
body[data-page="plans"] #plan-continue[hidden] { display: none; }
body[data-page="plans"] .pay-summary { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
body[data-page="plans"] .pay-summary p { margin: 0; color: #1a3f6e; font: 400 1.15em/1.2 var(--serif); }
body[data-page="plans"] #pay-price { color: #081820; white-space: nowrap; font: 12pt/1.3 var(--serif); }
body[data-page="plans"] .modes { margin: 8px 0; }
body[data-page="plans"] .pay-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: none; }
body[data-page="plans"] .pay-paypal,
body[data-page="plans"] .pay-card { height: 36px; border: 0; border-radius: 4px; cursor: pointer; }
body[data-page="plans"] .pay-paypal { display: flex; align-items: center; justify-content: center; background: #ffc439; font: 700 18px/1 var(--sans); letter-spacing: -0.04em; }
body[data-page="plans"] .pay-paypal span:first-child { color: #003087; }
body[data-page="plans"] .pay-paypal span:last-child { color: #009cde; }
body[data-page="plans"] .pay-card { background: #081820; color: #fff; }
body[data-page="plans"] .pay-card.is-on { box-shadow: 0 0 0 2px #176d70; }
body[data-page="plans"] #pay-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; max-width: none; margin-top: 8px; }
body[data-page="plans"] .pay-brands { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
body[data-page="plans"] .pay-brand { height: 26px; border: 1px solid #d5dee2; background: #fff; color: #1a1f71; font: 800 11px/1 var(--sans); letter-spacing: 0.04em; cursor: pointer; }
body[data-page="plans"] .pay-brand.is-on { border-color: #081820; box-shadow: 0 0 0 1px #081820; }
body[data-page="plans"] .pay-mc { position: relative; }
body[data-page="plans"] .pay-mc i { position: absolute; top: 5px; width: 12px; height: 12px; border-radius: 50%; }
body[data-page="plans"] .pay-mc i:first-child { left: calc(50% - 10px); background: #eb001b; }
body[data-page="plans"] .pay-mc i:last-child { left: calc(50% - 2px); background: #f79e1b; mix-blend-mode: multiply; }
body[data-page="plans"] .pay-amex { background: #2e77bc; color: #fff; }
body[data-page="plans"] .pay-chase { color: #0d74af; }
body[data-page="plans"] .checkout label { margin-top: 8px; }
body[data-page="plans"] .checkout .full { grid-column: 1 / -1; }
body[data-page="plans"] .checkout .gold { grid-column: 1 / -1; width: 100%; margin-top: 10px; }
body[data-page="plans"] .checkout .quiet { margin: 8px 0 0; }
body[data-page="plans"] .textish { padding: 4px 0; }
body[data-page="plans"] .plans-note { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid #d1a56a; background: #faf6ec; font: 12pt/1.4 var(--serif); }
body[data-page="plans"] .plans-note[hidden], body[data-page="plans"] .pay-trial[hidden], body[data-page="plans"] .quiet[hidden], body[data-page="plans"] #pay-form[hidden] { display: none; }
body[data-page="plans"] .pay-trial { margin: 10px 0 0; color: #1a3f6e; font: 12pt/1.4 var(--serif); }
body[data-page="plans"] #pay-note { margin: 8px 0 0; color: #9a3b2a; font: 11pt/1.4 var(--serif); }
body[data-page="plans"] .pay-ways button:disabled { opacity: .6; cursor: wait; }

body[data-page="pay"] .mast nav { display: none; }
body[data-page="pay"] .stage { min-height: calc(100vh - 64px); padding: 12px 14px; display: flex; align-items: center; }
body[data-page="pay"] .pay-sheet { width: min(440px, 100%); max-height: calc(100vh - 88px); overflow: auto; padding: 12px 14px 8px; }
body[data-page="pay"] .pay-steps { display: flex; gap: 14px; margin: 0 0 8px; padding: 0; list-style: none; font: 12px var(--sans); color: #8aa0a8; }
body[data-page="pay"] .pay-steps .is-on { color: #081820; font-weight: 700; }
body[data-page="pay"] h1 { margin-bottom: 6px; font-size: 24px; }
body[data-page="pay"] .pay-summary { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
body[data-page="pay"] .pay-summary p { margin: 0; font: 16px/1.3 var(--serif); color: #1a3f6e; }
body[data-page="pay"] #pay-price { color: #081820; }
body[data-page="pay"] .modes { margin: 8px 0; }
body[data-page="pay"] .modes button { padding: 4px 10px; font: 13px var(--sans); }
body[data-page="pay"] .pay-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body[data-page="pay"] .pay-paypal, body[data-page="pay"] .pay-card { height: 42px; border: 0; border-radius: 4px; }
body[data-page="pay"] .pay-paypal { display: flex; align-items: center; justify-content: center; background: #ffc439; font: 700 20px/1 var(--sans); letter-spacing: -0.04em; }
body[data-page="pay"] .pay-paypal span:first-child { color: #003087; }
body[data-page="pay"] .pay-paypal span:last-child { color: #009cde; }
body[data-page="pay"] .pay-card { background: #081820; color: #fff; font: 700 15px var(--sans); }
body[data-page="pay"] .pay-card.is-on { box-shadow: 0 0 0 2px #176d70; }
body[data-page="pay"] #pay-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; margin-top: 10px; }
body[data-page="pay"] .pay-brands { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
body[data-page="pay"] .pay-brand { height: 28px; border: 1px solid #d5dee2; background: #fff; color: #1a1f71; font: 800 12px/1 var(--sans); letter-spacing: 0.04em; }
body[data-page="pay"] .pay-brand.is-on { border-color: #081820; box-shadow: 0 0 0 1px #081820; }
body[data-page="pay"] .pay-mc { position: relative; }
body[data-page="pay"] .pay-mc i { position: absolute; top: 6px; width: 14px; height: 14px; border-radius: 50%; }
body[data-page="pay"] .pay-mc i:first-child { left: calc(50% - 12px); background: #eb001b; }
body[data-page="pay"] .pay-mc i:last-child { left: calc(50% - 2px); background: #f79e1b; mix-blend-mode: multiply; }
body[data-page="pay"] .pay-amex { background: #2e77bc; color: #fff; font-size: 11px; }
body[data-page="pay"] .pay-chase { color: #0d74af; }
body[data-page="pay"] label { margin-top: 8px; font: 12px/1.2 var(--sans); color: #405963; }
body[data-page="pay"] .full { grid-column: 1 / -1; }
body[data-page="pay"] input { margin-top: 2px; padding: 4px 0; font: 15px/1.2 var(--sans); }
body[data-page="pay"] .gold { grid-column: 1 / -1; width: 100%; margin-top: 10px; min-height: 40px; }
body[data-page="pay"] .pay-facts { margin: 8px 0 0; color: #172a33; font: 13px/1.35 var(--sans); }
body[data-page="pay"] .quiet { margin: 6px 0 0; font-size: 12px; }
body[data-page="pay"] .textish { padding: 4px 0; }

@media (max-width: 800px) {
  .sheet { padding: 24px 18px; }
  .sheet.wide { max-width: none; }
  .fields, .plans { grid-template-columns: 1fr; }
  body[data-page="plans"] .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mast { height: auto; min-height: 56px; flex-wrap: wrap; padding: 12px 16px; }
  .brand { font-size: 22px; }
}

/* Your plan */
a.gold { display: inline-block; text-decoration: none; }
a.gold[hidden] { display: none; }
body[data-page="billing"] [hidden] { display: none !important; }
body[data-page="billing"] #bill-what { font: 14pt/1.4 var(--serif); color: #1a3f6e; }
body[data-page="billing"] .row .gold { margin-top: 8px; }
body[data-page="billing"] #bill-note { color: #9a3b2a; }

/* Account: the age question and forgot password */
select { width: 100%; margin-top: 4px; padding: 4px 0; border: 0; border-bottom: 1px solid #d5dee2; background: transparent; color: #172a33; font: 12pt/1.4 var(--serif); }
#forgot[hidden], #join[hidden], #login[hidden] { display: none; }
#forgot > p { margin: 0 0 8px; }

/* The agreement at sign-up (legal/terms.html Sections 3 and 4): what each age group sees. */
.join-agree:empty { display: none; }
.join-agree { display: grid; gap: 8px; margin-top: 6px; padding: 10px 12px; border: 1px solid #d8dfe0; background: #f7f9f9; font: 14px/1.45 var(--sans); color: #22343c; }
.join-agree .check { display: flex; gap: 9px; align-items: flex-start; margin: 0; font: 14px/1.45 var(--sans); color: #22343c; }
.join-agree .check input { margin-top: 3px; flex: none; width: 17px; height: 17px; }
.join-agree .stop { margin: 0; color: #7a2b1c; }
.join-agree a, .legal-links a, .renew-agree a { color: #1f5f7a; text-decoration: underline; }
.join-agree .sub { margin-left: 26px; display: grid; gap: 8px; }
.legal-links { font: 12px/1.5 var(--sans); color: #5d737c; margin: 12px 0 0; }
.renew-agree { display: flex; gap: 9px; align-items: flex-start; margin: 10px 0; font: 14px/1.45 var(--sans); color: #22343c; }
.renew-agree input { margin-top: 3px; flex: none; width: 17px; height: 17px; }
.legal-foot { max-width: 760px; margin: 28px auto 18px; padding: 0 16px; font: 12px/1.6 var(--sans); color: #5d737c; text-align: center; }
.legal-foot a { color: #5d737c; margin: 0 6px; }
.plan[hidden], .renew-agree[hidden] { display: none; }

/* Free for now: payment not set up yet, every plan opens free. */
.pay-free{margin:18px 0 6px;padding:16px 18px;border:1px solid #c9d6da;background:#f5f9f8}
.pay-free-words{margin:0 0 14px;line-height:1.5}
.pay-free .gold{width:100%;font-size:18px;padding:12px 16px}
body.free-now #pay-cycle,body.free-now #renew-box,body.free-now #pay-trial,body.free-now #pay-form,body.free-now #pay-fake-note,body.free-now #pay-real-note,body.free-now .pay-ways{display:none!important}

/* 1.8.14 (Mark, 3 Nov 2026): breadcrumbs under the header on every page, the same look as the reading sheets. */
.page-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;padding:8px 28px;font:16px/1.3 Georgia,'Times New Roman',serif;color:#5d737c;background:#fff;border-bottom:1px solid #d7ddda}
.page-crumbs a{color:#5d737c;text-decoration:none}
.page-crumbs a:hover{color:#176d70;text-decoration:underline}
.page-crumbs [aria-current]{color:#24343c}
.page-crumbs .crumb-sep{color:#9aa9af}
@media(max-width:600px){.page-crumbs{padding:6px 16px;font-size:14px}}
@media print{.page-crumbs{display:none}}