/* Shorepass — the design system for the whole site.
 *
 * Nothing is fetched from anywhere. No framework, no webfont, no analytics: a
 * seafarer reads this on a ship's wifi or a prepaid phone, and the page is a
 * few kilobytes because that is a courtesy, not a constraint we resent.
 *
 * The look is meant to read as a REVIEW INSTITUTION rather than a software
 * product. That is a positioning decision and it drives every choice below:
 *
 *   - A serif for display type. Institutions set their names in serif; SaaS
 *     sets everything in one geometric sans. The serif is a system stack, so
 *     it costs nothing to load and still reads as considered.
 *   - Warm paper (#FBF9F6) rather than #FFF. Pure white is the commonest tell
 *     of a cheap page; a warm ground makes ink look printed.
 *   - Brass, not yellow. #C29A4C is instrument brass. #FBBF24 is a warning
 *     label, and the old palette used it for everything.
 *   - Restraint as the luxury signal: one accent, one focal point per screen,
 *     every decorative opacity dialled down until it is barely sensed.
 *
 * 60-30-10: paper and ink carry ~60%, the deep navy bands ~30%, brass ~10%
 * and only on what a reader is meant to act on or notice first.
 */

:root {
  /* Ground */
  --paper:     #fbf9f6;   /* warm, so ink reads as printed rather than lit */
  --paper-2:   #f4f0ea;   /* the quieter alternating band */
  --deep:      #0a1826;   /* the navy the dark sections sit on */
  --deep-2:    #102337;   /* one step up, for depth inside the dark */

  /* Ink */
  --ink:       #14212e;
  --ink-soft:  #4a5a6a;
  --ink-faint: #7d8b99;
  --on-deep:      #f2efe9;
  --on-deep-soft: rgba(242, 239, 233, .72);
  --on-deep-faint:rgba(242, 239, 233, .46);

  /* Accent — used sparingly and never twice in one eyeline */
  --brass:     #c29a4c;
  --brass-lit: #e0bd76;
  --teal:      #12626e;   /* the second colour, for data and links only */
  --ok:        #1c6b39;
  --warn:      #9a2727;

  /* Structure */
  --line:      #e3dcd2;   /* hairline on paper */
  --line-deep: rgba(242, 239, 233, .13);
  --radius:    4px;       /* small. Big radii read as consumer app */
  --radius-lg: 8px;

  --lift: 0 1px 2px rgba(20, 33, 46, .04),
          0 18px 40px -28px rgba(20, 33, 46, .28);
  --lift-hi: 0 1px 2px rgba(20, 33, 46, .05),
             0 30px 60px -34px rgba(20, 33, 46, .38);

  /* Type. Two families, both already on the reader's machine. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Spacing: an 8px base, so nothing lands on an arbitrary number */
  --section: clamp(76px, 9vw, 132px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

/* --- type ---------------------------------------------------------------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; }

h1 {
  font-size: clamp(40px, 6.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -.022em;
  margin: 0 0 22px;
}

h2 {
  font-size: clamp(28px, 3.9vw, 42px);
  line-height: 1.12;
  letter-spacing: -.016em;
  margin: 0 0 18px;
}

h3 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.006em;
  line-height: 1.35;
  margin: 0 0 8px;
}

p { margin: 0 0 16px; }

/* The eyebrow. Small caps, widely tracked - the cheapest way to make a page
 * look edited rather than typed. */
.eyebrow {
  font: 600 11px/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 68px;
  background: currentColor;
  opacity: .32;
}

.lede {
  font-size: clamp(18px, 2.1vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 64ch;
}

.small { font-size: 14.5px; color: var(--ink-faint); }
.mono { font-family: var(--mono); }

/* --- header -------------------------------------------------------------- */

.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 0;
}
.bar img { width: 30px; height: 30px; display: block; }
.bar strong {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: .01em;
}
.bar nav {
  margin-left: auto;
  display: flex;
  gap: 30px;
  font-size: 14.5px;
}
.bar nav a { color: inherit; text-decoration: none; opacity: .74; }
.bar nav a:hover { opacity: 1; }

/* The wordmark, when it is a link home - which it is on every page but the
 * home page. Handled here rather than by inline styles on each page, which is
 * how it came to wrap onto two lines and underline itself. */
.bar > a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

/* --- the dark ground ----------------------------------------------------- */

header, .band {
  position: relative;
  overflow: hidden;
  background: var(--deep);
  color: var(--on-deep);
}
/* Two quiet light sources, so the dark reads as a room rather than a
 * rectangle of paint. Both far below the threshold of being noticed. */
header::after, .band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90ch 62ch at 12% -18%, rgba(194, 154, 76, .13), transparent 62%),
    radial-gradient(70ch 50ch at 96% 8%, rgba(18, 98, 110, .20), transparent 60%);
}
/* Grain. One texture site-wide - one strategy, not six - kept faint enough to
 * be felt as "printed" rather than seen as an effect. */
header::before, .band::before, footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
header > *, .band > *, footer > * { position: relative; z-index: 2; }
header .bar strong, header .bar nav a, header a { color: var(--on-deep); }

.hero { padding: clamp(44px, 6vw, 76px) 0 clamp(76px, 9vw, 120px); }
/* An inner page's title. Smaller than the landing headline because it labels a
 * task rather than making an argument, and the hero closes up to match. */
h1.page { font-size: clamp(32px, 4.6vw, 46px); }
.hero:has(h1.page) { padding-bottom: clamp(48px, 6vw, 76px); }
.hero h1 { max-width: 17ch; }
.hero .lede { color: var(--on-deep-soft); max-width: 54ch; font-size: clamp(18px, 2.2vw, 21px); }
/* Not --on-deep-faint. This paragraph says what the product IS, and at 46%
 * it was a grey block a reader skips. Faint enough to sit below the lede in
 * the hierarchy, dark enough to actually be read. */
.hero .sub { color: rgba(242, 239, 233, .62); font-size: 16.5px; max-width: 54ch; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* Which phones this runs on, said in the hero rather than discovered after
 * paying. Quiet, because it is a fact rather than an argument - but present,
 * because a man with an iPhone deserves to learn it in the first screenful. */
.platform {
  margin: 22px 0 0;
  font-size: 14.5px;
  color: var(--on-deep-soft);
  max-width: 52ch;
}
.platform span { color: var(--on-deep-faint); }
.platform a { color: var(--on-deep-soft); }

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--radius);
  font: 600 15px/1 var(--sans);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brass);
  color: #21160a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .34) inset,
              0 12px 26px -14px rgba(194, 154, 76, .8);
}
.btn-primary:hover { background: var(--brass-lit); color: #21160a; }

.btn-ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1px currentColor;
  opacity: .8;
}
.btn-ghost:hover { opacity: 1; }

.btn[disabled] { opacity: .45; cursor: default; }

/* --- sections ------------------------------------------------------------ */

section { padding: var(--section) 0; }
section.alt { background: var(--paper-2); }

.head { max-width: 68ch; margin-bottom: clamp(40px, 5vw, 64px); }
.band .lede { color: var(--on-deep-soft); }
.band h2 { color: var(--on-deep); }

/* --- cards --------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 20px;
}
.grid.two { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--lift);
}
/* The 1px catch-light along the top edge. Almost invisible, and the reason a
 * card reads as lifted rather than drawn. */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
}
.card p { color: var(--ink-soft); font-size: 15.5px; margin: 0; }
.card p + p { margin-top: 12px; }

.card .term {
  display: block;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: -4px 0 12px;
}
.band .card .term { color: var(--on-deep-faint); }

.card .n {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--brass);
  display: block;
  margin-bottom: 14px;
  letter-spacing: .06em;
}

.band .card {
  background: var(--deep-2);
  border-color: var(--line-deep);
  box-shadow: none;
}
.band .card::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); }
.band .card p { color: var(--on-deep-soft); }
.band .card h3 { color: var(--on-deep); }

/* --- the numbers band ---------------------------------------------------- */

.stat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line-deep);
  border: 1px solid var(--line-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat > div {
  background: var(--deep);
  padding: 34px 26px;
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 50px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brass-lit);
  margin-bottom: 12px;
}
.stat span {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--on-deep-soft);
  max-width: 24ch;
  margin: 0 auto;
}

/* --- pricing ------------------------------------------------------------- */

.prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  align-items: start;
}
.price {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  box-shadow: var(--lift);
}
.price.best {
  background: var(--deep);
  border-color: transparent;
  color: var(--on-deep);
  box-shadow: var(--lift-hi);
}
.price .tag {
  font: 600 11px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 22px;
}
.price .amount {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 50px);
  line-height: 1;
  letter-spacing: -.025em;
  margin-bottom: 26px;
}
.price .amount small {
  display: block;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink-faint);
  margin-top: 10px;
}
.price.best .amount small { color: var(--on-deep-faint); }
.price ul { list-style: none; margin: 0 0 28px; padding: 0; }
.price li {
  position: relative;
  padding: 0 0 12px 24px;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.price.best li { color: var(--on-deep-soft); }
.price li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brass);
  opacity: .55;
}
.price .btn { width: 100%; }

/* --- the price the slider draws ------------------------------------------
 *
 * In the system rather than inline on the element, so it moves with the type
 * scale instead of drifting away from it. The total is the one number on that
 * page a buyer is deciding on, so it gets the serif and the size. */

.quote { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.quote .term { font-weight: 600; font-size: 18px; }
.quote .total {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.02em;
}

/* --- notes, forms, small parts ------------------------------------------- */

.note {
  border-left: 2px solid var(--brass);
  background: var(--paper-2);
  padding: 18px 22px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.band .note { background: var(--deep-2); color: var(--on-deep-soft); }

.hint { font-size: 14px; color: var(--ink-faint); margin-top: 8px; }
.good { color: var(--ok); }
.bad { color: var(--warn); }
.warn { background: #fdeceb; color: var(--warn); padding: 12px 16px; border-radius: var(--radius); }

label {
  display: block;
  font: 600 12px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 22px 0 9px;
}
input, select, textarea {
  width: 100%;
  padding: 13px 15px;
  font: 400 16px/1.4 var(--sans);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(194, 154, 76, .16);
}
input[type=checkbox] { width: auto; }

.code {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  word-break: break-all;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

/* --- footer -------------------------------------------------------------- */

footer {
  background: var(--deep);
  color: var(--on-deep-faint);
  padding: 64px 0 72px;
  font-size: 14px;
  position: relative;
  overflow: hidden;
}
footer .wrap > div { margin-bottom: 12px; max-width: 76ch; }
footer strong { color: var(--on-deep); font-weight: 600; font-family: var(--serif); }
footer a { color: var(--on-deep-soft); }

/* --- the shared page furniture the other pages use ----------------------- */

.doc { max-width: 780px; margin: 0 auto; padding: 8px 28px 96px; }
.doc h2 { margin-top: 46px; font-size: clamp(24px, 3vw, 32px); }
.doc h3 { margin-top: 28px; font-size: 17px; }
.doc p, .doc li { color: var(--ink-soft); }
.doc table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.doc th, .doc td {
  text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--line);
  vertical-align: top; color: var(--ink-soft);
}
.doc th {
  color: var(--ink); font: 600 11px/1.2 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
}
.doc .note { margin: 22px 0; }
.hero.doc-hero { padding-bottom: 40px; }

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .card { padding: 26px 22px; }
  .price { padding: 28px 24px; }
  .bar nav { gap: 18px; font-size: 13.5px; }
  .bar nav a.hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}