/* Wicklet website. Colours and the font are the brand tokens (--wk-*, brand/tokens.css); nothing here redefines them.
   Layout: full-width sections; content sits in .wrap (1180 px wide at most, 20 px side gutters). Apricot only. */
:root {
  color-scheme: light;
  --gutter: 20px;
  --content: 1180px;
  --step--1: 13px;                       /* footnotes and labels */
  --step-0: 17px;                        /* body */
  --step-1: 20px;                        /* lede, sub-headings */
  --step-3: clamp(32px, 5vw, 52px);      /* section titles */
  --step-5: clamp(52px, 10vw, 104px);    /* hero headline and price */
  --header-h: 93px;                      /* the header's height: 14 + 64 + 14 px, plus its hairline */
  --display: "Caveat Brush", "Bradley Hand", "Chalkboard SE", cursive;   /* headings: hand-lettered, stored on the site */
  --shadow: color-mix(in srgb, var(--wk-text) 45%, transparent);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wk-bg); color: var(--wk-text); font: 400 var(--step-0)/1.55 var(--wk-font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--wk-text); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: 104px; }
.hero + .section { padding-top: 176px; }      /* a clear breath between the fire and the rest of the page */

/* Type */
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--wk-accent-text); }
/* Caveat Brush (SIL Open Font License, fonts/OFL.txt), Latin subset. Brush letters run small, so headings are set larger. */
@font-face { font-family: "Caveat Brush"; src: url("fonts/caveat-brush.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
.display { font-family: var(--display); font-size: calc(var(--step-5) * 1.2); font-weight: 400; letter-spacing: 0; line-height: 1; text-wrap: balance; }
.section-title { font-family: var(--display); font-size: calc(var(--step-3) * 1.15); font-weight: 400; letter-spacing: 0; line-height: 1.1; text-wrap: balance; }
.lede { font-size: var(--step-1); color: var(--wk-text-muted); max-width: 36ch; }
.footnote { font-size: var(--step--1); color: var(--wk-text-muted); }

/* Buttons and links */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 16px; border-radius: 10px;
  background: var(--wk-button-bg); color: var(--wk-button-text); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: none; }
.button-large { min-height: 48px; padding: 12px 22px; border-radius: 12px; font-size: 16px; }
.text-link { font-weight: 500; text-underline-offset: 3px; }

/* Header: wordmark left, mascot centred, navigation right, hairline underneath */
.site-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 14px max(var(--gutter), (100% - var(--content)) / 2); border-bottom: 1px solid var(--wk-line); }
.wordmark { justify-self: start; }
.wordmark img { width: auto; height: 32px; }
.header-mascot { width: auto; height: 64px; }
.site-nav { justify-self: end; display: flex; align-items: center; gap: 24px; }
.nav-link { font-size: 14px; color: var(--wk-text-muted); text-decoration: none; }
.nav-link:hover { color: var(--wk-text); }

/* Hero: the copy front and centre, the fire's band along the bottom (sized by fire.js). On desktop the hero fills the
   first screen under the 93 px header and centres the copy in the space above the fire; the hairline underneath is a
   hearth for the flames to stand on. */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(48px, 8vh, 96px); padding-bottom: 220px; border-bottom: 1px solid var(--wk-line);
  /* Fill the screen under the header on every device, so the fire burns at the bottom edge, as in the app. lvh is the
     full screen height: iPhone Safari's toolbar floats over the page, so the fire runs on behind it to the very edge. */
  min-height: calc(100vh - var(--header-h)); min-height: calc(100lvh - var(--header-h)); }
.hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.hero .lede { max-width: 40ch; }
.hero .cta { justify-content: center; }
.hero-toggle { position: absolute; z-index: 2; right: max(var(--gutter), (100% - var(--content)) / 2); bottom: 16px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 8px; }

/* The sales video, in a flat window */
.video-window { min-width: 0; overflow: hidden; background: var(--wk-bg); border-radius: 12px;
  box-shadow: 0 0 0 1px var(--wk-line), 0 28px 56px -28px var(--shadow); }
.window-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 30px;
  border-bottom: 1px solid var(--wk-line); font-size: 12px; color: var(--wk-text-muted); }
.window-dots { position: absolute; left: 12px; display: flex; gap: 7px; }
.window-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--wk-line); }
.video-frame { position: relative; }
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; background: var(--wk-flame-inner); }
.pause-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: var(--wk-bg); color: var(--wk-text); cursor: pointer;
  box-shadow: 0 0 0 1px var(--wk-line), 0 4px 10px -4px var(--shadow); }
.pause-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.pause-toggle[data-state="playing"] .icon-play, .pause-toggle[data-state="paused"] .icon-pause { display: none; }
.video-frame .pause-toggle { position: absolute; right: 12px; bottom: 12px; }
.fire-canvas { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; pointer-events: none; }
.fire-still { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; pointer-events: none; }
.hero.is-live .fire-still { visibility: hidden; }

/* How it works: the same reading column as below, with the explainer video centred under "What is Wicklet?" */
.explainer { align-self: center; width: min(880px, 100vw - 2 * var(--gutter)); margin-block: 80px 24px; }   /* with the column gap and the next heading's margin, even space above and below */

/* Below How it works: one plain reading column (720 px at most), like an article. Headings and paragraphs on the page
   colour, nothing boxed or ruled; the first paragraph under a heading is larger and darker, the rest are muted. */
.flow { padding-block: 64px; }
.flow:last-child { padding-bottom: 112px; }
.column { width: min(720px, 100% - 2 * var(--gutter)); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.column .section-title { font-size: clamp(36px, 5vw, 50px); margin-bottom: 4px; }
.column p { color: var(--wk-text-muted); line-height: 1.7; }
.column .lead { font-size: var(--step-1); color: var(--wk-text); line-height: 1.6; }
.column h3 { margin-top: 24px; font-size: var(--step-1); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.column h3 + p { margin-top: -6px; }
.column a:not(.button):not(.badge-link) { color: var(--wk-text); text-underline-offset: 3px; }
.column .button { margin-top: 8px; }

/* The pricing page */
.column .page-title { font-size: clamp(48px, 7.5vw, 80px); }
.column .section-title + p, .column .buy + .section-title { margin-top: 0; }
.column h2.section-title:not(:first-child) { margin-top: 56px; }
.buy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-block: 16px 8px; }
.buy-name { font-size: var(--step--1); font-weight: 500; color: var(--wk-text-muted); }
.column .price { font-size: var(--step-5); font-weight: 300; letter-spacing: -.05em; line-height: 1; color: var(--wk-text); font-variant-numeric: tabular-nums; }
.column .buy-terms { font-size: var(--step-1); color: var(--wk-text); }
.column strong { font-weight: 600; color: var(--wk-text); }

/* Closing: the mascot above the last call to action */
.column.closing { align-items: center; text-align: center; }
.closing-mascot { width: auto; height: 80px; }
.column .closing-mascot + h2.section-title { margin-top: 4px; }        /* outranks the spacing between later headings */

/* The App Store badge */
.badge-link { display: inline-block; margin-block: 10px; }      /* Apple: clear space of a quarter of the badge height */
.badge { display: block; width: auto; height: 40px; }
.badge-placeholder { display: grid; place-items: center; padding: 0 16px; border: 1.5px dashed var(--wk-text-muted); border-radius: 8px;
  font-size: 12px; color: var(--wk-text-muted); }

/* Footer */
.site-footer { border-top: 1px solid var(--wk-line); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 28px 40px; font-size: 14px; color: var(--wk-text-muted); }
.footer-wordmark { width: auto; height: 22px; margin-right: auto; }
.footer-nav { display: flex; gap: 20px; }
.footer-nav a { color: var(--wk-text-muted); text-decoration: none; }
.footer-nav a:hover, .footer-nav a[aria-current] { color: var(--wk-text); }
.footer-nav a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }

/* Privacy and Support pages */
.prose { display: flex; flex-direction: column; gap: 18px; max-width: 65ch; padding-block: 72px 104px; }
.prose h2 { margin-top: 18px; font-size: var(--step-1); font-weight: 500; }
.prose p, .prose li { color: var(--wk-text-muted); }
.prose ul { display: flex; flex-direction: column; gap: 8px; padding-left: 1.2em; list-style: disc; }
.prose strong, .prose a { color: var(--wk-text); }
.prose .lead { font-size: var(--step-1); color: var(--wk-text); }
.updated { font-size: var(--step--1); }

@media (max-width: 900px) {
  .hero { padding-bottom: 200px; }
}
@media (max-width: 720px) {
  :root { --header-h: 77px; }            /* 14 + 48 + 14 px, plus its hairline */
  .nav-link { display: none; }
  .site-header { gap: 10px; }
  .wordmark img { height: 24px; }
  .header-mascot { height: 48px; }
  .section { padding-block: 72px; }
  .hero + .section { padding-top: 112px; }
  .flow { padding-block: 44px; }
  .column h2.section-title:not(:first-child) { margin-top: 40px; }
  .explainer { margin-block: 42px 2px; }
}
@media (max-width: 380px) {
  .site-header .button { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .button:hover { transform: none; }
}