/* ─────────────────────────────────────────────────────────────
     Verdemar — marketing site
     Palette, voice and number formatting follow docs/design_system.md.
     Type scale, density, measure and motion deviate deliberately —
     every deviation is recorded in docs/marketing/design_deviations.md.
     ───────────────────────────────────────────────────────────── */

  :root {
    /* Canvas & surfaces — §2.1, held exactly */
    --canvas:         #FAFAF7;
    --surface:        #FFFFFF;
    --sunken:         #F4F3EE;
    --border:         #E8E6DF;
    --border-strong:  #D1CEC4;

    /* Text — §2.2 */
    --ink:            #1A1A1A;
    --ink-2:          #5C5C5C;
    --ink-3:          #8A8A8A;
    --ink-inv:        #FFFFFF;

    /* Brand & semantic — §2.3 */
    --navy:           #1B2A41;
    --navy-hover:     #243447;
    --navy-subtle:    #EEF0F3;
    --tide:           #12B5AC;  /* logo teal — brand only */
    --sea:            #2F7D7B;  /* data teal — gains, benchmark */
    --sea-subtle:     #E8F0EF;
    --brick:          #A33B3B;  /* losses */

    /* Type */
    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --t-hero:    clamp(2.5rem, 6.2vw, 4.5rem);
    --t-section: clamp(1.75rem, 3vw, 2.5rem);
    --t-sub:     clamp(1.375rem, 2vw, 1.75rem);
    --t-lead:    1.25rem;
    --t-body:    1.0625rem;
    --t-sm:      0.9375rem;
    --t-caption: 0.8125rem;
    --t-micro:   0.6875rem;

    /* Layout */
    --frame:   1120px;
    --measure: 68ch;
    --gap-section: clamp(5.5rem, 9vw, 8rem);
  }

  /* The app is light-only by design (§2.0 — "exactly one variant").
     The site commits to the same single visual world. */
  :root { color-scheme: light; }

  *, *::before, *::after { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--t-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
  p { margin: 0; }
  a { color: inherit; }

  ::selection { background: var(--sea-subtle); color: var(--navy); }

  :focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .frame {
    width: 100%;
    max-width: var(--frame);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  }

  .prose { max-width: var(--measure); }

  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  /* ── Waterline ────────────────────────────────────────────────
     The logomark's own construction — a navy rule with a teal block
     sitting just above it, offset right — repeated as the page's
     structural spine. See design_deviations.md §2.6.            */

  .waterline {
    position: relative;
    height: 1px;
    background: var(--border-strong);
    transform-origin: left center;
  }
  .waterline::after {
    content: "";
    position: absolute;
    right: 14%;
    bottom: 5px;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--tide);
  }

  /* ── Nav ──────────────────────────────────────────────────── */

  .nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(250, 250, 247, 0.88);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }
  .nav-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 68px;
  }
  /* Inline SVG rather than a flattened PNG: the old bitmap carried an
     opaque white plate that showed as a white box against the cream
     canvas. Text is outlined, so no webfont is needed and nothing
     shifts if Google Fonts is slow or blocked. */
  .lockup { display: block; height: 26px; width: auto; }
  svg.lockup { overflow: visible; }
  .nav-actions { display: flex; align-items: center; gap: 1.25rem; }

  /* Pricing sits immediately left of Sign in. Getting data in and Questions
     sit left of that and drop out below 860px, where the footer carries
     them instead — two links do not justify a hamburger. */
  .nav-wide { display: none; }
  @media (min-width: 860px) { .nav-wide { display: inline; } }
  @media (max-width: 560px) { .nav-actions .btn-quiet { font-size: 0.8125rem; } }

  .btn-quiet { white-space: nowrap; }

  @media (max-width: 560px) {
    .nav-in { height: 60px; }
    .lockup { height: 22px; }
    .nav-actions { gap: 0.875rem; }
    .nav-actions .btn { padding: 0.6875rem 0.9375rem; font-size: 0.875rem; }
    .nav-actions .btn-quiet { font-size: 0.875rem; }
  }

  /* Adding Pricing to the bar costs about 40px, which is more than a 320px
     phone has spare — the header was the one element pushing the whole
     document into horizontal scroll. Tighten rather than drop it: Pricing is
     the link the nav exists to carry. Must come after the 560px block above,
     or that block wins. Measured clean from 320px up. */
  @media (max-width: 400px) {
    .nav-in { gap: 0.5rem; padding-inline: 0.875rem; }
    .nav-in .lockup { height: 19px; }
    .nav-actions { gap: 0.5rem; }
    .nav-actions .btn-quiet { font-size: 0.75rem; }
    .nav-actions .btn { padding: 0.5625rem 0.625rem; font-size: 0.75rem; }
  }

  /* ── Buttons ──────────────────────────────────────────────── */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1;
    padding: 0.875rem 1.375rem;
    border-radius: 6px;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
  }
  .btn-primary { background: var(--navy); color: var(--ink-inv); }
  .btn-primary:hover { background: var(--navy-hover); }
  .btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border-strong);
  }
  .btn-secondary:hover { border-color: var(--navy); }
  .btn-quiet {
    font-size: var(--t-sm);
    font-weight: 500;
    text-decoration: none;
    color: var(--ink-2);
    transition: color 160ms ease-out;
  }
  .btn-quiet:hover { color: var(--navy); }

  /* ── Section scaffolding ──────────────────────────────────── */

  .section { padding-block: var(--gap-section); }
  .section-sunken { background: var(--sunken); border-block: 1px solid var(--border); }

  .eyebrow {
    font-size: var(--t-caption);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 1.25rem;
  }

  /* Both tags: a page title is an h1 and a section heading is an h2, and the
     two are set identically. Scoping this to h2 alone is what made /questions
     carry a verbatim copy of the rule for its own h1. */
  h1.section-title,
  h2.section-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-section);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--navy);
  }

  .block-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-sub);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--navy);
  }

  .lead {
    font-size: var(--t-lead);
    line-height: 1.55;
    color: var(--ink-2);
  }

  .note {
    font-size: var(--t-caption);
    line-height: 1.5;
    color: var(--ink-3);
  }

  /* A small label beside an eyebrow — "UK residents" on the capabilities
     that depend on UK wrappers or UK tax rules. */
  .tag {
    display: inline-block;
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 7px;
  }
  .section-sunken .tag { background: var(--surface); }

  /* ── Hero ─────────────────────────────────────────────────── */

  /* The bottom padding is --gap-section, the same distance every other section
     keeps from the waterline that follows it; at 0 the screenshot's caption sat
     almost on the rule. Everything above the shot, by contrast, is tighter
     than the section rhythm elsewhere for one reason: it is what puts the
     app's gross/owed/net FIGURES — not just their labels — above the fold on
     a 900px-tall viewport. The figure row sits at 0.435-0.453 of the shot's
     height, so at the 1040px frame width it lands 288px below the shot's top
     edge; the shot's top edge therefore has to clear 900 by that much. The
     28px this costs is spread over four gaps rather than taken out of one,
     because collapsing the space between the price line and the screenshot
     reads as the two being the same object. */
  .hero { padding-top: clamp(1.75rem, 3vw, 2rem); padding-bottom: var(--gap-section); }

  h1.hero-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-hero);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--navy);
  }
  h1.hero-title em {
    font-style: italic;
    color: var(--sea);
  }

  /* 40rem rather than the 34rem this column used before the hero gained a
     screenshot. Still inside the reading measure, and it costs the residency
     line one of its three rows — which is most of the vertical the shot
     needed. */
  .hero-lead { margin-top: 1.5rem; max-width: 40rem; }

  .hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
    margin-top: 1.5rem;
  }
  .hero-terms { margin-top: 1rem; }
  .hero-residency {
    margin-top: 1rem;
    max-width: 40rem;
    font-size: var(--t-sm);
    color: var(--ink-2);
  }

  /* ── Hero shot ────────────────────────────────────────────────
     Frame width, so its left edge lines up with the headline above it. It
     was briefly 1320px, breaking out past the frame, which read as
     disproportionate beside a 730px headline. Holding it to the frame costs
     legibility at a fixed capture width, so the CAPTURE narrowed instead:
     `overview-hero` is shot at an 1100px viewport rather than 1600, which
     renders each app pixel at 0.92 of its size here instead of 0.63.
     The two halves are one decision — changing the width without
     re-capturing undoes it.

     `.shot { margin: 0 }` is declared further down this file at the same
     specificity, so a bare `.hero-shot` here loses to it and the top margin
     silently does nothing. Hence `.shot.hero-shot`. */
  .shot.hero-shot { margin-top: 1.25rem; }
  .hero-shot .shot-frame { padding: clamp(0.5rem, 1vw, 0.75rem); }
  .hero-shot figcaption.shot-cap {
    margin-top: 0.875rem;
    font-size: var(--t-caption);
    color: var(--ink-3);
  }
  /* The shared .shot-frame turns into a 1100px sideways scroller below
     900px, which is right for a nine-account Sankey the reader has come
     to read and wrong for the first thing on the page: it would open on
     a phone showing the app's sidebar and a swipe hint. The hero shot
     scales to fit instead. The figures are not legible at 390px and are
     not meant to be — what has to survive is the shape of a real
     dashboard. */
  @media (max-width: 900px) {
    .hero-shot .shot-frame {
      overflow: hidden;
      -webkit-mask-image: none;
              mask-image: none;
    }
    .hero-shot .shot-frame img { width: 100%; max-width: 100%; }
    .hero-shot .shot-hint { display: none; }
  }

  /* ── Feature blocks ───────────────────────────────────────── */

  .block {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
  @media (min-width: 940px) {
    .block { grid-template-columns: 1fr 1fr; gap: 4.5rem; }
    .block.flip .block-visual { order: -1; }
  }
  .block + .block { margin-top: clamp(4.5rem, 8vw, 7rem); }

  .block-body > * + * { margin-top: 1.25rem; }
  .block-body .note { margin-top: 1.5rem; }

  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: clamp(1.5rem, 3vw, 1.875rem);
  }
  .card-label {
    font-size: var(--t-caption);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 1.25rem;
  }

  /* asset-type list */
  .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .chip {
    font-size: var(--t-caption);
    color: var(--ink-2);
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.375rem 0.625rem;
  }
  .chip.owe { color: var(--brick); border-color: #EADADA; background: #F9F1F1; }

  /* two-axis diagram */
  .axes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
  .axis { background: var(--surface); padding: 1.25rem; }
  .axis-key {
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.75rem;
  }
  .axis ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
  .axis li { font-size: var(--t-sm); color: var(--ink-2); }
  .axis li strong { font-weight: 500; color: var(--ink); }
  .axis-foot {
    margin-top: 1rem;
    font-size: var(--t-caption);
    color: var(--sea);
    font-weight: 500;
  }

  /* ── Capability sections ──────────────────────────────────
     The home page's capabilities. Each is an eyebrow (with a residency
     tag where one applies), a title and its copy — and, where the screen
     shows what words cannot, a real screenshot beneath.          */

  .cap + .cap,
  .cap + .pair { margin-top: clamp(4.5rem, 8vw, 7rem); }
  .cap .prose > * + * { margin-top: 1.25rem; }
  .cap .shot { margin-top: 2.25rem; }
  .cap-link { margin-top: 2.25rem; }

  /* min-height is the tag's own height, so a heading row with a tag and one
     without put their titles on the same line when they sit side by side. */
  .cap-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem; min-height: 1.625rem; }
  .cap-head .eyebrow { margin-bottom: 0; }

  .pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(3rem, 6vw, 4rem);
  }
  @media (min-width: 900px) { .pair { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }
  .pair > * > * + * { margin-top: 1.25rem; }

  .shot-note { margin-top: 3rem; }

  /* ── Grids ────────────────────────────────────────────────── */

  .grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
  }
  @media (min-width: 700px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

  .tile > * + * { margin-top: 0.625rem; }
  .tile h3 {
    font-family: var(--sans);
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--navy);
  }
  .tile p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }

  /* ── Audience ─────────────────────────────────────────────── */

  .audience {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
  }
  @media (min-width: 800px) { .audience { grid-template-columns: 1fr 1fr; gap: 2rem; } }

  .aud-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: clamp(1.5rem, 3vw, 2rem); }
  .aud-card.muted { background: transparent; border-style: dashed; }
  .aud-card h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.375rem;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin-bottom: 1.25rem;
  }
  .aud-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.875rem; }
  .aud-list li {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.55;
    padding-left: 1.5rem;
    position: relative;
  }
  .aud-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--tide);
  }
  .aud-card.muted .aud-list li::before { background: var(--border-strong); }

  /* ── Pricing ──────────────────────────────────────────────── */

  .price-fig {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(3rem, 6vw, 4rem);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--navy);
  }
  .price-per { font-size: var(--t-body); color: var(--ink-2); }
  .price-trial { margin-top: 1rem; font-size: var(--t-sm); color: var(--ink-2); }
  .price-inc {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    text-align: left;
  }

  /* ── Brand marks ──────────────────────────────────────────
     A wave, a ship's wheel and a compass rose, used as page texture:
     light borrowings from seafaring (design_system.md §0.2.1), not
     part of the brand's identity. The app's spinner, once drawn from
     the same set, is now six constellations.

     Rules held deliberately — no more than four to a page, never
     larger than 28px outside an empty state, always in the border
     and ink-3 tones. The moment they read as a motif rather than
     as texture, there is one too many. */

  svg.mk {
    --mk-accent: var(--tide);
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    display: inline-block;
    vertical-align: middle;
    color: var(--border-strong);
  }
  svg.mk-lg { width: 1.5rem; height: 1.5rem; }
  svg.mk-xl { width: 1.75rem; height: 1.75rem; }
  svg.mk-block { display: block; margin-bottom: 1rem; }

  .eyebrow.has-mk { display: flex; align-items: center; gap: 0.5rem; }

  /* ── Closing band ─────────────────────────────────────────── */

  .closer { max-width: var(--measure); }
  .closer-cta { margin-top: 2.25rem; display: flex; gap: 0.875rem; flex-wrap: wrap; align-items: center; }

  /* ── Footer ───────────────────────────────────────────────── */

  .footer {
    background: var(--navy);
    color: rgba(255, 255, 255, 0.72);
    padding-block: clamp(3rem, 6vw, 4.5rem);
    font-size: var(--t-sm);
  }
  .footer a { color: rgba(255, 255, 255, 0.86); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.24); }
  .footer a:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
  .footer :focus-visible { outline-color: var(--tide); }
  .footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    align-items: flex-start;
  }
  .footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
  .footer-rule { height: 1px; background: rgba(255,255,255,0.16); margin-block: 2.25rem; }
  .footer-legal { font-size: var(--t-caption); line-height: 1.65; color: rgba(255,255,255,0.6); max-width: 62ch; }
  .footer-legal strong { color: rgba(255,255,255,0.86); font-weight: 500; }
  .footer-legal + .footer-legal { margin-top: 1rem; }

  /* ── Chip groups ──────────────────────────────────────────
     Sixteen undifferentiated chips flattened "Shares" and
     "Private funds" to equal weight. Grouping lets the eye land
     on the unusual categories, which most trackers leave out. */

  .chip-groups { display: flex; flex-direction: column; gap: 1.25rem; }
  .chip-group-key {
    display: block;
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.625rem;
  }

  /* ── Mid-page CTA ─────────────────────────────────────────
     Roughly six sections separated the hero CTA from the pricing
     one. This is the quiet one in between.                     */

  .midcta {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
  }

  /* ── Questions ────────────────────────────────────────────
     Real <details>, not a scripted accordion — §2.5's failsafe
     lesson applies doubly to content that answers an objection. */

  .qa { margin-top: 2.5rem; max-width: var(--measure); }
  .qa details { border-top: 1px solid var(--border); }
  .qa details:last-of-type { border-bottom: 1px solid var(--border); }
  .qa summary {
    cursor: pointer;
    list-style: none;
    padding-block: 1.125rem;
    padding-right: 2rem;
    position: relative;
    font-weight: 500;
    color: var(--navy);
    font-size: var(--t-body);
  }
  .qa summary::-webkit-details-marker { display: none; }
  .qa summary::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    top: 1.4em;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--ink-3);
    border-bottom: 1.5px solid var(--ink-3);
    transform: rotate(45deg);
    transition: transform 160ms ease-out;
  }
  .qa details[open] summary::after { transform: rotate(-135deg); }
  .qa .qa-body {
    padding-bottom: 1.375rem;
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.65;
    max-width: 62ch;
  }
  .qa .qa-body > * + * { margin-top: 0.75rem; }
  .qa-more { margin-top: 1.75rem; }

  /* ── Product shot ─────────────────────────────────────────
     Real captures of the demo account, written by
     dev/capture_marketing_shots.py — never a hand-made mock-up. */

  .shot { margin: 0; }
  .shot-frame {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: clamp(0.75rem, 1.5vw, 1.125rem);
    overflow: hidden;
  }
  .shot-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
  }
  .shot-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  .shot + .shot { margin-top: clamp(3rem, 6vw, 4.5rem); }

  /* A nine-account Sankey over a seven-column table does not survive
     being squeezed to 324px — the labels vanish. Below 900px the frame
     scrolls instead, holding the image at a width where the figures can
     still be read. A cropped mobile-specific render would be better
     still; this at least means nothing is lost. */
  .shot-hint { display: none; }
  @media (max-width: 900px) {
    .shot-frame {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      /* A right-edge fade so it is obvious there is more to the right,
         and it disappears once you reach the end. */
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
              mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }
    .shot-frame img { width: 1100px; max-width: none; }
    .shot-hint {
      display: flex;
      align-items: center;
      gap: 0.4375rem;
      margin-top: 0.75rem;
      font-size: var(--t-caption);
      color: var(--ink-3);
    }
    .shot-hint::after { content: "\2192"; }
  }
  .shot-head h3 { margin: 0; }
  figcaption.shot-cap {
    margin-top: 1.125rem;
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 68ch;
  }

  /* ── Motion — see design_deviations.md §2.5 ───────────────── */

  .js .reveal { opacity: 0; transform: translateY(12px); }
  .js .reveal.in {
    opacity: 1;
    transform: none;
    transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .js .waterline { transform: scaleX(0); }
  .js .waterline.in { transform: scaleX(1); transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1); }
  .js .waterline::after { opacity: 0; }
  .js .waterline.in::after { opacity: 1; transition: opacity 300ms ease-out 620ms; }

  @media (prefers-reduced-motion: reduce) {
    .js .reveal, .js .reveal.in,
    .js .waterline, .js .waterline.in,
    .js .waterline::after, .js .waterline.in::after {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }