/*
Theme Name: Otto
Theme URI: https://ottosurance.com/
Author: Otto
Description: Robotics insurance, sold direct and paid in stablecoin through Fire Wallet. A classic theme built against Fire Shop and Fire Core. Fire Shop renders /shop/ and /product/* through get_header() and get_footer(), so this cannot be a block theme.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: otto
Tags: one-column, custom-logo, custom-menu, translation-ready, e-commerce
*/

/**
 * Otto — design system.
 *
 * Two registers in one system. Marketing surfaces are warm and calm: bone
 * paper, near-black ink, generous space. Anywhere a number carries money
 * (the coverage matrix, the quote wizard, the cart) it shifts into an
 * instrument-panel register: dark ground, amber data, hairline rules. The amber
 * is the constant that holds the two together.
 *
 * Typefaces are the three Fire Core already loads from Bunny Fonts, so the
 * theme and any plugin-rendered markup share one type system.
 *
 * The font sheet is not @imported here. It is enqueued as the `otto-fonts`
 * handle and declared as a dependency of this file, which lets the browser
 * fetch the two in parallel instead of discovering the font sheet only after
 * this one has parsed.
 *
 * Contents
 *   1  Tokens
 *   2  Reset and base
 *   3  Typography
 *   4  Layout
 *   5  Header
 *   6  Footer
 *   7  Buttons
 *   8  Pills and eyebrows
 *   9  Cards
 *  10  Hero
 *  11  Coverage lines
 *  12  Coverage matrix (panel register)
 *  13  Robot classes
 *  14  Quote wizard
 *  15  Cart
 *  16  Checkout
 *  17  Wallet handshake
 *  18  Policy certificate
 *  19  Utilities
 *  20  WordPress and theme surfaces
 *  21  Motion preferences
 */

/* ==========================================================================
   1  Tokens
   ========================================================================== */

:root {
	/* Paper and ink. The light register. */
	--otto-paper: #f7f4ee;
	--otto-paper-raised: #ffffff;
	--otto-paper-sunk: #ede8de;
	--otto-ink: #16150f;
	--otto-ink-soft: #4c483e;
	--otto-ink-faint: #857f71;
	--otto-rule: #dfd9cb;
	--otto-rule-strong: #c9c2b0;

	/* Panel. The instrument register. */
	--otto-panel: #16150f;
	--otto-panel-raised: #201e16;
	--otto-panel-sunk: #0e0d09;
	--otto-panel-rule: #38352a;
	--otto-panel-ink: #f2ede3;
	--otto-panel-ink-soft: #9c9585;

	/* Signal. One accent, used sparingly, legible on both grounds. */
	--otto-amber: #df9518;
	--otto-amber-bright: #f2b23c;
	--otto-amber-deep: #a86d06;
	--otto-amber-wash: #fbf1dc;

	/* Semantic. */
	--otto-ok: #2e7d4f;
	--otto-warn: #b77a11;
	--otto-risk: #c0432c;
	--otto-ok-wash: #e8f2ec;
	--otto-risk-wash: #f8eae7;

	/* Spacing. 4px base, matching Fire Shop's scale so the port lines up. */
	--otto-space-2xs: 0.125rem;
	--otto-space-xs: 0.25rem;
	--otto-space-sm: 0.5rem;
	--otto-space-md: 1rem;
	--otto-space-lg: 1.5rem;
	--otto-space-xl: 2rem;
	--otto-space-2xl: 3rem;
	--otto-space-3xl: 4rem;
	--otto-space-4xl: 6rem;
	--otto-space-5xl: 8rem;

	/* Radius. Warmer than Fire Shop's 4px ceiling, deliberately: soft geometry
	   is doing real work for a brand whose whole job is to feel unthreatening. */
	--otto-radius-xs: 4px;
	--otto-radius-sm: 8px;
	--otto-radius-md: 14px;
	--otto-radius-lg: 22px;
	--otto-radius-full: 9999px;

	/* Type. */
	--otto-font-display: 'Satoshi', 'Helvetica Neue', sans-serif;
	--otto-font-body: 'Instrument Sans', 'Helvetica Neue', sans-serif;
	--otto-font-data: 'Geist', 'Helvetica Neue', sans-serif;
	--otto-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	--otto-size-display: clamp( 2.75rem, 6vw, 4.5rem );
	--otto-size-h1: clamp( 2.125rem, 4.5vw, 3.25rem );
	--otto-size-h2: clamp( 1.625rem, 3vw, 2.25rem );
	--otto-size-h3: 1.3125rem;
	--otto-size-h4: 1.0625rem;
	--otto-size-body: 1.0625rem;
	--otto-size-small: 0.875rem;
	--otto-size-micro: 0.75rem;

	--otto-leading-tight: 1.1;
	--otto-leading-snug: 1.3;
	--otto-leading-body: 1.6;

	--otto-tracking-tight: -0.02em;
	--otto-tracking-wide: 0.08em;

	/* Motion. */
	--otto-duration-micro: 100ms;
	--otto-duration-short: 200ms;
	--otto-duration-medium: 320ms;
	--otto-duration-long: 560ms;
	--otto-ease-enter: cubic-bezier( 0.16, 1, 0.3, 1 );
	--otto-ease-exit: cubic-bezier( 0.4, 0, 1, 1 );
	--otto-ease-move: cubic-bezier( 0.4, 0, 0.2, 1 );

	/* Elevation. */
	--otto-shadow-sm: 0 1px 2px rgba( 22, 21, 15, 0.06 );
	--otto-shadow-md: 0 2px 8px rgba( 22, 21, 15, 0.07 ), 0 1px 2px rgba( 22, 21, 15, 0.05 );
	--otto-shadow-lg: 0 12px 32px rgba( 22, 21, 15, 0.1 ), 0 2px 6px rgba( 22, 21, 15, 0.05 );
	--otto-shadow-panel: 0 24px 60px rgba( 22, 21, 15, 0.28 );

	/* Stacking. Fire Shop documents a z-scale it never declares, so we declare
	   ours and there are no arbitrary z-index values anywhere below. */
	--otto-z-base: 1;
	--otto-z-raised: 10;
	--otto-z-sticky: 100;
	--otto-z-overlay: 500;
	--otto-z-modal: 600;
	--otto-z-toast: 700;

	/* Measure. */
	--otto-measure: 34rem;
	--otto-container: 72rem;
	--otto-container-narrow: 52rem;
}

/**
 * Fire Shop reads its own token names. Re-point them at Otto's palette so any
 * plugin-rendered markup inherits the theme rather than shipping Fire red.
 * Includes the five tokens Fire Shop reads but never declares.
 */
:root {
	--fire-primary: var( --otto-amber-deep );
	--fire-primary-hover: var( --otto-ink );
	--fire-surface: var( --otto-paper-raised );
	--fire-surface-alt: var( --otto-paper-sunk );
	--fire-bg: var( --otto-paper );
	--fire-border: var( --otto-rule );
	--fire-text: var( --otto-ink );
	--fire-text-muted: var( --otto-ink-faint );
	--fire-success: var( --otto-ok );
	--fire-warning: var( --otto-warn );
	--fire-error: var( --otto-risk );
	--fire-info: var( --otto-ink-soft );
	--fire-cyan: var( --otto-amber-deep );
	--fire-accent: var( --otto-amber );

	--fire-space-2xs: var( --otto-space-2xs );
	--fire-space-xs: var( --otto-space-xs );
	--fire-space-sm: var( --otto-space-sm );
	--fire-space-md: var( --otto-space-md );
	--fire-space-lg: var( --otto-space-lg );
	--fire-space-xl: var( --otto-space-xl );
	--fire-space-2xl: var( --otto-space-2xl );
	--fire-space-3xl: var( --otto-space-3xl );
	--fire-space-xxl: var( --otto-space-3xl );

	--fire-radius-sm: var( --otto-radius-xs );
	--fire-radius-md: var( --otto-radius-sm );
	--fire-radius-full: var( --otto-radius-full );

	--fire-font-display: var( --otto-font-display );
	--fire-font-body: var( --otto-font-body );
	--fire-font-data: var( --otto-font-data );
	--fire-font-mono: var( --otto-font-mono );

	--fire-duration-micro: var( --otto-duration-micro );
	--fire-duration-fast: var( --otto-duration-micro );
	--fire-duration-short: var( --otto-duration-short );
	--fire-duration-normal: var( --otto-duration-short );
	--fire-duration-medium: var( --otto-duration-medium );
	--fire-duration-long: var( --otto-duration-long );

	--fire-shadow-sm: var( --otto-shadow-sm );
	--fire-shadow-md: var( --otto-shadow-md );
	--fire-shadow-lg: var( --otto-shadow-lg );
}

/* ==========================================================================
   2  Reset and base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var( --otto-paper );
	color: var( --otto-ink );
	font-family: var( --otto-font-body );
	font-size: var( --otto-size-body );
	line-height: var( --otto-leading-body );
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg {
	display: block;
	max-width: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* No underlines anywhere. Whole cards are links on this site, so an inherited
   underline strikes through every line of body copy inside them. Links carry
   themselves on colour and context instead. */
a {
	color: var( --otto-ink );
	text-decoration: none;
	transition: color var( --otto-duration-micro ) var( --otto-ease-move );
}

a:hover {
	color: var( --otto-amber-deep );
}

:focus-visible {
	outline: 2px solid var( --otto-amber-deep );
	outline-offset: 3px;
	border-radius: var( --otto-radius-xs );
}

::selection {
	background: var( --otto-amber-wash );
	color: var( --otto-ink );
}

.skip-link {
	position: absolute;
	left: var( --otto-space-md );
	top: calc( var( --otto-space-md ) * -6 );
	z-index: var( --otto-z-toast );
	padding: var( --otto-space-sm ) var( --otto-space-md );
	background: var( --otto-ink );
	color: var( --otto-panel-ink );
	border-radius: var( --otto-radius-sm );
	text-decoration: none;
	transition: top var( --otto-duration-short ) var( --otto-ease-enter );
}

.skip-link:focus {
	top: var( --otto-space-md );
}

/* ==========================================================================
   3  Typography
   ========================================================================== */

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var( --otto-font-display );
	font-weight: 700;
	letter-spacing: var( --otto-tracking-tight );
	line-height: var( --otto-leading-tight );
	text-wrap: balance;
}

h3,
h4 {
	line-height: var( --otto-leading-snug );
}

p {
	margin: 0;
}

.display {
	font-size: var( --otto-size-display );
}

.h1 {
	font-size: var( --otto-size-h1 );
}

.h2 {
	font-size: var( --otto-size-h2 );
}

.h3 {
	font-size: var( --otto-size-h3 );
}

.h4 {
	font-size: var( --otto-size-h4 );
	font-weight: 500;
}

.lede {
	max-width: var( --otto-measure );
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var( --otto-ink-soft );
	text-wrap: pretty;
}

.prose {
	max-width: var( --otto-measure );
	color: var( --otto-ink-soft );
	text-wrap: pretty;
}

.prose + .prose {
	margin-top: var( --otto-space-md );
}

.data {
	font-family: var( --otto-font-data );
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

.mono {
	font-family: var( --otto-font-mono );
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

.muted {
	color: var( --otto-ink-faint );
}

/* Body copy defaults to dark ink, which disappears on the panel register.
   Every muted text role needs a panel counterpart or the section reads as
   an empty black box. */
.section--panel .lede,
.section--panel .prose,
.section--panel .muted,
.result .lede,
.result .muted {
	color: var( --otto-panel-ink-soft );
}

.section--panel .card__body {
	color: var( --otto-panel-ink-soft );
}

.small {
	font-size: var( --otto-size-small );
}

.micro {
	font-size: var( --otto-size-micro );
}

/* ==========================================================================
   4  Layout
   ========================================================================== */

.container {
	width: 100%;
	max-width: var( --otto-container );
	margin-inline: auto;
	padding-inline: var( --otto-space-lg );
}

.container--narrow {
	max-width: var( --otto-container-narrow );
}

.section {
	padding-block: var( --otto-space-4xl );
}

.section--tight {
	padding-block: var( --otto-space-3xl );
}

.section--sunk {
	background: var( --otto-paper-sunk );
}

.section--panel {
	background: var( --otto-panel );
	color: var( --otto-panel-ink );
}

.section-head {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-md );
	margin-bottom: var( --otto-space-2xl );
}

.stack {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-md );
}

.stack--sm {
	gap: var( --otto-space-sm );
}

.stack--lg {
	gap: var( --otto-space-lg );
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --otto-space-md );
}

.row--between {
	justify-content: space-between;
}

.grid {
	display: grid;
	gap: var( --otto-space-lg );
}

.grid--2 {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.grid--3 {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.grid--4 {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

.rule {
	height: 1px;
	border: 0;
	margin: 0;
	background: var( --otto-rule );
}

.section--panel .rule {
	background: var( --otto-panel-rule );
}

@media ( max-width: 60rem ) {
	.grid--3,
	.grid--4 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 40rem ) {
	.section {
		padding-block: var( --otto-space-3xl );
	}

	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ==========================================================================
   5  Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: var( --otto-z-sticky );
	background: color-mix( in srgb, var( --otto-paper ) 88%, transparent );
	backdrop-filter: blur( 12px );
	border-bottom: 1px solid var( --otto-rule );
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --otto-space-lg );
	min-height: 4.5rem;
}

.wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 0.0625em;
	font-family: var( --otto-font-display );
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: var( --otto-tracking-tight );
	text-decoration: none;
	color: var( --otto-ink );
}

.wordmark:hover {
	color: var( --otto-ink );
}

.wordmark__mark {
	position: relative;
}

/* The two o's read as a pair of eyes. The dots make it deliberate. */
.wordmark__mark::before,
.wordmark__mark::after {
	content: '';
	position: absolute;
	top: 0.52em;
	width: 0.13em;
	height: 0.13em;
	border-radius: var( --otto-radius-full );
	background: var( --otto-amber );
	transition: transform var( --otto-duration-short ) var( --otto-ease-enter );
}

.wordmark__mark::before {
	left: 0.11em;
}

.wordmark__mark::after {
	right: 0.11em;
}

.wordmark:hover .wordmark__mark::before,
.wordmark:hover .wordmark__mark::after {
	transform: translateY( -0.06em );
}

.wordmark__tail {
	font-weight: 500;
	color: var( --otto-ink-faint );
}

.site-nav {
	display: flex;
	align-items: center;
	gap: var( --otto-space-lg );
}

.site-nav__link {
	font-size: var( --otto-size-small );
	font-weight: 500;
	text-decoration: none;
	color: var( --otto-ink-soft );
}

.site-nav__link:hover,
.site-nav__link[ aria-current='page' ] {
	color: var( --otto-ink );
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var( --otto-space-lg );
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The current page is marked with a rule under the link rather than a text
 * underline, so it reads as an indicator and not as link decoration.
 *
 * Two selectors, one rule. WordPress sets aria-current on the menu item for
 * any real page, but Fire Shop's product and archive routes are rewrite rules
 * with no post behind them, so nothing is ever marked current on /shop/ or
 * /product/*. site.js adds `is-current` by matching the path on exactly those
 * routes. Both must look identical, so neither gets its own copy of the rule.
 */
.site-nav__link[ aria-current='page' ],
.site-nav__link.is-current {
	position: relative;
	color: var( --otto-ink );
}

.site-nav__link[ aria-current='page' ]::after,
.site-nav__link.is-current::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.4em;
	height: 2px;
	border-radius: var( --otto-radius-full );
	background: var( --otto-amber );
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var( --otto-space-sm );
}

.cart-link {
	display: inline-flex;
	align-items: center;
	gap: var( --otto-space-xs );
	padding: var( --otto-space-xs ) var( --otto-space-sm );
	border-radius: var( --otto-radius-full );
	font-size: var( --otto-size-small );
	font-weight: 500;
	text-decoration: none;
	color: var( --otto-ink-soft );
}

.cart-link:hover {
	background: var( --otto-paper-sunk );
	color: var( --otto-ink );
}

.cart-link__count {
	display: inline-grid;
	place-items: center;
	min-width: 1.375rem;
	height: 1.375rem;
	padding-inline: 0.375rem;
	border-radius: var( --otto-radius-full );
	background: var( --otto-amber );
	color: var( --otto-ink );
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-micro );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.cart-link__count[ hidden ] {
	display: none;
}

@media ( max-width: 52rem ) {
	.site-nav {
		display: none;
	}
}

/* ==========================================================================
   6  Footer
   ========================================================================== */

.site-footer {
	padding-block: var( --otto-space-3xl ) var( --otto-space-xl );
	background: var( --otto-panel );
	color: var( --otto-panel-ink-soft );
	font-size: var( --otto-size-small );
}

.site-footer .wordmark {
	color: var( --otto-panel-ink );
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr repeat( 3, 1fr );
	gap: var( --otto-space-2xl );
	padding-bottom: var( --otto-space-2xl );
	border-bottom: 1px solid var( --otto-panel-rule );
}

.site-footer__heading {
	margin-bottom: var( --otto-space-md );
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-micro );
	font-weight: 600;
	letter-spacing: var( --otto-tracking-wide );
	text-transform: uppercase;
	color: var( --otto-panel-ink );
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-sm );
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer a {
	color: var( --otto-panel-ink-soft );
	text-decoration: none;
}

.site-footer a:hover {
	color: var( --otto-amber-bright );
}

.site-footer__legal {
	padding-top: var( --otto-space-lg );
	color: var( --otto-panel-ink-soft );
}

.site-footer__legal p + p {
	margin-top: var( --otto-space-sm );
}

@media ( max-width: 60rem ) {
	.site-footer__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --otto-space-xl );
	}
}

@media ( max-width: 40rem ) {
	.site-footer__grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ==========================================================================
   7  Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --otto-space-sm );
	padding: 0.6875rem var( --otto-space-lg );
	border: 1px solid transparent;
	border-radius: var( --otto-radius-full );
	background: none;
	font-family: var( --otto-font-body );
	font-size: var( --otto-size-small );
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var( --otto-duration-micro ) var( --otto-ease-move ),
		border-color var( --otto-duration-micro ) var( --otto-ease-move ),
		color var( --otto-duration-micro ) var( --otto-ease-move ),
		transform var( --otto-duration-micro ) var( --otto-ease-move );
}

.btn:active {
	transform: translateY( 1px );
}

.btn:disabled,
.btn[ aria-disabled='true' ] {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

.btn--primary {
	background: var( --otto-ink );
	color: var( --otto-paper );
}

.btn--primary:hover:not( :disabled ):not( [ aria-disabled='true' ] ) {
	background: var( --otto-amber-deep );
	color: var( --otto-paper );
}

.btn--amber {
	background: var( --otto-amber );
	color: var( --otto-ink );
}

.btn--amber:hover:not( :disabled ):not( [ aria-disabled='true' ] ) {
	background: var( --otto-amber-bright );
	color: var( --otto-ink );
}

.btn--secondary {
	border-color: var( --otto-rule-strong );
	color: var( --otto-ink );
}

.btn--secondary:hover:not( :disabled ) {
	border-color: var( --otto-ink );
	background: var( --otto-paper-raised );
	color: var( --otto-ink );
}

.btn--ghost {
	padding-inline: var( --otto-space-sm );
	color: var( --otto-ink-soft );
}

.btn--ghost:hover:not( :disabled ) {
	color: var( --otto-ink );
}

.btn--lg {
	padding: 0.9375rem var( --otto-space-xl );
	font-size: 1rem;
}

.btn--block {
	width: 100%;
}

/* Every dark ground, not just the full-width sections. A secondary button
   inherits near-black ink, which vanishes on the result panel and the sticky
   premium summary unless they are named here too. */
.section--panel .btn--secondary,
.result .btn--secondary,
.summary .btn--secondary,
.wallet-dialog .btn--secondary {
	border-color: var( --otto-panel-rule );
	color: var( --otto-panel-ink );
}

.section--panel .btn--secondary:hover:not( :disabled ),
.result .btn--secondary:hover:not( :disabled ),
.summary .btn--secondary:hover:not( :disabled ),
.wallet-dialog .btn--secondary:hover:not( :disabled ) {
	border-color: var( --otto-panel-ink );
	background: var( --otto-panel-raised );
	color: var( --otto-panel-ink );
}

.section--panel .btn--ghost,
.result .btn--ghost,
.summary .btn--ghost {
	color: var( --otto-panel-ink-soft );
}

.section--panel .btn--ghost:hover:not( :disabled ),
.result .btn--ghost:hover:not( :disabled ),
.summary .btn--ghost:hover:not( :disabled ) {
	color: var( --otto-panel-ink );
}

.btn__arrow {
	transition: transform var( --otto-duration-short ) var( --otto-ease-enter );
}

.btn:hover .btn__arrow {
	transform: translateX( 3px );
}

/* ==========================================================================
   8  Pills and eyebrows
   ========================================================================== */

.eyebrow {
	display: block;
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-micro );
	font-weight: 600;
	letter-spacing: var( --otto-tracking-wide );
	text-transform: uppercase;
	color: var( --otto-amber-deep );
}

.section--panel .eyebrow {
	color: var( --otto-amber );
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: var( --otto-space-xs );
	padding: 0.1875rem 0.625rem;
	border: 1px solid var( --otto-rule-strong );
	border-radius: var( --otto-radius-full );
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-micro );
	font-weight: 500;
	color: var( --otto-ink-soft );
	white-space: nowrap;
}

.pill--amber {
	border-color: transparent;
	background: var( --otto-amber-wash );
	color: var( --otto-amber-deep );
}

.pill--ok {
	border-color: transparent;
	background: var( --otto-ok-wash );
	color: var( --otto-ok );
}

.pill--required {
	border-color: transparent;
	background: var( --otto-paper-sunk );
	color: var( --otto-ink-soft );
}

.pill--panel {
	border-color: var( --otto-panel-rule );
	color: var( --otto-panel-ink-soft );
}

.dot {
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: var( --otto-radius-full );
	background: currentColor;
	flex: none;
}

/* ==========================================================================
   9  Cards
   ========================================================================== */

.card {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-md );
	padding: var( --otto-space-xl );
	background: var( --otto-paper-raised );
	border: 1px solid var( --otto-rule );
	border-radius: var( --otto-radius-md );
}

.card--sunk {
	background: var( --otto-paper-sunk );
	border-color: transparent;
}

.card--panel {
	background: var( --otto-panel-raised );
	border-color: var( --otto-panel-rule );
	color: var( --otto-panel-ink );
}

.card__title {
	font-size: var( --otto-size-h3 );
}

.card__body {
	color: var( --otto-ink-soft );
}

.card--panel .card__body {
	color: var( --otto-panel-ink-soft );
}

/* ==========================================================================
   10  Hero
   ========================================================================== */

.hero {
	padding-block: var( --otto-space-4xl ) var( --otto-space-3xl );
}

.hero__inner {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var( --otto-space-3xl );
	align-items: center;
}

.hero__copy {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-lg );
	align-items: flex-start;
}

.hero__title {
	font-size: var( --otto-size-display );
}

.hero__title em {
	font-style: normal;
	color: var( --otto-amber-deep );
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --otto-space-md );
	margin-top: var( --otto-space-sm );
}

.hero__note {
	display: flex;
	align-items: center;
	gap: var( --otto-space-sm );
	font-size: var( --otto-size-small );
	color: var( --otto-ink-faint );
}

@media ( max-width: 60rem ) {
	.hero__inner {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --otto-space-2xl );
	}
}

/* The quote card that sits beside the hero headline. */
.quote-preview {
	padding: var( --otto-space-xl );
	background: var( --otto-panel );
	border-radius: var( --otto-radius-lg );
	box-shadow: var( --otto-shadow-panel );
	color: var( --otto-panel-ink );
}

.quote-preview__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --otto-space-md );
	padding-bottom: var( --otto-space-md );
	border-bottom: 1px solid var( --otto-panel-rule );
}

.quote-preview__label {
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-micro );
	font-weight: 600;
	letter-spacing: var( --otto-tracking-wide );
	text-transform: uppercase;
	color: var( --otto-panel-ink-soft );
}

.quote-preview__lines {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quote-preview__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --otto-space-md );
	padding-block: 0.6875rem;
	border-bottom: 1px solid var( --otto-panel-rule );
	font-size: var( --otto-size-small );
}

.quote-preview__name {
	color: var( --otto-panel-ink );
	font-weight: 500;
}

.quote-preview__amount {
	font-family: var( --otto-font-data );
	font-variant-numeric: tabular-nums;
	color: var( --otto-amber );
}

.quote-preview__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --otto-space-md );
	padding-top: var( --otto-space-lg );
}

.quote-preview__total-amount {
	font-family: var( --otto-font-data );
	font-size: 1.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var( --otto-panel-ink );
}

.quote-preview__currency {
	font-size: var( --otto-size-small );
	color: var( --otto-panel-ink-soft );
}

/* ==========================================================================
   11  Coverage lines
   ========================================================================== */

.coverage-card {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-md );
	padding: var( --otto-space-xl );
	background: var( --otto-paper-raised );
	border: 1px solid var( --otto-rule );
	border-radius: var( --otto-radius-md );
	transition: border-color var( --otto-duration-short ) var( --otto-ease-move ),
		transform var( --otto-duration-short ) var( --otto-ease-enter ),
		box-shadow var( --otto-duration-short ) var( --otto-ease-enter );
}

.coverage-card:hover {
	border-color: var( --otto-rule-strong );
	transform: translateY( -2px );
	box-shadow: var( --otto-shadow-md );
}

.coverage-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var( --otto-space-md );
}

.coverage-card__name {
	font-size: var( --otto-size-h3 );
}

.coverage-card__underwriting {
	display: block;
	margin-top: var( --otto-space-2xs );
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-micro );
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --otto-ink-faint );
}

.coverage-card__covers {
	color: var( --otto-ink-soft );
}

.coverage-card__story {
	padding: var( --otto-space-md );
	background: var( --otto-paper-sunk );
	border-radius: var( --otto-radius-sm );
	font-size: var( --otto-size-small );
	line-height: 1.5;
	color: var( --otto-ink-soft );
}

.coverage-card__story::before {
	content: 'What that looks like';
	display: block;
	margin-bottom: var( --otto-space-xs );
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-micro );
	font-weight: 600;
	letter-spacing: var( --otto-tracking-wide );
	text-transform: uppercase;
	color: var( --otto-ink-faint );
}

.coverage-card__terms {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --otto-space-md );
	margin-top: auto;
	padding-top: var( --otto-space-md );
	border-top: 1px solid var( --otto-rule );
}

.term__label {
	display: block;
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-micro );
	font-weight: 600;
	letter-spacing: var( --otto-tracking-wide );
	text-transform: uppercase;
	color: var( --otto-ink-faint );
}

.term__value {
	display: block;
	margin-top: var( --otto-space-2xs );
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-small );
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var( --otto-ink );
}

/* ==========================================================================
   12  Coverage matrix (panel register)
   ========================================================================== */

.matrix {
	width: 100%;
	border-collapse: collapse;
	font-family: var( --otto-font-data );
	font-variant-numeric: tabular-nums;
}

.matrix caption {
	padding-bottom: var( --otto-space-lg );
	text-align: left;
	font-size: var( --otto-size-small );
	color: var( --otto-panel-ink-soft );
}

.matrix th,
.matrix td {
	padding: var( --otto-space-md ) var( --otto-space-md );
	text-align: left;
	border-bottom: 1px solid var( --otto-panel-rule );
	vertical-align: baseline;
}

.matrix thead th {
	font-size: var( --otto-size-micro );
	font-weight: 600;
	letter-spacing: var( --otto-tracking-wide );
	text-transform: uppercase;
	color: var( --otto-panel-ink-soft );
	white-space: nowrap;
}

.matrix tbody th {
	font-weight: 600;
	color: var( --otto-panel-ink );
}

.matrix tbody td {
	font-size: var( --otto-size-small );
	color: var( --otto-panel-ink-soft );
}

.matrix__underwriting {
	display: block;
	margin-top: var( --otto-space-2xs );
	font-size: var( --otto-size-micro );
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --otto-panel-ink-soft );
}

.matrix__premium {
	text-align: right;
	font-weight: 600;
	color: var( --otto-amber );
	white-space: nowrap;
}

.matrix thead .matrix__premium {
	color: var( --otto-panel-ink-soft );
}

.matrix tfoot th,
.matrix tfoot td {
	padding-block: var( --otto-space-sm );
	border-bottom: 0;
	font-size: var( --otto-size-small );
	font-weight: 400;
	color: var( --otto-panel-ink-soft );
}

.matrix tfoot tr:first-child th,
.matrix tfoot tr:first-child td {
	padding-top: var( --otto-space-lg );
}

.matrix tfoot .matrix__premium {
	color: var( --otto-panel-ink-soft );
}

.matrix__credit .matrix__premium {
	color: var( --otto-amber );
}

/* A declined line stays in the schedule rather than vanishing from it. The
   point of the exercise is seeing what you turned off and what it was worth,
   which a row that disappears cannot show. */
.matrix__row--declined {
	opacity: 0.4;
}

.matrix__row--declined th,
.matrix__row--declined td {
	text-decoration: line-through;
}

.matrix__row--declined .matrix__premium {
	text-decoration: none;
	font-style: italic;
}

.matrix__total th,
.matrix__total td {
	font-size: 1rem;
	font-weight: 600;
	color: var( --otto-panel-ink );
}

.matrix__total .matrix__premium {
	font-size: 1.5rem;
	color: var( --otto-panel-ink );
}

.matrix__scroll {
	overflow-x: auto;
}

@media ( max-width: 52rem ) {
	.matrix {
		min-width: 40rem;
	}
}

/* ==========================================================================
   13  Robot classes
   ========================================================================== */

.class-card {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-sm );
	padding: var( --otto-space-lg );
	background: var( --otto-paper-raised );
	border: 1px solid var( --otto-rule );
	border-radius: var( --otto-radius-md );
	text-align: left;
	cursor: pointer;
	transition: border-color var( --otto-duration-short ) var( --otto-ease-move ),
		background var( --otto-duration-short ) var( --otto-ease-move ),
		transform var( --otto-duration-short ) var( --otto-ease-enter );
}

.class-card:hover {
	border-color: var( --otto-amber );
	transform: translateY( -2px );
}

/* The card is a label wrapping a real radio, so the selected state comes from
   the input rather than from an aria attribute a script has to remember to
   keep current. Checked, focused, and disabled all work without JavaScript. */
.class-card:has( .class-card__input:checked ) {
	border-color: var( --otto-ink );
	background: var( --otto-amber-wash );
}

.class-card:has( .class-card__input:focus-visible ) {
	outline: 2px solid var( --otto-amber-deep );
	outline-offset: 3px;
}

/* Hidden from sight, not from the accessibility tree or the tab order: the
   label around it is the visible control. */
.class-card__input,
.option__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.class-card__name {
	font-family: var( --otto-font-display );
	font-size: var( --otto-size-h4 );
	font-weight: 700;
	letter-spacing: var( --otto-tracking-tight );
}

.class-card__blurb {
	font-size: var( --otto-size-small );
	line-height: 1.5;
	color: var( --otto-ink-soft );
}

.class-card__examples {
	margin-top: auto;
	padding-top: var( --otto-space-sm );
	font-size: var( --otto-size-micro );
	line-height: 1.5;
	color: var( --otto-ink-faint );
}

.class-card__rate {
	display: flex;
	align-items: baseline;
	gap: var( --otto-space-xs );
	padding-top: var( --otto-space-sm );
	border-top: 1px solid var( --otto-rule );
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-small );
	font-variant-numeric: tabular-nums;
	color: var( --otto-ink );
}

.class-card__rate-label {
	font-size: var( --otto-size-micro );
	color: var( --otto-ink-faint );
}

/* The required line leads the coverage page rather than sitting in the grid
   like an equal, because it is the one you cannot decline. */
.coverage-card--featured {
	grid-column: 1 / -1;
}

.class-detail {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.1fr );
	gap: var( --otto-space-2xl );
	padding: var( --otto-space-2xl );
	background: var( --otto-paper-raised );
	border: 1px solid var( --otto-rule );
	border-radius: var( --otto-radius-md );
}

@media ( max-width: 60rem ) {
	.class-detail {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --otto-space-xl );
	}
}

.class-detail__name {
	font-size: var( --otto-size-h2 );
}

.class-detail__rate {
	display: flex;
	align-items: baseline;
	gap: var( --otto-space-sm );
	margin-top: var( --otto-space-lg );
	padding-top: var( --otto-space-lg );
	border-top: 1px solid var( --otto-rule );
}

.class-detail__rate-amount {
	font-family: var( --otto-font-data );
	font-size: 1.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.env-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.env-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --otto-space-md );
	padding-block: var( --otto-space-sm );
	border-bottom: 1px solid var( --otto-rule );
}

.env-row:last-child {
	border-bottom: 0;
}

.env-row__label {
	font-size: var( --otto-size-small );
	font-weight: 500;
}

.env-row__note {
	display: block;
	font-size: var( --otto-size-micro );
	font-weight: 400;
	color: var( --otto-ink-faint );
}

.env-row__factor {
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-micro );
	font-variant-numeric: tabular-nums;
	color: var( --otto-ink-soft );
	white-space: nowrap;
	text-align: right;
}

.env-row__factor[ data-direction='loading' ] {
	color: var( --otto-risk );
}

.env-row__factor[ data-direction='credit' ] {
	color: var( --otto-ok );
}

/* ==========================================================================
   14  Quote wizard
   ========================================================================== */

.wizard {
	padding-block: var( --otto-space-2xl ) var( --otto-space-4xl );
}

.wizard__progress {
	display: flex;
	align-items: center;
	gap: var( --otto-space-sm );
	margin-bottom: var( --otto-space-2xl );
	padding: 0;
	list-style: none;
}

.wizard__tick {
	display: flex;
	align-items: center;
	gap: var( --otto-space-sm );
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-micro );
	font-weight: 600;
	letter-spacing: var( --otto-tracking-wide );
	text-transform: uppercase;
	color: var( --otto-ink-faint );
}

.wizard__tick-bar {
	width: 2.5rem;
	height: 3px;
	border-radius: var( --otto-radius-full );
	background: var( --otto-rule );
	transition: background var( --otto-duration-medium ) var( --otto-ease-move );
}

.wizard__tick[ data-state='done' ] .wizard__tick-bar,
.wizard__tick[ data-state='current' ] .wizard__tick-bar {
	background: var( --otto-amber );
}

.wizard__tick[ data-state='current' ] {
	color: var( --otto-ink );
}

/* The step and question boxes are fieldset and legend in this theme, so their
   layout lives in section 20 with the rest of the form work. Only the hidden
   state belongs here: it is what the script toggles to move between steps. */
.wizard__step[ hidden ] {
	display: none;
}

.wizard__options {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --otto-space-md );
}

/* The four robot classes stack as full-width rows rather than columns. The
   wizard runs in the narrow container, so four columns leave each card about
   11rem wide, which wraps the class name onto two lines and breaks the premium
   mid-figure. A row gives the name, the description, and the rate each a lane
   of its own, and the four rates line up in a column you can read down. */
.wizard__options--rows {
	grid-template-columns: minmax( 0, 1fr );
}

.wizard__options--rows .class-card {
	display: grid;
	grid-template-columns: minmax( 0, 12rem ) minmax( 0, 1fr ) auto;
	grid-template-areas:
		'name blurb    rate'
		'name examples rate';
	align-items: start;
	column-gap: var( --otto-space-lg );
	row-gap: var( --otto-space-xs );
	padding: var( --otto-space-md ) var( --otto-space-lg );
}

.wizard__options--rows .class-card__name {
	grid-area: name;
	align-self: center;
}

.wizard__options--rows .class-card__blurb {
	grid-area: blurb;
}

/* Both were pinned to the bottom of a column card. In a row they sit in their
   own cells, so the auto margin and the divider rule have nothing left to do. */
.wizard__options--rows .class-card__examples {
	grid-area: examples;
	margin-top: 0;
	padding-top: 0;
}

.wizard__options--rows .class-card__rate {
	grid-area: rate;
	align-self: center;
	gap: var( --otto-space-sm );
	padding-top: 0;
	padding-left: var( --otto-space-lg );
	border-top: 0;
	border-left: 1px solid var( --otto-rule );
	white-space: nowrap;
}

@media ( max-width: 48rem ) {
	.wizard__options--rows .class-card {
		grid-template-columns: minmax( 0, 1fr );
		grid-template-areas:
			'name'
			'blurb'
			'examples'
			'rate';
		row-gap: var( --otto-space-sm );
		padding: var( --otto-space-lg );
	}

	.wizard__options--rows .class-card__rate {
		padding-top: var( --otto-space-sm );
		padding-left: 0;
		border-top: 1px solid var( --otto-rule );
		border-left: 0;
	}
}

.option {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-2xs );
	padding: var( --otto-space-lg );
	background: var( --otto-paper-raised );
	border: 1px solid var( --otto-rule );
	border-radius: var( --otto-radius-md );
	text-align: left;
	cursor: pointer;
	transition: border-color var( --otto-duration-short ) var( --otto-ease-move ),
		background var( --otto-duration-short ) var( --otto-ease-move );
}

.option:hover {
	border-color: var( --otto-amber );
}

.option:has( .option__input:checked ) {
	border-color: var( --otto-ink );
	background: var( --otto-amber-wash );
}

.option:has( .option__input:focus-visible ) {
	outline: 2px solid var( --otto-amber-deep );
	outline-offset: 3px;
}

.option__label {
	font-weight: 600;
}

.option__note {
	font-size: var( --otto-size-small );
	color: var( --otto-ink-soft );
}

.option__multiplier {
	margin-top: var( --otto-space-sm );
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-micro );
	font-variant-numeric: tabular-nums;
	color: var( --otto-ink-faint );
}

@media ( max-width: 40rem ) {
	.wizard__options {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Value slider. */
.value-field {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-lg );
	padding: var( --otto-space-xl );
	background: var( --otto-paper-raised );
	border: 1px solid var( --otto-rule );
	border-radius: var( --otto-radius-md );
}

.value-field__readout {
	display: flex;
	align-items: baseline;
	gap: var( --otto-space-sm );
	font-family: var( --otto-font-data );
	font-variant-numeric: tabular-nums;
}

.value-field__amount {
	font-size: 2.5rem;
	font-weight: 600;
	letter-spacing: var( --otto-tracking-tight );
}

.value-field__unit {
	font-size: var( --otto-size-small );
	color: var( --otto-ink-faint );
}

.value-field__slider {
	width: 100%;
	height: 1.5rem;
	appearance: none;
	background: none;
	cursor: pointer;
}

.value-field__slider::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: var( --otto-radius-full );
	background: var( --otto-rule );
}

.value-field__slider::-moz-range-track {
	height: 4px;
	border-radius: var( --otto-radius-full );
	background: var( --otto-rule );
}

.value-field__slider::-webkit-slider-thumb {
	appearance: none;
	width: 1.375rem;
	height: 1.375rem;
	margin-top: -0.5625rem;
	border: 3px solid var( --otto-ink );
	border-radius: var( --otto-radius-full );
	background: var( --otto-amber );
	transition: transform var( --otto-duration-micro ) var( --otto-ease-move );
}

.value-field__slider::-moz-range-thumb {
	width: 1.375rem;
	height: 1.375rem;
	border: 3px solid var( --otto-ink );
	border-radius: var( --otto-radius-full );
	background: var( --otto-amber );
}

.value-field__slider:active::-webkit-slider-thumb {
	transform: scale( 1.1 );
}

.value-field__bounds {
	display: flex;
	justify-content: space-between;
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-micro );
	font-variant-numeric: tabular-nums;
	color: var( --otto-ink-faint );
}

/* Fleet stepper. */
.stepper {
	display: flex;
	align-items: center;
	gap: var( --otto-space-md );
}

.stepper__btn {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var( --otto-rule-strong );
	border-radius: var( --otto-radius-full );
	background: var( --otto-paper-raised );
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color var( --otto-duration-micro ) var( --otto-ease-move ),
		background var( --otto-duration-micro ) var( --otto-ease-move );
}

.stepper__btn:hover:not( :disabled ) {
	border-color: var( --otto-ink );
	background: var( --otto-amber-wash );
}

.stepper__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.stepper__value {
	min-width: 4rem;
	font-family: var( --otto-font-data );
	font-size: 2rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.wizard__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --otto-space-md );
	padding-top: var( --otto-space-lg );
	border-top: 1px solid var( --otto-rule );
}

/* The result panel the wizard builds into. */
.result {
	padding: var( --otto-space-2xl );
	background: var( --otto-panel );
	border-radius: var( --otto-radius-lg );
	box-shadow: var( --otto-shadow-panel );
	color: var( --otto-panel-ink );
}

.result__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var( --otto-space-lg );
	margin-bottom: var( --otto-space-xl );
}

.result__summary {
	display: flex;
	flex-wrap: wrap;
	gap: var( --otto-space-sm );
	margin-top: var( --otto-space-md );
}

.result__total-label {
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-micro );
	font-weight: 600;
	letter-spacing: var( --otto-tracking-wide );
	text-transform: uppercase;
	color: var( --otto-panel-ink-soft );
}

.result__total {
	display: flex;
	align-items: baseline;
	gap: var( --otto-space-sm );
	font-family: var( --otto-font-data );
	font-variant-numeric: tabular-nums;
}

.result__total-amount {
	font-size: 3rem;
	font-weight: 600;
	letter-spacing: var( --otto-tracking-tight );
}

.result__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --otto-space-md );
	margin-top: var( --otto-space-xl );
}

/* No entrance animation on matrix rows. An earlier version staggered them in
   with `animation-fill-mode: both`, which meant the schedule was invisible
   until the animation ran. Anything that captures or re-lays-out the page
   mid-flight (a full-page screenshot, a print, a restored bfcache page) left
   the premiums blank. Content does not get to depend on an animation to be
   readable, and the result panel already reads as built because it appears on
   a click. */

/* ==========================================================================
   15  Cart
   ========================================================================== */

.policy-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 22rem;
	gap: var( --otto-space-2xl );
	align-items: start;
}

@media ( max-width: 64rem ) {
	.policy-layout {
		grid-template-columns: minmax( 0, 1fr );
	}
}

.line-list {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-md );
	margin: 0;
	padding: 0;
	list-style: none;
}

.line-item {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	gap: var( --otto-space-lg );
	align-items: start;
	padding: var( --otto-space-lg );
	background: var( --otto-paper-raised );
	border: 1px solid var( --otto-rule );
	border-radius: var( --otto-radius-md );
	transition: opacity var( --otto-duration-short ) var( --otto-ease-move ),
		border-color var( --otto-duration-short ) var( --otto-ease-move ),
		background var( --otto-duration-short ) var( --otto-ease-move );
}

.line-item[ data-selected='false' ] {
	background: var( --otto-paper-sunk );
	border-color: transparent;
	opacity: 0.6;
}

.line-item__name {
	font-family: var( --otto-font-display );
	font-size: var( --otto-size-h4 );
	font-weight: 700;
	letter-spacing: var( --otto-tracking-tight );
}

.line-item__underwriting {
	display: block;
	margin-top: var( --otto-space-2xs );
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-micro );
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --otto-ink-faint );
}

.line-item__covers {
	margin-top: var( --otto-space-sm );
	font-size: var( --otto-size-small );
	color: var( --otto-ink-soft );
}

.line-item__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var( --otto-space-md );
	margin-top: var( --otto-space-md );
}

.line-item__price {
	text-align: right;
	font-family: var( --otto-font-data );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.line-item__amount {
	font-size: 1.25rem;
	font-weight: 600;
}

.line-item__per {
	display: block;
	margin-top: var( --otto-space-2xs );
	font-size: var( --otto-size-micro );
	color: var( --otto-ink-faint );
}

@media ( max-width: 40rem ) {
	.line-item {
		grid-template-columns: auto minmax( 0, 1fr );
	}

	.line-item__price {
		grid-column: 2;
		text-align: left;
	}
}

/* The switch that takes a line out of the policy. */
.switch {
	position: relative;
	display: inline-flex;
	flex: none;
	width: 2.75rem;
	height: 1.625rem;
	margin-top: 0.1875rem;
}

.switch__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.switch__input:disabled {
	cursor: not-allowed;
}

.switch__track {
	position: absolute;
	inset: 0;
	border-radius: var( --otto-radius-full );
	background: var( --otto-rule-strong );
	transition: background var( --otto-duration-short ) var( --otto-ease-move );
	pointer-events: none;
}

.switch__track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: var( --otto-radius-full );
	background: var( --otto-paper-raised );
	box-shadow: var( --otto-shadow-sm );
	transition: transform var( --otto-duration-short ) var( --otto-ease-enter );
}

.switch__input:checked + .switch__track {
	background: var( --otto-ink );
}

.switch__input:checked + .switch__track::after {
	transform: translateX( 1.125rem );
}

.switch__input:disabled + .switch__track {
	background: var( --otto-amber );
}

.switch__input:focus-visible + .switch__track {
	outline: 2px solid var( --otto-amber-deep );
	outline-offset: 3px;
}

/* Sticky premium summary. */
.summary {
	position: sticky;
	top: 6rem;
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-lg );
	padding: var( --otto-space-xl );
	background: var( --otto-panel );
	border-radius: var( --otto-radius-lg );
	box-shadow: var( --otto-shadow-panel );
	color: var( --otto-panel-ink );
}

.summary__title {
	font-size: var( --otto-size-h3 );
}

.summary__meta {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-xs );
	font-size: var( --otto-size-small );
	color: var( --otto-panel-ink-soft );
}

.summary__meta-row {
	display: flex;
	justify-content: space-between;
	gap: var( --otto-space-md );
}

.summary__meta-value {
	font-family: var( --otto-font-data );
	font-variant-numeric: tabular-nums;
	color: var( --otto-panel-ink );
	text-align: right;
}

.summary__total {
	padding-top: var( --otto-space-lg );
	border-top: 1px solid var( --otto-panel-rule );
}

.summary__total-amount {
	display: flex;
	align-items: baseline;
	gap: var( --otto-space-sm );
	font-family: var( --otto-font-data );
	font-size: 2.5rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: var( --otto-tracking-tight );
}

.summary__total-unit {
	font-size: var( --otto-size-small );
	font-weight: 400;
	color: var( --otto-panel-ink-soft );
}

.summary__credit {
	display: flex;
	justify-content: space-between;
	gap: var( --otto-space-md );
	font-size: var( --otto-size-small );
	color: var( --otto-amber );
}

.summary__credit[ hidden ] {
	display: none;
}

/* Annual / monthly toggle. */
.billing-toggle {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 3px;
	padding: 3px;
	background: var( --otto-panel-sunk );
	border-radius: var( --otto-radius-full );
}

.billing-toggle__option {
	padding: var( --otto-space-sm );
	border: 0;
	border-radius: var( --otto-radius-full );
	background: none;
	color: var( --otto-panel-ink-soft );
	font-family: var( --otto-font-body );
	font-size: var( --otto-size-small );
	font-weight: 600;
	cursor: pointer;
	transition: background var( --otto-duration-short ) var( --otto-ease-move ),
		color var( --otto-duration-short ) var( --otto-ease-move );
}

.billing-toggle__option[ aria-pressed='true' ] {
	background: var( --otto-amber );
	color: var( --otto-ink );
}

.summary__fine {
	font-size: var( --otto-size-micro );
	line-height: 1.5;
	color: var( --otto-panel-ink-soft );
}

/* ==========================================================================
   16  Checkout
   ========================================================================== */

.field {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-xs );
}

.field__label {
	font-size: var( --otto-size-small );
	font-weight: 600;
}

.field__hint {
	font-size: var( --otto-size-micro );
	color: var( --otto-ink-faint );
}

.field__input {
	padding: 0.6875rem var( --otto-space-md );
	border: 1px solid var( --otto-rule-strong );
	border-radius: var( --otto-radius-sm );
	background: var( --otto-paper-raised );
	font-size: var( --otto-size-body );
	transition: border-color var( --otto-duration-micro ) var( --otto-ease-move );
}

.field__input:hover {
	border-color: var( --otto-ink-faint );
}

.field__input:focus {
	outline: none;
	border-color: var( --otto-ink );
	box-shadow: 0 0 0 3px var( --otto-amber-wash );
}

.field__input:user-invalid {
	border-color: var( --otto-risk );
}

.field__error {
	font-size: var( --otto-size-micro );
	color: var( --otto-risk );
}

.field__error[ hidden ] {
	display: none;
}

.field-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --otto-space-md );
}

.field--wide {
	grid-column: 1 / -1;
}

@media ( max-width: 40rem ) {
	.field-grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

.checkout-section {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-lg );
	padding: var( --otto-space-xl );
	background: var( --otto-paper-raised );
	border: 1px solid var( --otto-rule );
	border-radius: var( --otto-radius-md );
}

.checkout-section__head {
	display: flex;
	align-items: baseline;
	gap: var( --otto-space-md );
}

.checkout-section__step {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	flex: none;
	border-radius: var( --otto-radius-full );
	background: var( --otto-ink );
	color: var( --otto-paper );
	font-family: var( --otto-font-data );
	font-size: var( --otto-size-small );
	font-weight: 600;
}

/* The wallet method card. */
.method {
	display: flex;
	gap: var( --otto-space-md );
	padding: var( --otto-space-lg );
	border: 2px solid var( --otto-ink );
	border-radius: var( --otto-radius-md );
	background: var( --otto-amber-wash );
}

.method__body {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-xs );
}

.method__name {
	display: flex;
	align-items: center;
	gap: var( --otto-space-sm );
	font-weight: 600;
}

.method__note {
	font-size: var( --otto-size-small );
	color: var( --otto-ink-soft );
}

.method__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var( --otto-space-sm );
	margin-top: var( --otto-space-sm );
}

/* ==========================================================================
   17  Wallet handshake
   ========================================================================== */

.wallet-overlay {
	position: fixed;
	inset: 0;
	z-index: var( --otto-z-modal );
	display: grid;
	place-items: center;
	padding: var( --otto-space-lg );
	background: rgba( 14, 13, 9, 0.72 );
	backdrop-filter: blur( 6px );
	animation: otto-fade-in var( --otto-duration-short ) var( --otto-ease-enter ) both;
}

.wallet-overlay[ hidden ] {
	display: none;
}

.wallet-dialog {
	width: min( 26rem, 100% );
	padding: var( --otto-space-2xl );
	background: var( --otto-panel );
	border: 1px solid var( --otto-panel-rule );
	border-radius: var( --otto-radius-lg );
	box-shadow: var( --otto-shadow-panel );
	color: var( --otto-panel-ink );
	text-align: center;
	animation: otto-dialog-in var( --otto-duration-medium ) var( --otto-ease-enter ) both;
}

@keyframes otto-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes otto-dialog-in {
	from {
		opacity: 0;
		transform: translateY( 12px ) scale( 0.98 );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.wallet-dialog__status {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	margin: 0 auto var( --otto-space-lg );
	border-radius: var( --otto-radius-full );
	background: var( --otto-panel-raised );
	border: 2px solid var( --otto-panel-rule );
}

.wallet-dialog[ data-state='waiting' ] .wallet-dialog__status {
	border-color: var( --otto-amber );
	border-top-color: transparent;
	animation: otto-spin 900ms linear infinite;
}

.wallet-dialog[ data-state='confirmed' ] .wallet-dialog__status {
	border-color: var( --otto-ok );
	background: var( --otto-ok );
	color: var( --otto-panel-ink );
	font-size: 1.75rem;
	line-height: 1;
}

@keyframes otto-spin {
	to {
		transform: rotate( 360deg );
	}
}

.wallet-dialog__title {
	font-size: var( --otto-size-h3 );
}

.wallet-dialog__body {
	margin-top: var( --otto-space-sm );
	font-size: var( --otto-size-small );
	color: var( --otto-panel-ink-soft );
}

.wallet-dialog__amount {
	margin: var( --otto-space-lg ) 0;
	padding: var( --otto-space-md );
	background: var( --otto-panel-sunk );
	border-radius: var( --otto-radius-sm );
	font-family: var( --otto-font-data );
	font-size: 1.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.wallet-dialog__amount span {
	font-size: var( --otto-size-small );
	font-weight: 400;
	color: var( --otto-panel-ink-soft );
}

.wallet-dialog__hash {
	display: block;
	margin-top: var( --otto-space-md );
	font-family: var( --otto-font-mono );
	font-size: var( --otto-size-micro );
	word-break: break-all;
	color: var( --otto-panel-ink-soft );
}

/* ==========================================================================
   18  Policy certificate
   ========================================================================== */

.certificate {
	padding: var( --otto-space-2xl );
	background: var( --otto-paper-raised );
	border: 1px solid var( --otto-rule );
	border-radius: var( --otto-radius-md );
}

.certificate__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var( --otto-space-lg );
	padding-bottom: var( --otto-space-lg );
	border-bottom: 2px solid var( --otto-ink );
}

.certificate__number {
	font-family: var( --otto-font-mono );
	font-size: var( --otto-size-small );
	color: var( --otto-ink-soft );
}

.certificate__terms {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: var( --otto-space-lg );
	padding-block: var( --otto-space-lg );
	border-bottom: 1px solid var( --otto-rule );
}

@media ( max-width: 52rem ) {
	.certificate__terms {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.certificate__schedule {
	width: 100%;
	margin-top: var( --otto-space-lg );
	border-collapse: collapse;
	font-family: var( --otto-font-data );
	font-variant-numeric: tabular-nums;
}

.certificate__schedule th,
.certificate__schedule td {
	padding: var( --otto-space-sm ) var( --otto-space-sm );
	text-align: left;
	border-bottom: 1px solid var( --otto-rule );
	font-size: var( --otto-size-small );
}

.certificate__schedule thead th {
	font-size: var( --otto-size-micro );
	font-weight: 600;
	letter-spacing: var( --otto-tracking-wide );
	text-transform: uppercase;
	color: var( --otto-ink-faint );
}

.certificate__schedule td:last-child,
.certificate__schedule th:last-child {
	text-align: right;
}

/* ==========================================================================
   19  Utilities
   ========================================================================== */

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

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --otto-space-md );
	padding: var( --otto-space-4xl ) var( --otto-space-xl );
	background: var( --otto-paper-raised );
	border: 1px dashed var( --otto-rule-strong );
	border-radius: var( --otto-radius-md );
	text-align: center;
}

.empty-state__title {
	font-size: var( --otto-size-h3 );
}

.notice {
	display: flex;
	gap: var( --otto-space-md );
	padding: var( --otto-space-md ) var( --otto-space-lg );
	border-radius: var( --otto-radius-sm );
	font-size: var( --otto-size-small );
	background: var( --otto-amber-wash );
	color: var( --otto-ink-soft );
	border-left: 3px solid var( --otto-amber );
}

.notice--ok {
	background: var( --otto-ok-wash );
	border-left-color: var( --otto-ok );
}

/* A notice that trails a grid of cards is a footnote to them, not another tile.
   The gap has to read as larger than the gap between the cards themselves or
   the two blocks fuse into one. Everywhere else a notice sits inside a flex
   column that already spaces it, so this stays a sibling rule. */
.grid + .notice {
	margin-top: var( --otto-space-xl );
}

.stat-row {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: var( --otto-space-xl );
}

@media ( max-width: 52rem ) {
	.stat-row {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.stat__value {
	display: block;
	font-family: var( --otto-font-data );
	font-size: 2rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: var( --otto-tracking-tight );
}

.section--panel .stat__value {
	color: var( --otto-amber );
}

.stat__label {
	display: block;
	margin-top: var( --otto-space-xs );
	font-size: var( --otto-size-small );
	color: var( --otto-ink-faint );
}

.section--panel .stat__label {
	color: var( --otto-panel-ink-soft );
}

/* ==========================================================================
   20  WordPress and theme surfaces

   Everything below exists because the theme renders markup the static mock
   never had: real form controls in the wizard, product templates rendered
   against Fire_Product, and the block markup WordPress puts inside the_content.
   ========================================================================== */

/*
 * Each wizard step is a fieldset so its four options are a labelled group for
 * a screen reader rather than four unrelated radios.
 *
 * Deliberately a block, not the flex column the mock used. A <legend> is laid
 * out specially by every engine and whether it participates as a flex item is
 * inconsistent across them, so spacing here comes from margins between
 * children, which no engine argues about.
 */
.wizard__step {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.wizard__step > * + * {
	margin-top: var( --otto-space-xl );
}

.wizard__question {
	display: block;
	width: 100%;
	padding: 0;
}

.wizard__question > * + * {
	margin-top: var( --otto-space-sm );
}

.wizard__title {
	display: block;
	font-family: var( --otto-font-display );
	font-weight: 700;
	letter-spacing: var( --otto-tracking-tight );
	line-height: var( --otto-leading-tight );
	font-size: var( --otto-size-h2 );
}

.wizard__question .eyebrow,
.wizard__question .lede {
	display: block;
}

/* Environment groups. Every class's rooms are in the DOM; the script marks the
   three that do not apply. Without the script none are marked and all four
   groups show under their headings, which is why the heading is not hidden. */
.wizard__group {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-sm );
}

.wizard__group + .wizard__group {
	margin-top: var( --otto-space-lg );
}

.wizard__group-title {
	font-size: var( --otto-size-micro );
	font-weight: 600;
	letter-spacing: var( --otto-tracking-wide );
	text-transform: uppercase;
	color: var( --otto-ink-faint );
}

.js .wizard__group[ data-inactive ] {
	display: none;
}

/* With the script running there is only ever one group on screen, so its
   heading is repeating the answer to question one back at the visitor. */
.js .wizard__group-title {
	display: none;
}

/*
 * Step navigation only exists once there are steps.
 *
 * Without the script the five fieldsets are one continuous form and there is
 * nothing to page between, so Back, Continue, the progress ticks and Start
 * over would all be controls that look live and do nothing when pressed. They
 * are gated on `.js` rather than shipped dead: the submit button at the end is
 * a real submit and is the only control on the page that should look like one.
 *
 * Written as a default of hidden that `.js` turns on, not the reverse, so a
 * script that fails to parse leaves the honest version standing.
 */
.wizard__progress,
.wizard__actions,
[ data-restart ] {
	display: none;
}

.js .wizard__progress {
	display: flex;
}

.js .wizard__actions {
	display: flex;
}

.js [ data-restart ] {
	display: inline-flex;
}

/* Declining a line, on the result step. */
.line-toggles {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-sm );
	margin-block: var( --otto-space-lg );
}

.line-toggle {
	display: grid;
	grid-template-columns: 1.5rem minmax( 0, 1fr ) auto;
	align-items: center;
	gap: var( --otto-space-md );
	padding: var( --otto-space-md );
	border: 1px solid var( --otto-panel-rule );
	border-radius: var( --otto-radius-sm );
	cursor: pointer;
	transition: border-color var( --otto-duration-short ) var( --otto-ease-move ),
		opacity var( --otto-duration-short ) var( --otto-ease-move );
}

.line-toggle:hover {
	border-color: var( --otto-amber );
}

.line-toggle--locked {
	cursor: default;
	border-style: dashed;
}

.line-toggle__lock {
	display: grid;
	place-items: center;
	color: var( --otto-amber );
}

.line-toggle__input {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var( --otto-amber-deep );
	cursor: pointer;
}

.line-toggle__body {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-2xs );
}

.line-toggle__name {
	font-weight: 600;
}

.line-toggle__note {
	font-size: var( --otto-size-small );
	color: var( --otto-panel-ink-soft );
}

.line-toggle__amount {
	font-family: var( --otto-font-data );
	font-variant-numeric: tabular-nums;
}

/* A declined line stays on screen, struck through and dimmed, so the visitor
   can see what they turned off and put it back. Removing the row instead would
   make the list jump under the pointer. */
.line-toggle:has( .line-toggle__input:checked ) {
	opacity: 0.45;
}

.line-toggle:has( .line-toggle__input:checked ) .line-toggle__amount {
	text-decoration: line-through;
}

.line-toggle:has( .line-toggle__input:focus-visible ) {
	outline: 2px solid var( --otto-amber );
	outline-offset: 3px;
}

/* The fleet stepper's readout is a real number input, so it can be typed into
   and validated, not just nudged. The spinners come off because the two
   buttons either side already do that job. */
.stepper__value {
	width: 5rem;
	padding: var( --otto-space-2xs );
	border: 1px solid transparent;
	border-radius: var( --otto-radius-xs );
	background: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.stepper__value::-webkit-outer-spin-button,
.stepper__value::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.stepper__value:focus-visible {
	border-color: var( --otto-amber-deep );
	outline: none;
}

/* Single product, rendered against Fire_Product. */
.product {
	display: grid;
	grid-template-columns: minmax( 0, 2fr ) minmax( 0, 3fr );
	gap: var( --otto-space-2xl );
	align-items: start;
}

@media ( max-width: 52rem ) {
	.product {
		grid-template-columns: minmax( 0, 1fr );
	}
}

.product__media {
	overflow: hidden;
	border: 1px solid var( --otto-rule );
	border-radius: var( --otto-radius-md );
	background: var( --otto-paper-raised );
}

.product__image {
	width: 100%;
	height: auto;
}

/* A coverage line has no photograph and should not get a stock one. The first
   letter of its name on the paper ground reads as a monogram, not as a missing
   image. */
.product__glyph {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	font-family: var( --otto-font-display );
	font-size: 6rem;
	font-weight: 700;
	color: var( --otto-amber );
	background: var( --otto-paper-sunk );
}

.product__detail {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-md );
	align-items: flex-start;
}

.product__price {
	display: flex;
	align-items: baseline;
	gap: var( --otto-space-sm );
	font-family: var( --otto-font-data );
	font-variant-numeric: tabular-nums;
}

.product__price-amount {
	font-size: 2.5rem;
	font-weight: 600;
	letter-spacing: var( --otto-tracking-tight );
}

.product__price-currency,
.product-card__price-currency {
	font-size: var( --otto-size-small );
	color: var( --otto-ink-faint );
}

/* Product card, on the shop archive. */
.product-card {
	border: 1px solid var( --otto-rule );
	border-radius: var( --otto-radius-md );
	background: var( --otto-paper-raised );
	transition: border-color var( --otto-duration-short ) var( --otto-ease-move ),
		transform var( --otto-duration-short ) var( --otto-ease-enter );
}

.product-card:hover {
	border-color: var( --otto-amber );
	transform: translateY( -2px );
}

.product-card__link {
	display: flex;
	flex-direction: column;
	gap: var( --otto-space-sm );
	height: 100%;
	padding: var( --otto-space-lg );
}

.product-card__name {
	font-family: var( --otto-font-display );
	font-size: var( --otto-size-h4 );
	font-weight: 700;
	letter-spacing: var( --otto-tracking-tight );
}

.product-card__body {
	font-size: var( --otto-size-small );
	line-height: 1.5;
	color: var( --otto-ink-soft );
}

.product-card__price {
	display: flex;
	align-items: baseline;
	gap: var( --otto-space-xs );
	margin-top: auto;
	padding-top: var( --otto-space-sm );
	border-top: 1px solid var( --otto-rule );
	font-family: var( --otto-font-data );
	font-variant-numeric: tabular-nums;
}

.product-card__price-amount {
	font-size: var( --otto-size-h4 );
	font-weight: 600;
}

/* The hero's sample policy gets a link to the wizard, which the mock did not
   have: on the mock the whole panel was decorative. */
.quote-preview__cta {
	display: inline-block;
	margin-top: var( --otto-space-md );
	font-size: var( --otto-size-small );
	font-weight: 600;
	color: var( --otto-amber-deep );
}

.notice--error {
	background: var( --otto-risk-wash );
	border-left-color: var( --otto-risk );
}

.notice--error .dot {
	background: var( --otto-risk );
}

/* Editor content. Anything typed into a page lands here, so the block markup
   WordPress emits needs a home even though the theme's own pages are hand
   built. */
.entry {
	max-width: var( --otto-measure );
}

/* Shop pages lay out their own grid at the plugin's widths, so the reading
   measure comes off. */
.entry--wide {
	max-width: none;
}

.entry > * + * {
	margin-top: var( --otto-space-md );
}

.entry h2 {
	margin-top: var( --otto-space-xl );
	font-size: var( --otto-size-h2 );
}

.entry h3 {
	margin-top: var( --otto-space-lg );
	font-size: var( --otto-size-h3 );
}

.entry a {
	color: var( --otto-amber-deep );
}

.entry ul,
.entry ol {
	padding-left: var( --otto-space-lg );
}

.entry blockquote {
	margin: 0;
	padding-left: var( --otto-space-lg );
	border-left: 3px solid var( --otto-amber );
	color: var( --otto-ink-soft );
}

.entry code {
	font-family: var( --otto-font-mono );
	font-size: 0.9em;
}

.entry img {
	height: auto;
	border-radius: var( --otto-radius-sm );
}

.page-links {
	display: flex;
	gap: var( --otto-space-sm );
	margin-top: var( --otto-space-lg );
}

/* WordPress core output classes. Required for a theme to behave correctly with
   content the editor produces, whatever the theme's own templates do. */
.alignleft {
	float: left;
	margin: 0 var( --otto-space-lg ) var( --otto-space-md ) 0;
}

.alignright {
	float: right;
	margin: 0 0 var( --otto-space-md ) var( --otto-space-lg );
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.entry .alignwide {
	max-width: var( --otto-container );
	margin-inline: calc( 50% - 50vw );
	margin-inline: calc( ( var( --otto-measure ) - var( --otto-container ) ) / 2 );
}

/* Scoped to .entry so it can never reach a plugin block wrapper rendered
   outside editor content. Fire Shop's seeded pages carry .alignfull on the
   cart, checkout and account blocks, and those must not break out. */
.entry .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc( 50% - 50vw );
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	font-size: var( --otto-size-small );
	color: var( --otto-ink-faint );
	text-align: center;
}

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

.screen-reader-text:focus {
	z-index: var( --otto-z-toast );
	top: var( --otto-space-md );
	left: var( --otto-space-md );
	width: auto;
	height: auto;
	padding: var( --otto-space-sm ) var( --otto-space-md );
	clip-path: none;
	background: var( --otto-ink );
	color: var( --otto-panel-ink );
	border-radius: var( --otto-radius-sm );
}

/* ==========================================================================
   21  Motion preferences
   ========================================================================== */

@media ( prefers-reduced-motion: reduce ) {
	:root {
		--otto-duration-micro: 0ms;
		--otto-duration-short: 0ms;
		--otto-duration-medium: 0ms;
		--otto-duration-long: 0ms;
	}

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}