/* ==========================================================================
   Oplo — design system
   Near-monochrome. One accent. An enormous type scale doing the work that
   decoration used to. No illustration: the words and the space are the
   design, because a drawn product is worse than no product.
   ========================================================================== */

:root {
  /* Ground */
  --paper:   #ffffff;
  --canvas:  #f5f5f7;
  --void:    #000000;
  --void-2:  #0b0b0c;

  /* Ink */
  --ink:     #1d1d1f;
  --ink-2:   #6e6e73;
  --ink-3:   #86868b;
  --ink-lt:  #f5f5f7;
  --ink-lt-2:#a1a1a6;

  /* The only colour on the site */
  --blue:      #0066cc;
  --blue-dark: #2997ff;

  --rule:      #d2d2d7;
  --rule-dark: rgba(255,255,255,.16);

  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter",
          "Helvetica Neue", Helvetica, Arial, sans-serif;

  --well:   980px;
  --gutter: 22px;
  --gap:    12px;
  --nav:    44px;

  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: -0.022em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* The default blue flash on tap reads as a web page, not a product. */
  -webkit-tap-highlight-color: transparent;
}
/* Body is fixed while the menu is open; this preserves the scroll position. */
body.locked { position: fixed; width: 100%; overflow: hidden; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(0,102,204,.16); }
:focus-visible { outline: 3px solid rgba(0,125,250,.7); outline-offset: 2px; border-radius: 3px; }

/* ---------------------------------------------------------------- Type
   Six sizes, two weights. The size is the hierarchy. */
.t-mega    { font-family: var(--font); font-size: clamp(56px, 10vw, 128px); line-height: .98;  font-weight: 600; letter-spacing: -0.02em; }
.t-hero    { font-family: var(--font); font-size: clamp(40px, 6.4vw, 80px);  line-height: 1.05; font-weight: 600; letter-spacing: -0.015em; }
.t-display { font-family: var(--font); font-size: clamp(32px, 4.4vw, 56px);  line-height: 1.07; font-weight: 600; letter-spacing: -0.005em; }
.t-title   { font-family: var(--font); font-size: clamp(26px, 3vw, 40px);    line-height: 1.1;  font-weight: 600; }
.t-sub     { font-family: var(--font); font-size: clamp(19px, 2.1vw, 28px);  line-height: 1.15; font-weight: 400; letter-spacing: .007em; }
.t-lead    { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.38; letter-spacing: .011em; }
.t-fine    { font-size: 12px; line-height: 1.33; letter-spacing: -.01em; }

.eyebrow {
  font-family: var(--font);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 600;
  letter-spacing: .011em;
  color: var(--ink-2);
}
.muted { color: var(--ink-2); }
.balance { text-wrap: balance; }

/* --------------------------------------------------------------- Links
   The CTA on this site is a link, not a button. Buttons are for commerce. */
.cta {
  display: inline-flex;
  align-items: baseline;
  gap: .26em;
  color: var(--blue);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.19;
  letter-spacing: .011em;
  white-space: nowrap;
}
.cta::after {
  content: "\203A"; font-size: 1.15em; line-height: 0;
  position: relative; top: .06em;
  transition: transform .25s var(--ease);
}
.cta:hover { text-decoration: underline; }
.cta:hover::after { transform: translateX(3px); }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin-top: 20px; }

.btn {
  display: inline-block;
  font-size: 17px; line-height: 1.18; letter-spacing: -.022em;
  padding: 12px 22px; border-radius: 980px;
  background: #0071e3; color: #fff;
  transition: background .2s var(--ease);
}
.btn:hover { background: #0077ed; }
.btn:active { transform: scale(.985); }
.btn.sm { font-size: 14px; padding: 8px 16px; }

/* -------------------------------------------------------------- Layout */
.well {
  max-width: var(--well); margin-inline: auto;
  padding-left:  max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.center { text-align: center; }

/* ---------------------------------------------------------------- Nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav);
  z-index: 9000;
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.nav-in {
  max-width: 1024px; margin-inline: auto;
  padding-left:  max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  height: var(--nav); display: flex; align-items: center;
}
.nav-brand {
  display: flex; align-items: center;
  color: var(--ink); flex: none;
  opacity: .9; transition: opacity .2s;
}
.nav-brand:hover { opacity: 1; }
/* The mark sits at the optical size Apple gives its own: small enough that the
   bar stays furniture, large enough that the knockout still reads. */
/* The mark is slightly wider than tall (206.7 x 194.9), so it is sized by
   height and lets its own ratio set the width. Never set both. */
.nav-brand .mark { height: 19px; width: auto; display: block; }
.nav-links {
  flex: 1 1 auto; display: flex; justify-content: space-evenly;
  padding: 0 24px; margin: 0;
}
.nav-links a { font-size: 12px; letter-spacing: -.01em; color: var(--ink); opacity: .8; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-end { flex: none; display: flex; gap: 18px; }
.nav-end a { font-size: 12px; letter-spacing: -.01em; color: var(--ink); opacity: .8; }
.nav-end a:hover { opacity: 1; }
.nav-toggle { display: none; }

@media (max-width: 833px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; justify-content: flex-start;
    position: fixed; inset: var(--nav) 0 0 0;
    background: #fff;
    padding: 10px max(var(--gutter), env(safe-area-inset-left))
             max(40px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-links.open a {
    font-size: 17px; font-weight: 600; opacity: 1;
    padding: 14px 0; min-height: 44px; display: flex; align-items: center;
  }
  .nav.open { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* Half the blur radius costs the compositor far less per frame and is
     indistinguishable behind a 44px bar. */
  .nav { -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); }
  .nav-toggle { min-width: 44px; min-height: 44px; justify-content: center; align-items: flex-end; }
  .nav-toggle {
    display: flex; flex-direction: column; gap: 4px;
    margin-left: auto; padding: 8px 0 8px 16px;
  }
  .nav-toggle span { width: 17px; height: 1.5px; background: var(--ink); opacity: .8; transition: transform .3s var(--ease), opacity .2s; }
  .nav-toggle.on span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-toggle.on span:nth-child(2) { opacity: 0; }
  .nav-toggle.on span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .nav-end { order: 3; }
}

/* -------------------------------------------------------------- Bands
   A band is one full-bleed statement. Heroes are tall and carry the page;
   cards are half as tall and come in pairs. That difference is the
   hierarchy — the mistake before was making everything the same size. */
.band {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  padding: clamp(80px, 12vh, 140px) 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}
.band.grey { background: var(--canvas); }
.band.dark { background: var(--void); color: var(--ink-lt); }
.band.dark .muted, .band.dark .eyebrow { color: var(--ink-lt-2); }
.band.dark .cta { color: var(--blue-dark); }

.band.opening { min-height: calc(100vh - var(--nav)); min-height: calc(100svh - var(--nav)); }
.band.tall    { min-height: 84vh; min-height: 84svh; }

.band > * { position: relative; z-index: 1; }
.band .eyebrow  { margin-bottom: 14px; }
.band .t-sub    { margin-top: 18px; }
.band .t-lead   { margin-top: 16px; }
.band .measure  { max-width: 20ch; margin-inline: auto; }
.band .measure-wide { max-width: 34ch; margin-inline: auto; }

/* A single soft bloom, used only on the dark band. Nothing else is coloured. */
.bloom {
  position: absolute; z-index: 0;
  left: 50%; top: 46%;
  width: min(150%, 1400px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(80,120,190,.30) 0%,
    rgba(40,60,110,.16) 32%,
    rgba(0,0,0,0) 66%);
  pointer-events: none;
}

/* --------------------------------------------------------------- Cards
   Half-height, in pairs, on the page ground with a hairline gutter. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  padding: var(--gap);
  max-width: 1680px; margin-inline: auto;
}
@media (max-width: 734px) { .cards { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 480px;
  padding: clamp(44px, 6vw, 72px) clamp(24px, 4vw, 48px);
  text-align: center;
  background: var(--canvas);
  color: var(--ink);
  border-radius: 18px;
}
.card.dark { background: var(--void); color: var(--ink-lt); }
.card.dark .muted, .card.dark .eyebrow { color: var(--ink-lt-2); }
.card.dark .cta { color: var(--blue-dark); }
.card .eyebrow { margin-bottom: 12px; }
.card .t-lead { margin-top: 14px; max-width: 32ch; margin-inline: auto; }

/* ------------------------------------------------------------ Footer
   Dense, small, sitemap in character — the way a real company's is. */
.foot { background: var(--canvas); color: var(--ink-2); font-size: 12px; line-height: 1.33; }
.foot-in { max-width: 1024px; margin-inline: auto; padding: 0 var(--gutter); }
.foot-note { padding: 20px 0 8px; }
.foot-note p { margin-bottom: 9px; max-width: 90ch; }
.foot-note a { color: var(--blue); }
.foot-note a:hover { text-decoration: underline; }
.foot-rule { border-top: 1px solid var(--rule); }

.foot-cols {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0 26px; padding: 20px 0 24px;
}
.foot-col h3 { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 11px; }
.foot-col li { margin-bottom: 9px; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }

.foot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 15px 0 max(24px, env(safe-area-inset-bottom)); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.foot-legal a { position: relative; padding-right: 11px; }
.foot-legal a::after { content: ""; position: absolute; right: 5px; top: 2px; bottom: 2px; width: 1px; background: var(--rule); }
.foot-legal a:last-child::after { display: none; }
.foot-legal a:hover { color: var(--ink); text-decoration: underline; }
.foot-region { margin-left: auto; color: var(--ink); }

@media (max-width: 833px) { .foot-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 734px) {
  .foot-cols { display: block; padding: 0; }
  .foot-col { border-bottom: 1px solid var(--rule); }
  .foot-col h3 { margin: 0; }
  .foot-col h3 button {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 14px 2px; font-size: 12px; font-weight: 600; color: var(--ink);
  }
  .foot-col h3 button::after {
    content: ""; width: 7px; height: 7px; margin-right: 4px;
    border-right: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .25s var(--ease);
  }
  .foot-col[data-open="true"] h3 button::after { transform: translateY(2px) rotate(225deg); }
  .foot-col ul { display: none; padding: 0 2px 16px; }
  .foot-col[data-open="true"] ul { display: block; }
  .foot-col li { margin-bottom: 13px; font-size: 14px; }
  .foot-region { margin-left: 0; }
}
@media (min-width: 735px) { .foot-col h3 button { pointer-events: none; } .foot-col h3 button::after { display: none; } }

/* -------------------------------------------------- Between documents
   A multi-page site cuts to white on every navigation. One short crossfade
   removes that, and naming the bar holds it still while the page beneath it
   changes — so the furniture stays put and only the content moves.

   Opt-in rather than opt-out: wrapped in no-preference, so anyone who has
   asked for less motion keeps the instant cut. Unsupported browsers ignore
   the whole block and behave exactly as they do now. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  /* The bar is identical on every page, so give it its own name and it stops
     being part of the crossfade. */
  .nav { view-transition-name: oplo-nav; }
}

/* ------------------------------------------------------ Anchor offset
   The bar is fixed, and section pages carry a chapter bar under it. Without
   this, every in-page link scrolls its target to y=0 — i.e. underneath 96px
   of furniture — and the heading you clicked for is the one thing hidden. */
:where(section, div, main)[id] { scroll-margin-top: calc(var(--nav) + 16px); }
body:has(.chapter) :where(section, div, main)[id] { scroll-margin-top: calc(var(--nav) + 68px); }

/* -------------------------------------------------------------- Motion
   Visible by default; hidden only once the script arms the reveal, so no
   failure can leave the page blank. */
.reveal { opacity: 1; transform: none; }
.oplo-motion .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.oplo-motion .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .09s; }
.reveal.d2 { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .oplo-motion .reveal { opacity: 1; transform: none; transition: none; }
}


/* ------------------------------------------------------- Chapter bar
   The section-page sub-bar: page name left, its own sections right. Sticks
   under the global bar so you always know which page you are inside. */
.chapter {
  position: sticky; top: var(--nav); z-index: 800;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.chapter-in {
  max-width: 1024px; margin-inline: auto;
  padding-left:  max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  height: 52px; display: flex; align-items: center; gap: 20px;
}
.chapter-name { font-family: var(--font); font-size: 21px; font-weight: 600; letter-spacing: .011em; }
.chapter-links { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.chapter-links a { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.chapter-links a:hover { color: var(--ink); }
/* The action lives outside the scrolling link list, so it stays put on a
   phone instead of being pushed off the end with the section anchors. */
.chapter-cta {
  flex: none; margin-left: 20px;
  font-size: 12px; line-height: 1; white-space: nowrap;
  padding: 8px 15px; border-radius: 100px;
  background: #0071e3; color: #fff;
  transition: background .2s var(--ease);
}
.chapter-cta:hover { background: #0077ed; }
.chapter-links + .chapter-cta { margin-left: 20px; }
.chapter-links:not(:has(a)) + .chapter-cta,
.chapter-name + .chapter-cta { margin-left: auto; }
@media (max-width: 833px) {
  .chapter-in { height: 48px; }
  .chapter-links { gap: 18px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chapter-links::-webkit-scrollbar { display: none; }
  .chapter-name { font-size: 17px; flex: none; }
  .chapter-cta { margin-left: 12px; padding: 7px 13px; }
}
/* Below 734px the section list always outruns the bar, so it was being cut
   mid-word with nothing to say it could be scrolled. Fade the right edge and
   leave room past the last item, so the clip reads as "more this way". */
@media (max-width: 734px) {
  .chapter-links {
    padding-right: 26px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
  }
}

/* ------------------------------------------------------------- Rows
   Alternating text blocks inside a section page. Content sets the height. */
.rows { display: grid; gap: var(--gap); padding: var(--gap); max-width: 1680px; margin-inline: auto; }
.row {
  padding: clamp(56px, 9vw, 104px) clamp(24px, 5vw, 64px);
  border-radius: 18px;
  background: var(--canvas);
  text-align: center;
}
.row.dark { background: var(--void); color: var(--ink-lt); }
.row.dark .muted, .row.dark .eyebrow { color: var(--ink-lt-2); }
.row.dark .cta { color: var(--blue-dark); }
.row .eyebrow { margin-bottom: 12px; }
.row .t-lead { margin-top: 15px; max-width: 56ch; margin-inline: auto; }
.row .cta-row { margin-top: 18px; }
@media (max-width: 734px) { .row { border-radius: 16px; padding: clamp(44px, 12vw, 68px) clamp(22px, 6vw, 40px); } }

/* ------------------------------------------------------------- Notes
   Numbered endnotes, the way a spec-bearing page closes. */
.notes { background: var(--canvas); padding: 26px 0 6px; }
.notes ol { max-width: 1024px; margin-inline: auto; padding: 0 var(--gutter); counter-reset: n; }
.notes li { counter-increment: n; font-size: 12px; line-height: 1.4; color: var(--ink-2); margin-bottom: 9px; max-width: 92ch; }
.notes li::before { content: counter(n) ". "; }

/* -------------------------------------------------------------- Doc
   Legal and support pages: one column, long-form, nothing else. */
.doc { max-width: 692px; margin-inline: auto; padding: clamp(48px, 8vw, 88px) var(--gutter) clamp(56px, 8vw, 96px); }
.doc .t-hero { margin-bottom: 10px; }
.doc .dateline { font-size: 14px; color: var(--ink-3); margin-bottom: 36px; }
.doc h2 { font-family: var(--font); font-size: clamp(21px, 2.4vw, 26px); font-weight: 600; margin: 38px 0 12px; letter-spacing: -.01em; }
.doc p, .doc li { font-size: 17px; line-height: 1.55; color: var(--ink); margin-bottom: 14px; }
.doc ul { list-style: disc; padding-left: 1.25em; margin-bottom: 16px; }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--blue); }
.doc a:hover { text-decoration: underline; }

/* ==========================================================================
   Phones
   Every clamp above bottoms out around 600px, so a 320px phone and a 430px
   phone were being served identical type — the small one cramped, the large
   one under-set. Below 734px the scale is driven by vw so it actually tracks
   the device, with floors that hold at 320px and ceilings that stop it
   colliding with the tablet scale.
   ========================================================================== */
@media (max-width: 734px) {
  .t-mega    { font-size: clamp(46px, 14.5vw, 76px); line-height: 1;    letter-spacing: -0.025em; }
  .t-hero    { font-size: clamp(30px, 8.4vw, 42px);  line-height: 1.08; letter-spacing: -0.02em; }
  .t-display { font-size: clamp(26px, 7.2vw, 36px);  line-height: 1.1;  letter-spacing: -0.015em; }
  .t-title   { font-size: clamp(22px, 6vw, 30px);    line-height: 1.12; }
  .t-sub     { font-size: clamp(17px, 4.4vw, 21px);  line-height: 1.26; }
  .t-lead    { font-size: clamp(15px, 4vw, 17px);    line-height: 1.45; }
  .eyebrow   { font-size: clamp(13px, 3.6vw, 16px); }
  .cta       { font-size: clamp(16px, 4.2vw, 19px); min-height: 44px; align-items: center; }

  /* Measures are set in ch, which shrinks with the font — on a phone that
     left the lines far too short. Let them use the width available. */
  .band .measure, .band .measure-wide { max-width: 100%; }
  .card .t-lead { max-width: 100%; }

  /* Tall bands were reserving most of a screen for three lines of text.
     Let the content and its padding decide instead. */
  .band { padding: clamp(56px, 9vh, 88px) 0; }
  .band.tall { min-height: 0; }
  .card { min-height: 0; padding: clamp(48px, 13vw, 72px) clamp(22px, 6vw, 40px); border-radius: 16px; }
  .cards { gap: 10px; padding: 10px; }

  /* Shorter travel reads as quicker on a small screen. */
  .oplo-motion .reveal { transform: translateY(14px); transition-duration: .65s; }
  .reveal.d1 { transition-delay: .06s; }
  .reveal.d2 { transition-delay: .12s; }
}

/* Forced breaks are set for the desktop measure; on a phone they strand
   words on their own line. Let the browser wrap instead. */
@media (max-width: 734px) { .br-wide { display: none; } }

/* Landscape phones: a viewport-height opener leaves no room for the content
   it holds, so height stops being the driver. */
@media (max-height: 500px) and (orientation: landscape) {
  .band.opening, .band.tall { min-height: 0; }
  .band { padding: 44px 0; }
  .t-mega { font-size: clamp(40px, 9vh, 64px); }
}

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }