/* MyOwnArc on the Robin of Loxley kit.
   Every page links /rol/tokens.css and /rol/components.css first, keeps its
   own layout styles, and links this file last so it wins at equal
   specificity. The page styles' own variable names point at the kit here, so
   colours, type and shapes come from it: parchment and linen, ink, the
   library-blue accent (data-rol-app="myownarc"), Gloock for headings of 24px
   and up, Hanken Grotesk for everything else, 4px controls and 6px cards. */

:root {
  --paper: var(--rol-parchment);
  --paper-2: var(--rol-linen);
  --card: var(--rol-linen);
  --ink: var(--rol-ink);
  --ink-soft: var(--rol-ink-soft);
  --ink-faint: var(--rol-ink-faint);
  --line: var(--rol-line-strong);
  --violet: var(--rol-accent);
  --violet-deep: var(--rol-accent-hover);
  --teal: var(--rol-accent);
  --teal-ink: var(--rol-accent);
  --amber: var(--rol-gold);
  --amber-ink: var(--rol-yew);
  --radius: var(--rol-radius-lg);
  --shadow: none;
}

body {
  font-family: var(--rol-font-body);
  background: var(--rol-parchment);
  color: var(--rol-ink);
  line-height: var(--rol-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--rol-straw); color: var(--rol-ink); }
:focus-visible { outline: var(--rol-focus); outline-offset: 2px; }
a { color: var(--rol-accent); }
a:hover { text-underline-offset: 3px; }

/* Gloock is for headings of 24px and up; smaller headings are Hanken Grotesk. */
h1, h2, .serif, .price {
  font-family: var(--rol-font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: var(--rol-leading-display);
  text-wrap: balance;
}
h3 { font-family: var(--rol-font-body); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
h1 em, h2 em { font-style: normal; color: inherit; }
.section-title { font-size: var(--rol-text-h2); font-weight: 400; }
.hero h1 { font-size: var(--rol-text-h1); font-weight: 400; }
.wrap { padding-left: var(--rol-gutter); padding-right: var(--rol-gutter); }

/* Buttons: 44px, 4px corners, the accent; no pills, no glow. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--rol-control-h); padding: 0 18px; border-radius: var(--rol-radius);
  font-family: var(--rol-font-body); font-weight: 600; font-size: 1rem; line-height: 1.2;
  box-shadow: none;
  transition: transform var(--rol-dur-press) var(--rol-ease-out), background-color var(--rol-dur-press) ease, border-color var(--rol-dur-press) ease;
}
.btn:hover { transform: none; text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn-primary, .btn-primary:hover { color: var(--rol-on-accent); box-shadow: none; }
.btn-primary { background: var(--rol-accent); }
.btn-primary:hover { background: var(--rol-accent-hover); }
.btn-ghost { background: transparent; color: var(--rol-ink); border: 1px solid var(--rol-line-strong); }
.btn-ghost:hover { background: var(--rol-accent-soft); border-color: var(--rol-ink); }
.btn-big { min-height: 48px; padding: 0 22px; font-size: 1rem; }

/* Cards: linen, a hairline, 6px, no shadow. */
.feat, .plan, .step, .faq details, .table-scroll, .mock, .offer, .cta {
  background: var(--rol-linen);
  border: 1px solid var(--rol-line);
  border-radius: var(--rol-radius-lg);
  box-shadow: none;
}
.feat .ico { background: var(--rol-accent-soft); border-radius: var(--rol-radius); }
.feat .ico svg, .feat .ico .t { stroke: var(--rol-accent); }
.feat p, .step p, .plan li { font-size: .9375rem; }

/* Steps: a number disc instead of a coloured stripe down the side. */
.step { border-left: 1px solid var(--rol-line); border-radius: var(--rol-radius-lg); }
.step::before {
  font-family: var(--rol-font-body); font-weight: 700; font-size: .9375rem; color: var(--rol-on-accent);
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--rol-radius-pill);
  background: var(--rol-accent); margin-bottom: 14px;
}

/* Pricing: the woodcut on the plan we recommend, once on the page. */
.plan.hot { border: var(--rol-rule); box-shadow: var(--rol-shadow); }
.plan.hot .flag {
  background: var(--rol-ink); color: var(--rol-parchment); border-radius: var(--rol-radius);
  font-size: var(--rol-text-small); letter-spacing: .06em; padding: 3px 10px;
}
.price { font-size: 2.25rem; }
.price small { font-family: var(--rol-font-body); font-size: .875rem; }
.plan .for, .bill-note, .compare-note, .hero-note, .meta, .disclaimer, .demo-cap, .offer .small, .try .note, .cta .note { font-size: var(--rol-text-small); }
.plan li::before { color: var(--rol-accent); }

/* The comparison: an ink head row, our column in the accent. */
.compare th { background: var(--rol-ink); color: var(--rol-parchment); font-size: var(--rol-text-small); font-weight: 700; letter-spacing: .04em; }
.compare th.us { background: var(--rol-accent); color: var(--rol-on-accent); }
.compare td.us { background: var(--rol-accent-soft); }
.compare th, .compare td { border-bottom-color: var(--rol-line); }
.yes { color: var(--rol-accent); }
.part { color: var(--rol-yew); }

.faq summary::after { font-family: var(--rol-font-body); font-weight: 400; color: var(--rol-accent); }
.trust { background: var(--rol-linen); border-color: var(--rol-line); }
.trust .wrap { font-size: .9375rem; }
#pricing { background: var(--rol-linen); border-top-color: var(--rol-line); }
#pricing .plan { background: var(--rol-parchment); }
#pricing .plan.hot { background: var(--rol-linen); }
section.band { background: var(--rol-linen); border-color: var(--rol-line); }

/* The closing band: the kit's dark band. */
.cta-final { background: var(--rol-band); color: var(--rol-band-text); }
.cta-final p { color: var(--rol-band-soft); }
.cta-final .btn-primary { background: var(--rol-gold); color: #10261A; }
.cta-final .btn-primary:hover { background: color-mix(in oklab, var(--rol-gold) 85%, #FCF9F2); }

blockquote.pull { font-family: var(--rol-font-display); font-style: normal; border-left: 0; padding-left: 0; }
blockquote.pull cite { font-family: var(--rol-font-body); }
.cite, button.cite-live { background: var(--rol-accent-soft); color: var(--rol-accent); border-radius: 3px; font-size: .8125rem; }
button.cite-live:hover { background: color-mix(in oklab, var(--rol-accent) 22%, var(--rol-linen)); }
button.cite-live.pressed { background: var(--rol-accent); color: var(--rol-on-accent); box-shadow: none; }
.mock-src div { font-size: var(--rol-text-small); }
.pdf-head { font-size: var(--rol-text-small); }
article.post code { color: var(--rol-ink); background: var(--rol-linen); border-color: var(--rol-line); border-radius: 3px; }
.more { color: var(--rol-accent); }

/* Footer: the kit's, with the family's legal line. */
.rol-footer .site-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.rol-footer .site-tag { margin: 0 0 var(--rol-space-4); max-width: 60ch; }

/* The kit's header replaces the old one; its phone menu needs no script. */
.rol-header { position: sticky; top: 0; z-index: 50; }
.rol-header__brand img { border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The hero headline sits beside the demo, so it runs a step smaller than a full-width h1. */
.hero h1 { font-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.5rem); }
.nowrap { white-space: nowrap; }

/* Small print on the legal pages: ink faint, which passes AA on parchment. */
.updated { color: var(--rol-ink-faint); }

/* The home page's sections line up with the header's 1120px column. */
#top .hero .wrap, .trust .wrap, #top > section > .wrap { max-width: calc(var(--rol-container) + 2 * var(--rol-gutter)); }