@font-face {
  font-family: Corinthia;
  src: url('/website/fonts/corinthia-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f9f8f6;
  --ink: #2c2b29;
  --clay: #8a735e;
  --quiet: #625c54;
  --hairline: #ded9d1;
  --gutter: clamp(1.5rem, 5vw, 5.5rem);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-underline-offset: .25em; }
img { display: block; max-width: 100%; }
figure, h1, h2, h3, p { margin: 0; }
::selection { background: #ded0bf; color: var(--ink); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 6px; border-radius: 3px; }
[hidden] { display: none !important; }
.page-width { width: min(100% - 2 * var(--gutter), 1160px); margin-inline: auto; }
.skip-link { position: fixed; z-index: 10; top: 1rem; left: 1rem; padding: 1rem; background: var(--paper); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.eyebrow { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 1rem; line-height: 1.5; letter-spacing: .01em; font-weight: 400; color: #79614c; }

.hero { position: relative; isolation: isolate; min-height: 780px; min-height: max(760px, 100svh); display: flex; flex-direction: column; }
.light-fallback, #ambient-light { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.light-fallback {
  background: radial-gradient(ellipse at 15% 70%, #d5bea750, transparent 60%),
    radial-gradient(ellipse at 92% 48%, #c5a48138, transparent 62%),
    linear-gradient(180deg, var(--paper) 10%, #ede6dc 100%);
}
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 90px; z-index: -1; pointer-events: none; background: linear-gradient(transparent, var(--paper)); }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding-block: 2rem; }
.header-brand { flex-shrink: 0; }
.header-brand img { width: 86px; height: auto; }
.site-header nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.site-header nav a { font-size: .875rem; line-height: 1.5; text-decoration: none; padding-block: .6rem; }
.site-header nav a:hover { text-decoration: underline; }
.hero-content { --slogan-size: 1.1875rem; flex: 1; width: min(100% - 2 * var(--gutter), 800px); margin-inline: auto; text-align: center; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 3.5rem 0 6rem; }
/* The table sign's category line, set as every section's eyebrow. It hangs
   from the wordmark: closer to it than the slogan below, so the three read as
   lead-in, name and line rather than a list. */
.hero-kicker { margin-bottom: 1.1rem; }
/* The wordmark's ink is exactly as wide as the slogan, as on the App's welcome
   screen, so the two read as one lockup at every size; a wordmark only a little
   wider looks misaligned rather than intended. The slogan sets 13.12 of its own
   ems in Georgia and the ink spans 0.9582 of the SVG's width, hence 13.69. The
   ink also sits 0.61% right of the SVG's centre (its side bearings differ),
   which the shift takes back. */
.hero-wordmark { width: calc(var(--slogan-size) * 13.69); height: auto; transform: translateX(-.61%); }
/* Set as on the App Store brand image: a serif line where only "understood," leans. */
.tagline { font-family: Georgia, 'Times New Roman', serif; font-size: var(--slogan-size); font-weight: 400; line-height: 1.4; letter-spacing: .015em; color: #79614c; margin-top: 1.9rem; }
.tagline em { font-style: italic; }
.tagline span { display: inline-block; max-width: 100%; }
/* The slogan sets the column. The poem below hangs from the slogan's left edge
   and is kept from widening the column (zero width, then stretched to it), so
   the block stays inside the lockup instead of reaching past it. Lines break
   only where written: Safari's text-wrap: pretty would otherwise re-break them. */
.hero-column { width: fit-content; max-width: 100%; }
.hero-description { width: 0; min-width: 100%; text-align: left; white-space: nowrap; font-size: 1rem; line-height: 1.8; color: #5c564f; margin-top: 1.6rem; }
.hero-description p + p { margin-top: 1.1em; }
.glass-link { min-height: 50px; padding: .8rem 1.5rem; min-width: 174px; margin-top: 2.25rem; border-radius: 999px; border: 1px solid #ffffffad; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; font-size: .9375rem; background: #ffffff40; box-shadow: 0 2px 12px #5746350c, inset 0 1px 0 #ffffffb3; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.glass-link:hover { background: #ffffff80; box-shadow: 0 5px 18px #57463512, inset 0 1px 0 #ffffffb3; }
.glass-link:active { transform: scale(.98); }

.how { padding-block: clamp(5.5rem, 11vw, 9rem) clamp(5.5rem, 10vw, 8.5rem); }
.how-intro { text-align: center; }
h2, h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; text-wrap: balance; }
h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.15; letter-spacing: -.045em; }
h2 em, h3 em { font-weight: 400; }
/* Each sentence on its own line. */
.how-intro h2 { margin-top: 1rem; }
.how-intro h2 span { display: block; }
/* The table sign's 3:1 frame. Full bleed on a phone, where an inset strip
   would leave the photo too small to read. */
.how-photo { width: min(100% - 2 * var(--gutter), 1160px); margin: clamp(2.75rem, 6vw, 4.5rem) auto 0; aspect-ratio: 1800 / 597; overflow: hidden; background: #e7e0d6; }
.how-photo img { width: 100%; height: 100%; object-fit: cover; }
.how-steps { list-style: none; margin: clamp(5rem, 10vw, 7.5rem) auto 0; padding: 0; display: grid; row-gap: 6rem; }
.how-step { display: grid; justify-items: center; text-align: center; }
.how-copy { width: 100%; }
.how-numeral { display: block; font-family: Georgia, 'Times New Roman', serif; font-size: .9375rem; line-height: 1; letter-spacing: .06em; color: #79614c; }
h3 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -.03em; }
.how-step h3 { margin-top: 1rem; }
/* Titles and subtitles are the App Store images' own, broken where they break. */
.how-copy p { margin-top: .9rem; font-size: 1rem; line-height: 1.65; color: var(--quiet); text-wrap: balance; }
/* Each screen stands in a panel cut from the App Store art: the same light,
   the phone rising from the panel's lower edge. */
.how-tile { position: relative; width: 100%; max-width: 440px; aspect-ratio: 345 / 448; margin-top: 2.25rem; border-radius: 24px; overflow: hidden; background: #efe9e1 var(--tile) center / cover no-repeat; }
.how-phone { position: absolute; left: 11%; top: 8%; width: 78%; height: auto; filter: drop-shadow(0 16px 26px #352d211f); }
.text-link { display: inline-flex; align-items: center; gap: 1rem; margin-top: 1.1rem; font-size: .875rem; line-height: 1.8; text-decoration-color: #8a735e70; }
.text-link:hover, .contact-email:hover { text-decoration-color: currentColor; }

/* Entrances. Everything is visible without script; reveal.js marks the page
   and each block then settles in once as it reaches the viewport. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s cubic-bezier(.2, .65, .25, 1), transform 1.1s cubic-bezier(.2, .65, .25, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .how-photo { transform: none; }
.js .how-photo img { transform: scale(1.06); transition: transform 2.4s cubic-bezier(.2, .65, .25, 1); }
.js .how-photo.is-in img { transform: none; }
.js .how-tile .how-phone { transform: translateY(40px); transition: transform 1.5s cubic-bezier(.2, .65, .25, 1) .12s; }
.js .how-tile.is-in .how-phone { transform: none; }

.contact { padding-block: 4.75rem; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.contact h2 { margin-top: 1.25rem; }
.contact-email { display: inline-block; max-width: 100%; overflow-wrap: anywhere; margin-top: 1.5rem; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.5; text-decoration-color: #8a735e70; }
.contact-email span { display: inline-block; margin-left: .5rem; }
.company-details { justify-self: end; max-width: 360px; font-size: .9375rem; line-height: 1.85; color: var(--quiet); }
.company-details p + p { margin-top: .8rem; }
.company-details .company-name { color: var(--ink); font-size: 1rem; font-weight: 500; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; border-top: 1px solid var(--hairline); padding-block: 1.75rem 2.25rem; font-size: .8125rem; line-height: 1.7; color: var(--quiet); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.back-top { white-space: nowrap; }

/* Narrower than this, the subtitles wrap freely instead of running wide. */
@media (min-width: 390px) {
  .how-copy p span { display: block; }
}

@media (min-width: 960px) {
  .how-steps { width: min(100% - 2 * var(--gutter), 960px); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 4.5rem); row-gap: 7rem; }
  /* Share rows across each pair so the panels align whatever the copy's length. */
  .how-step { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .how-step h3 { font-size: clamp(1.75rem, 2.4vw, 2rem); }
  .js .how-step:nth-child(even) .reveal { transition-delay: .12s; }
}

@media (min-width: 1600px) {
  .hero { min-height: min(100svh, 1080px); }
}

@media (max-width: 720px) {
  :root { --gutter: 1.5rem; }
  .hero { min-height: max(720px, 100svh); }
  .site-header { padding-block: 1.5rem; }
  .header-brand img { width: 72px; }
  .hero-content { --slogan-size: 1.0625rem; padding-block: 2.5rem 4rem; }
  .hero-kicker { margin-bottom: .85rem; }
  .tagline { margin-top: 1.5rem; }
  /* Small enough that the longest line ends where the slogan does. */
  .hero-description { margin-top: 1.35rem; font-size: .9rem; line-height: 1.75; }
  .glass-link { margin-top: 2rem; }
  .how-photo { width: 100%; }
  .contact { grid-template-columns: 1fr; padding-block: 3.5rem; gap: 2.75rem; }
  .company-details { justify-self: start; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 1rem; padding-bottom: 2rem; }
  .site-footer nav { gap: 1rem; }
}

@media (max-width: 360px) {
  :root { --gutter: 1.25rem; }
  .site-header nav { gap: 1rem; }
  .site-header nav a { font-size: .8125rem; }
  .contact-email { font-size: 1rem; gap: .5rem; }
}

@media print {
  .hero { min-height: 0; }
  .light-fallback, #ambient-light, .glass-link { display: none; }
  .hero-content { padding-block: 2rem; }
  .how { padding-block: 2rem; }
  .js .reveal { opacity: 1; transform: none; }
  .js .how-photo img, .js .how-tile .how-phone { transform: none; }
  .contact, .site-footer { break-inside: avoid; }
}