:root {
  --night: #0d2747; --abyss: #081a31; --deep: #153d72; --paper: #f3f5f7; --white: #fff; --ink: #0f1a25;
  --steel: #566676; --rule: #d5dce3; --line: #eaf2fc; --fog: rgba(234,242,252,.66); --hair: rgba(234,242,252,.16);
  --amber: #ffb454; --blue: #3d7fd0; --red: #e44936; --green: #3ea059; --yellow: #f6b70a;
  --grid: rgba(255,255,255,.055);
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cond: 'IBM Plex Sans Condensed', 'Arial Narrow', system-ui, sans-serif;
  --gut: clamp(16px, 4vw, 56px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 1; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); }
section[id] { scroll-margin-top: 72px; }

/* top bar: logo, a few links, sign-in small */
.top { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--line); border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.top.solid { background: rgba(8,26,49,.94); backdrop-filter: blur(10px); border-bottom-color: var(--hair); }
.top-in { display: flex; align-items: center; gap: 28px; height: 64px; max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); }
.top .brand img { height: 34px; width: auto; }
.top nav { display: flex; gap: 2px; }
.top nav a { padding: 8px 12px; font: 500 15px/1 var(--sans); color: var(--fog); text-decoration: none; }
.top nav a:hover { color: var(--line); }
.top-r { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.signin { font: 500 14px/1 var(--sans); color: var(--fog); text-decoration: none; padding: 8px 4px; }
.signin:hover { color: var(--line); text-decoration: underline; text-underline-offset: 4px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid transparent; font: 500 15px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s; }
.btn-go { background: var(--line); color: var(--night); }
.btn-go:hover { background: var(--white); }
.btn-line { border-color: currentColor; color: inherit; }
.btn-line:hover { background: rgba(127,140,155,.1); }
.btn-ink { background: var(--night); color: var(--line); }
.btn-ink:hover { background: var(--deep); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* opening */
.open { position: relative; padding: 120px 0 0; background: var(--night); color: var(--line); overflow: hidden; }
.open::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%); pointer-events: none; }
.open-head { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.lockup { width: min(100%, 520px); height: auto; }
.open h1 { margin-top: 40px; font: 600 clamp(40px, 5.4vw, 80px)/.95 var(--cond); letter-spacing: -.02em; }
.open h1 em { font-style: normal; color: var(--amber); }
.lede { margin-top: 22px; max-width: 34em; color: var(--fog); font-size: clamp(17px, 1.35vw, 19px); }
.for { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font: 500 14px/1.2 var(--sans); color: var(--fog); }
.for span { display: inline-flex; align-items: center; gap: 8px; }
.for i { width: 10px; height: 10px; border-radius: 2px; }
.screen { position: relative; border: 1px solid var(--hair); background: var(--abyss); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.screen-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--hair); font: 500 12px/1 var(--sans); color: var(--fog); }
.screen-bar b { width: 9px; height: 9px; border-radius: 50%; background: var(--hair); }
.screen-bar span { margin-left: 8px; }
.screen video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #fff; }
.open-strip { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 72px; border-top: 1px solid var(--hair); }
.open-strip div { padding: 22px 22px 26px 0; }
.open-strip div + div { padding-left: 22px; border-left: 1px solid var(--hair); }
.open-strip b { display: block; font: 600 clamp(26px, 2.6vw, 36px)/1 var(--cond); }
.open-strip span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--fog); }

/* sections */
.sec { padding: clamp(72px, 9vw, 128px) 0; }
.sec.alt { background: var(--white); }
.sec.dark { background: var(--night); color: var(--line); }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.dark .kicker { color: var(--fog); }
.kicker i { width: 12px; height: 12px; border-radius: 2px; }
.sec h2, .sec h1.h2 { margin-top: 18px; max-width: 18em; font: 600 clamp(34px, 4.2vw, 60px)/1 var(--cond); letter-spacing: -.015em; }
.sub { margin-top: 18px; max-width: 42em; color: var(--steel); font-size: clamp(17px, 1.3vw, 19px); }
.dark .sub { color: var(--fog); }

/* manufacturing: the pitch, then the four things it does on the floor */
.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 48px; border-top: 2px solid var(--ink); }
.pains div { padding: 22px 24px 4px 0; }
.pains div + div { padding-left: 24px; border-left: 1px solid var(--rule); }
.pains b { display: block; font: 600 20px/1.2 var(--cond); }
.pains p { margin-top: 8px; color: var(--steel); font-size: 16px; }
.feat { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(56px, 7vw, 96px); }
.feat.flip > :first-child { order: 2; }
.feat h3 { font: 600 clamp(26px, 2.6vw, 36px)/1.05 var(--cond); }
.feat p { margin-top: 14px; color: var(--steel); }
.feat ul { margin-top: 18px; border-top: 1px solid var(--rule); }
.feat li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--rule); position: relative; font-size: 16px; }
.feat li::before { content: ''; position: absolute; left: 2px; top: 19px; width: 9px; height: 2px; background: var(--red); }
.feat .tag { display: inline-block; margin-bottom: 14px; padding: 5px 9px; background: var(--paper); border: 1px solid var(--rule); font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.alt .feat .tag { background: var(--paper); }
.shot { border: 1px solid var(--rule); background: #fff; box-shadow: 0 18px 50px rgba(13,39,71,.12); }
.shot video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.shot figcaption { padding: 10px 14px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--steel); }

/* the whole line: four arms in a row */
.arms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 48px; border: 1px solid var(--hair); }
.arms > div { padding: 26px 24px 28px; }
.arms > div + div { border-left: 1px solid var(--hair); }
.arms h3 { display: flex; align-items: center; gap: 10px; font: 600 26px/1 var(--cond); }
.arms h3 i { width: 12px; height: 12px; border-radius: 2px; }
.arms .what { margin-top: 8px; font-size: 14px; color: var(--fog); }
.arms ul { margin-top: 16px; }
.arms li { padding: 7px 0; border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.4; }

/* buildout: four clips in a grid */
.grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 48px; }
.grid4 .shot video { aspect-ratio: 16 / 9; }
.grid4 h3 { margin-top: 16px; font: 600 22px/1.15 var(--cond); }
.grid4 p { margin-top: 6px; font-size: 15px; color: var(--steel); }

/* farms, quick */
.farm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.phones { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: 18px; align-items: center; }
.phones .tall video { aspect-ratio: 1 / 2; object-fit: cover; }
.phones .wide video { aspect-ratio: 16 / 10; }

/* roles */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 44px; border-top: 2px solid var(--ink); }
.roles div { padding: 18px 22px 18px 0; border-bottom: 1px solid var(--rule); }
.roles div:not(:nth-child(3n+1)) { padding-left: 22px; border-left: 1px solid var(--rule); }
.roles b { display: block; font: 600 19px/1.2 var(--cond); }
.roles p { margin-top: 6px; font-size: 15px; color: var(--steel); }

/* plans */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.plans.p3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan { display: flex; flex-direction: column; padding: 26px 22px 22px; background: var(--white); border: 1px solid var(--rule); }
.plan.best { border: 2px solid var(--night); }
.plan h3 { font: 600 24px/1 var(--cond); }
.plan .p { margin-top: 18px; font: 600 46px/1 var(--cond); }
.plan .p small { font: 400 15px/1 var(--sans); color: var(--steel); margin-left: 4px; }
.plan .d { margin-top: 12px; font-size: 15px; color: var(--steel); }
.plan ul { margin: 18px 0 22px; border-top: 1px solid var(--rule); }
.plan li { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.plan .btn { margin-top: auto; }
.plans-note { margin-top: 22px; max-width: 60em; font-size: 15px; color: var(--steel); }

/* end and foot */
.end { padding: clamp(80px, 10vw, 140px) 0; background: var(--night); color: var(--line); text-align: center; position: relative; overflow: hidden; }
.end::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.end > * { position: relative; }
.end img { width: 96px; height: auto; margin: 0 auto; }
.end h2 { margin: 28px auto 0; max-width: 16em; font: 600 clamp(34px, 4.4vw, 62px)/1 var(--cond); }
.end p { margin: 18px auto 0; max-width: 34em; color: var(--fog); }
.end .acts { justify-content: center; }
.foot { padding: 40px 0 48px; background: var(--abyss); color: var(--fog); font-size: 14px; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; }
.foot img { height: 28px; width: auto; }
.foot a { color: var(--fog); text-decoration: none; }
.foot a:hover { color: var(--line); text-decoration: underline; }
.foot .r { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot small { display: block; width: 100%; margin-top: 4px; font-size: 13px; opacity: .8; }

/* E, M, C, RP: the four lines of work, each opened by its square from the logo */
.emc { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 72px; border-top: 1px solid var(--hair); }
.emc a { display: flex; gap: 16px; align-items: flex-start; padding: 24px 20px 28px 0; text-decoration: none; color: var(--fog); font-size: 14px; line-height: 1.4; transition: color .15s; }
.emc a + a { padding-left: 20px; border-left: 1px solid var(--hair); }
.emc a:hover { color: var(--line); }
.emc img { width: 52px; height: 52px; flex: none; }
.emc b { display: block; margin-bottom: 4px; font: 600 22px/1.1 var(--cond); color: var(--line); }
.letter { border-top: 6px solid var(--k); }
.lhead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; }
.bigsq { width: clamp(96px, 11vw, 168px); height: auto; }
.lhead h2 { margin-top: 14px; }
.letter .kicker { color: var(--ink); font-size: 14px; }
.letter.dark .kicker { color: var(--line); }
.letter .feat li::before { background: var(--k); }
.dark .feat p, .dark .feat li { color: var(--fog); }
.dark .feat h3 { color: var(--line); }
.dark .feat ul, .dark .feat li { border-color: var(--hair); }
.dark .feat .tag { background: transparent; border-color: var(--hair); color: var(--fog); }
.dark .shot { border-color: var(--hair); }
.farmrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .42fr) minmax(0, 1.2fr); gap: 20px; align-items: center; margin-top: clamp(56px, 7vw, 96px); padding-top: 40px; border-top: 1px solid var(--rule); }
.farmrow h3 { font: 600 clamp(24px, 2.2vw, 30px)/1.1 var(--cond); }
.farmrow p { margin-top: 12px; color: var(--steel); font-size: 16px; }
.farmrow .tag { display: inline-block; margin-bottom: 12px; padding: 5px 9px; background: var(--paper); border: 1px solid var(--rule); font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.farmrow .more { display: inline-block; margin-top: 14px; font-weight: 500; }
.farmrow .tall video { aspect-ratio: 1 / 2; object-fit: cover; }
.farmrow .wide video { aspect-ratio: 16 / 10; }
.chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(48px, 6vw, 80px); counter-reset: c; }
.chain li { position: relative; padding: 18px 28px 18px 18px; background: var(--white); border: 1px solid var(--rule); counter-increment: c; }
.chain li + li { border-left: 0; }
.chain li::after { content: ''; position: absolute; right: -9px; top: 50%; z-index: 1; width: 16px; height: 16px; background: var(--white); border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); transform: translateY(-50%) rotate(45deg); }
.chain li:last-child::after { display: none; }
.chain li:last-child { background: var(--night); border-color: var(--night); color: var(--line); }
.chain b { display: block; font: 600 20px/1.1 var(--cond); }
.chain b::before { content: counter(c, decimal-leading-zero) '  '; color: var(--green); }
.chain span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--steel); }
.chain li:last-child span { color: var(--fog); }
.dark .roles { border-top-color: var(--line); }
.dark .roles div { border-color: var(--hair); }
.dark .roles p { color: var(--fog); }

.spt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 48px; border-top: 2px solid var(--yellow); }
.spt div { padding: 24px 26px 8px 0; }
.spt div + div { padding-left: 26px; border-left: 1px solid var(--hair); }
.spt span { font: 600 14px/1 var(--cond); color: var(--yellow); letter-spacing: .08em; }
.spt h3 { margin-top: 10px; font: 600 clamp(24px, 2.2vw, 30px)/1.1 var(--cond); }
.spt p { margin-top: 10px; color: var(--fog); font-size: 16px; }
.yoy { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(48px, 6vw, 72px); padding: clamp(24px, 3vw, 36px); background: rgba(246,183,10,.08); border: 1px solid rgba(246,183,10,.35); }
.yoy h3 { font: 600 clamp(28px, 2.8vw, 40px)/1 var(--cond); color: var(--yellow); }
.yoy p { margin-top: 12px; color: var(--fog); font-size: 16px; }
.yoy ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: y; }
.yoy li { position: relative; padding: 14px 14px 16px; background: var(--abyss); border: 1px solid var(--hair); counter-increment: y; }
.yoy li b { display: block; font: 600 19px/1.1 var(--cond); color: var(--line); }
.yoy li b::before { content: counter(y) '  '; color: var(--yellow); }
.yoy li span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--fog); }
.yoy li:last-child { border-color: var(--yellow); }
#rp .roles { margin-top: clamp(48px, 6vw, 72px); }
.evolve { background: var(--paper); border-top: 1px solid var(--rule); }
.evolve-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.idea { padding: 28px; background: var(--white); border: 1px solid var(--rule); border-top: 4px solid var(--night); }
.idea h3 { font: 600 26px/1.1 var(--cond); }
.idea p { margin-top: 10px; color: var(--steel); font-size: 16px; }
.idea .acts { margin-top: 20px; }

/* phones and small tablets */
@media (max-width: 980px) {
  .yoy, .evolve-in { grid-template-columns: minmax(0, 1fr); }
  .emc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emc a:nth-child(3) { padding-left: 0; border-left: 0; }
  .emc a:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .farmrow { grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); }
  .farmrow > div { grid-column: 1 / -1; }
  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain li:nth-child(3) { border-left: 1px solid var(--rule); }
  .chain li:nth-child(2)::after { display: none; }
  .open-head, .feat, .farm { grid-template-columns: minmax(0, 1fr); }
  .feat.flip > :first-child { order: 0; }
  .arms, .plans, .plans.p3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arms > div:nth-child(3) { border-left: 0; }
  .arms > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roles div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .roles div:nth-child(2n) { padding-left: 22px; border-left: 1px solid var(--rule); }
}
@media (max-width: 720px) {
  .spt { grid-template-columns: minmax(0, 1fr); }
  .spt div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); }
  .yoy ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emc { grid-template-columns: minmax(0, 1fr); }
  .emc a, .emc a + a { padding-left: 0; border-left: 0; }
  .emc a + a { border-top: 1px solid var(--hair); }
  .lhead { grid-template-columns: minmax(0, 1fr); }
  .bigsq { width: 88px; }
  .chain { grid-template-columns: minmax(0, 1fr); }
  .chain li + li { border-left: 1px solid var(--rule); border-top: 0; }
  .chain li::after { display: none; }
  .top nav { display: none; }
  .top .brand img { height: 28px; }
  .open { padding-top: 96px; }
  .open-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .open-strip div:nth-child(3) { padding-left: 0; border-left: 0; }
  .open-strip div:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .pains, .grid4, .roles, .arms, .plans, .plans.p3 { grid-template-columns: minmax(0, 1fr); }
  .pains div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .arms > div + div { border-left: 0; border-top: 1px solid var(--hair); }
  .roles div:nth-child(2n) { padding-left: 0; border-left: 0; }
  .foot .r { margin-left: 0; }
}
/* letter pages: the section opens the page under the fixed top bar */
.page-letter .letter:first-child { padding-top: clamp(120px, 12vw, 168px); border-top: 0; box-shadow: inset 0 70px 0 var(--abyss); }
.page-letter .letter:first-child .lhead h2 { font-size: clamp(40px, 5vw, 72px); }
.top nav a[aria-current] { color: var(--line); box-shadow: inset 0 -2px 0 var(--amber); }
.nextp { background: var(--white); border-top: 1px solid var(--rule); }
.nextp-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 34px 0; }
.nextp a.go { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; }
.nextp a.go img { width: 56px; height: 56px; }
.nextp a.go span { font: 500 14px/1.2 var(--sans); color: var(--steel); }
.nextp a.go b { display: block; font: 600 26px/1.1 var(--cond); color: var(--ink); }
.nextp a.go:hover b { text-decoration: underline; text-underline-offset: 5px; }
.nextp .back { font-size: 15px; color: var(--steel); }
.emc a { font-size: 15px; }
.emc img { width: 64px; height: 64px; }
.emc b { font-size: 24px; }
.emc i { display: block; margin-top: 8px; font-style: normal; font-weight: 500; color: var(--amber); }
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.door { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 26px 26px 0; background: var(--white); border: 1px solid var(--rule); border-top: 5px solid var(--k); text-decoration: none; color: var(--ink); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.door:hover { box-shadow: 0 18px 50px rgba(13,39,71,.14); transform: translateY(-2px); }
.door .sq { width: 72px; height: 72px; }
.door b { display: block; font: 600 30px/1 var(--cond); }
.door span { display: block; margin-top: 10px; color: var(--steel); font-size: 16px; }
.door i { display: block; margin-top: 14px; font-style: normal; font-weight: 500; font-size: 15px; }
.door .pv { grid-column: 1 / -1; width: calc(100% + 26px); margin-top: 22px; aspect-ratio: 16 / 7; object-fit: cover; object-position: top left; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
@media (max-width: 720px) { .doors { grid-template-columns: minmax(0, 1fr); } .door .sq { width: 56px; height: 56px; } }
.cform label { display: block; margin-top: 14px; font: 500 14px/1.3 var(--sans); color: var(--ink); }
.cform input, .cform select, .cform textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 0; background: var(--white); font: 400 16px/1.4 var(--sans); color: var(--ink); }
.cform textarea { resize: vertical; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--night); }
.cform-msg { margin-top: 12px; font-size: 15px; color: var(--steel); }
.cform-msg.ok { color: var(--green); font-weight: 500; }
.cform-msg.err { color: var(--red); }

/* plans, Oct 21: two cards, the yearly price under each, a contact line */
.plans.p2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.plan .y { margin: 4px 0 0; font-size: 13px; color: var(--steel, #566676); }
.plans-more { margin: 22px 0 0; font-size: 16px; }
@media (max-width: 640px) { .plans.p2 { grid-template-columns: minmax(0, 1fr); } }