@openwarelabs/blocks 0.7.0 → 0.9.0

package/dist/styles.css

@@ -1,569 +1,4008 @@
 /* @openwarelabs/blocks: import after @openwarelabs/ui/styles.css. */
-/* heroes/Hero01/Hero01.css */
-.ow-hero01,
-.ow-hero01 *,
-.ow-hero01 *::before,
-.ow-hero01 *::after {
+/* calls-to-action/Cta01/Cta01.css */
+.ow-cta01,
+.ow-cta01 *,
+.ow-cta01 *::before,
+.ow-cta01 *::after {
     box-sizing: border-box;
 }
 
-.ow-hero01 {
-    overflow: hidden;
+.ow-cta01 {
     background: var(--ow-paper);
-    padding: 112px var(--ow-page-gutter) 0;
+    padding: var(--ow-section-y) 32px;
+    color: var(--ow-text);
 }
 
-.ow-hero01__inner {
+/* The panel is the library's dot grid, on a surface rather than the paper, fading out toward its edges. */
+
+.ow-cta01 .ow-cta01__panel {
+    max-width: var(--ow-page-max);
+    margin: 0 auto;
+    overflow: hidden;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-section);
+    background: var(--ow-surface);
+}
+
+.ow-cta01__content {
     display: flex;
-    max-width: 880px;
-    flex-direction: column;
     align-items: center;
-    margin: 0 auto;
-    text-align: center;
+    justify-content: space-between;
+    gap: 40px 56px;
+    padding: 64px 64px 60px;
 }
 
-.ow-hero01__title {
-    margin-top: 24px;
+.ow-cta01__text {
+    max-width: 620px;
 }
 
-.ow-hero01__lead {
-    margin-top: 22px;
+.ow-cta01__lead {
+    margin-top: 16px;
 }
 
-.ow-hero01__actions {
+.ow-cta01__side {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 14px;
+}
+
+.ow-cta01__actions {
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
     gap: var(--ow-space-lg);
-    margin-top: 34px;
 }
 
-.ow-hero01__note {
-    margin-top: 16px;
+.ow-cta01__note {
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
 
-/* The product, cropped at the bottom so it runs on into the page. */
+.ow-cta01__note svg {
+    color: var(--ow-icon);
+}
 
-.ow-hero01__visual {
-    max-width: 1080px;
-    margin: 72px auto 0;
-    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
-    mask-image: linear-gradient(to bottom, #000 70%, transparent);
+@media (max-width: 1024px) {
+    .ow-cta01__content {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 56px 48px;
+    
+    }
+    .ow-cta01__side {
+        align-items: flex-start;
+    
+    }
 }
 
 @media (max-width: 760px) {
-    .ow-hero01 {
-        padding-top: 72px;
+    .ow-cta01 {
+        padding: 72px var(--ow-page-gutter);
+    
     }
-    .ow-hero01__actions {
+    .ow-cta01 .ow-cta01__panel {
+        border-radius: var(--ow-radius-card);
+    
+    }
+    .ow-cta01__content {
+        gap: 32px;
+        padding: 40px 22px;
+    
+    }
+    .ow-cta01__side,
+    .ow-cta01__actions {
         width: 100%;
-        flex-direction: column;
-        align-items: stretch;
+    
     }
-    .ow-hero01__visual {
-        margin-top: 48px;
+    .ow-cta01__actions {
+        flex-direction: column;
+    
     }
 }
 
-/* heroes/Hero02/Hero02.css */
-.ow-hero02,
-.ow-hero02 *,
-.ow-hero02 *::before,
-.ow-hero02 *::after {
+/* calls-to-action/Cta02/Cta02.css */
+.ow-cta02,
+.ow-cta02 *,
+.ow-cta02 *::before,
+.ow-cta02 *::after {
     box-sizing: border-box;
 }
 
-.ow-hero02 {
-    overflow: hidden;
+.ow-cta02 {
     background: var(--ow-paper);
-    padding: 112px 32px 120px;
-    color: var(--ow-text);
+    padding: var(--ow-section-y) 32px;
 }
 
-.ow-hero02__inner {
-    display: grid;
+/* The plate: the brand's deep steps, in both themes, with its own faint dots. The brand scale is built so
+   white text holds its contrast on 600 and darker, whatever colour the brand is. Text has no tone for that
+   white, so the text on the plate takes its colour here. */
+
+.ow-cta02 .ow-cta02__plate {
+    --ow-dot: color-mix(in srgb, var(--ow-on-primary) 13%, transparent);
     max-width: var(--ow-page-max);
-    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
-    align-items: center;
-    gap: 72px;
     margin: 0 auto;
+    overflow: hidden;
+    border: 1px solid color-mix(in srgb, var(--ow-brand-400) 35%, transparent);
+    border-radius: var(--ow-radius-section);
+    background: linear-gradient(180deg, var(--ow-brand-600), var(--ow-brand-800));
+    color: var(--ow-on-primary);
 }
 
-.ow-hero02__text {
+.ow-cta02__content {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
+    padding: 88px 40px 84px;
+    text-align: center;
 }
 
-.ow-hero02__title {
+.ow-cta02 .ow-cta02__eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid color-mix(in srgb, var(--ow-on-primary) 22%, transparent);
+    border-radius: var(--ow-radius-pill);
+    background: color-mix(in srgb, var(--ow-on-primary) 8%, transparent);
+    padding: 3px 12px;
+    color: color-mix(in srgb, var(--ow-on-primary) 88%, transparent);
+}
+
+.ow-cta02__eyebrow::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--ow-brass);
+}
+
+.ow-cta02 .ow-cta02__title {
+    max-width: 760px;
     margin-top: 24px;
+    color: var(--ow-on-primary);
 }
 
-.ow-hero02__lead {
-    max-width: 500px;
-    margin-top: 22px;
+.ow-cta02 .ow-cta02__lead {
+    margin-top: 20px;
+    color: color-mix(in srgb, var(--ow-on-primary) 78%, transparent);
 }
 
-.ow-hero02__actions {
+.ow-cta02__actions {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--ow-space-lg);
-    margin-top: 34px;
+    align-items: center;
+    justify-content: center;
+    gap: 16px 28px;
+    margin-top: 36px;
 }
 
-.ow-hero02__points {
-    display: grid;
-    gap: 8px;
-    margin: 32px 0 0;
-    padding: 0;
-    list-style: none;
+/* The one main action, as a light pill on the plate: a primary button would vanish into the brand colour. */
+
+.ow-cta02 .ow-cta02__action {
+    border-color: transparent;
+    background-color: var(--ow-on-primary);
+    background-image: linear-gradient(to bottom, var(--ow-on-primary), color-mix(in srgb, var(--ow-brand-50) 70%, var(--ow-on-primary)));
+    color: var(--ow-brand-700);
+    box-shadow:
+        0 1px 2px color-mix(in srgb, var(--ow-brand-950) 40%, transparent),
+        0 6px 16px -6px color-mix(in srgb, var(--ow-brand-950) 60%, transparent);
 }
 
-.ow-hero02__point {
+.ow-cta02 .ow-cta02__action:hover:not(:disabled) {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, var(--ow-on-primary), var(--ow-brand-100));
+}
+
+.ow-cta02 .ow-cta02__action:focus-visible,
+.ow-cta02 .ow-cta02__link:focus-visible {
+    outline: 2px solid var(--ow-on-primary);
+    outline-offset: 3px;
+}
+
+/* A Link in the plate's white, with no underline: the arrow moves instead. */
+
+.ow-cta02 .ow-cta02__link,
+.ow-cta02 .ow-cta02__link:hover {
     display: inline-flex;
     align-items: center;
-    gap: 7px;
+    gap: 6px;
+    border-radius: var(--ow-radius-sm);
+    color: var(--ow-on-primary);
+    text-decoration: none;
 }
 
-.ow-hero02__points svg {
-    color: var(--ow-primary-text);
+.ow-cta02__link svg {
+    transition: transform var(--ow-duration-base) var(--ow-ease-standard);
 }
 
-@media (max-width: 960px) {
-    .ow-hero02 {
-        padding-top: 88px;
-    }
-    .ow-hero02__inner {
-        grid-template-columns: minmax(0, 1fr);
-        gap: 56px;
-    }
-    .ow-hero02__lead {
-        max-width: 580px;
-    }
-    .ow-hero02__points {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px 22px;
+.ow-cta02__link:hover svg {
+    transform: translateX(2px);
+}
+
+.ow-cta02__facts {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px 28px;
+    margin: 48px 0 0;
+    padding: 0;
+    color: color-mix(in srgb, var(--ow-on-primary) 70%, transparent);
+    list-style: none;
+}
+
+.ow-cta02__facts li {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-cta02__link svg {
+        transition: none;
+    
     }
 }
 
 @media (max-width: 760px) {
-    .ow-hero02 {
-        padding: 72px var(--ow-page-gutter) 80px;
+    .ow-cta02 {
+        padding: 72px var(--ow-page-gutter);
+    
     }
-    .ow-hero02__inner {
-        gap: 48px;
+    .ow-cta02 .ow-cta02__plate {
+        border-radius: var(--ow-radius-card);
+    
     }
-    .ow-hero02__actions {
+    .ow-cta02__content {
+        padding: 56px 22px 52px;
+    
+    }
+    .ow-cta02__actions {
         width: 100%;
         flex-direction: column;
-        align-items: stretch;
+    
     }
-    .ow-hero02__points {
-        display: grid;
+    .ow-cta02 .ow-cta02__action {
+        width: 100%;
+    
+    }
+    .ow-cta02__facts {
+        flex-direction: column;
+        align-items: center;
+        margin-top: 36px;
+    
     }
 }
 
-/* heroes/Hero03/Hero03.css */
-.ow-hero03,
-.ow-hero03 *,
-.ow-hero03 *::before,
-.ow-hero03 *::after {
+/* calls-to-action/Cta03/Cta03.css */
+.ow-cta03,
+.ow-cta03 *,
+.ow-cta03 *::before,
+.ow-cta03 *::after {
     box-sizing: border-box;
 }
 
-.ow-hero03 {
+.ow-cta03 {
     overflow: hidden;
     background: var(--ow-paper);
-    padding: 120px var(--ow-page-gutter) 112px;
+    padding: var(--ow-section-y) 32px;
     color: var(--ow-text);
 }
 
-.ow-hero03__inner {
-    display: flex;
-    max-width: 760px;
-    flex-direction: column;
+.ow-cta03__inner {
+    display: grid;
+    max-width: var(--ow-page-max);
+    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
     align-items: center;
+    gap: 72px;
     margin: 0 auto;
-    text-align: center;
 }
 
-.ow-hero03__title {
-    margin-top: 24px;
+.ow-cta03__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ow-space-lg);
+    margin-top: 32px;
 }
 
-.ow-hero03__lead {
-    margin-top: 22px;
+.ow-cta03__points {
+    display: grid;
+    gap: 10px;
+    margin: 32px 0 0;
+    padding: 0;
+    list-style: none;
 }
 
-/* The form: a pill-shaped field and its button on one line. */
+.ow-cta03__points li {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
 
-.ow-hero03__form {
-    width: 100%;
-    max-width: 480px;
-    margin-top: 36px;
+.ow-cta03__points svg {
+    flex-shrink: 0;
+    color: var(--ow-primary-text);
 }
 
-.ow-hero03__row {
-    display: flex;
-    gap: var(--ow-space-sm);
+@media (max-width: 1024px) {
+    .ow-cta03__inner {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 56px;
+    
+    }
 }
 
-.ow-hero03 .ow-hero03__input {
-    height: 46px;
-    flex: 1;
-    border-radius: var(--ow-radius-pill);
-    padding-left: 18px;
-    box-shadow: var(--ow-shadow-control);
-    font-size: 15px;
+@media (max-width: 760px) {
+    .ow-cta03 {
+        padding: 72px var(--ow-page-gutter);
+    
+    }
+    .ow-cta03__actions {
+        flex-direction: column;
+    
+    }
 }
 
-.ow-hero03__error {
-    margin: 10px 0 0 18px;
-    text-align: left;
+/* features/Features01/Features01.css */
+.ow-features01,
+.ow-features01 *,
+.ow-features01 *::before,
+.ow-features01 *::after {
+    box-sizing: border-box;
 }
 
-.ow-hero03__note {
-    margin-top: 14px;
+.ow-features01 {
+    background: var(--ow-paper);
+    padding: var(--ow-section-y) 32px;
+    color: var(--ow-text);
 }
 
-/* What's left in place of the form once someone has joined. */
+.ow-features01__inner {
+    max-width: var(--ow-page-max);
+    margin: 0 auto;
+}
 
-.ow-hero03__done {
-    display: flex;
-    width: 100%;
-    max-width: 480px;
-    align-items: center;
-    gap: 12px;
-    margin-top: 36px;
+/* Six cells in one card, split by hairlines: the 1px gaps show the border colour behind them. */
+
+.ow-features01__grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1px;
+    overflow: hidden;
+    margin: 64px 0 0;
     border: 1px solid var(--ow-border);
     border-radius: var(--ow-radius-card);
+    background: var(--ow-border);
+    padding: 0;
+    list-style: none;
+}
+
+.ow-features01__item {
+    display: flex;
+    flex-direction: column;
     background: var(--ow-surface);
-    padding: 14px 14px 14px 16px;
-    text-align: left;
-    animation: ow-hero03-in var(--ow-duration-slow) var(--ow-ease-emphasized);
+    padding: 32px 32px 36px;
 }
 
-.ow-hero03__done-icon {
+.ow-features01__icon {
     display: inline-flex;
-    width: 32px;
-    height: 32px;
-    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
-    background: var(--ow-success-surface);
-    color: var(--ow-success-text);
+    border: 1px solid var(--ow-primary-border);
+    border-radius: var(--ow-radius-tile);
+    background: var(--ow-primary-subtle);
+    color: var(--ow-primary-text);
 }
 
-.ow-hero03__done-text {
-    display: grid;
-    min-width: 0;
-    flex: 1;
-    gap: 2px;
+.ow-features01__title {
+    margin-top: 24px;
 }
 
-.ow-hero03__done-detail {
-    overflow-wrap: anywhere;
+.ow-features01__text {
+    max-width: 340px;
+    margin-top: 8px;
 }
 
-@keyframes ow-hero03-in {
-    from {
-        opacity: 0;
-        transform: translateY(4px);
+.ow-features01__more {
+    margin-top: 32px;
+}
+
+@media (max-width: 1024px) {
+    .ow-features01__grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    
     }
 }
 
 @media (max-width: 760px) {
-    .ow-hero03 {
-        padding: 72px var(--ow-page-gutter) 80px;
+    .ow-features01 {
+        padding: 72px var(--ow-page-gutter);
+    
     }
-    .ow-hero03__row {
-        flex-direction: column;
+    .ow-features01__grid {
+        grid-template-columns: minmax(0, 1fr);
+        margin-top: 40px;
+    
     }
-    .ow-hero03 .ow-hero03__input {
-        flex: none;
+    .ow-features01__item {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+        column-gap: 16px;
+        padding: 24px 20px;
+    
     }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .ow-hero03__done {
-        animation: none;
+    .ow-features01__icon {
+        grid-row: span 2;
+    
+    }
+    .ow-features01__title {
+        margin-top: 6px;
+    
+    }
+    .ow-features01__text {
+        margin-top: 4px;
+    
     }
 }
 
-/* heroes/Hero04/Hero04.css */
-.ow-hero04,
-.ow-hero04 *,
-.ow-hero04 *::before,
-.ow-hero04 *::after {
+/* features/Features02/Features02.css */
+.ow-features02,
+.ow-features02 *,
+.ow-features02 *::before,
+.ow-features02 *::after {
     box-sizing: border-box;
 }
 
-.ow-hero04 {
-    overflow: hidden;
+.ow-features02 {
     background: var(--ow-paper);
+    padding: var(--ow-section-y) 32px;
     color: var(--ow-text);
 }
 
-.ow-hero04__grid {
-    padding: 128px 32px 136px;
+.ow-features02__inner {
+    max-width: var(--ow-page-max);
+    margin: 0 auto;
 }
 
-/* The headline in the middle column; the sample work sits either side of it on wide screens. */
+.ow-features02__rows {
+    display: grid;
+    gap: 112px;
+    margin-top: 80px;
+}
 
-.ow-hero04__layout {
+.ow-features02__row {
     display: grid;
-    max-width: var(--ow-page-max);
-    grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr);
+    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
     align-items: center;
-    gap: 40px;
-    margin: 0 auto;
+    gap: 72px;
 }
 
-.ow-hero04__text {
+/* Every other row puts the picture first. */
+
+.ow-features02__row:nth-child(even) {
+    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+}
+
+.ow-features02__row:nth-child(even) .ow-features02__copy {
+    order: 2;
+}
+
+.ow-features02__copy {
     display: flex;
+    max-width: 460px;
     flex-direction: column;
+    align-items: flex-start;
+}
+
+.ow-features02__kicker {
+    display: inline-flex;
     align-items: center;
+    gap: 8px;
 }
 
-.ow-hero04__title {
-    margin-top: 24px;
+.ow-features02__title {
+    margin-top: 16px;
 }
 
-.ow-hero04__lead {
-    margin-top: 22px;
+.ow-features02__text {
+    margin-top: 16px;
 }
 
-.ow-hero04__actions {
+.ow-features02__points {
+    display: grid;
+    gap: 10px;
+    margin: 24px 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-features02__point {
     display: flex;
-    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+.ow-features02__points svg {
+    flex-shrink: 0;
+    margin-top: 1px;
+    color: var(--ow-primary-text);
+}
+
+.ow-features02__link {
+    margin-top: 28px;
+}
+
+/* The picture: a window on the dot grid, framed like a screenshot. */
+
+.ow-features02__stage.ow-dot-grid {
+    display: flex;
+    min-height: 400px;
+    align-items: center;
     justify-content: center;
-    gap: var(--ow-space-lg);
-    margin-top: 34px;
+    overflow: hidden;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+    background: color-mix(in srgb, var(--ow-primary) 3%, var(--ow-paper));
+    padding: 48px 40px;
+    pointer-events: none;
+    user-select: none;
 }
 
-@media (max-width: 1180px) {
-    .ow-hero04__layout {
+.ow-features02__stage > .ow-dot-grid__content {
+    width: 100%;
+    max-width: 480px;
+}
+
+@media (max-width: 1024px) {
+    .ow-features02__row,
+    .ow-features02__row:nth-child(even) {
+        gap: 48px;
+    
+    }
+}
+
+@media (max-width: 900px) {
+    .ow-features02__rows {
+        gap: 80px;
+    
+    }
+    .ow-features02__row,
+    .ow-features02__row:nth-child(even) {
         grid-template-columns: minmax(0, 1fr);
+        gap: 36px;
+    
+    }
+    .ow-features02__row:nth-child(even) .ow-features02__copy {
+        order: 0;
+    
+    }
+    .ow-features02__copy {
+        max-width: 560px;
+    
     }
 }
 
 @media (max-width: 760px) {
-    .ow-hero04__grid {
-        padding: 80px var(--ow-page-gutter) 88px;
+    .ow-features02 {
+        padding: 72px var(--ow-page-gutter);
+    
     }
-    .ow-hero04__actions {
-        width: 100%;
-        flex-direction: column;
-        align-items: stretch;
+    .ow-features02__rows {
+        gap: 64px;
+        margin-top: 48px;
+    
+    }
+    .ow-features02__stage.ow-dot-grid {
+        min-height: 0;
+        padding: 28px 14px;
+    
     }
 }
 
-/* heroes/Hero05/Hero05.css */
-.ow-hero05,
-.ow-hero05 *,
-.ow-hero05 *::before,
-.ow-hero05 *::after {
+/* features/Features03/Features03.css */
+.ow-features03,
+.ow-features03 *,
+.ow-features03 *::before,
+.ow-features03 *::after {
     box-sizing: border-box;
 }
 
-.ow-hero05 {
+.ow-features03 {
     background: var(--ow-paper);
-    padding: 128px 32px 88px;
+    padding: var(--ow-section-y) 32px;
     color: var(--ow-text);
 }
 
-.ow-hero05__inner {
+.ow-features03__inner {
     max-width: var(--ow-page-max);
     margin: 0 auto;
 }
 
-/* The headline on the left, the lead and the buttons on the right, sharing a baseline at the bottom. */
+/* The title on the left, the intro on the right, sharing a baseline at the bottom. */
 
-.ow-hero05__top {
+.ow-features03__header {
     display: grid;
     grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
     align-items: end;
-    gap: 64px;
+    gap: 48px;
 }
 
-.ow-hero05__heading {
+.ow-features03__intro {
+    max-width: 440px;
+}
+
+/* Six columns: the agents card takes four columns and two rows, the rest two columns each. */
+
+.ow-features03__grid {
+    display: grid;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: 16px;
+    margin-top: 56px;
+}
+
+.ow-features03__card {
     display: flex;
+    min-width: 0;
     flex-direction: column;
-    align-items: flex-start;
+    overflow: hidden;
+    grid-column: span 2;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+    background: var(--ow-surface);
 }
 
-.ow-hero05__title {
-    margin-top: 24px;
+.ow-features03__card--featured {
+    grid-column: span 4;
+    grid-row: span 2;
 }
 
-.ow-hero05__actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--ow-space-lg);
-    margin-top: 28px;
+.ow-features03__copy {
+    padding: 24px 24px 20px;
 }
 
-/* The first proof: who already uses it. */
+.ow-features03__card--featured .ow-features03__copy {
+    max-width: 540px;
+    padding: 32px 32px 24px;
+}
 
-.ow-hero05__proof {
-    margin-top: 104px;
-    border-top: 1px solid var(--ow-border);
-    padding-top: 36px;
+.ow-features03__text {
+    margin-top: 6px;
 }
 
-.ow-hero05__list {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: 28px 40px;
-    margin: 28px 0 0;
-    padding: 0;
-    list-style: none;
+.ow-features03__card--featured .ow-features03__text {
+    margin-top: 10px;
 }
 
-/* Each logo sits on its own, as tall as it is, so a row of them lines up on its centres. */
-.ow-hero05__logo {
+/* The picture sits in a tray inset from the card, and runs off its bottom edge like a cropped screenshot. */
+
+.ow-features03__visual {
+    position: relative;
     display: flex;
-    align-items: center;
+    min-height: 168px;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+    margin: 0 8px 8px;
+    border-radius: var(--ow-radius-tile);
+    background: var(--ow-canvas);
+    padding: 20px;
+    font-size: 13px;
+    pointer-events: none;
+    user-select: none;
+}
+
+.ow-features03__card--featured .ow-features03__visual {
+    min-height: 380px;
+    padding: 32px 32px 0;
 }
 
 @media (max-width: 1024px) {
-    .ow-hero05 {
-        padding-top: 104px;
-    }
-    .ow-hero05__top {
+    .ow-features03__header {
         grid-template-columns: minmax(0, 1fr);
-        gap: 28px;
+        gap: 16px;
+    
     }
-    .ow-hero05__list {
-        display: grid;
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-        justify-items: start;
+    .ow-features03__grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    
+    }
+    .ow-features03__card,
+    .ow-features03__card--featured {
+        grid-column: span 1;
+        grid-row: auto;
+    
+    }
+    .ow-features03__card--featured,
+    .ow-features03__card--last {
+        grid-column: 1 / -1;
+    
+    }
+    .ow-features03__card--featured .ow-features03__visual {
+        min-height: 0;
+    
     }
 }
 
 @media (max-width: 760px) {
-    .ow-hero05 {
-        padding: 72px var(--ow-page-gutter) 64px;
+    .ow-features03 {
+        padding: 72px var(--ow-page-gutter);
+    
     }
-    .ow-hero05__actions {
-        flex-direction: column;
-        align-items: stretch;
+    .ow-features03__grid {
+        grid-template-columns: minmax(0, 1fr);
+        margin-top: 40px;
+    
     }
-    .ow-hero05__proof {
-        margin-top: 64px;
-        padding-top: 28px;
+    .ow-features03__card--featured .ow-features03__copy {
+        padding: 24px 24px 20px;
+    
     }
-    .ow-hero05__list {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 28px 16px;
+    .ow-features03__card--featured .ow-features03__visual {
+        padding: 20px 16px 0;
+    
     }
 }
 
-/* heroes/Hero06/Hero06.css */
-.ow-hero06,
-.ow-hero06 *,
-.ow-hero06 *::before,
-.ow-hero06 *::after {
+/* features/Features04/Features04.css */
+.ow-features04,
+.ow-features04 *,
+.ow-features04 *::before,
+.ow-features04 *::after {
     box-sizing: border-box;
 }
 
-.ow-hero06 {
+.ow-features04 {
     overflow: hidden;
     background: var(--ow-paper);
-    padding: 112px 32px 120px;
+    padding: var(--ow-section-y) 32px;
     color: var(--ow-text);
 }
 
-.ow-hero06__inner {
-    display: grid;
+.ow-features04__inner {
     max-width: var(--ow-page-max);
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
-    align-items: center;
-    gap: 72px;
     margin: 0 auto;
 }
 
-.ow-hero06__text {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.ow-hero06__title {
-    margin-top: 24px;
-}
-
-.ow-hero06__lead {
-    max-width: 480px;
-    margin-top: 22px;
+.ow-features04__tabs {
+    gap: 0;
+    margin-top: 48px;
 }
 
-.ow-hero06__buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--ow-space-sm);
-    margin-top: 34px;
+.ow-features04__tabs .ow-tabs__list {
+    justify-self: center;
 }
 
-.ow-hero06__meta {
+.ow-features04__panel {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
     align-items: center;
-    gap: 4px 14px;
-    margin-top: 18px;
 }
 
-.ow-hero06__meta > span + span::before {
-    content: "";
-    display: inline-block;
-    width: 3px;
-    height: 3px;
-    margin-right: 14px;
-    border-radius: 50%;
-    background: var(--ow-border-strong);
-    vertical-align: middle;
+.ow-features04__caption {
+    max-width: 640px;
+    margin-top: 28px;
 }
 
-@media (max-width: 960px) {
-    .ow-hero06 {
-        padding-top: 88px;
+@media (max-width: 760px) {
+    .ow-features04 {
+        padding: 72px var(--ow-page-gutter);
+    
     }
-    .ow-hero06__inner {
-        grid-template-columns: minmax(0, 1fr);
-        gap: 48px;
+    .ow-features04__tabs {
+        margin-top: 36px;
+    
     }
-    .ow-hero06__lead {
-        max-width: 560px;
+    .ow-features04__tabs .ow-tab__icon {
+        display: none;
+    
+    }
+    .ow-features04__caption {
+        margin-top: 22px;
+    
     }
 }
 
-@media (max-width: 760px) {
-    .ow-hero06 {
-        padding: 72px var(--ow-page-gutter) 80px;
-    }
-    .ow-hero06__buttons {
+/* features/Features05/Features05.css */
+.ow-features05,
+.ow-features05 *,
+.ow-features05 *::before,
+.ow-features05 *::after {
+    box-sizing: border-box;
+}
+
+.ow-features05 {
+    background: var(--ow-paper);
+    padding: var(--ow-section-y) 32px;
+    color: var(--ow-text);
+}
+
+.ow-features05__inner {
+    display: grid;
+    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+    align-items: center;
+    gap: 72px;
+    max-width: var(--ow-page-max);
+    margin: 0 auto;
+}
+
+.ow-features05__list {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px 24px;
+    margin: 36px 0 0;
+    border-top: 1px solid var(--ow-border);
+    padding: 28px 0 0;
+    list-style: none;
+}
+
+.ow-features05__item {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+.ow-features05__tick {
+    display: inline-flex;
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1px;
+    border-radius: 50%;
+    background: var(--ow-primary-subtle);
+    color: var(--ow-primary-text);
+    box-shadow: inset 0 0 0 1px var(--ow-primary-border);
+}
+
+.ow-features05__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 24px;
+    margin-top: 40px;
+}
+
+@media (max-width: 1024px) {
+    .ow-features05__inner {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 56px;
+    
+    }
+    .ow-features05__copy {
+        max-width: 620px;
+    
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-features05 {
+        padding: 72px var(--ow-page-gutter);
+    
+    }
+    .ow-features05__list {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 12px;
+        margin-top: 28px;
+        padding-top: 24px;
+    
+    }
+    .ow-features05__actions {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 18px;
+        margin-top: 32px;
+        text-align: center;
+    
+    }
+    .ow-features05__inner {
+        gap: 44px;
+    
+    }
+}
+
+/* footers/Footer01/Footer01.css */
+.ow-footer01,
+.ow-footer01 *,
+.ow-footer01 *::before,
+.ow-footer01 *::after {
+    box-sizing: border-box;
+}
+
+.ow-footer01 {
+    border-top: 1px solid var(--ow-border);
+    background: var(--ow-paper);
+    padding: 72px 32px 32px;
+    color: var(--ow-text);
+}
+
+.ow-footer01__inner {
+    max-width: var(--ow-page-max);
+    margin: 0 auto;
+}
+
+.ow-footer01__top {
+    display: grid;
+    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
+    gap: 40px 32px;
+    padding-bottom: 56px;
+}
+
+.ow-footer01__brand {
+    display: flex;
+    max-width: 300px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+}
+
+/* The logo is a link home that stays the logo: ink, with no underline on hover. */
+
+.ow-footer01__logo.ow-link,
+.ow-footer01__logo.ow-link:hover {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    border-radius: var(--ow-radius-md);
+    color: var(--ow-text);
+    text-decoration: none;
+}
+
+.ow-footer01__logo.ow-link:focus-visible {
+    outline-offset: 4px;
+}
+
+.ow-footer01__status {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.ow-footer01__status-dot {
+    width: 7px;
+    height: 7px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    background: var(--ow-success-solid);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ow-success-solid) 20%, transparent);
+}
+
+.ow-footer01__heading {
+    margin-bottom: 16px;
+}
+
+.ow-footer01__links {
+    display: grid;
+    gap: 11px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* Footer links sit back: muted and in the regular weight, ink on hover. */
+
+.ow-footer01__links .ow-link {
+    color: var(--ow-text-muted);
+    font-weight: var(--ow-weight-regular);
+}
+
+.ow-footer01__links .ow-link:hover {
+    color: var(--ow-text);
+}
+
+/* A small brass pill rather than a Badge, which is too tall to sit in a line of links. */
+
+.ow-footer01__new {
+    margin-left: 8px;
+    border-radius: var(--ow-radius-pill);
+    background: var(--ow-brass-soft);
+    padding: 2px 7px;
+    color: var(--ow-brass-deep);
+    vertical-align: 1px;
+}
+
+.ow-footer01__bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px 24px;
+    padding-top: 24px;
+}
+
+.ow-footer01__legal {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 20px;
+}
+
+.ow-footer01__theme {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+@media (max-width: 1024px) {
+    .ow-footer01__top {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    
+    }
+    .ow-footer01__brand {
+        max-width: 420px;
+        grid-column: 1 / -1;
+    
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-footer01 {
+        padding: 56px var(--ow-page-gutter) 28px;
+    
+    }
+    .ow-footer01__top {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 36px 24px;
+        padding-bottom: 40px;
+    
+    }
+    .ow-footer01__bottom {
+        flex-direction: column-reverse;
+        align-items: flex-start;
+    
+    }
+}
+
+/* footers/Footer02/Footer02.css */
+.ow-footer02,
+.ow-footer02 *,
+.ow-footer02 *::before,
+.ow-footer02 *::after {
+    box-sizing: border-box;
+}
+
+.ow-footer02 {
+    border-top: 1px solid var(--ow-border);
+    background: var(--ow-paper);
+    padding: 48px 32px;
+    color: var(--ow-text);
+}
+
+.ow-footer02__inner {
+    display: flex;
+    max-width: var(--ow-page-max);
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.ow-footer02__logo.ow-link {
+    display: inline-flex;
+    border-radius: 8px;
+}
+
+.ow-footer02__logo.ow-link:focus-visible {
+    outline-offset: 3px;
+}
+
+.ow-footer02__links {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px 28px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-footer02__links .ow-link {
+    color: var(--ow-text-soft);
+}
+
+@media (max-width: 760px) {
+    .ow-footer02 {
+        padding: 40px var(--ow-page-gutter);
+    
+    }
+    .ow-footer02__links {
+        max-width: 320px;
+        gap: 10px 22px;
+    
+    }
+}
+
+/* footers/Footer03/Footer03.css */
+.ow-footer03,
+.ow-footer03 *,
+.ow-footer03 *::before,
+.ow-footer03 *::after {
+    box-sizing: border-box;
+}
+
+.ow-footer03 {
+    border-top: 1px solid var(--ow-border);
+    background: var(--ow-paper);
+    padding: 56px 32px 32px;
+    color: var(--ow-text);
+}
+
+.ow-footer03__inner {
+    max-width: var(--ow-page-max);
+    margin: 0 auto;
+}
+
+/* The sign-up, on a card of its own above the links. */
+
+.ow-footer03__signup {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
+    align-items: center;
+    gap: 24px 64px;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+    background: var(--ow-surface);
+    padding: 36px 40px;
+}
+
+.ow-footer03__intro {
+    max-width: 480px;
+    margin-top: 8px;
+}
+
+.ow-footer03__row {
+    display: flex;
+    gap: 8px;
+}
+
+.ow-footer03__email.ow-input-group {
+    min-width: 0;
+    flex: 1;
+    border-radius: var(--ow-radius-pill);
+    padding-left: 14px;
+}
+
+.ow-footer03__note {
+    margin: 10px 0 0 16px;
+}
+
+.ow-footer03__done {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    border: 1px solid var(--ow-success-border);
+    border-radius: var(--ow-radius-container);
+    background: var(--ow-success-surface);
+    padding: 14px 16px;
+}
+
+.ow-footer03__done > svg {
+    flex-shrink: 0;
+    margin-top: 2px;
+    color: var(--ow-success-text);
+}
+
+.ow-footer03__done-text {
+    display: grid;
+    min-width: 0;
+    flex: 1;
+    gap: 2px;
+}
+
+.ow-footer03__done-detail {
+    overflow-wrap: anywhere;
+}
+
+.ow-footer03__done .ow-button {
+    flex-shrink: 0;
+    margin: -4px -6px -4px 0;
+}
+
+.ow-footer03__links {
+    display: grid;
+    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
+    gap: 36px 32px;
+    padding: 56px 0;
+}
+
+.ow-footer03__brand {
+    display: grid;
+    align-content: start;
+    justify-items: start;
+    gap: 14px;
+}
+
+.ow-footer03__line {
+    max-width: 240px;
+}
+
+/* The logo is a link home that stays the logo: ink, with no underline on hover. */
+
+.ow-footer03__logo.ow-link,
+.ow-footer03__logo.ow-link:hover {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    border-radius: var(--ow-radius-md);
+    color: var(--ow-text);
+    text-decoration: none;
+}
+
+.ow-footer03__logo.ow-link:focus-visible {
+    outline-offset: 4px;
+}
+
+.ow-footer03__heading {
+    margin-bottom: 16px;
+}
+
+.ow-footer03__list {
+    display: grid;
+    gap: 11px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* Footer links sit back: muted and in the regular weight, ink on hover. */
+
+.ow-footer03__list .ow-link {
+    color: var(--ow-text-muted);
+    font-weight: var(--ow-weight-regular);
+}
+
+.ow-footer03__list .ow-link:hover {
+    color: var(--ow-text);
+}
+
+.ow-footer03__bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px 24px;
+    padding-top: 24px;
+}
+
+.ow-footer03__legal {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 20px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+@media (max-width: 1024px) {
+    .ow-footer03__signup {
+        grid-template-columns: minmax(0, 1fr);
+        padding: 32px;
+    
+    }
+    .ow-footer03__links {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    
+    }
+    .ow-footer03__brand {
+        grid-column: 1 / -1;
+    
+    }
+    .ow-footer03__line {
+        max-width: 420px;
+    
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-footer03 {
+        padding: 40px var(--ow-page-gutter) 28px;
+    
+    }
+    .ow-footer03__signup {
+        padding: 24px 20px;
+    
+    }
+    .ow-footer03__row {
+        flex-direction: column;
+    
+    }
+    .ow-footer03__email.ow-input-group {
+        flex: none;
+    
+    }
+    .ow-footer03__note {
+        margin-left: 4px;
+    
+    }
+    .ow-footer03__links {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        padding: 44px 0 40px;
+    
+    }
+}
+
+/* footers/Footer04/Footer04.css */
+.ow-footer04,
+.ow-footer04 *,
+.ow-footer04 *::before,
+.ow-footer04 *::after {
+    box-sizing: border-box;
+}
+
+.ow-footer04 {
+    overflow: hidden;
+    border-top: 1px solid var(--ow-border);
+    background: var(--ow-paper);
+    padding: 72px 32px 0;
+    color: var(--ow-text);
+}
+
+.ow-footer04__inner {
+    max-width: var(--ow-page-max);
+    margin: 0 auto;
+}
+
+.ow-footer04__top {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+    gap: 48px 64px;
+}
+
+.ow-footer04__pitch {
+    max-width: 440px;
+}
+
+.ow-footer04__pitch .ow-button {
+    margin-top: 28px;
+}
+
+.ow-footer04__columns {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(140px, auto));
+    gap: 32px 56px;
+}
+
+.ow-footer04__heading {
+    margin-bottom: 16px;
+}
+
+.ow-footer04__list {
+    display: grid;
+    gap: 11px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* Footer links sit back: muted and in the regular weight, ink on hover. */
+
+.ow-footer04__list .ow-link {
+    color: var(--ow-text-muted);
+    font-weight: var(--ow-weight-regular);
+}
+
+.ow-footer04__list .ow-link:hover {
+    color: var(--ow-text);
+}
+
+.ow-footer04__legal {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px 24px;
+    margin-top: 72px;
+}
+
+.ow-footer04__legal-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 20px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* The name across the bottom: sized to the width of the page (cqw), so it fits at every width, and cut off just
+   above the baseline so it sits on the edge of the window. */
+
+.ow-footer04__name {
+    margin-top: 32px;
+    container-type: inline-size;
+    user-select: none;
+}
+
+.ow-footer04__crop {
+    height: 25.6cqw;
+    margin: 0 -3cqw;
+    overflow: hidden;
+    padding: 0 3cqw;
+}
+
+.ow-footer04__crop span {
+    display: block;
+    margin-left: -2.8cqw;
+    background: linear-gradient(180deg, var(--ow-primary-text) 15%, color-mix(in srgb, var(--ow-primary-text) 20%, transparent) 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    font-size: 40.3cqw;
+    font-weight: 600;
+    line-height: 0.8;
+    letter-spacing: -0.065em;
+    white-space: nowrap;
+}
+
+@media (max-width: 1024px) {
+    .ow-footer04__top {
+        grid-template-columns: minmax(0, 1fr);
+    
+    }
+    .ow-footer04__columns {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-footer04 {
+        padding: 56px var(--ow-page-gutter) 0;
+    
+    }
+    .ow-footer04__columns {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 32px 24px;
+    
+    }
+    .ow-footer04__legal {
+        margin-top: 48px;
+    
+    }
+}
+
+/* headers/Header01/Header01.css */
+.ow-header01,
+.ow-header01 *,
+.ow-header01 *::before,
+.ow-header01 *::after {
+    box-sizing: border-box;
+}
+
+/* The pill stays 14px from the top as the page scrolls beneath it. Only the pill itself takes the pointer. */
+
+.ow-header01 {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    padding: 14px 24px 0;
+    pointer-events: none;
+}
+
+.ow-header01 .ow-site-header {
+    display: grid;
+    max-width: 1040px;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    margin: 0 auto;
+    pointer-events: auto;
+}
+
+.ow-header01 .ow-site-header__actions {
+    justify-self: end;
+}
+
+.ow-header01 .ow-site-header__nav a[aria-current="page"] {
+    color: var(--ow-text);
+}
+
+/* The wordmark takes SiteHeader's brand lettering, not the link's weight or its hover colour. */
+
+.ow-header01__brand,
+.ow-header01__brand:hover {
+    color: inherit;
+}
+
+.ow-header01__brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 9px;
+    border-radius: var(--ow-radius-md);
+    font-weight: inherit;
+}
+
+/* Sign in looks like the nav links beside it: soft text that darkens on hover, never underlined. */
+
+.ow-header01__sign-in {
+    margin-right: 6px;
+    color: var(--ow-text-soft);
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.ow-header01__sign-in:hover {
+    color: var(--ow-text);
+}
+
+.ow-header01__phone-menu {
+    display: none;
+}
+
+.ow-header01__menu {
+    display: grid;
+    gap: 2px;
+    margin: -6px;
+}
+
+/* Menu rows: a soft ground on hover instead of the link's underline. */
+
+.ow-header01__menu-link {
+    border-radius: var(--ow-radius-lg);
+    padding: 9px 10px;
+    text-decoration: none;
+    transition: background-color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-header01__menu-link:hover {
+    background: var(--ow-surface-muted);
+    color: var(--ow-text);
+}
+
+.ow-header01__menu-link[aria-current="page"] {
+    background: var(--ow-surface-muted);
+}
+
+.ow-header01__menu-link--sign-in {
+    margin-top: 6px;
+    border-top: 1px solid var(--ow-border);
+    border-radius: 0 0 var(--ow-radius-lg) var(--ow-radius-lg);
+    padding-top: 13px;
+}
+
+@media (max-width: 1024px) {
+    .ow-header01 .ow-site-header {
+        grid-template-columns: auto minmax(0, 1fr) auto;
+    
+    }
+    .ow-header01 .ow-site-header__nav {
+        justify-self: center;
+    
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-header01 {
+        padding: 10px var(--ow-page-gutter) 0;
+    
+    }
+    .ow-header01 .ow-site-header {
+        grid-template-columns: minmax(0, 1fr) auto;
+        padding-left: 16px;
+    
+    }
+    .ow-header01__sign-in {
+        display: none;
+    
+    }
+    .ow-header01__phone-menu {
+        display: inline-flex;
+    
+    }
+}
+
+/* headers/Header02/Header02.css */
+.ow-header02,
+.ow-header02 *,
+.ow-header02 *::before,
+.ow-header02 *::after {
+    box-sizing: border-box;
+}
+
+.ow-header02 {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    border-bottom: 1px solid var(--ow-border);
+    background: var(--ow-surface);
+}
+
+.ow-header02__inner {
+    display: flex;
+    max-width: var(--ow-page-max);
+    height: 64px;
+    align-items: center;
+    gap: 28px;
+    margin: 0 auto;
+    padding: 0 32px;
+}
+
+/* The wordmark keeps the logo's own lettering, as SiteHeader's brand does, and no link colour on hover. */
+
+.ow-header02__brand,
+.ow-header02__brand:hover {
+    color: var(--ow-text);
+}
+
+.ow-header02__brand {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 9px;
+    border-radius: var(--ow-radius-md);
+    font-size: 16px;
+    font-weight: var(--ow-weight-emphasis);
+    letter-spacing: -0.02em;
+    text-decoration: none;
+}
+
+.ow-header02__nav {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    gap: 2px;
+}
+
+/* Links and menu triggers are ghost pill buttons with one look: quieter than an action, in soft text at the nav's
+   weight rather than a button's, with a plain ground on hover and while open. */
+
+.ow-header02__item {
+    gap: 4px;
+    padding: 0 12px;
+    color: var(--ow-text-soft);
+    font-weight: var(--ow-weight-control);
+}
+
+.ow-header02__item:hover:not(:disabled),
+.ow-header02__item[aria-expanded="true"] {
+    border-color: transparent;
+    background: var(--ow-hover);
+    color: var(--ow-text);
+}
+
+.ow-header02__item svg {
+    color: var(--ow-icon);
+    transition: transform var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-header02__item[aria-expanded="true"] svg {
+    transform: rotate(180deg);
+}
+
+.ow-header02__actions {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 6px;
+}
+
+.ow-header02__toggle {
+    display: none;
+}
+
+/* The product menu: four areas of the product and the latest news. */
+
+.ow-header02 .ow-header02__popover {
+    padding: 8px;
+}
+
+.ow-header02__product {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 216px;
+    gap: 8px;
+}
+
+.ow-header02__features {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* The product's areas are tiles: a soft ground on hover instead of the link's underline. */
+
+.ow-header02__feature,
+.ow-header02__feature:hover {
+    color: var(--ow-text);
+}
+
+.ow-header02__feature {
+    display: flex;
+    height: 100%;
+    align-items: flex-start;
+    gap: 12px;
+    border-radius: var(--ow-radius-lg);
+    padding: 12px;
+    text-decoration: none;
+    transition: background-color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-header02__feature:hover {
+    background: var(--ow-surface-muted);
+}
+
+.ow-header02__feature-icon {
+    display: inline-flex;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-tile);
+    background: var(--ow-surface);
+    color: var(--ow-primary-text);
+    box-shadow: var(--ow-shadow-control);
+}
+
+.ow-header02__feature-text {
+    display: grid;
+    gap: 4px;
+}
+
+.ow-header02__news,
+.ow-header02__news:hover {
+    color: var(--ow-text);
+}
+
+.ow-header02__news {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-lg);
+    background: var(--ow-surface-muted);
+    padding: 14px;
+    text-decoration: none;
+    transition: border-color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-header02__news:hover {
+    border-color: var(--ow-border-strong);
+}
+
+.ow-header02__news-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: auto;
+}
+
+/* Phones: the panel under the bar. */
+
+.ow-header02__panel {
+    display: grid;
+    max-height: calc(100dvh - 57px);
+    overflow-y: auto;
+    border-top: 1px solid var(--ow-border);
+    padding: 6px var(--ow-page-gutter) 20px;
+    animation: ow-header02-panel-in var(--ow-duration-base) var(--ow-ease-emphasized);
+}
+
+.ow-header02__panel[hidden] {
+    display: none;
+}
+
+.ow-header02__panel-label {
+    margin: 16px 0 4px;
+}
+
+.ow-header02__panel-list {
+    display: grid;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-header02__panel-list--columns {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: 16px;
+}
+
+.ow-header02__panel-list--ruled {
+    margin: 14px 0 18px;
+    border-top: 1px solid var(--ow-border);
+    padding-top: 6px;
+}
+
+.ow-header02__panel-link {
+    display: flex;
+    min-height: 42px;
+    align-items: center;
+    gap: 12px;
+    border-radius: var(--ow-radius-md);
+}
+
+.ow-header02__panel-link svg {
+    color: var(--ow-primary-text);
+}
+
+@keyframes ow-header02-panel-in {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+}
+
+@media (max-width: 1024px) {
+    .ow-header02__inner {
+        gap: 16px;
+        padding: 0 24px;
+    
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-header02__inner {
+        height: 56px;
+        padding: 0 12px 0 var(--ow-page-gutter);
+    
+    }
+    .ow-header02__nav,
+    .ow-header02__sign-in {
+        display: none;
+    
+    }
+    .ow-header02__actions {
+        margin-left: auto;
+    
+    }
+    .ow-header02__toggle {
+        display: inline-flex;
+    
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-header02__panel {
+        animation: none;
+    
+    }
+    .ow-header02__item svg {
+        transition: none;
+    
+    }
+}
+
+/* headers/Header03/Header03.css */
+.ow-header03,
+.ow-header03 *,
+.ow-header03 *::before,
+.ow-header03 *::after {
+    box-sizing: border-box;
+}
+
+.ow-header03 {
+    border-bottom: 1px solid var(--ow-border);
+}
+
+/* Three columns, the outer two equal, so the logo sits in the true centre whatever is either side. */
+
+.ow-header03__inner {
+    display: grid;
+    max-width: var(--ow-page-max);
+    height: 76px;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items: center;
+    gap: 24px;
+    margin: 0 auto;
+    padding: 0 32px;
+}
+
+.ow-header03__nav {
+    display: flex;
+    align-items: center;
+    gap: 26px;
+}
+
+/* The wordmark keeps the logo's own lettering, larger here as the bar's centrepiece, and no link colour on hover. */
+
+.ow-header03__brand,
+.ow-header03__brand:hover {
+    color: var(--ow-text);
+}
+
+.ow-header03__brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    border-radius: var(--ow-radius-md);
+    font-size: 19px;
+    font-weight: var(--ow-weight-emphasis);
+    letter-spacing: -0.025em;
+    text-decoration: none;
+}
+
+.ow-header03__end {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 26px;
+}
+
+/* Nav links as in SiteHeader: soft text that darkens on hover and on the current page, never underlined. */
+
+.ow-header03__link {
+    color: var(--ow-text-soft);
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.ow-header03__link:hover,
+.ow-header03__link[aria-current="page"] {
+    color: var(--ow-text);
+}
+
+/* A hairline between the links and the account actions. */
+
+.ow-header03__actions {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    border-left: 1px solid var(--ow-border);
+    padding-left: 26px;
+}
+
+.ow-header03__phone-only {
+    display: none;
+}
+
+@media (max-width: 1024px) {
+    .ow-header03__inner {
+        padding: 0 24px;
+    
+    }
+    .ow-header03__nav,
+    .ow-header03__end {
+        gap: 20px;
+    
+    }
+    .ow-header03__actions {
+        gap: 16px;
+        border-left: 0;
+        padding-left: 0;
+    
+    }
+}
+
+/* Tablets and phones: sign in, the logo and the button on one line; the links on a second line, which scrolls
+   sideways when it runs out of room. */
+
+@media (max-width: 900px) {
+    .ow-header03 {
+        padding-bottom: 6px;
+    
+    }
+    .ow-header03__inner {
+        height: 60px;
+        gap: 12px;
+    
+    }
+    .ow-header03__nav,
+    .ow-header03__actions .ow-header03__link {
+        display: none;
+    
+    }
+    .ow-header03__brand {
+        font-size: 17px;
+    
+    }
+    .ow-header03__phone-only {
+        display: block;
+    
+    }
+    .ow-header03__inner > .ow-header03__phone-only {
+        justify-self: start;
+    
+    }
+    .ow-header03__phone-nav {
+        scrollbar-width: none;
+    
+    }
+    .ow-header03__phone-links {
+        display: flex;
+        width: max-content;
+        gap: 22px;
+        margin: 0 auto;
+        padding: 8px 24px 10px;
+        list-style: none;
+    
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-header03__inner {
+        padding: 0 var(--ow-page-gutter);
+    
+    }
+    .ow-header03__phone-links {
+        padding-right: var(--ow-page-gutter);
+        padding-left: var(--ow-page-gutter);
+    
+    }
+}
+
+/* headers/Header04/Header04.css */
+.ow-header04,
+.ow-header04 *,
+.ow-header04 *::before,
+.ow-header04 *::after {
+    box-sizing: border-box;
+}
+
+/* The slim line: midnight in both themes. Closing it folds it away, then hides it from keyboards and readers. */
+
+.ow-header04__notice {
+    display: grid;
+    grid-template-rows: 1fr;
+    background: var(--ow-brand-700);
+    color: var(--ow-on-primary);
+    transition:
+        grid-template-rows var(--ow-duration-slow) var(--ow-ease-standard),
+        visibility 0s;
+}
+
+.ow-header04__notice[data-closed] {
+    grid-template-rows: 0fr;
+    visibility: hidden;
+    transition:
+        grid-template-rows var(--ow-duration-slow) var(--ow-ease-standard),
+        visibility 0s linear var(--ow-duration-slow);
+}
+
+.ow-header04__clip {
+    min-height: 0;
+    overflow: hidden;
+}
+
+.ow-header04__notice-inner {
+    display: grid;
+    max-width: var(--ow-page-max);
+    min-height: 40px;
+    grid-template-columns: 24px minmax(0, 1fr) 24px;
+    align-items: center;
+    gap: 12px;
+    margin: 0 auto;
+    padding: 6px 24px;
+}
+
+.ow-header04__message {
+    grid-column: 2;
+    text-align: center;
+}
+
+.ow-header04__dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin-right: 10px;
+    border-radius: 50%;
+    background: var(--ow-brass);
+    vertical-align: 2px;
+}
+
+.ow-header04__message strong {
+    font-weight: var(--ow-weight-emphasis);
+}
+
+.ow-header04__detail {
+    color: color-mix(in srgb, var(--ow-on-primary) 78%, transparent);
+}
+
+/* A link on the midnight line: white, with a faint underline that firms up on hover. */
+
+.ow-header04__link {
+    margin-left: 10px;
+    color: var(--ow-on-primary);
+    font-weight: var(--ow-weight-control);
+    text-decoration-color: color-mix(in srgb, var(--ow-on-primary) 40%, transparent);
+    white-space: nowrap;
+}
+
+.ow-header04__link svg {
+    margin-left: 4px;
+    vertical-align: -2px;
+}
+
+.ow-header04__link:hover {
+    color: var(--ow-on-primary);
+    text-decoration-color: var(--ow-on-primary);
+}
+
+.ow-header04__link:focus-visible,
+.ow-header04__notice .ow-close-button:focus-visible {
+    outline: 2px solid var(--ow-on-primary);
+    outline-offset: 2px;
+}
+
+.ow-header04__notice .ow-close-button {
+    grid-column: 3;
+    color: color-mix(in srgb, var(--ow-on-primary) 72%, transparent);
+}
+
+.ow-header04__notice .ow-close-button:hover {
+    background: color-mix(in srgb, var(--ow-on-primary) 14%, transparent);
+    color: var(--ow-on-primary);
+}
+
+/* The header under it. */
+
+.ow-header04__header {
+    border-bottom: 1px solid var(--ow-border);
+}
+
+.ow-header04__inner {
+    display: grid;
+    max-width: var(--ow-page-max);
+    height: 64px;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items: center;
+    gap: 24px;
+    margin: 0 auto;
+    padding: 0 32px;
+}
+
+/* The wordmark keeps the logo's own lettering, as SiteHeader's brand does, and no link colour on hover. */
+
+.ow-header04__brand,
+.ow-header04__brand:hover {
+    color: var(--ow-text);
+}
+
+.ow-header04__brand {
+    display: inline-flex;
+    align-items: center;
+    justify-self: start;
+    gap: 9px;
+    border-radius: var(--ow-radius-md);
+    font-size: 16px;
+    font-weight: var(--ow-weight-emphasis);
+    letter-spacing: -0.02em;
+    text-decoration: none;
+}
+
+.ow-header04__nav {
+    display: flex;
+    align-items: center;
+    gap: 26px;
+}
+
+/* Nav links as in SiteHeader: soft text that darkens on hover, never underlined. */
+
+.ow-header04__link-plain {
+    color: var(--ow-text-soft);
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.ow-header04__link-plain:hover {
+    color: var(--ow-text);
+}
+
+.ow-header04__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 18px;
+}
+
+.ow-header04__phone-menu,
+.ow-header04__link-narrow {
+    display: none;
+}
+
+@media (max-width: 1024px) {
+    .ow-header04__inner {
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        gap: 16px;
+        padding: 0 24px;
+    
+    }
+    .ow-header04__nav {
+        justify-self: center;
+        gap: 20px;
+    
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-header04__notice-inner {
+        grid-template-columns: minmax(0, 1fr) 24px;
+        padding: 8px 10px 8px var(--ow-page-gutter);
+    
+    }
+    .ow-header04__message {
+        grid-column: 1;
+        text-align: left;
+    
+    }
+    .ow-header04__notice .ow-close-button {
+        grid-column: 2;
+    
+    }
+    .ow-header04__detail,
+    .ow-header04__link-wide {
+        display: none;
+    
+    }
+    .ow-header04__link-narrow {
+        display: inline;
+    
+    }
+    .ow-header04__inner {
+        height: 60px;
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: 8px;
+        padding: 0 12px 0 var(--ow-page-gutter);
+    
+    }
+    .ow-header04__nav,
+    .ow-header04__actions .ow-header04__link-plain {
+        display: none;
+    
+    }
+    .ow-header04__actions {
+        gap: 4px;
+    
+    }
+    .ow-header04__phone-menu {
+        display: inline-flex;
+    
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-header04__notice,
+    .ow-header04__notice[data-closed] {
+        transition: none;
+    
+    }
+}
+
+/* headers/Header05/Header05.css */
+.ow-header05,
+.ow-header05 *,
+.ow-header05 *::before,
+.ow-header05 *::after {
+    box-sizing: border-box;
+}
+
+.ow-header05 {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    border-bottom: 1px solid var(--ow-border);
+    background: var(--ow-paper);
+}
+
+.ow-header05__inner {
+    display: flex;
+    max-width: var(--ow-page-max);
+    height: 64px;
+    align-items: center;
+    gap: 36px;
+    margin: 0 auto;
+    padding: 0 32px;
+}
+
+/* The wordmark keeps the logo's own lettering, as SiteHeader's brand does, and no link colour on hover. */
+
+.ow-header05__brand,
+.ow-header05__brand:hover {
+    color: var(--ow-text);
+}
+
+.ow-header05__brand {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 9px;
+    border-radius: var(--ow-radius-md);
+    font-size: 16px;
+    font-weight: var(--ow-weight-emphasis);
+    letter-spacing: -0.02em;
+    text-decoration: none;
+}
+
+.ow-header05__nav {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 26px;
+}
+
+/* Nav links as in SiteHeader: soft text that darkens on hover and on the current page, never underlined. */
+
+.ow-header05__link {
+    color: var(--ow-text-soft);
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.ow-header05__link:hover,
+.ow-header05__link[aria-current="page"] {
+    color: var(--ow-text);
+}
+
+.ow-header05__actions {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    margin-left: auto;
+}
+
+.ow-header05__open {
+    display: none;
+}
+
+/* The drawer: the main links large, the rest smaller, the two account actions pinned at the bottom. */
+
+.ow-header05__drawer .ow-drawer__body {
+    padding-top: 6px;
+}
+
+.ow-header05__drawer .ow-drawer__footer > * {
+    flex: 1;
+}
+
+.ow-header05__drawer-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-header05__drawer-list li + li {
+    border-top: 1px solid var(--ow-border);
+}
+
+/* The main links are large for a thumb (17px, above the 14px of the bar); the chevron moves on hover instead of an underline. */
+
+.ow-header05__drawer-link,
+.ow-header05__drawer-link:hover {
+    color: var(--ow-text);
+}
+
+.ow-header05__drawer-link {
+    display: flex;
+    min-height: 54px;
+    align-items: center;
+    gap: 10px;
+    border-radius: var(--ow-radius-md);
+    font-size: 17px;
+    text-decoration: none;
+}
+
+.ow-header05__drawer-link svg {
+    margin-left: auto;
+    color: var(--ow-icon);
+    transition: transform var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-header05__drawer-link:hover svg {
+    transform: translateX(2px);
+}
+
+/* A brass dot beside the page you're on. */
+
+.ow-header05__current {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--ow-brass);
+}
+
+.ow-header05__more {
+    margin-top: 20px;
+    border-top: 1px solid var(--ow-border);
+    padding-top: 18px;
+}
+
+.ow-header05__more-label {
+    margin-bottom: 6px;
+}
+
+.ow-header05__more-list {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0 16px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-header05__more-link {
+    display: flex;
+    min-height: 40px;
+    align-items: center;
+    border-radius: var(--ow-radius-md);
+    color: var(--ow-text-soft);
+    text-decoration: none;
+}
+
+.ow-header05__more-link:hover {
+    color: var(--ow-text);
+}
+
+/* Tablets and phones: the links fold into the drawer. */
+
+@media (max-width: 1024px) {
+    .ow-header05__inner {
+        padding: 0 16px 0 24px;
+    
+    }
+    .ow-header05__nav,
+    .ow-header05__actions .ow-header05__link {
+        display: none;
+    
+    }
+    .ow-header05__actions {
+        gap: 6px;
+    
+    }
+    .ow-header05__open {
+        display: inline-flex;
+    
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-header05__inner {
+        height: 58px;
+        padding: 0 12px 0 var(--ow-page-gutter);
+    
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-header05__drawer-link svg {
+        transition: none;
+    
+    }
+}
+
+/* heroes/Hero01/Hero01.css */
+.ow-hero01,
+.ow-hero01 *,
+.ow-hero01 *::before,
+.ow-hero01 *::after {
+    box-sizing: border-box;
+}
+
+.ow-hero01 {
+    overflow: hidden;
+    background: var(--ow-paper);
+    padding: 112px var(--ow-page-gutter) 0;
+}
+
+.ow-hero01__inner {
+    display: flex;
+    max-width: 880px;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.ow-hero01__title {
+    margin-top: 24px;
+}
+
+.ow-hero01__lead {
+    margin-top: 22px;
+}
+
+.ow-hero01__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--ow-space-lg);
+    margin-top: 34px;
+}
+
+.ow-hero01__note {
+    margin-top: 16px;
+}
+
+/* The product, cropped at the bottom so it runs on into the page. */
+
+.ow-hero01__visual {
+    max-width: 1080px;
+    margin: 72px auto 0;
+    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
+    mask-image: linear-gradient(to bottom, #000 70%, transparent);
+}
+
+@media (max-width: 760px) {
+    .ow-hero01 {
+        padding-top: 72px;
+    }
+    .ow-hero01__actions {
+        width: 100%;
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .ow-hero01__visual {
+        margin-top: 48px;
+    }
+}
+
+/* heroes/Hero02/Hero02.css */
+.ow-hero02,
+.ow-hero02 *,
+.ow-hero02 *::before,
+.ow-hero02 *::after {
+    box-sizing: border-box;
+}
+
+.ow-hero02 {
+    overflow: hidden;
+    background: var(--ow-paper);
+    padding: 112px 32px 120px;
+    color: var(--ow-text);
+}
+
+.ow-hero02__inner {
+    display: grid;
+    max-width: var(--ow-page-max);
+    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
+    align-items: center;
+    gap: 72px;
+    margin: 0 auto;
+}
+
+.ow-hero02__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.ow-hero02__title {
+    margin-top: 24px;
+}
+
+.ow-hero02__lead {
+    max-width: 500px;
+    margin-top: 22px;
+}
+
+.ow-hero02__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ow-space-lg);
+    margin-top: 34px;
+}
+
+.ow-hero02__points {
+    display: grid;
+    gap: 8px;
+    margin: 32px 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-hero02__point {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+}
+
+.ow-hero02__points svg {
+    color: var(--ow-primary-text);
+}
+
+@media (max-width: 960px) {
+    .ow-hero02 {
+        padding-top: 88px;
+    }
+    .ow-hero02__inner {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 56px;
+    }
+    .ow-hero02__lead {
+        max-width: 580px;
+    }
+    .ow-hero02__points {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px 22px;
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-hero02 {
+        padding: 72px var(--ow-page-gutter) 80px;
+    }
+    .ow-hero02__inner {
+        gap: 48px;
+    }
+    .ow-hero02__actions {
+        width: 100%;
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .ow-hero02__points {
+        display: grid;
+    }
+}
+
+/* heroes/Hero03/Hero03.css */
+.ow-hero03,
+.ow-hero03 *,
+.ow-hero03 *::before,
+.ow-hero03 *::after {
+    box-sizing: border-box;
+}
+
+.ow-hero03 {
+    overflow: hidden;
+    background: var(--ow-paper);
+    padding: 120px var(--ow-page-gutter) 112px;
+    color: var(--ow-text);
+}
+
+.ow-hero03__inner {
+    display: flex;
+    max-width: 760px;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.ow-hero03__title {
+    margin-top: 24px;
+}
+
+.ow-hero03__lead {
+    margin-top: 22px;
+}
+
+/* The form: a pill-shaped field and its button on one line. */
+
+.ow-hero03__form {
+    width: 100%;
+    max-width: 480px;
+    margin-top: 36px;
+}
+
+.ow-hero03__row {
+    display: flex;
+    gap: var(--ow-space-sm);
+}
+
+.ow-hero03 .ow-hero03__input {
+    height: 46px;
+    flex: 1;
+    border-radius: var(--ow-radius-pill);
+    padding-left: 18px;
+    box-shadow: var(--ow-shadow-control);
+    font-size: 15px;
+}
+
+.ow-hero03__error {
+    margin: 10px 0 0 18px;
+    text-align: left;
+}
+
+.ow-hero03__note {
+    margin-top: 14px;
+}
+
+/* What's left in place of the form once someone has joined. */
+
+.ow-hero03__done {
+    display: flex;
+    width: 100%;
+    max-width: 480px;
+    align-items: center;
+    gap: 12px;
+    margin-top: 36px;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+    background: var(--ow-surface);
+    padding: 14px 14px 14px 16px;
+    text-align: left;
+    animation: ow-hero03-in var(--ow-duration-slow) var(--ow-ease-emphasized);
+}
+
+.ow-hero03__done-icon {
+    display: inline-flex;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: var(--ow-success-surface);
+    color: var(--ow-success-text);
+}
+
+.ow-hero03__done-text {
+    display: grid;
+    min-width: 0;
+    flex: 1;
+    gap: 2px;
+}
+
+.ow-hero03__done-detail {
+    overflow-wrap: anywhere;
+}
+
+@keyframes ow-hero03-in {
+    from {
+        opacity: 0;
+        transform: translateY(4px);
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-hero03 {
+        padding: 72px var(--ow-page-gutter) 80px;
+    }
+    .ow-hero03__row {
+        flex-direction: column;
+    }
+    .ow-hero03 .ow-hero03__input {
+        flex: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-hero03__done {
+        animation: none;
+    }
+}
+
+/* heroes/Hero04/Hero04.css */
+.ow-hero04,
+.ow-hero04 *,
+.ow-hero04 *::before,
+.ow-hero04 *::after {
+    box-sizing: border-box;
+}
+
+.ow-hero04 {
+    overflow: hidden;
+    background: var(--ow-paper);
+    color: var(--ow-text);
+}
+
+.ow-hero04__grid {
+    padding: 128px 32px 136px;
+}
+
+/* The headline in the middle column; the sample work sits either side of it on wide screens. */
+
+.ow-hero04__layout {
+    display: grid;
+    max-width: var(--ow-page-max);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr);
+    align-items: center;
+    gap: 40px;
+    margin: 0 auto;
+}
+
+.ow-hero04__text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.ow-hero04__title {
+    margin-top: 24px;
+}
+
+.ow-hero04__lead {
+    margin-top: 22px;
+}
+
+.ow-hero04__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--ow-space-lg);
+    margin-top: 34px;
+}
+
+@media (max-width: 1180px) {
+    .ow-hero04__layout {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-hero04__grid {
+        padding: 80px var(--ow-page-gutter) 88px;
+    }
+    .ow-hero04__actions {
+        width: 100%;
+        flex-direction: column;
+        align-items: stretch;
+    }
+}
+
+/* heroes/Hero05/Hero05.css */
+.ow-hero05,
+.ow-hero05 *,
+.ow-hero05 *::before,
+.ow-hero05 *::after {
+    box-sizing: border-box;
+}
+
+.ow-hero05 {
+    background: var(--ow-paper);
+    padding: 128px 32px 88px;
+    color: var(--ow-text);
+}
+
+.ow-hero05__inner {
+    max-width: var(--ow-page-max);
+    margin: 0 auto;
+}
+
+/* The headline on the left, the lead and the buttons on the right, sharing a baseline at the bottom. */
+
+.ow-hero05__top {
+    display: grid;
+    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+    align-items: end;
+    gap: 64px;
+}
+
+.ow-hero05__heading {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.ow-hero05__title {
+    margin-top: 24px;
+}
+
+.ow-hero05__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ow-space-lg);
+    margin-top: 28px;
+}
+
+/* The first proof: who already uses it. */
+
+.ow-hero05__proof {
+    margin-top: 104px;
+    border-top: 1px solid var(--ow-border);
+    padding-top: 36px;
+}
+
+.ow-hero05__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 28px 40px;
+    margin: 28px 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* Each logo sits on its own, as tall as it is, so a row of them lines up on its centres. */
+.ow-hero05__logo {
+    display: flex;
+    align-items: center;
+}
+
+@media (max-width: 1024px) {
+    .ow-hero05 {
+        padding-top: 104px;
+    }
+    .ow-hero05__top {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 28px;
+    }
+    .ow-hero05__list {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        justify-items: start;
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-hero05 {
+        padding: 72px var(--ow-page-gutter) 64px;
+    }
+    .ow-hero05__actions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .ow-hero05__proof {
+        margin-top: 64px;
+        padding-top: 28px;
+    }
+    .ow-hero05__list {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 28px 16px;
+    }
+}
+
+/* heroes/Hero06/Hero06.css */
+.ow-hero06,
+.ow-hero06 *,
+.ow-hero06 *::before,
+.ow-hero06 *::after {
+    box-sizing: border-box;
+}
+
+.ow-hero06 {
+    overflow: hidden;
+    background: var(--ow-paper);
+    padding: 112px 32px 120px;
+    color: var(--ow-text);
+}
+
+.ow-hero06__inner {
+    display: grid;
+    max-width: var(--ow-page-max);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+    align-items: center;
+    gap: 72px;
+    margin: 0 auto;
+}
+
+.ow-hero06__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.ow-hero06__title {
+    margin-top: 24px;
+}
+
+.ow-hero06__lead {
+    max-width: 480px;
+    margin-top: 22px;
+}
+
+.ow-hero06__buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ow-space-sm);
+    margin-top: 34px;
+}
+
+.ow-hero06__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px 14px;
+    margin-top: 18px;
+}
+
+.ow-hero06__meta > span + span::before {
+    content: "";
+    display: inline-block;
+    width: 3px;
+    height: 3px;
+    margin-right: 14px;
+    border-radius: 50%;
+    background: var(--ow-border-strong);
+    vertical-align: middle;
+}
+
+@media (max-width: 960px) {
+    .ow-hero06 {
+        padding-top: 88px;
+    }
+    .ow-hero06__inner {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 48px;
+    }
+    .ow-hero06__lead {
+        max-width: 560px;
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-hero06 {
+        padding: 72px var(--ow-page-gutter) 80px;
+    }
+    .ow-hero06__buttons {
         width: 100%;
     }
-    .ow-hero06__buttons > :first-child {
-        width: 100%;
+    .ow-hero06__buttons > :first-child {
+        width: 100%;
+    }
+    .ow-hero06__buttons > :not(:first-child) {
+        flex: 1;
+    }
+    .ow-hero06__meta {
+        gap: 6px 12px;
+    }
+    .ow-hero06__meta > span + span::before {
+        margin-right: 12px;
+    }
+    .ow-hero06__meta > .ow-hero06__other {
+        flex-basis: 100%;
+    }
+    .ow-hero06__meta > .ow-hero06__other::before {
+        display: none;
+    }
+}
+
+/* pricing/Pricing01/Pricing01.css */
+.ow-pricing01,
+.ow-pricing01 *,
+.ow-pricing01 *::before,
+.ow-pricing01 *::after {
+    box-sizing: border-box;
+}
+
+.ow-pricing01 {
+    background: var(--ow-paper);
+    padding: var(--ow-section-y) 32px;
+    color: var(--ow-text);
+}
+
+.ow-pricing01__inner {
+    display: flex;
+    max-width: var(--ow-page-max);
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+}
+
+/* The recommended card stands 14px proud of its neighbours at both ends, padded so every row inside still lines up. */
+.ow-pricing01__grid {
+    display: grid;
+    width: 100%;
+    max-width: 1080px;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 20px;
+    margin-top: 72px;
+}
+
+.ow-pricing01__card {
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--ow-radius-card);
+}
+
+.ow-pricing01__card[data-recommended] {
+    position: relative;
+    z-index: 1;
+    margin: -14px 0;
+    border-color: var(--ow-primary-border);
+    box-shadow: var(--ow-shadow-lift);
+}
+
+.ow-pricing01__head {
+    display: flex;
+    flex-direction: column;
+    padding: 28px 28px 24px;
+}
+
+.ow-pricing01__card[data-recommended] .ow-pricing01__head {
+    padding-top: 42px;
+}
+
+.ow-pricing01__name-row {
+    display: flex;
+    min-height: 26px;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ow-space-sm);
+}
+
+.ow-pricing01__summary {
+    margin-top: 6px;
+}
+
+.ow-pricing01__price {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 4px 10px;
+    margin: 28px 0 24px;
+}
+
+/* A price, not a title: no extra leading above the figure, and digits of one width. */
+.ow-pricing01__amount {
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-pricing01__body {
+    flex: 1;
+    border-top: 1px solid var(--ow-border);
+    padding: 24px 28px 30px;
+}
+
+.ow-pricing01__card[data-recommended] .ow-pricing01__body {
+    padding-bottom: 44px;
+}
+
+.ow-pricing01__features {
+    display: grid;
+    gap: 12px;
+    margin: 16px 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-pricing01__features li {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+.ow-pricing01__features svg {
+    flex-shrink: 0;
+    margin-top: 1px;
+    color: var(--ow-primary-text);
+}
+
+.ow-pricing01__enterprise {
+    display: flex;
+    width: 100%;
+    max-width: 1080px;
+    align-items: center;
+    gap: var(--ow-space-2xl);
+    margin-top: 52px;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+    background: var(--ow-surface);
+    padding: 18px 24px;
+}
+
+.ow-pricing01__enterprise-icon {
+    display: inline-flex;
+    width: 36px;
+    height: 36px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-tile);
+    background: var(--ow-surface-muted);
+    color: var(--ow-text-soft);
+}
+
+.ow-pricing01__enterprise-text {
+    flex: 1;
+}
+
+.ow-pricing01__enterprise-link {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+}
+
+.ow-pricing01__note {
+    margin-top: 20px;
+}
+
+@media (max-width: 1100px) {
+    .ow-pricing01__head {
+        padding-right: 24px;
+        padding-left: 24px;
+    }
+    .ow-pricing01__body {
+        padding-right: 24px;
+        padding-left: 24px;
+    }
+}
+
+@media (max-width: 900px) {
+    .ow-pricing01__grid {
+        max-width: 520px;
+        grid-template-columns: minmax(0, 1fr);
+        gap: 16px;
+        margin-top: 48px;
+    }
+    /* Stacked, the recommended plan goes first. */
+    .ow-pricing01__card[data-recommended] {
+        order: -1;
+        margin: 0;
+        box-shadow: 0 0 0 1px var(--ow-primary-border);
+    }
+    .ow-pricing01__card[data-recommended] .ow-pricing01__head {
+        padding-top: 28px;
+    }
+    .ow-pricing01__card[data-recommended] .ow-pricing01__body {
+        padding-bottom: 30px;
+    }
+    .ow-pricing01__enterprise {
+        max-width: 520px;
+        flex-wrap: wrap;
+        margin-top: 16px;
+    }
+    .ow-pricing01__enterprise-text {
+        flex-basis: calc(100% - 60px);
+    }
+    .ow-pricing01__enterprise-link {
+        margin-left: 52px;
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-pricing01 {
+        padding: 72px var(--ow-page-gutter);
+    }
+    .ow-pricing01__head {
+        padding: 24px 22px 22px;
+    }
+    .ow-pricing01__card[data-recommended] .ow-pricing01__head {
+        padding: 24px 22px 22px;
+    }
+    .ow-pricing01__body,
+    .ow-pricing01__card[data-recommended] .ow-pricing01__body {
+        padding: 22px 22px 26px;
+    }
+    .ow-pricing01__enterprise {
+        align-items: flex-start;
+        padding: 18px;
+    }
+}
+
+/* pricing/Pricing02/Pricing02.css */
+.ow-pricing02,
+.ow-pricing02 *,
+.ow-pricing02 *::before,
+.ow-pricing02 *::after {
+    box-sizing: border-box;
+}
+
+.ow-pricing02 {
+    background: var(--ow-paper);
+    padding: var(--ow-section-y) 32px;
+    color: var(--ow-text);
+}
+
+.ow-pricing02__inner {
+    max-width: var(--ow-page-max);
+    margin: 0 auto;
+}
+
+.ow-pricing02__header {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 32px 48px;
+}
+
+.ow-pricing02__header .ow-section-heading {
+    max-width: 640px;
+}
+
+.ow-pricing02__switch {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 10px;
+}
+
+/* Four plans in one panel, divided by hairlines rather than set apart as cards. */
+.ow-pricing02__panel {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    margin-top: 56px;
+    overflow: hidden;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-card);
+    background: var(--ow-surface);
+}
+
+/* Each plan is a subgrid of the panel's rows, so prices, buttons and lists line up even when a line wraps. */
+.ow-pricing02__plan {
+    display: grid;
+    min-width: 0;
+    grid-row: span 5;
+    grid-template-rows: subgrid;
+    align-content: start;
+    padding: 28px 24px 32px;
+}
+
+.ow-pricing02__plan + .ow-pricing02__plan {
+    border-left: 1px solid var(--ow-border);
+}
+
+.ow-pricing02__plan[data-popular] {
+    background: color-mix(in srgb, var(--ow-primary-subtle) 70%, var(--ow-surface));
+}
+
+.ow-pricing02__name-row {
+    display: flex;
+    min-height: 24px;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ow-space-sm);
+}
+
+.ow-pricing02__summary {
+    margin-top: 8px;
+}
+
+.ow-pricing02__price {
+    margin: 24px 0 22px;
+}
+
+.ow-pricing02__figure {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 2px 8px;
+}
+
+/* A price, not a title: no extra leading above the figure, and digits of one width. */
+.ow-pricing02__amount {
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    animation: ow-pricing02-in var(--ow-duration-slow) var(--ow-ease-emphasized);
+}
+
+.ow-pricing02__amount--text {
+    animation: none;
+}
+
+.ow-pricing02__billing {
+    margin-top: 10px;
+}
+
+.ow-pricing02__features {
+    display: grid;
+    gap: 11px;
+    margin: 26px 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-pricing02__features li {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+.ow-pricing02__features svg {
+    flex-shrink: 0;
+    margin-top: 1px;
+    color: var(--ow-primary-text);
+}
+
+.ow-pricing02__note {
+    margin-top: 20px;
+}
+
+@keyframes ow-pricing02-in {
+    from {
+        opacity: 0;
+        transform: translateY(6px);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-pricing02__amount {
+        animation: none;
+    }
+}
+
+@media (max-width: 1024px) {
+    .ow-pricing02__panel {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .ow-pricing02__plan:nth-child(odd) {
+        border-left: 0;
+    }
+    .ow-pricing02__plan:nth-child(n + 3) {
+        border-top: 1px solid var(--ow-border);
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-pricing02 {
+        padding: 72px var(--ow-page-gutter);
+    }
+    .ow-pricing02__header {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .ow-pricing02__switch {
+        align-items: stretch;
+    }
+    .ow-pricing02__switch .ow-segmented {
+        display: flex;
+        justify-self: stretch;
+    }
+    .ow-pricing02__switch .ow-segmented__item {
+        flex: 1;
+    }
+    .ow-pricing02__panel {
+        grid-template-columns: minmax(0, 1fr);
+        margin-top: 40px;
+    }
+    .ow-pricing02__plan,
+    .ow-pricing02__plan:nth-child(odd) {
+        border-left: 0;
+        padding: 24px 22px 28px;
+    }
+    .ow-pricing02__plan + .ow-pricing02__plan {
+        border-top: 1px solid var(--ow-border);
+    }
+}
+
+/* pricing/Pricing03/Pricing03.css */
+.ow-pricing03,
+.ow-pricing03 *,
+.ow-pricing03 *::before,
+.ow-pricing03 *::after {
+    box-sizing: border-box;
+}
+
+.ow-pricing03 {
+    --ow-pricing03-first: 32%;
+    background: var(--ow-paper);
+    padding: var(--ow-section-y) 32px;
+    color: var(--ow-text);
+}
+
+.ow-pricing03__inner {
+    max-width: var(--ow-page-max);
+    margin: 0 auto;
+}
+
+/* Phones compare one plan at a time; wider screens see every column. */
+.ow-pricing03__picker {
+    display: none;
+}
+
+/* The plan names, prices and buttons, in columns that line up with the tables below. Sticks under the top
+   of the window as the tables scroll past. */
+.ow-pricing03__plans {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    display: grid;
+    grid-template-columns: var(--ow-pricing03-first) repeat(4, minmax(0, 1fr));
+    margin-top: 56px;
+    border-bottom: 1px solid var(--ow-border);
+    background: var(--ow-paper);
+    padding: 16px 1px 20px;
+}
+
+.ow-pricing03__plans-label {
+    align-self: end;
+    padding: 0 16px;
+}
+
+.ow-pricing03__plan {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    padding: 0 16px;
+}
+
+.ow-pricing03__plan-name {
+    display: flex;
+    height: 22px;
+    align-items: center;
+    gap: 8px;
+}
+
+.ow-pricing03__plan-price {
+    margin-bottom: 12px;
+    white-space: nowrap;
+}
+
+.ow-pricing03__groups {
+    display: grid;
+    gap: 20px;
+    margin-top: 28px;
+}
+
+/* The library's Table, quietened for a marketing page: the group's name heads the first column. */
+.ow-pricing03__group {
+    border-radius: var(--ow-radius-card);
+}
+
+.ow-pricing03__group .ow-table {
+    table-layout: fixed;
+}
+
+.ow-pricing03__group th:first-child {
+    width: var(--ow-pricing03-first);
+}
+
+.ow-pricing03__group th {
+    height: 44px;
+    background: var(--ow-surface);
+    padding: 0 16px;
+}
+
+.ow-pricing03__group th:first-child {
+    color: var(--ow-text);
+    font-size: 14px;
+}
+
+.ow-pricing03__group td {
+    padding-right: 16px;
+    padding-left: 16px;
+    color: var(--ow-text-soft);
+    font-size: 14px;
+}
+
+.ow-pricing03__group td:first-child {
+    color: var(--ow-text);
+}
+
+.ow-pricing03__group .ow-table tbody tr:hover td {
+    background: transparent;
+}
+
+.ow-pricing03__feature {
+    display: block;
+    padding: 6px 0;
+}
+
+.ow-pricing03__feature-note {
+    display: block;
+    margin-top: 2px;
+}
+
+.ow-pricing03__yes {
+    display: inline-flex;
+    width: 22px;
+    height: 22px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: var(--ow-primary-subtle);
+    color: var(--ow-primary-text);
+    vertical-align: middle;
+}
+
+.ow-pricing03__no {
+    display: inline-flex;
+    width: 22px;
+    justify-content: center;
+    color: var(--ow-text-disabled);
+    vertical-align: middle;
+}
+
+.ow-pricing03__note {
+    margin-top: 24px;
+    text-wrap: balance;
+}
+
+@media (max-width: 1024px) {
+    .ow-pricing03 {
+        --ow-pricing03-first: 26%;
+    }
+    .ow-pricing03__plan-amount {
+        display: block;
     }
-    .ow-hero06__buttons > :not(:first-child) {
-        flex: 1;
+    .ow-pricing03__plan-name .ow-badge {
+        display: none;
     }
-    .ow-hero06__meta {
-        gap: 6px 12px;
+    .ow-pricing03__plan,
+    .ow-pricing03__plans-label {
+        padding: 0 12px;
     }
-    .ow-hero06__meta > span + span::before {
-        margin-right: 12px;
+    .ow-pricing03__group th,
+    .ow-pricing03__group td {
+        padding-right: 12px;
+        padding-left: 12px;
     }
-    .ow-hero06__meta > .ow-hero06__other {
-        flex-basis: 100%;
+    /* Keeps its column, so the plans still line up with the tables. */
+    .ow-pricing03__plans-label {
+        visibility: hidden;
     }
-    .ow-hero06__meta > .ow-hero06__other::before {
+}
+
+@media (max-width: 760px) {
+    .ow-pricing03 {
+        padding: 72px var(--ow-page-gutter);
+    }
+    .ow-pricing03__picker {
+        display: block;
+        margin-top: 32px;
+    }
+    .ow-pricing03__plans-label {
         display: none;
     }
+    .ow-pricing03__plans {
+        grid-template-columns: minmax(0, 1fr);
+        margin-top: 0;
+        padding: 16px 0;
+    }
+    .ow-pricing03__plan {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        align-items: center;
+        gap: 2px 16px;
+        padding: 0;
+    }
+    .ow-pricing03__plan-price {
+        grid-column: 1;
+        margin: 0;
+    }
+    .ow-pricing03__plan-amount {
+        display: inline;
+    }
+    .ow-pricing03__plan-name .ow-badge {
+        display: inline-flex;
+    }
+    .ow-pricing03__group th:first-child {
+        width: auto;
+    }
+    .ow-pricing03__plan .ow-button {
+        grid-row: 1 / span 2;
+        grid-column: 2;
+    }
+    .ow-pricing03__groups {
+        gap: 16px;
+        margin-top: 20px;
+    }
+    .ow-pricing03__group th,
+    .ow-pricing03__group td {
+        padding-right: 12px;
+        padding-left: 12px;
+    }
+    .ow-pricing03__group th:last-child,
+    .ow-pricing03__group td:last-child {
+        width: 36%;
+        text-align: right !important;
+    }
+}
+
+/* pricing/Pricing04/Pricing04.css */
+.ow-pricing04,
+.ow-pricing04 *,
+.ow-pricing04 *::before,
+.ow-pricing04 *::after {
+    box-sizing: border-box;
+}
+
+.ow-pricing04 {
+    background: var(--ow-paper);
+    padding: var(--ow-section-y) 32px;
+    color: var(--ow-text);
+}
+
+.ow-pricing04__inner {
+    display: flex;
+    max-width: var(--ow-page-max);
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+}
+
+/* What's included on the left; the price on an inset panel on the right. */
+.ow-pricing04__card {
+    display: grid;
+    width: 100%;
+    max-width: 1000px;
+    grid-template-columns: minmax(0, 1fr) 360px;
+    gap: 8px;
+    margin-top: 64px;
+    border-radius: var(--ow-radius-card);
+    padding: 8px;
+}
+
+.ow-pricing04__details {
+    padding: 32px 32px 36px;
+}
+
+.ow-pricing04__description {
+    max-width: 480px;
+    margin-top: 10px;
+}
+
+.ow-pricing04__included {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-top: 32px;
+    white-space: nowrap;
+}
+
+.ow-pricing04__included::after {
+    content: "";
+    height: 1px;
+    flex: 1;
+    background: var(--ow-border);
+}
+
+.ow-pricing04__features {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px 24px;
+    margin: 20px 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-pricing04__features li {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+.ow-pricing04__features svg {
+    flex-shrink: 0;
+    margin-top: 1px;
+    color: var(--ow-primary-text);
+}
+
+.ow-pricing04__offer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--ow-border);
+    border-radius: calc(var(--ow-radius-card) - 6px);
+    background: var(--ow-canvas);
+    padding: 40px 32px;
+    text-align: center;
+}
+
+.ow-pricing04__price {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 20px;
+}
+
+/* A price, not a title: no extra leading above the figure, and digits of one width. */
+.ow-pricing04__amount {
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-pricing04__unit {
+    margin: 8px 0 28px;
+}
+
+.ow-pricing04__fine {
+    margin-top: 16px;
+    text-wrap: balance;
+}
+
+.ow-pricing04__promises {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px 32px;
+    margin: 28px 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-pricing04__promises li {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.ow-pricing04__promises svg {
+    color: var(--ow-icon);
+}
+
+@media (max-width: 1024px) {
+    .ow-pricing04__card {
+        grid-template-columns: minmax(0, 1fr) 300px;
+    }
+    .ow-pricing04__details {
+        padding: 28px 24px 32px;
+    }
+    .ow-pricing04__features {
+        grid-template-columns: minmax(0, 1fr);
+    }
+    .ow-pricing04__offer {
+        padding: 36px 24px;
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-pricing04 {
+        padding: 72px var(--ow-page-gutter);
+    }
+    .ow-pricing04__card {
+        grid-template-columns: minmax(0, 1fr);
+        margin-top: 40px;
+        padding: 6px;
+    }
+    .ow-pricing04__details {
+        padding: 22px 18px 26px;
+    }
+    .ow-pricing04__offer {
+        order: -1;
+        padding: 32px 20px;
+    }
+    .ow-pricing04__promises {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+}
+
+/* pricing/Pricing05/Pricing05.css */
+.ow-pricing05,
+.ow-pricing05 *,
+.ow-pricing05 *::before,
+.ow-pricing05 *::after {
+    box-sizing: border-box;
+}
+
+.ow-pricing05 {
+    background: var(--ow-paper);
+    padding: var(--ow-section-y) 32px;
+    color: var(--ow-text);
+}
+
+.ow-pricing05__inner {
+    display: grid;
+    max-width: var(--ow-page-max);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
+    align-items: start;
+    gap: 64px;
+    margin: 0 auto;
+}
+
+/* The price list: one row per band, the band the estimate lands in marked with a brass dot. */
+.ow-pricing05__tiers {
+    margin: 40px 0 0;
+    border-top: 1px solid var(--ow-border);
+    padding: 0;
+    list-style: none;
+}
+
+.ow-pricing05__tier {
+    display: grid;
+    grid-template-columns: 14px minmax(0, 1fr) auto;
+    align-items: baseline;
+    gap: 12px;
+    border-bottom: 1px solid var(--ow-border);
+    padding: 16px 0;
+}
+
+.ow-pricing05__tier-dot {
+    width: 6px;
+    height: 6px;
+    align-self: center;
+    border-radius: 50%;
+    background: var(--ow-border-strong);
+    transition: background-color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-pricing05__tier[data-current] .ow-pricing05__tier-dot {
+    background: var(--ow-brass);
+}
+
+/* Prices in a column: digits of one width. */
+.ow-pricing05__tier-price {
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-pricing05__tier-unit {
+    margin-left: 4px;
+}
+
+.ow-pricing05__aside {
+    margin-top: 20px;
+}
+
+.ow-pricing05__card {
+    border-radius: var(--ow-radius-card);
+    padding: 28px;
+}
+
+.ow-pricing05__card-intro {
+    margin-top: 6px;
+}
+
+/* The figure changes as the slider moves: digits of one width keep it from jittering. */
+.ow-pricing05__runs {
+    margin: 28px 0 16px;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-pricing05__runs-unit {
+    margin-left: 4px;
+}
+
+.ow-pricing05__scale {
+    display: flex;
+    justify-content: space-between;
+    margin: 8px 9px 0;
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-pricing05__scale span {
+    width: 0;
+    display: flex;
+    justify-content: center;
+    white-space: nowrap;
+}
+
+.ow-pricing05__breakdown {
+    display: grid;
+    margin: 28px 0 0;
+    border-top: 1px solid var(--ow-border);
+    padding: 12px 0 0;
+}
+
+.ow-pricing05__line {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 6px 0;
+    font-variant-numeric: tabular-nums;
+}
+
+/* Bands the estimate doesn't reach fade back; Text has no tone for disabled text. */
+.ow-pricing05__line[data-idle] {
+    color: var(--ow-text-disabled);
+}
+
+.ow-pricing05__total {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 4px 16px;
+    margin-top: 12px;
+    border-top: 1px solid var(--ow-border);
+    padding-top: 18px;
+}
+
+.ow-pricing05__total-note {
+    display: block;
+    margin-top: 2px;
+}
+
+/* A price, not a title: no extra leading above the figure, and digits of one width as it changes. */
+.ow-pricing05__total-amount {
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-pricing05__action {
+    margin-top: 24px;
+}
+
+.ow-pricing05__fine {
+    margin-top: 14px;
+    text-wrap: balance;
+}
+
+@media (max-width: 1024px) {
+    .ow-pricing05__inner {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 48px;
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-pricing05 {
+        padding: 72px var(--ow-page-gutter);
+    }
+    .ow-pricing05__tiers {
+        margin-top: 32px;
+    }
+    .ow-pricing05__card {
+        padding: 22px 18px;
+    }
 }