/*
 * wapiconnect.net — design system "Kuwait Time · بتوقيت الكويت".
 * Ink on white, a cool mist for reading, the sun (saffron) for the store's day and the sea (deep blue) for trust.
 * One stylesheet for both languages; page groups add one file each in wapi-assets/css/ (loaded after this one).
 * Logical properties everywhere (inline-start/end, block-start/end), so RTL and LTR share every rule. The only
 * physical coordinates are crop and pin positions inside a screenshot (.w-shot__crop > img, .w-pin): they are
 * pixel positions in a picture, which does not mirror. Components and markup: docs/COMPONENTS.md.
 */

/* ---------- Fonts (self-hosted, SIL OFL 1.1; licences beside the files) ----------
   Alexandria draws a final yeh without its dots before «؟». U+061F is left out of its Arabic range on purpose,
   so «؟» falls through to Readex Pro and every «طلبي؟» keeps its dots. */
@font-face { font-family: "Alexandria"; src: url(wapi-assets/fonts/alexandria-arabic.woff2) format("woff2"); font-weight: 200 900; font-display: swap;
	unicode-range: U+0600-061E, U+0620-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Alexandria"; src: url(wapi-assets/fonts/alexandria-latin.woff2) format("woff2"); font-weight: 200 900; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex Pro"; src: url(wapi-assets/fonts/readex-pro-arabic.woff2) format("woff2"); font-weight: 200 700; font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Readex Pro"; src: url(wapi-assets/fonts/readex-pro-latin.woff2) format("woff2"); font-weight: 200 700; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; src: url(wapi-assets/fonts/schibsted-grotesk-latin.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
/* Fallback faces with the metrics of the web fonts, for the moment before a font arrives (or if it never does): a local
   Arial (Liberation Sans on Linux), Roboto (Android) or DejaVu Sans, scaled and given the web font's ascent and descent.
   Arabic pages: the space between Arabic words and every Latin letter come from the Latin part of Alexandria / Readex Pro
   (the Arabic parts do not hold U+0020), so their stand-in is scaled to the same space width. English: Schibsted
   Grotesk's stand-in is scaled to the same text width. Each stand-in covers exactly the Latin range of its web font, so
   it never draws a character the web font leaves to the next font (Arabic letters, RLM, a check mark).
   Measured on the text of content/ (finish round, 2026-10-31). The Latin parts are also preloaded on Arabic pages
   (WAPI_Site::head): until the first font of the list has loaded, Chrome counts 1ch as 0.5em, and every max-inline-size in
   ch (headings, leads) would jump when it arrives. */
@font-face { font-family: "Alexandria FB A"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); size-adjust: 97.12%; ascent-override: 99.67%; descent-override: 25.84%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alexandria FB R"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 108.87%; ascent-override: 88.91%; descent-override: 23.05%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alexandria FB D"; src: local("DejaVu Sans"), local("DejaVuSans"); size-adjust: 84.91%; ascent-override: 114.0%; descent-override: 29.56%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex FB A"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); font-weight: 100 549; size-adjust: 100.72%; ascent-override: 99.29%; descent-override: 24.82%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex FB A"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 550 900; size-adjust: 110.07%; ascent-override: 90.85%; descent-override: 22.71%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex FB R"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 549; size-adjust: 112.9%; ascent-override: 88.57%; descent-override: 22.14%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex FB R"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 550 900; size-adjust: 122.89%; ascent-override: 81.37%; descent-override: 20.34%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex FB D"; src: local("DejaVu Sans"), local("DejaVuSans"); font-weight: 100 549; size-adjust: 88.05%; ascent-override: 113.57%; descent-override: 28.39%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex FB D"; src: local("DejaVu Sans Bold"), local("DejaVuSans-Bold"); font-weight: 550 900; size-adjust: 87.93%; ascent-override: 113.73%; descent-override: 28.43%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted FB A"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); font-weight: 100 549; size-adjust: 103.91%; ascent-override: 94.02%; descent-override: 24.83%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted FB A"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 550 900; size-adjust: 99.27%; ascent-override: 98.42%; descent-override: 25.99%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted FB R"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 549; size-adjust: 104.45%; ascent-override: 93.54%; descent-override: 24.7%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted FB R"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 550 900; size-adjust: 105.88%; ascent-override: 92.27%; descent-override: 24.37%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted FB D"; src: local("DejaVu Sans"), local("DejaVuSans"); font-weight: 100 549; size-adjust: 91.36%; ascent-override: 106.94%; descent-override: 28.24%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted FB D"; src: local("DejaVu Sans Bold"), local("DejaVuSans-Bold"); font-weight: 550 900; size-adjust: 83.11%; ascent-override: 117.55%; descent-override: 31.04%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
	/* Ground */
	--w-paper: #FFFFFF;        /* ink 18.5:1 */
	--w-mist: #EEF2F3;         /* alternate bands; ink 16.4:1, ink-2 8.7:1 */
	--w-stone: #D3DBDE;        /* the field under screenshots outside the sun; ink 13.2:1 */
	/* Ink */
	--w-ink: #0D1517;          /* all running text, primary buttons, pins, focus */
	--w-ink-2: #3A4649;        /* notes and captions only: 9.8:1 on paper, 8.7:1 on mist */
	/* Sun: the store's day. Ink text only, never white text, never sun text on white. */
	--w-sun: #F3B841;          /* ink 10.3:1 */
	--w-sun-2: #F7CB6C;        /* one tone step on the sun; ink 12.1:1 */
	--w-sun-ink: #3B2A05;      /* notes on the sun, 7.7:1 */
	/* Sea: trust, organisations, the footer */
	--w-sea: #0B3B66;          /* white 11.5:1, sun 6.4:1 */
	--w-sea-2: #114A7C;        /* one tone step on the sea; white 9.2:1 */
	--w-on-sea: #FFFFFF;
	--w-on-sea-2: #BCD3E6;     /* secondary text on the sea, 7.4:1 */
	/* The only line in the system: the boundary of text fields (≥3:1 on paper, WCAG 1.4.11) */
	--w-edge: #66767A;

	--w-f-display: "Schibsted Grotesk", "Schibsted FB A", "Schibsted FB R", "Schibsted FB D", system-ui, sans-serif;
	--w-f-body: "Schibsted Grotesk", "Schibsted FB A", "Schibsted FB R", "Schibsted FB D", system-ui, sans-serif;

	--w-s-display: clamp(1.8rem, 0.8rem + 5.1vw, 5.6rem);
	--w-s-pagehead: clamp(1.75rem, 0.55rem + 4.9vw, 5.2rem);
	--w-s-h1: clamp(2rem, 1rem + 3.6vw, 4rem);
	--w-s-h2: clamp(1.75rem, 1.1rem + 2.5vw, 3.35rem);
	--w-s-h3: clamp(1.28rem, 1.1rem + .55vw, 1.6rem);
	--w-s-lead: clamp(1.14rem, 1.05rem + .35vw, 1.375rem);
	--w-s-body: 1.0625rem;     /* 17px */
	--w-s-small: .9375rem;     /* 15px: the floor */

	--w-lh-body: 1.6;
	--w-lh-head: 1.1;
	--w-lh-display: 1.02;
	--w-lh-lead: 1.5;
	--w-track-head: -0.025em;
	--w-track-display: -0.04em;

	--w-wrap: 1320px;
	--w-gut: clamp(16px, 4vw, 48px);
	--w-bleed: calc(-1 * (var(--w-gut) + max(0px, (100vw - var(--w-wrap)) / 2)));
	--w-sec: clamp(96px, 11vw, 168px);
	--w-measure: 68ch;

	--w-ease-out: cubic-bezier(.23, 1, .32, 1);
	--w-ease-io: cubic-bezier(.77, 0, .175, 1);
	--w-ease-soft: cubic-bezier(.33, 1, .68, 1);
	--w-t-press: 140ms;
	--w-t-hover: 180ms;
	--w-t-ui: 260ms;
	--w-dir: 1;

	color-scheme: light;
}
:root[dir="rtl"] { --w-dir: -1; }
:root:lang(ar) {
	--w-f-display: "Alexandria", "Alexandria FB A", "Alexandria FB R", "Alexandria FB D", "Readex Pro", Tahoma, sans-serif;
	--w-f-body: "Readex Pro", "Readex FB A", "Readex FB R", "Readex FB D", Tahoma, sans-serif;
	--w-s-display: clamp(2.3rem, 1.1rem + 4.6vw, 5.4rem);
	--w-s-h2: clamp(1.65rem, 1.1rem + 2.1vw, 3rem);
	--w-s-h3: clamp(1.22rem, 1.08rem + .5vw, 1.5rem);
	--w-lh-body: 1.75;
	--w-lh-head: 1.4;     /* 1.32 let a final yeh of one line touch the dots of the next in Alexandria h2s (finish round) */
	--w-lh-display: 1.44; /* 1.26, then 1.36, still let the dots and marks of one line come close to the next (finish round, 2026-10-31) */
	--w-lh-lead: 1.7;
	--w-track-head: 0;
	--w-track-display: 0;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0; background: var(--w-paper); color: var(--w-ink);
	font-family: var(--w-f-body); font-size: var(--w-s-body); line-height: var(--w-lh-body);
	font-variant-numeric: lining-nums; font-synthesis: none; overflow-x: clip;
	-webkit-font-smoothing: antialiased; caret-color: var(--w-ink);
}
body, button, input, select, textarea { font-family: var(--w-f-body); }
button, input, select, textarea { font-size: var(--w-s-body); line-height: 1.4; }
:lang(ar) * { letter-spacing: 0 !important; text-transform: none !important; }
img, video, svg { max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4 { color: inherit; font-family: var(--w-f-display); font-weight: 600; line-height: var(--w-lh-head); letter-spacing: var(--w-track-head); text-wrap: balance; }
h1 { font-size: var(--w-s-h1); }
h2 { font-size: var(--w-s-h2); }
h3 { font-size: var(--w-s-h3); }
h4 { font-family: var(--w-f-body); font-size: var(--w-s-body); font-weight: 600; letter-spacing: 0; }
p, li { text-wrap: pretty; }
strong, b { font-weight: 600; }
/* Marketing pages, header and footer: components own their spacing (GeneratePress margins off). */
:where(.wapi-landing .entry-content, .w-header, .w-footer) :is(p, ul, ol, dl, dd, figure, h1, h2, h3, h4, blockquote) { margin: 0; }
:where(.wapi-landing .entry-content, .w-header, .w-footer) :is(ul, ol) { padding: 0; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .3em; }
:where(#main, main) :is(p, li, dd, td, figcaption, summary, .w-note) a:not([class]) { text-decoration-line: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); font-weight: 600; }
:where(#main, main) :is(p, li, dd, td, figcaption, summary, .w-note) a:not([class]):is(:hover, :focus-visible) { text-decoration-color: currentColor; text-decoration-thickness: .1em; }
a:is(:hover, :focus, :active) { color: inherit; }
bdi, time, .w-num, .w-ltr { font-variant-numeric: tabular-nums; }
bdi:not([dir="auto"]), .w-ltr { direction: ltr; unicode-bidi: isolate; }
code, kbd { font-family: inherit; font-size: .94em; background: rgba(13, 21, 23, .07); color: inherit; padding: .05em .35em; direction: ltr; unicode-bidi: isolate; }
pre { direction: ltr; text-align: left; background: var(--w-ink); color: #E6EEF0; padding: 16px 18px; overflow-x: auto; font-size: var(--w-s-small); line-height: 1.6; border-radius: 0; scrollbar-color: var(--w-on-sea-2) var(--w-ink); }
/* Read mode: code, ids and URLs are the one place for the system mono face. */
.w-prose :is(code, kbd), pre, pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre code { background: none; color: inherit; padding: 0; }
::selection { background: var(--w-sun); color: var(--w-ink); }
:focus-visible { outline: 3px solid var(--w-ink); outline-offset: 3px; }
.w-sea :focus-visible, .w-section--dark :focus-visible { outline-color: var(--w-sun); }
.w-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link.screen-reader-text:focus { background: var(--w-ink); color: #fff; inset-inline-start: 12px; top: 12px; padding: 12px 16px; font-size: var(--w-s-small); border-radius: 0; box-shadow: none; }
[hidden] { display: none !important; }

/* GeneratePress: marketing pages run edge to edge, text pages get a readable column. */
.site-content, .inside-article { padding: 0 !important; }
.separate-containers .inside-article, .one-container .site-content, .one-container .container { background: transparent; }
.site.grid-container, .site-content.grid-container { max-width: none; }
.site-content .content-area { width: 100%; float: none; margin: 0; }
.site-content { display: block; }
.entry-content:not(:first-child) { margin-top: 0; }
.wapi-landing .entry-header, .wapi-landing .page-header { display: none; }
.wapi-landing .site-main { margin: 0 !important; }
.wapi-landing .entry-content > * { margin-block: 0; }
.wapi-text .site-main { margin: 0 auto; max-width: var(--w-wrap); padding: clamp(32px, 5vw, 64px) var(--w-gut) var(--w-sec); }
.wapi-text .entry-header { max-width: var(--w-measure); margin-inline: auto; }
.wapi-text :is(.entry-title, .page-title) { font-family: var(--w-f-display); font-size: var(--w-s-h1); font-weight: 650; line-height: var(--w-lh-display); letter-spacing: var(--w-track-display); margin: 0 0 clamp(24px, 3vw, 40px); }
.wapi-text .entry-content, .wapi-text .page-content { max-width: var(--w-measure); margin-inline: auto; }
.wapi-text .entry-content :is(h2, h3) { margin-block: 1.6em .5em; }
.wapi-text .entry-content h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.wapi-text .entry-content h3 { font-size: var(--w-s-h3); }
.widget-area, .sidebar, .site-info { display: none !important; }
.site-footer { background: var(--w-sea); }

/* ---------- Type roles ---------- */
.w-display { font-size: var(--w-s-display); line-height: var(--w-lh-display); letter-spacing: var(--w-track-display); font-weight: 650; }
.w-h2 { font-size: var(--w-s-h2); }
.w-h3 { font-size: var(--w-s-h3); }
.w-lead { font-size: var(--w-s-lead); line-height: var(--w-lh-lead); max-inline-size: 38ch; }
:lang(ar) .w-lead { max-inline-size: 42ch; }
.w-small { font-size: var(--w-s-small); }
.w-muted, .w-note-text { color: var(--w-ink-2); }
.w-sea .w-muted, .w-section--dark .w-muted { color: var(--w-on-sea-2); }
.w-sun .w-muted { color: var(--w-sun-ink); }
.w-plan-line { font-weight: 600; }
.w-plan { display: block; font-family: var(--w-f-body); font-size: var(--w-s-small); font-weight: 500; letter-spacing: 0; color: var(--w-ink-2); margin-block-start: 2px; }
.w-sea .w-plan, .w-section--dark .w-plan { color: var(--w-on-sea-2); }
.w-sun .w-plan { color: var(--w-sun-ink); }
.w-center { text-align: start; } /* deprecated: the system is start-aligned */
.w-stack > * + * { margin-block-start: 16px; }
.w-br { display: inline; }

/* ---------- Links and buttons ---------- */
.w-link, .w-arrowlink {
	font-weight: 600; text-decoration-line: underline; text-decoration-thickness: .08em; text-underline-offset: .3em;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	transition: text-decoration-color var(--w-t-hover) ease;
}
.w-arrow { display: inline-block; }
[dir="rtl"] .w-arrow, [dir="rtl"] .w-flip { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
	.w-link:hover { text-decoration-color: currentColor; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	a:hover .w-arrow { transform: translateX(4px); }
	[dir="rtl"] a:hover .w-arrow { transform: scaleX(-1) translateX(4px); }
}
.w-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* GeneratePress paints every <button> grey on hover and focus (button:hover is 0,1,1). Our controls take their
   colours from --w-bg / --w-fg, re-applied here with a higher specificity. */
.w-btn, .w-ev, .w-chip, .w-film__toggle, .w-chapters button, .w-video__play { background-color: var(--w-bg); color: var(--w-fg); }
:is(.w-btn, .w-ev, .w-chip, .w-film__toggle, .w-chapters button, .w-video__play):is(:hover, :focus, :active) { background-color: var(--w-bg); color: var(--w-fg); }
.w-btn {
	--w-bg: var(--w-ink); --w-fg: #fff;
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	min-block-size: 50px; padding: 10px 24px; border: 0; border-radius: 0; cursor: pointer;
	font: 600 var(--w-s-body)/1.25 var(--w-f-body); text-decoration: none; white-space: nowrap;
	transition: background-color var(--w-t-hover) ease, color var(--w-t-hover) ease;
}
.w-btn:active { transform: scale(.97); }
.w-btn svg { inline-size: 18px; block-size: 18px; flex: none; }
.w-btn--primary { --w-bg: var(--w-ink); --w-fg: #fff; }
.w-btn--ghost, .w-btn--quiet { --w-bg: rgba(13, 21, 23, .08); --w-fg: var(--w-ink); }
.w-btn--sun { --w-bg: var(--w-sun); --w-fg: var(--w-ink); }
.w-btn--onsea { --w-bg: rgba(255, 255, 255, .14); --w-fg: #fff; }
.w-btn--onsun { --w-bg: rgba(255, 255, 255, .55); --w-fg: var(--w-ink); }
.w-btn--light { --w-bg: var(--w-ink); --w-fg: #fff; }
.w-btn--outline-light { --w-bg: rgba(13, 21, 23, .08); --w-fg: var(--w-ink); }
.w-btn--link { --w-bg: transparent; --w-fg: inherit; padding-inline: 0; min-block-size: 0; text-decoration-line: underline; text-decoration-thickness: .08em; text-underline-offset: .3em; }
.w-btn--sm { min-block-size: 42px; padding: 8px 16px; font-size: var(--w-s-small); }
.w-btn--block { display: flex; inline-size: 100%; }
/* Legacy dark-band buttons, mapped by their ground */
:is(.w-sea, .w-section--dark) .w-btn--light { --w-bg: var(--w-sun); --w-fg: var(--w-ink); }
:is(.w-sea, .w-section--dark) :is(.w-btn--outline-light, .w-btn--ghost, .w-btn--quiet) { --w-bg: rgba(255, 255, 255, .14); --w-fg: #fff; }
.w-sun :is(.w-btn--outline-light, .w-btn--ghost, .w-btn--quiet) { --w-bg: rgba(255, 255, 255, .55); --w-fg: var(--w-ink); }
@media (hover: hover) and (pointer: fine) {
	.w-btn:is(.w-btn--primary, .w-btn--light):hover { --w-bg: #26363B; }
	.w-btn:is(.w-btn--ghost, .w-btn--quiet, .w-btn--outline-light):hover { --w-bg: rgba(13, 21, 23, .14); }
	.w-btn.w-btn--sun:hover, :is(.w-sea, .w-section--dark) .w-btn.w-btn--light:hover { --w-bg: #F7C760; }
	.w-btn.w-btn--onsea:hover, :is(.w-sea, .w-section--dark) .w-btn:is(.w-btn--outline-light, .w-btn--ghost, .w-btn--quiet):hover { --w-bg: rgba(255, 255, 255, .22); }
	.w-btn.w-btn--onsun:hover, .w-sun .w-btn:is(.w-btn--outline-light, .w-btn--ghost, .w-btn--quiet):hover { --w-bg: rgba(255, 255, 255, .8); }
}
.w-tel { font-weight: 600; text-decoration: none; white-space: nowrap; }
.w-tel bdi { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .w-tel:hover bdi { text-decoration: underline; text-underline-offset: .3em; } }

/* ---------- Header ---------- */
.w-header { position: relative; z-index: 20; background: var(--w-paper); }
.w-header__bar { display: flex; align-items: center; gap: 28px; min-block-size: 76px; }
.w-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; font-weight: 700; font-size: var(--w-s-body); white-space: nowrap; }
.w-brand:is(:hover, :focus) { color: inherit; }
.w-brand svg { inline-size: 34px; block-size: 34px; flex: none; }
.w-brand__name { font-family: "Schibsted Grotesk", var(--w-f-display); font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.w-nav { margin-inline-start: auto; }
.w-nav__list { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.w-nav__list a, .w-menu__panel .w-nav__list a { display: block; text-decoration: none; font-weight: 500; padding-block: 10px; white-space: nowrap; text-underline-offset: .45em; text-decoration-thickness: 2px; }
.w-nav__list :is(.current-menu-item, .current-page-ancestor, .current-menu-ancestor) > a, .w-nav__list a[aria-current] { text-decoration-line: underline; }
@media (hover: hover) and (pointer: fine) { .w-nav__list a:hover { text-decoration-line: underline; } }
.w-header__end { display: flex; align-items: center; gap: 20px; }
.w-lang { font-weight: 500; text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .w-lang:hover { text-decoration: underline; } }
.w-menu { display: none; margin-inline-start: auto; }
.w-menu summary { list-style: none; cursor: pointer; min-block-size: 48px; padding: 12px 18px; background: rgba(13, 21, 23, .08); font-weight: 600; }
.w-menu summary::-webkit-details-marker { display: none; }
.w-menu[open] summary { background: var(--w-ink); color: #fff; }
.w-menu__panel {
	position: absolute; inset-inline: var(--w-gut); top: 72px; display: grid; gap: 4px; padding: 14px; background: var(--w-mist);
	transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) { .w-menu__panel { animation: w-menu var(--w-t-ui) var(--w-ease-out); } }
.w-menu:not([open]) .w-menu__panel { display: none; }
.w-menu__panel .w-nav__list { display: grid; gap: 0; }
.w-menu__panel .w-nav__list a, .w-menu__panel .w-lang { padding: 12px 10px; }
.w-menu__panel .w-btn { margin-block-start: 8px; }
@keyframes w-menu { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.admin-bar .w-menu__panel { top: 72px; }

/* ---------- Layout and grounds ---------- */
.w-wrap { max-width: var(--w-wrap); margin-inline: auto; padding-inline: var(--w-gut); }
.w-narrow { max-width: 760px; margin-inline: auto; }
.w-wrap.w-narrow { max-width: calc(760px + 2 * var(--w-gut)); }
.w-section { padding-block: var(--w-sec); }
.w-section--tight { padding-block: clamp(40px, 5vw, 64px); }
/* Two paper sections in a row do not double their space. */
.w-section:not(.w-section--white, .w-section--mist, .w-section--tint, .w-section--sand, .w-section--dark, .w-sea, .w-sun, .w-section--tight) + .w-section:not(.w-section--white, .w-section--mist, .w-section--tint, .w-section--sand, .w-section--dark, .w-sea, .w-sun, .w-section--tight) { padding-block-start: calc(var(--w-sec) * .4); }
.w-section--white, .w-section--mist, .w-section--tint, .w-section--sand, .w-mist { background: var(--w-mist); }
.w-sea, .w-section--dark { background: var(--w-sea); color: var(--w-on-sea); }
.w-sun { background: var(--w-sun); color: var(--w-ink); }
:is(.w-sea, .w-section--dark) ::selection { background: var(--w-sun); color: var(--w-ink); }
:is(.w-sea, .w-section--dark) :is(p, li, dd) { color: var(--w-on-sea); }
.w-field { background: var(--w-stone); position: relative; }
.w-field--bleed { margin-inline-end: var(--w-bleed); padding: clamp(24px, 3vw, 48px); padding-inline-end: var(--w-gut); }

/* Section head: heading on the start side, its sentence on the end side, both on the same baseline. */
.w-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px clamp(32px, 6vw, 96px); align-items: end; margin-block-end: clamp(44px, 5vw, 72px); }
.w-head > * { grid-column: 2; }
.w-head > :is(h2, h3, .w-h2) { grid-column: 1; grid-row: 1; max-inline-size: 22ch; }
.w-head > .w-eyebrow { grid-column: 1; grid-row: 2; align-self: start; }
.w-head > p { font-size: var(--w-s-lead); line-height: var(--w-lh-lead); }
.w-head.w-head--stack, .w-head.w-head--center, .w-narrow .w-head { grid-template-columns: minmax(0, 1fr); max-inline-size: 60ch; align-items: start; }
:is(.w-head--stack, .w-head--center, .w-narrow .w-head) > * { grid-column: 1; grid-row: auto; }
:is(.w-head--stack, .w-head--center, .w-narrow .w-head) > :is(h2, h3, .w-h2) { grid-row: auto; max-inline-size: none; }
.w-head > p + p { font-size: var(--w-s-body); }
/* Labels above headings are not part of this system: an old eyebrow sits under its heading as a plain line. */
.w-eyebrow { display: block; font-weight: 600; font-size: var(--w-s-body); color: inherit; }
.w-more { margin-block-start: clamp(28px, 3vw, 48px); }

/* Grids of items */
.w-grid { display: grid; gap: 44px clamp(28px, 4vw, 56px); }
.w-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.w-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.w-grid + .w-grid { margin-block-start: clamp(40px, 5vw, 64px); }

/* Items (was cards): no box, no icon. Heading first, then the plan line, the text and the link. */
.w-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.w-card__icon { display: none !important; }
.w-card > :is(h3, h4) { order: -2; font-size: var(--w-s-h3); }
.w-card > .w-card__plan { order: -1; }
.w-card__plan { display: block; font-size: var(--w-s-small); font-weight: 500; color: var(--w-ink-2); }
:is(.w-sea, .w-section--dark) .w-card__plan { color: var(--w-on-sea-2); }
.w-card p { color: inherit; }
.w-card__more { margin-block-start: 4px; font-weight: 600; text-decoration-line: underline; text-underline-offset: .3em; text-decoration-thickness: .08em; }
.w-card--link { text-decoration: none; color: inherit; }
.w-card--link :is(h3, h4) { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; text-decoration-color: transparent; transition: text-decoration-color var(--w-t-hover) ease; }
.w-card--link:focus-visible :is(h3, h4) { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .w-card--link:hover :is(h3, h4) { text-decoration-color: currentColor; } }
/* Feature list: a name, its plan on its own line, a sentence and an optional link */
.w-feats { list-style: none; display: grid; gap: 26px; margin-block-start: 36px; padding: 0; }
.w-feats > li { display: grid; gap: 4px; align-content: start; }
.w-feats :is(h3, h4) { font-family: var(--w-f-body); font-size: var(--w-s-body); font-weight: 600; letter-spacing: 0; }
.w-feats .w-link { justify-self: start; margin-block-start: 4px; }
.w-feats--row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); margin-block-start: 48px; }
.w-feats--row.w-feats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Check list with a drawn tick (head fields) */
.w-checks { list-style: none; display: grid; gap: 14px; padding: 0; }
.w-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: baseline; }
.w-checks svg { inline-size: 18px; block-size: 18px; translate: 0 3px; color: currentColor; }
/* Plain lists: a small sun square with an ink outline */
.w-list { list-style: none; display: grid; gap: 14px; padding: 0; margin-block-start: 0; }
.w-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
.w-list li::before { content: ""; inline-size: 10px; block-size: 10px; background: var(--w-sun); margin-block-start: .62em; outline: 2px solid var(--w-ink); outline-offset: -2px; }
:is(.w-sea, .w-section--dark) .w-list li::before { outline-color: var(--w-sun); }
.w-sun .w-list li::before { background: var(--w-paper); }
.w-list--no li::before { background: transparent; outline: 0; block-size: 2px; inline-size: 12px; background-color: var(--w-ink-2); margin-block-start: .85em; }
.w-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(28px, 4vw, 64px); }
/* Points: a short title and a sentence, in two columns */
.w-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin: 0; }
.w-points dt { font-family: var(--w-f-display); font-weight: 600; font-size: var(--w-s-h3); line-height: var(--w-lh-head); margin-block-end: 6px; }
.w-points dd { margin: 0; }

/* ---------- Screenshot crops and annotation pins ----------
   --sw --sh: the picture's size; --x --y --w --h: the crop, all in source pixels. The crop keeps its own ratio.
   Positions inside the picture are physical (left/top) on purpose: a screenshot does not mirror. */
.w-shot { margin: 0; position: relative; min-width: 0; }
.w-shot__crop {
	--sw: 1600; --sh: 1000; --x: 0; --y: 0; --w: var(--sw); --h: var(--sh);
	position: relative; overflow: hidden; aspect-ratio: calc(var(--w) / var(--h)); background: #F4F5F7;
}
.w-shot__crop > img, .w-shot__crop > video {
	position: absolute; max-inline-size: none; inline-size: auto; block-size: auto; display: block;
	width: calc(var(--sw) / var(--w) * 100%);
	left: calc(var(--x) / var(--w) * -100%);
	top: calc(var(--y) / var(--h) * -100%);
}
.w-pin { position: absolute; z-index: 2; left: calc((var(--px) - var(--x)) / var(--w) * 100%); top: calc((var(--py) - var(--y)) / var(--h) * 100%); inline-size: 0; block-size: 0; }
.w-pin__n {
	position: absolute; translate: -50% -50%; inline-size: 28px; block-size: 28px; border-radius: 50%;
	display: grid; place-items: center; background: var(--w-ink); color: #fff; font: 700 var(--w-s-small)/1 var(--w-f-body);
	outline: 3px solid #fff;
}
/* Arabic callouts: the number sits on its anchor point. Without an explicit inset the absolutely placed circle keeps its
   static position, which in RTL is the right edge of the zero-width pin, so the circle drifted away from the anchor. */
.w-pin__n { left: 0; }
.w-pin__l {
	position: absolute; top: 0; translate: 0 -50%; white-space: nowrap; background: var(--w-ink); color: #fff;
	font-size: var(--w-s-small); font-weight: 500; line-height: 1.35; padding: 7px 12px;
}
:lang(ar) .w-pin__l { line-height: 1.55; padding-block: 5px; }
.w-pin--r .w-pin__l { left: 24px; }
.w-pin--l .w-pin__l { right: 24px; }
.w-pin--u .w-pin__l { left: 0; top: auto; bottom: 24px; translate: -50% 0; }
.w-pin--d .w-pin__l { left: 0; top: 24px; translate: -50% 0; }
.w-pin--ul .w-pin__l { right: 0; top: auto; bottom: 24px; translate: 0 0; }
:is(.w-sea, .w-section--dark) .w-pin__n { background: var(--w-sun); color: var(--w-ink); outline-color: var(--w-sea); }
.w-legend { list-style: none; display: none; gap: 10px; margin-block-start: 18px; padding: 0; }
.w-legend li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: baseline; font-size: var(--w-s-small); }
.w-legend b { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--w-ink); color: #fff; font-size: var(--w-s-small); }
:is(.w-sea, .w-section--dark) .w-legend b { background: var(--w-sun); color: var(--w-ink); }
.w-cap { margin-block-start: 12px; font-size: var(--w-s-small); color: var(--w-ink-2); }
.w-sun .w-cap, .w-day .w-cap { color: var(--w-sun-ink); }
:is(.w-sea, .w-section--dark) .w-cap { color: var(--w-on-sea-2); }
/* A screenshot on its own (docs, how-to steps) sits on a stone pad; inside fields and stages it has none. */
:is(.w-howto, .w-prose, .w-doc__main, .w-steps, .w-note) .w-shot:not(.w-shot--phone, .w-shot--true) > .w-shot__crop { outline: clamp(10px, 1.4vw, 20px) solid var(--w-stone); margin: clamp(10px, 1.4vw, 20px); }
:is(.w-howto, .w-prose, .w-doc__main) .w-shot { margin-block: 20px; }

/* ---------- Explainer pictures: one picture, one point, readable ----------
   A close-up ([wapi_shot dpr="2"], one part of a plugin screen taken at 2x) is shown at its real size, a little larger on
   wide screens, and only smaller when the column is (phones keep it at 11 px text or more). Never layered over another
   picture. .w-sides puts two views next to each other, each with a short label saying whose view it is (what the customer
   gets on WhatsApp / what you see in WordPress) and a caption saying what it shows; stacked under 761px. */
.w-shot--true { --w-zoom: 1; }
.w-shot--true > .w-shot__crop { inline-size: min(100%, calc(var(--w) / var(--dpr, 1) * var(--w-zoom) * 1px)); background: transparent; }
@media (min-width: 1100px) { .w-shot--true { --w-zoom: 1.15; } }
.w-view { display: flex; align-items: baseline; gap: 10px; margin-block-end: 14px; font-weight: 600; line-height: 1.4; max-inline-size: 34ch; }
.w-view::before { content: ""; flex: none; inline-size: 12px; block-size: 12px; background: var(--w-sun); outline: 2px solid var(--w-ink); outline-offset: -2px; translate: 0 1px; }
.w-sun .w-view::before { background: var(--w-paper); }
.w-shot--true .w-cap { max-inline-size: 44ch; }
/* fade="1": a close-up cut inside a longer card (the card goes on below) fades out instead of ending on a hard cut */
.w-shot--fade > .w-shot__crop { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 88px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 88px), transparent); }
/* edge="1": an opaque close-up (the inbox app, a white admin card) keeps a 1px stone edge on a white section: the picture's
   own edge, not a box (square, no shadow), drawn outside it so the picture stays at its real size */
.w-shot--true.w-shot--edge > .w-shot__crop { outline: 1px solid var(--w-stone); outline-offset: 0; }
/* a phone capture at 2x keeps its real size even with frame="phone" (no 300px phone cap) */
.w-shot.w-shot--true.w-shot--phone { max-inline-size: none; margin-inline: 0; }
.w-shot--true.w-shot--phone > .w-phone, .w-film--true.w-film--phone > .w-phone { inline-size: min(100%, calc(var(--tw, 300) * var(--w-zoom) * 1px + 2 * clamp(5px, .6vw, 8px))); }
/* a loop recorded at 2x ([wapi_loop dpr="2"]): true size, like a close-up */
.w-film--true { --w-zoom: 1; }
.w-film--true > .w-shot__crop { inline-size: min(100%, calc(var(--w) / var(--dpr, 1) * var(--w-zoom) * 1px)); background: transparent; }
@media (min-width: 1100px) { .w-film--true { --w-zoom: 1.15; } }
.w-film--true .w-cap { max-inline-size: 44ch; }
.w-film.w-film--true.w-film--phone { max-inline-size: none; margin-inline: 0; }
/* two close-ups in one media column (what the customer gets, then what you choose), one under the other */
.w-split__media > .w-shot--true + .w-shot--true { margin-block-start: clamp(32px, 3vw, 44px); }
.w-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(28px, 4vw, 64px); align-items: start; }
.w-sidesfield { padding-block: clamp(28px, 3.4vw, 56px); margin-block: 40px 44px; }
h3.w-view, h4.w-view { font-family: var(--w-f-body); font-size: var(--w-s-body); letter-spacing: 0; }
.w-sides > div > .w-sample + .w-list { margin-block-start: 24px; }
/* a column of real text (.w-sample) next to a picture: both start on the same line, under their labels */
.w-sides > * > :first-child, .w-sides .w-view + .w-sample { margin-block-start: 0; }
.w-sides > div > .w-sample { inline-size: 100%; }
.w-sample--line + .w-list { margin-block-start: 24px; }
.w-headfield__comp > .w-sides { padding-block-start: 8px; }
/* Home group: the head, three short steps, the two views on a stone band, then the note and the related features */
.w-steps.w-fgroup__steps { margin-block-start: clamp(40px, 4vw, 56px); }
.w-steps h4 { font-family: var(--w-f-display); font-size: var(--w-s-h3); }
.w-fgroup__note { max-inline-size: 62ch; }
/* "How it works" on a feature page: the steps, then step 1 in detail beside its close-up */
.w-howfig { margin-block-start: clamp(56px, 6vw, 88px); }
.w-split.w-howfig { align-items: start; }
.w-split.w-howfig h3 { font-size: var(--w-s-h3); max-inline-size: none; }
.w-howfig .w-steps--list { gap: 16px; padding-inline-start: 1.6em; }
.w-howfig .w-steps--list .w-list { margin-block-start: 10px; gap: 6px; }
.w-howfig + .w-note { margin-block-start: clamp(40px, 4vw, 56px); max-inline-size: 76ch; }
@media (max-width: 1020px) {
	/* phones: the close-up gets the whole column (the stone pad narrows to the gutter), so its text stays at 11 px or more */
	.w-split__media:has(> .w-shot--true) { padding-inline: var(--w-gut); }
}
@media (max-width: 760px) {
	.w-sides { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
/* Phones (finish round, 2026-10-31): a close-up wider than the column grows into the page gutters, up to the screen's
   edges, so its text reads at 12.5-13 px at 390 (a 780 px capture fills 390 px at its real size). The column itself starts
   one gutter in from the screen; a step of .w-howto first gives up its number indent (--w-how-in: the picture starts under
   the number) and its caption takes the indent back, so the text stays in the step's column, clear of the number and of
   the steps' progress line (motion/guide.css). Narrower close-ups keep their real size inside the column. Captions and
   labels stay in the column. (.w-howto twice: above the docs' "figure at most 100%" rule in d-docs.css.) */
@media (max-width: 600px) {
	.w-howto.w-howto > li > :is(.w-shot--true, .w-film--true) { margin-inline-start: calc(-1 * var(--w-how-in)); max-inline-size: calc(100% + var(--w-how-in)); }
	.w-howto > li > :is(.w-shot--true, .w-film--true) > :is(.w-cap, figcaption) { padding-inline-start: var(--w-how-in); }
	/* [data-dpr][style]: also over the docs' "crop at most 100%" rule (d-docs.css) */
	:is(.w-shot--true, .w-film--true) > .w-shot__crop[data-dpr][style] {
		--w-real: calc(var(--w) / var(--dpr, 1) * 1px);
		inline-size: min(var(--w-real), calc(100% + 2 * var(--w-gut)));
		max-inline-size: none;
		margin-inline-start: calc(-1 * clamp(0px, (var(--w-real) - 100%) / 2, var(--w-gut)));
	}
	/* a figure with nothing beside it: the 1px edge of an opaque close-up is drawn inside, so it is not cut by the screen */
	.w-shot--true.w-shot--edge > .w-shot__crop { outline-offset: -1px; }
}
/* Fix round (group A, 2026-10-31): a labelled picture that follows text or another picture starts a new block, so its
   label is never read as the last line of the caption above; a second block inside a section (cards, then a split)
   gets the room of a sub-section, never glued to the text above it. */
:where(p, ul, ol, .w-shot, .w-film, figure) + :is(.w-shot, .w-film):has(> .w-view):where(:not(.w-sides > *)) { margin-block-start: clamp(40px, 4vw, 56px); }
.w-headfield .w-lead + p { margin-block-start: 16px; }
/* a web address inside a message sample keeps the font's own spacing: tabular figures also widen the "." (yourstore . com) */
.w-sample bdi { font-variant-numeric: normal; }
.w-wrap > :is(.w-grid, .w-list, .w-steps, .w-feats, ul, ol) + .w-split { margin-block-start: clamp(56px, 6vw, 88px); }
/* where the screen is, said under the intro of a feature page head (it used to float under the pictures) */
.w-headfield__where { margin-block-start: 14px; font-size: var(--w-s-small); color: var(--w-sun-ink); max-inline-size: 52ch; }

/* Phone: a plain ink rounded rectangle, no vendor bezel */
.w-phone { background: var(--w-ink); padding: clamp(5px, .6vw, 8px); border-radius: clamp(24px, 2.6vw, 38px); }
.w-phone .w-shot__crop { border-radius: clamp(19px, 2.1vw, 31px); background: #fff; }
.w-shot--phone { max-inline-size: 300px; margin-inline: auto; }
:is(.w-phonebox, .w-phones, .w-stage, .w-comp, .w-headfield__comp) .w-shot--phone, .w-shot--phone.w-phonebox { max-inline-size: none; margin-inline: 0; }

/* Film: one short real clip, plays only while visible, with a play/pause button */
.w-film { margin: 0; position: relative; min-width: 0; }
.w-film video { display: block; inline-size: 100%; background: #F4F5F7; }
.w-film .w-shot__crop > video { inline-size: calc(var(--sw) / var(--w) * 100%); } /* a cropped loop keeps its crop (x, w) */
.w-film--phone { max-inline-size: 300px; margin-inline: auto; }
:is(.w-phones, .w-stage, .w-comp) .w-film--phone { max-inline-size: none; margin-inline: 0; }
.w-film__toggle {
	--w-bg: var(--w-ink); --w-fg: #fff;
	position: absolute; inset-block-end: 12px; inset-inline-start: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
	min-block-size: 40px; padding: 6px 14px; border: 0; border-radius: 0; cursor: pointer;
	font: 500 var(--w-s-small)/1.3 var(--w-f-body);
}
.w-film__toggle:active { transform: scale(.97); }
.w-film__toggle svg { inline-size: 14px; block-size: 14px; }
.w-film--phone .w-film__toggle { inset-block-end: 22px; inset-inline-start: 22px; }
.w-film:has(.w-cap) .w-film__toggle { inset-block-end: calc(12px + 2.6em); }
html:not(.js) .w-film__toggle { display: none; }

/* Tour video and the YouTube cover */
.w-video { position: relative; background: var(--w-ink); }
.w-video video { display: block; inline-size: 100%; background: var(--w-ink); }
.w-video--yt { aspect-ratio: 16 / 9; background: var(--w-ink) center / cover no-repeat; }
.w-video--yt iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.w-video__play {
	--w-bg: var(--w-ink); --w-fg: #fff;
	position: absolute; inset-block-end: 20px; inset-inline-start: 20px; display: inline-flex; gap: 10px; align-items: center;
	min-block-size: 50px; padding: 10px 22px; border: 0; border-radius: 0; cursor: pointer; font: 600 var(--w-s-body)/1.25 var(--w-f-body);
}
.w-video__play svg { inline-size: 16px; block-size: 16px; }
.w-transcript { margin-block-start: 16px; }
.w-transcript summary { cursor: pointer; font-weight: 600; text-decoration-line: underline; text-underline-offset: .3em; text-decoration-thickness: .08em; inline-size: fit-content; }
.w-transcript__text { display: grid; gap: 8px; margin-block-start: 14px; max-inline-size: var(--w-measure); color: var(--w-ink-2); }

/* ---------- Home hero: the headline, then the product on the sun ---------- */
.w-hero { padding-block-start: clamp(20px, 3.4vw, 52px); }
.w-hero h1 { max-inline-size: none; }
.w-hero__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(28px, 4vw, 64px); margin-block-start: clamp(24px, 3vw, 44px); }
.w-hero__copy { display: grid; align-content: start; gap: 28px; padding-block: 8px clamp(40px, 5vw, 72px); }
.w-hero__copy .w-lead { max-inline-size: 30ch; }
:lang(ar) .w-hero__copy .w-lead { max-inline-size: 32ch; }
.w-hero__trust, .w-hero__note { font-size: var(--w-s-small); color: var(--w-ink-2); max-inline-size: 44ch; }
.w-hero__stage { background: var(--w-sun); margin-inline-end: var(--w-bleed); padding-block: clamp(28px, 3vw, 44px) 0; padding-inline-start: clamp(24px, 3vw, 44px); position: relative; }
/* The hero with one readable close-up (no .w-stage): its own height, the picture at its real size over the rays,
   at the inline end of the wrap on wide screens, at the start under the copy on smaller ones */
.w-hero__stage:has(> .w-shot--true) { display: flex; flex-direction: column; align-items: flex-start; padding-block: clamp(28px, 3vw, 44px); padding-inline-end: var(--w-gut); }
.w-hero__stage > .w-shot--true { position: relative; z-index: 1; inline-size: min(100%, calc(var(--tw, 520) * var(--w-zoom) * 1px)); }
.w-hero__stage > .w-shot--true .w-cap { color: var(--w-sun-ink); }
@media (min-width: 1100px) {
	.w-hero__stage:has(> .w-shot--true) { align-items: flex-end; padding-inline-end: calc(-1 * var(--w-bleed)); }
}

/* Two equal paths: a store, or a company or public body */
.w-paths { display: grid; gap: 8px; }
.w-paths--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w-path { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; padding: 14px 18px; background: var(--w-mist); text-decoration: none; color: var(--w-ink); transition: background-color var(--w-t-hover) ease; }
.w-path::before { content: ""; grid-row: 1; inline-size: 12px; block-size: 12px; background: var(--w-sun); outline: 2px solid var(--w-ink); outline-offset: -2px; }
.w-path--store::before { background: var(--w-sun); } /* the default marker, named for the plan's markup */
.w-path--org::before { background: var(--w-sea); outline-color: var(--w-sea); }
.w-path__t { grid-column: 2; font-weight: 600; }
.w-path__d { grid-column: 2; grid-row: 2; font-size: var(--w-s-small); color: var(--w-ink-2); }
.w-path .w-arrow { grid-column: 3; grid-row: 1; }
.w-path:is(:hover, :focus, :active) { color: var(--w-ink); }
@media (hover: hover) and (pointer: fine) { .w-path:hover { background: #E1E8EA; } .w-path:hover .w-path__t { text-decoration: underline; text-underline-offset: .3em; } }

/* The stage: one scene per moment of the day, real screens only */
.w-stage, .w-comp { position: relative; aspect-ratio: 1.36; }
.w-scene { position: absolute; inset: 0; margin: 0; }
.w-scene > * { position: absolute; }
.w-scene .w-desk { inset-inline-end: 0; top: 4%; inline-size: 86%; }
.w-scene .w-phonebox { inset-inline-start: 2%; top: 14%; inline-size: 27%; z-index: 2; }
.w-scene--d .w-desk { inline-size: 98%; }                                  /* one large screen off the edge */
.w-scene--dp2 .w-desk { inline-size: 76%; top: 4%; }                         /* a screen, a detail and the phone */
.w-scene--dp2 .w-desk2 { inset-inline-end: 3%; top: 54%; inline-size: 50%; z-index: 1; }
.w-scene--c .w-desk { inline-size: 70%; inset-inline-end: 14%; top: 6%; }    /* one card from the shop, large */
.w-scene--pp .w-phonebox { inset-inline-start: 8%; top: 5%; inline-size: 38%; }  /* two phones, the second one lower */
.w-scene--pp .w-phonebox + .w-phonebox { inset-inline-start: 52%; top: 11%; z-index: 3; }
.w-scene__cap { inset-inline-start: 2%; bottom: 3%; inset-inline-end: 0; font-size: var(--w-s-small); color: var(--w-sun-ink); }
.js .w-stage .w-scene { opacity: 0; visibility: hidden; transform: translateY(10px); filter: blur(3px);
	transition: opacity 150ms ease, visibility 0s linear 150ms; }
.js .w-stage .w-scene.is-on { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity 150ms ease, visibility 0s; }
html:not(.js) .w-stage .w-scene:not([data-default]) { display: none; }
.w-stage__now { position: absolute; z-index: 4; inset-block-start: 12px; inset-inline-end: 12px; display: inline-flex; gap: 8px; align-items: baseline; padding: 8px 14px; background: var(--w-ink); color: #fff; font-size: var(--w-s-small); font-weight: 600; text-decoration: none; }
.w-stage__now:is(:hover, :focus, :active) { color: #fff; }
.w-stage__now time { direction: ltr; unicode-bidi: isolate; }
html:not(.js) .w-stage__now { display: none; }

/* ---------- The day: a 24-hour rail in Kuwait time (home only) ---------- */
.w-day { background: var(--w-sun); padding-block: clamp(36px, 4vw, 56px) clamp(64px, 7vw, 104px); }
.w-day__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; }
.w-day__head h2 { max-inline-size: 22ch; }
.w-clock { display: inline-flex; align-items: baseline; gap: .5em; font-weight: 500; white-space: nowrap; }
.w-clock time { font-family: var(--w-f-display); font-size: var(--w-s-h3); font-weight: 600; direction: ltr; unicode-bidi: isolate; }
html:not(.js) .w-clock { display: none; }
/* the hero's clock line also holds the link to the day: it wraps after the clock, the link stays whole; without
   script the clock is hidden and the link stays */
.w-hero__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25em .5em; }
.w-hero__now .w-link { white-space: nowrap; }
.w-rail { --name: 92px; --lane: 112px; position: relative; margin-block-start: clamp(28px, 3vw, 44px); padding-inline-start: var(--name); }
.w-rail__hours { position: relative; block-size: 30px; }
.w-rail__hours span { position: absolute; inset-inline-start: calc(var(--h) / 24 * 100%); bottom: 6px; translate: -50% 0; font-size: var(--w-s-small); font-weight: 500; color: var(--w-sun-ink); font-variant-numeric: tabular-nums; }
[dir="rtl"] .w-rail__hours span { translate: 50% 0; }
.w-rail__track { position: relative; block-size: calc(var(--lane) * 2 + 10px); }
.w-rail__lane { position: absolute; inset-inline: 0; block-size: var(--lane); background: var(--w-sun-2); }
.w-rail__lane--y { top: calc(var(--lane) + 10px); }
.w-rail__name { position: absolute; inset-inline-start: calc(-1 * var(--name)); top: 14px; inline-size: calc(var(--name) - 12px); font-weight: 600; overflow-wrap: normal; }
.w-events { list-style: none; margin: 0; padding: 0; }
.w-events > li { position: absolute; inset-inline-start: calc(var(--t) / 1440 * 100%); top: calc(var(--lane-i) * (var(--lane) + 10px) + 10px + var(--row) * 50px); translate: -50% 0; z-index: 2; }
[dir="rtl"] .w-events > li { translate: 50% 0; }
.w-ev {
	--w-bg: var(--w-paper); --w-fg: var(--w-ink);
	display: inline-flex; align-items: baseline; gap: 8px; min-block-size: 42px; padding: 7px 13px; border: 0; border-radius: 0; cursor: pointer;
	font: 500 var(--w-s-small)/1.4 var(--w-f-body); white-space: nowrap;
	transition: background-color 150ms ease, color 150ms ease;
}
.w-ev time { font-weight: 700; direction: ltr; unicode-bidi: isolate; }
a.w-ev, a.w-ev:visited { color: var(--w-fg); text-decoration: none; }
.w-ev:active { transform: scale(.97); }
.w-ev.is-later:not([aria-pressed="true"]) { --w-bg: rgba(255, 255, 255, .5); }
.w-ev[aria-pressed="true"] { --w-bg: var(--w-ink); --w-fg: #fff; }
@media (hover: hover) and (pointer: fine) { .w-ev:not([aria-pressed="true"]):hover { --w-bg: #fff; outline: 2px solid var(--w-ink); outline-offset: -2px; } }
@media (min-width: 1100px) and (max-width: 1279px) {   /* narrower track: tighter chips so no two touch */
	.w-rail { --name: 90px; }
	.w-ev { padding-inline: 3px; gap: 2px; }
}
/* The static day index (home #day since the clarity rollout): <nav class="w-rail w-rail--index"> with the hours ruler,
   two lanes and 2-5 a.w-ev links to the moments below. No playhead, no "now" chip, nothing greyed: every chip at full
   ink, with and without script. Below 1100px the ruler and lanes go and the chips wrap as a plain list. */
.w-rail:is(.w-rail--index, :has(a.w-ev)) { --lane: 64px; }
.w-rail:is(.w-rail--index, :has(a.w-ev)) .w-events > li { --row: 0; top: calc(var(--lane-i, 0) * (var(--lane) + 10px) + 11px + var(--row) * 50px); }
.w-rail:is(.w-rail--index, :has(a.w-ev)) :is(.w-playhead, .w-now) { display: none; }
@media (max-width: 1099px) {
	.w-rail:is(.w-rail--index, :has(a.w-ev)) { padding-inline-start: 0; margin-block-start: 24px; }
	.w-rail:is(.w-rail--index, :has(a.w-ev)) :is(.w-rail__hours, .w-rail__lane) { display: none; }
	.w-rail:is(.w-rail--index, :has(a.w-ev)) .w-rail__track { block-size: auto; }
	.w-rail:is(.w-rail--index, :has(a.w-ev)) .w-events { display: flex; flex-wrap: wrap; gap: 8px; }
	.w-rail:is(.w-rail--index, :has(a.w-ev)) .w-events > li { position: static; translate: none; }
	.w-rail:is(.w-rail--index, :has(a.w-ev)) .w-ev { white-space: normal; }
}
.w-rail:is(.w-rail--index, :has(a.w-ev)) .w-ev { padding-inline: 13px; gap: 8px; }
/* whose moment a chip is: on the wide ruler the lane says it (the tag is read, not shown); in the wrapped list under
   1100px each chip shows it, "You" in ink, "Your customer" on paper */
.w-ev__who { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1099px) {
	.w-rail--index .w-ev { align-items: center; }
	.w-rail--index .w-ev__who { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; order: -1; padding: 1px 8px; border: 1.5px solid var(--w-ink); font-weight: 600; white-space: nowrap; }
	.w-rail--index .w-ev__who--you { background: var(--w-ink); color: #fff; }
}
html:not(.js) .w-playhead, html:not(.js) .w-now { display: none; }
.w-playhead { transition: opacity 220ms ease; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; inline-size: 3px; background: var(--w-ink); z-index: 1; pointer-events: none; transform: translateX(calc(var(--p, .6) * var(--track, 0px) * var(--w-dir))); }
.w-playhead.is-wait { opacity: 0; }
[dir="rtl"] .w-playhead { margin-inline-start: -3px; }
.w-now { position: absolute; top: calc(100% + 8px); inset-inline-start: calc(var(--t, 900) / 1440 * 100%); translate: -50% 0; font-size: var(--w-s-small); font-weight: 600; white-space: nowrap; background: var(--w-ink); color: #fff; padding: 2px 10px; }
[dir="rtl"] .w-now { translate: 50% 0; }
.w-now time { direction: ltr; unicode-bidi: isolate; }
.w-day__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: start; margin-block-start: 56px; }
.w-caption { display: grid; gap: 6px; min-block-size: 7.5em; }
.w-caption__meta { font-weight: 600; }
.w-caption__meta time { direction: ltr; unicode-bidi: isolate; }
.w-caption__d { font-size: var(--w-s-lead); line-height: var(--w-lh-lead); max-inline-size: 54ch; }
.w-day__ctrl { display: grid; gap: 10px; justify-items: end; text-align: end; }
.w-day__ctrl .w-note-text { color: var(--w-sun-ink); max-inline-size: 36ch; font-size: var(--w-s-small); }
/* Below 1100px (and without script) the rail becomes a list of the day with a "now" line. */
.w-daylist { display: none; list-style: none; margin: 0; padding: 0; }
.w-daylist > li { display: grid; grid-template-columns: 3.6em 1fr; gap: 2px 14px; padding: 14px 16px; background: var(--w-sun-2); }
.w-daylist > li.is-later { background: rgba(255, 255, 255, .32); }
.w-daylist > li > time { font-family: var(--w-f-display); font-size: var(--w-s-body); font-weight: 600; grid-row: span 4; direction: ltr; unicode-bidi: isolate; text-align: start; }
.w-daylist h3 { font-family: var(--w-f-body); font-size: var(--w-s-body); font-weight: 600; letter-spacing: 0; }
.w-daylist__meta { font-size: var(--w-s-small); color: var(--w-sun-ink); }
.w-daylist .w-link { justify-self: start; margin-block-start: 4px; }
.w-daylist > li.w-nowrow { display: flex; gap: 10px; align-items: baseline; padding: 8px 16px; background: var(--w-ink); color: #fff; font-weight: 600; }
.w-nowrow time { direction: ltr; unicode-bidi: isolate; }
html:not(.js) .w-rail:not(.w-rail--index, :has(a.w-ev)), html:not(.js) .w-day__foot .w-caption, html:not(.js) .w-day__ctrl [data-play] { display: none; }
html:not(.js) .w-daylist { display: grid; gap: 4px; margin-block-start: 28px; }

/* ---------- Facts (home): one big true number and the facts beside it ---------- */
.w-bigfact { padding-block: clamp(72px, 8vw, 120px); }
.w-bigfact__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px clamp(40px, 6vw, 104px); align-items: start; }
.w-bigfact__big { display: grid; gap: 14px; }
.w-bigfact__n { font-family: var(--w-f-display); font-size: clamp(5rem, 2rem + 12vw, 13rem); font-weight: 650; line-height: .9; letter-spacing: -0.05em; }
.w-bigfact__big p:not(.w-bigfact__n) { font-size: var(--w-s-lead); line-height: var(--w-lh-lead); max-inline-size: 30ch; }
.w-bigfact__list { list-style: none; display: grid; gap: 34px; padding: 12px 0 0; }
.w-bigfact__list h3 { font-size: var(--w-s-h3); margin-block-end: 6px; }
/* Legacy facts strip: a quiet row of short facts */
.w-facts { display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 4vw, 56px); }
.w-fact { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-weight: 500; max-inline-size: 34ch; }
.w-fact::before { content: ""; inline-size: 10px; block-size: 10px; background: var(--w-sun); margin-block-start: .62em; outline: 2px solid var(--w-ink); outline-offset: -2px; }
.w-fact > svg { display: none; }

/* ---------- Organisations: the sea band ---------- */
.w-org { padding-block: var(--w-sec); }
.w-org__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px clamp(40px, 5vw, 88px); align-items: start; }
.w-org__intro { font-size: var(--w-s-lead); line-height: var(--w-lh-lead); margin-block-start: 20px; max-inline-size: 40ch; }
.w-org .w-points { margin-block-start: 44px; }
.w-org__req { margin-block-start: 40px; padding: 16px 20px; background: var(--w-sea-2); font-weight: 500; }
.w-org__not { margin-block-start: 20px; max-inline-size: 60ch; }
.w-sea .w-org__not { color: var(--w-on-sea-2); }
.w-org__more { margin-block-start: 18px; }
.w-org .w-actions { margin-block-start: 28px; }
.w-org__media { display: grid; gap: 20px; position: sticky; top: 24px; }
.w-org__media .w-shot__crop { max-inline-size: 520px; }

/* ---------- Home features: five chapters ---------- */
.w-features { padding-block: var(--w-sec) 0; }
.w-fgroup { padding-block-end: var(--w-sec); }
.w-fgroup__text h3 { font-size: var(--w-s-h2); max-inline-size: 18ch; }
.w-fgroup__text > p { margin-block-start: 18px; font-size: var(--w-s-lead); line-height: var(--w-lh-lead); max-inline-size: 40ch; }
.w-fgroup--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(32px, 5vw, 80px); align-items: start; }
.w-fgroup--split .w-field { margin-inline-end: var(--w-bleed); padding: clamp(24px, 3vw, 48px); padding-inline-end: var(--w-gut); }
.w-fgroup--flip .w-field { margin-inline-end: 0; margin-inline-start: var(--w-bleed); padding-inline-end: clamp(24px, 3vw, 48px); padding-inline-start: var(--w-gut); }
.w-fgroup--flip .w-fgroup__text { order: 2; }
.w-fgroup__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; }
.w-fgroup__head > p { font-size: var(--w-s-lead); line-height: var(--w-lh-lead); }
.w-stairfield { margin-block-start: 48px; padding-block: clamp(32px, 4vw, 64px); }
.w-phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); align-items: start; list-style: none; padding: 0; }
.w-phones > li { display: grid; gap: 14px; }
.w-phones > li:nth-child(2) { margin-block-start: 6%; }
.w-phones > li:nth-child(3) { margin-block-start: 12%; }
.w-phones > li:nth-child(4) { margin-block-start: 18%; }
.w-phones p { font-size: var(--w-s-small); font-weight: 500; }
.w-canvasfield { margin-block-start: 48px; padding: clamp(24px, 3vw, 48px) 0; }
.w-canvasfield .w-shot { max-inline-size: 1180px; margin-inline: auto; }
.w-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(28px, 4vw, 56px); align-items: start; }
.w-pairfig { padding: clamp(20px, 2.4vw, 36px); }
.w-pairfig .w-shot__crop + .w-shot__crop { margin-block-start: 10px; inline-size: 74%; margin-inline-start: auto; }
.w-pair .w-feats { margin: 0; }

/* ---------- Text beside a picture ---------- */
.w-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(32px, 5vw, 80px); align-items: center; }
.w-split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.w-split--flip > :first-child, .w-split--flip > .w-split__text { order: 2; }
.w-split + .w-split { margin-block-start: clamp(72px, 9vw, 136px); }
.w-split__text { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.w-split__text > .w-eyebrow + :is(h2, h3) { order: -1; }
.w-split__text > .w-eyebrow { margin-block-start: -8px; }
.w-split__text > .w-list { margin-block-start: 8px; }
.w-split :is(h2, h3):where(:not(.w-feats *, .w-sample *)) { font-size: var(--w-s-h2); max-inline-size: 18ch; }
.w-split__text > p { max-inline-size: 52ch; }
.w-split__media { background: var(--w-stone); padding: clamp(24px, 3vw, 48px); min-width: 0; }
.w-split__media > .w-shot--phone, .w-split__media > .w-film--phone { max-inline-size: 280px; }

/* ---------- Tour with chapters ---------- */
.w-tour__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(32px, 5vw, 72px); align-items: start; }
.w-tour__grid > div:first-child > p { margin-block-start: 16px; }
.w-chapters { list-style: none; display: grid; gap: 4px; margin-block-start: 28px; padding: 0; }
.w-chapters button {
	--w-bg: var(--w-mist); --w-fg: var(--w-ink);
	inline-size: 100%; display: grid; grid-template-columns: 3.4em 1fr; gap: 12px; align-items: baseline; text-align: start;
	min-block-size: 48px; padding: 10px 14px; border: 0; border-radius: 0; cursor: pointer;
	font: 500 var(--w-s-body)/1.4 var(--w-f-body); transition: background-color 150ms ease, color 150ms ease;
}
:is(.w-section--white, .w-section--mist, .w-section--tint, .w-mist) .w-chapters button { --w-bg: var(--w-paper); }
.w-chapters button:active { transform: scale(.98); }
.w-chapters time { font-weight: 700; direction: ltr; unicode-bidi: isolate; text-align: start; }
.w-chapters button[aria-current="true"] { --w-bg: var(--w-ink); --w-fg: #fff; }
@media (hover: hover) and (pointer: fine) { .w-chapters button:not([aria-current="true"]):hover { --w-bg: #E1E8EA; } }
html:not(.js) .w-chapters button { pointer-events: none; }

/* ---------- Steps ---------- */
/* Bar sequence: an ink bar, the number, a heading and a sentence */
.w-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px clamp(20px, 3vw, 40px); counter-reset: w-step; }
.w-steps > li { counter-increment: w-step; display: grid; align-content: start; gap: 8px; }
.w-steps > li::before { content: counter(w-step); display: block; border-block-start: 14px solid var(--w-ink); padding-block-start: 18px; font-family: var(--w-f-display); font-size: var(--w-s-h3); font-weight: 650; line-height: 1; }
:is(.w-sea, .w-section--dark) .w-steps > li::before { border-color: var(--w-sun); }
.w-steps h3 { font-size: var(--w-s-h3); }
.w-steps img { margin-block-start: 14px; }
/* Numbered list (home start, short procedures) */
.w-steps.w-steps--list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-inline-start: 2.2em; list-style: decimal; counter-reset: none; }
.w-steps--list > li { display: list-item; counter-increment: none; }
.w-steps--list > li::before { content: none; }
.w-steps--list > li::marker { font-family: var(--w-f-display); font-weight: 650; font-size: var(--w-s-h3); }
.w-steps--list h3 { margin-block-end: 4px; }
/* Home: start in 4 steps beside the dashboard */
.w-start { padding-block-end: clamp(56px, 6vw, 96px); }
.w-start__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(32px, 5vw, 80px); align-items: start; }
.w-start .w-steps--list { margin-block-start: 40px; }
.w-start__more { margin-block-start: 36px; }

/* Foundation audit (S04): rules the comp has and the port plan names, copied from the comp and renamed to w- classes. */
.w-cta__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.w-fgroup--wide .w-fgroup__head { align-items: end; }
.w-org__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin: 44px 0 0; }
.w-org__points dt { font-family: var(--w-f-display); font-weight: 600; font-size: var(--w-s-h3); margin-block-end: 6px; }
.w-org__points dd { margin: 0; color: var(--w-on-sea); }
.w-pricing__more { margin-block-start: 28px; }
.w-who__more { margin-block-start: 48px; }
.w-tour__video video { inline-size: 100%; background: var(--w-ink); }
.w-trades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px clamp(28px, 4vw, 56px); }
.w-trades a { display: grid; gap: 8px; text-decoration: none; }
.w-trades h3 { font-size: var(--w-s-h3); text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; text-decoration-color: transparent; transition: text-decoration-color var(--w-t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .w-trades a:hover h3 { text-decoration-color: currentColor; } }
.w-trades p { color: var(--w-ink); }
@media (max-width: 1020px) { .w-cta__grid { grid-template-columns: minmax(0, 1fr); } .w-trades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .w-org__points, .w-trades { grid-template-columns: minmax(0, 1fr); } }
.w-start .w-field { margin-inline-end: var(--w-bleed); padding: clamp(24px, 3vw, 44px); padding-inline-end: var(--w-gut); }
/* Long how-to steps (install guide, docs): an ink square with the number */
.w-howto { list-style: none; margin: 0; padding: 0; counter-reset: w-how; display: grid; gap: clamp(28px, 3vw, 40px); }
/* --w-how-in: the step's number indent; a phone close-up gives it up and its caption takes it back (see the 600px block) */
.w-howto > li { --w-how-in: 56px; counter-increment: w-how; position: relative; padding-inline-start: var(--w-how-in); min-width: 0; }
.w-howto > li::before { content: counter(w-how); position: absolute; inset-inline-start: 0; top: 0; inline-size: 36px; block-size: 36px; background: var(--w-ink); color: #fff; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.w-howto h3 { font-size: var(--w-s-h3); margin-block: 2px 8px; }
.w-howto > li > * + * { margin-block-start: 10px; }
/* Sequence: bars that read left to right in time; the last one is the quiet wait */
.w-seq { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr 1.6fr; gap: 0 6px; padding: 0; }
.w-seq li { display: grid; align-content: start; gap: 8px; padding-inline-end: clamp(16px, 2vw, 32px); }
.w-seq li::before { content: ""; block-size: 14px; background: var(--w-ink); margin-block-end: 22px; }
.w-seq li:last-child::before { background: var(--w-sun); }
.w-seq h3 { font-size: var(--w-s-h3); }
.w-seq__when { font-weight: 600; color: var(--w-ink-2); }

/* ---------- Pricing: a stair, each plan holds the one before it ---------- */
.w-stair { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; padding: 0; margin: 0; }
.w-tier { display: grid; align-content: start; gap: 10px; padding: 28px 24px 26px; background: var(--w-mist); min-block-size: calc(440px + var(--lv, 0) * 52px); min-width: 0; }
.w-stair:not(.w-stair--compact) .w-tier { min-block-size: calc(560px + var(--lv, 0) * 52px); }
.w-tier--starter { background: var(--w-mist); } /* the default ground, named for the plan's markup */
.w-tier--pro { background: var(--w-sun); }
.w-tier--business { background: var(--w-stone); }
.w-tier--agency { background: var(--w-sea); color: var(--w-on-sea); }
.w-tier h3 { font-size: var(--w-s-h3); direction: ltr; unicode-bidi: isolate; text-align: start; }
.w-tier__price { display: flex; align-items: baseline; gap: 8px; margin-block-start: 6px; }
.w-tier__price bdi { font-family: var(--w-f-display); font-size: var(--w-s-h2); font-weight: 650; line-height: 1; letter-spacing: -0.02em; }
.w-tier__sub, .w-tier__after { font-size: var(--w-s-small); }
.w-tier__for { min-block-size: 3.4em; }
.w-tier__adds { padding-block: 12px 4px; }
.w-tier__list { margin-block: 8px; font-size: var(--w-s-small); gap: 10px; }
.w-tier__after { color: var(--w-ink-2); }
.w-tier--pro .w-tier__after { color: var(--w-sun-ink); }
.w-tier--pro .w-tier__list li::before { background: var(--w-paper); }
.w-tier--agency .w-tier__after, .w-tier--agency .w-tier__sub { color: var(--w-on-sea-2); }
.w-tier__foot { display: grid; gap: 14px; margin-block-start: auto; padding-block-start: 14px; }
.w-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.w-paybox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(28px, 4vw, 64px); }
.w-stair + .w-paybox, .w-paybox { margin-block-start: clamp(56px, 6vw, 88px); }
.w-head + .w-paybox, .w-paybox:first-child { margin-block-start: 0; }
.w-paybox h3 { font-size: var(--w-s-h3); margin-block-end: 8px; }
.w-terms { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(28px, 4vw, 64px); margin-block-start: 44px; padding: 24px 28px; background: var(--w-mist); }
:is(.w-section--white, .w-section--mist, .w-section--tint, .w-section--sand, .w-mist) .w-terms { background: var(--w-paper); }
.w-terms li { display: grid; gap: 4px; align-content: start; }
.w-addon { margin-block-start: 10px; background: var(--w-stone); padding: 24px 28px; display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; justify-content: space-between; }
.w-addon__text { flex: 1 1 420px; }
.w-addon h3 { font-size: var(--w-s-h3); margin-block-end: 6px; }
.w-addon__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.w-addon__price { font-weight: 600; }
.w-addon__price bdi { font-family: var(--w-f-display); font-size: var(--w-s-h2); font-weight: 650; line-height: 1; }
.w-addon__price span { font-size: var(--w-s-small); color: var(--w-ink-2); }

/* ---------- Tables (the box scrolls, never the page) ---------- */
.w-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-color: var(--w-ink-2) var(--w-mist); }
.w-table { inline-size: 100%; border-collapse: collapse; font-size: var(--w-s-small); min-inline-size: 640px; margin: 0; border: 0; font-variant-numeric: tabular-nums; }
.w-table caption { text-align: start; padding: 0 0 14px; font-weight: 600; caption-side: top; font-size: var(--w-s-body); }
.w-table th, .w-table td { padding: 12px 14px; border: 0; border-block-end: 2px solid var(--w-paper); text-align: center; vertical-align: middle; background: transparent; }
.w-table tbody tr { background: var(--w-mist); }
.w-table th:first-child, .w-table td:first-child { text-align: start; }
.w-table thead th { background: var(--w-ink); color: #fff; font-weight: 600; }
.w-table tbody th { font-weight: 500; }
.w-table .w-group th, .w-table tr.w-group { background: var(--w-stone); font-weight: 600; text-align: start; }
.w-yes, .w-no { display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; }
.w-yes { color: var(--w-ink); }
.w-no { color: var(--w-ink-2); }
.w-yes svg, .w-no svg { inline-size: 18px; block-size: 18px; }
.w-prose table:not(.w-table) { inline-size: 100%; border-collapse: collapse; font-size: var(--w-s-small); }
.w-prose table:not(.w-table) :is(th, td) { border: 0; border-block-end: 2px solid var(--w-paper); background: var(--w-mist); padding: 10px 12px; text-align: start; }
.w-prose table:not(.w-table) thead th { background: var(--w-ink); color: #fff; }

/* ---------- Questions ---------- */
.w-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.w-faq__grid > div:first-child > p { margin-block-start: 20px; }
.w-faq { display: grid; gap: 8px; }
.w-faq details { background: var(--w-mist); }
:is(.w-section--white, .w-section--mist, .w-section--tint, .w-section--sand, .w-mist) .w-faq details { background: var(--w-paper); }
.w-faq summary {
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
	min-block-size: 64px; padding: 16px 24px; font-weight: 600; font-size: var(--w-s-body);
}
.w-faq summary::-webkit-details-marker { display: none; }
/* A drawn chevron (direction neutral) instead of rotated borders */
.w-faq summary::after {
	content: ""; flex: none; inline-size: 14px; block-size: 14px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 4.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 4.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}
.w-faq details[open] summary::after { transform: rotate(180deg); }
.w-faq details > :not(summary) { padding: 0 24px 22px; max-inline-size: 64ch; margin: 0; }
.w-faq details > :not(summary) + :not(summary) { padding-block-start: 0; margin-block-start: -10px; }
.w-faq details a { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .w-faq details[open] > :not(summary) { animation: w-fade 280ms var(--w-ease-out); } }
@keyframes w-fade { from { opacity: 0; transform: translateY(-4px); } }
.w-section--white .w-narrow .w-faq, .w-narrow > .w-faq { margin-block-start: 0; }

/* ---------- Notes, example wording ---------- */
.w-note { background: var(--w-mist); padding: 20px 24px; margin-block: 24px; color: var(--w-ink); }
:is(.w-section--white, .w-section--mist, .w-section--tint, .w-section--sand, .w-mist) .w-note { background: var(--w-paper); }
.w-note > * + * { margin-block-start: 8px; }
.w-note strong:first-child { display: block; }
.w-note--warn, :is(.w-section--white, .w-section--mist, .w-section--tint, .w-section--sand, .w-mist) .w-note--warn { background: var(--w-stone); }
.w-note--warn > strong:first-child { display: flex; align-items: baseline; gap: 10px; }
.w-note--warn > strong:first-child::before { content: ""; flex: none; inline-size: 10px; block-size: 10px; background: var(--w-sun); outline: 2px solid var(--w-ink); outline-offset: -2px; }
:is(.w-sea, .w-section--dark) .w-note { background: var(--w-sea-2); color: var(--w-on-sea); }
/* Example wording: plain message texts, no rebuilt chat */
.w-sample { margin: 0; background: var(--w-mist); padding: clamp(20px, 2.4vw, 32px); }
:is(.w-section--white, .w-section--mist, .w-section--tint, .w-mist) .w-sample { background: var(--w-paper); }
.w-sample ol, .w-sample ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.w-sample li { background: var(--w-paper); padding: 14px 16px; display: grid; gap: 4px; }
:is(.w-section--white, .w-section--mist, .w-section--tint, .w-mist) .w-sample li { background: var(--w-mist); }
.w-sample__when { font-size: var(--w-s-small); font-weight: 600; color: var(--w-ink-2); }
.w-sample__who { font-size: var(--w-s-small); font-weight: 600; }
/* One order as a timeline: each step says when, who gets the message (you or your customer) and its text; a template's
   button is a plain outlined label under the text (no rebuilt chat, rule 4) */
.w-sample--line ol { gap: 12px; }
.w-sample--line li { grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 6px 24px; padding: 18px 20px; }
.w-sample--line li > :not(.w-sample__when) { grid-column: 2; }
.w-sample--line .w-sample__when { grid-row: 1 / span 3; color: var(--w-ink); }
.w-sample--line .w-sample__who { color: var(--w-ink-2); }
.w-sample__btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-block-start: 4px; padding: 5px 14px; border: 1.5px solid var(--w-ink); font-size: var(--w-s-small); font-weight: 600; }
@media (max-width: 760px) {
	.w-sample--line li { grid-template-columns: minmax(0, 1fr); }
	.w-sample--line li > :not(.w-sample__when) { grid-column: 1; }
	.w-sample--line .w-sample__when { grid-row: auto; }
}
/* Legacy drawn chats (until each page moves to a real crop or .w-sample): neutral blocks, nothing like WhatsApp */
.w-chat { inline-size: min(420px, 100%); margin-inline: auto; background: var(--w-mist); padding: clamp(18px, 2.4vw, 28px); }
.w-split__media .w-chat { background: var(--w-paper); }
.w-chat__top, .w-chat__avatar { display: none; }
.w-chat__body { display: grid; gap: 8px; }
.w-msg { background: var(--w-paper); padding: 12px 16px; font-size: var(--w-s-small); line-height: 1.6; color: var(--w-ink); }
.w-split__media .w-msg { background: var(--w-mist); }
.w-msg--out { background: var(--w-stone) !important; }
.w-msg b { display: block; font-weight: 600; }
.w-msg time { display: none; }
.w-msg__btn { display: block; margin-block-start: 6px; font-weight: 600; text-decoration: underline; text-underline-offset: .3em; }

/* ---------- Final call to action: the sun across the page ---------- */
.w-section:has(> .w-wrap > .w-cta) { padding-block: 0; }
.w-cta {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end;
	background: var(--w-sun); color: var(--w-ink);
	margin-inline: var(--w-bleed); padding-block: clamp(80px, 9vw, 136px); padding-inline: calc(-1 * var(--w-bleed));
}
.w-cta > :first-child { grid-column: 1; }
.w-cta > :not(:first-child) { grid-column: 2; }
.w-cta h2 { font-size: var(--w-s-h2); max-inline-size: 16ch; }
.w-cta > div:first-child > p { margin-block-start: 16px; font-size: var(--w-s-lead); line-height: var(--w-lh-lead); max-inline-size: 40ch; }
.w-cta__side { display: grid; gap: 22px; }
.w-cta__side > p:first-child { font-size: var(--w-s-lead); line-height: var(--w-lh-lead); }
.w-cta__tel { font-weight: 500; }
.w-cta__tel .w-tel { font-family: var(--w-f-display); font-weight: 650; font-size: var(--w-s-h3); }
.w-cta :is(.w-btn--light) { --w-bg: var(--w-ink); --w-fg: #fff; }
.w-cta :is(.w-btn--outline-light, .w-btn--ghost, .w-btn--quiet) { --w-bg: rgba(255, 255, 255, .55); --w-fg: var(--w-ink); }
@media (hover: hover) and (pointer: fine) {
	.w-cta .w-btn.w-btn--light:hover { --w-bg: #26363B; }
	.w-cta .w-btn:is(.w-btn--outline-light, .w-btn--ghost, .w-btn--quiet):hover { --w-bg: rgba(255, 255, 255, .8); }
}
.w-cta--quiet { background: var(--w-mist); }

/* ---------- Page head (feature, solution and other marketing pages) ---------- */
.w-page-head { padding-block: clamp(20px, 3vw, 44px) clamp(32px, 3.6vw, 52px); }
.w-page-head > .w-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.w-page-head > .w-wrap > * { order: 1; }
.w-page-head > .w-wrap > :is(nav, .w-crumbs) { order: -2; }
.w-page-head > .w-wrap > .w-pill + h1 { order: -1; }
.w-page-head h1 { max-inline-size: 24ch; font-size: var(--w-s-h1); line-height: var(--w-lh-display); letter-spacing: var(--w-track-display); font-weight: 650; }
.w-page-head h1.w-display { font-size: var(--w-s-pagehead); }
.w-page-head .w-pill, .w-page-head .w-plan-line { margin-block-start: 18px; }
.w-page-head .w-lead { margin-block-start: 14px; max-inline-size: 48ch; }
.w-page-head .w-actions { margin-block-start: 28px; }
/* Old pill badges become a plain plan line */
.w-pill, .w-pill--teal { display: block; background: none; border: 0; padding: 0; font-weight: 600; font-size: var(--w-s-body); color: inherit; border-radius: 0; }
.w-page-head--sea { background: var(--w-sea); color: var(--w-on-sea); padding-block-end: var(--w-sec); }
.w-crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: var(--w-s-small); margin: 0 0 clamp(20px, 2.4vw, 32px); padding: 0; }
.w-crumbs li { min-inline-size: 0; }
.w-crumbs li:last-child { flex: 1 1 0; min-inline-size: 12ch; display: flex; }
.w-crumbs li + li::before { content: "/"; margin-inline-end: 10px; color: var(--w-ink-2); }
:is(.w-sea, .w-page-head--sea) .w-crumbs li + li::before { color: var(--w-on-sea-2); }
.w-crumbs a { text-underline-offset: .25em; }
/* Head field: the page's one sun field with the lead, actions, facts and the annotated main screen */
.w-headfield { padding-block: clamp(28px, 3vw, 44px) clamp(48px, 5vw, 72px); }
.w-headfield__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(40px, 6vw, 96px); align-items: start; padding-block: clamp(8px, 1.4vw, 20px) clamp(32px, 3.4vw, 48px); }
.w-headfield .w-lead { margin-block-start: 10px; max-inline-size: 48ch; }
.w-headfield .w-actions { margin-block-start: 24px; }
.w-headfield .w-checks { padding-block-start: 4px; }
.w-headfield__comp { position: relative; }
.w-headfield__main { inline-size: 80%; margin-inline-end: auto; }
.w-headfield__panel { position: absolute; inset-inline-end: 0; top: 12%; inline-size: 27%; z-index: 3; }
.w-headfield__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px; margin-block-start: 28px; color: var(--w-sun-ink); font-size: var(--w-s-small); }
.w-headfield__foot > * { max-inline-size: 46ch; }
.w-headfield__foot code { background: rgba(255, 255, 255, .55); }
.w-headfield .w-legend { margin-block-start: 22px; }

/* ---------- Automations: the message tester ---------- */
.w-try__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(32px, 5vw, 80px); align-items: start; }
.w-try__grid > div:first-child > p { margin-block-start: 16px; }
.w-try__form { display: grid; gap: 18px; margin-block-start: 32px; }
.w-try__form label, .w-try__form legend { font-weight: 600; }
.w-try .w-try__input, .w-try .w-try__input:focus { inline-size: 100%; min-block-size: 56px; padding: 12px 16px; border: 0; border-block-end: 2px solid var(--w-edge); border-radius: 0; background: var(--w-mist); color: var(--w-ink); font: 500 var(--w-s-body)/1.4 var(--w-f-body); outline-offset: 0; }
.w-try .w-try__input:focus-visible { outline: 3px solid var(--w-ink); }
.w-try__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.w-chip { --w-bg: var(--w-mist); --w-fg: var(--w-ink); min-block-size: 44px; padding: 8px 14px; border: 0; border-radius: 0; cursor: pointer; font: 500 var(--w-s-body)/1.3 var(--w-f-body); transition: background-color 150ms ease, color 150ms ease; }
.w-chip:active { transform: scale(.97); }
.w-chip[aria-pressed="true"] { --w-bg: var(--w-ink); --w-fg: #fff; }
@media (hover: hover) and (pointer: fine) { .w-chip:not([aria-pressed="true"]):hover { --w-bg: #E1E8EA; } }
.w-try fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.w-try legend { padding: 0; margin-block-end: 8px; }
.w-radio { display: flex; gap: 10px; align-items: center; min-block-size: 44px; padding: 8px 14px; background: var(--w-mist); cursor: pointer; }
.w-radio input { accent-color: var(--w-ink); inline-size: 18px; block-size: 18px; margin: 0; flex: none; }
.w-radio:has(input:checked) { background: #DDE5E8; font-weight: 600; }
.w-try__out { background: var(--w-sun); padding: clamp(24px, 3vw, 40px); }
.w-verdict { display: grid; gap: 8px; min-block-size: 9.5em; align-content: start; }
.w-verdict__norm { font-size: var(--w-s-small); color: var(--w-sun-ink); }
.w-verdict__norm bdi { font-weight: 600; }
.w-verdict__t { font-family: var(--w-f-display); font-size: var(--w-s-h3); font-weight: 600; line-height: var(--w-lh-head); }
.w-verdict__d { max-inline-size: 52ch; }
@media (prefers-reduced-motion: no-preference) {
	.js .w-verdict.is-swap > * { animation: w-swap 260ms var(--w-ease-out) both; }
	.js .w-verdict.is-swap > *:nth-child(2) { animation-delay: 40ms; }
	.js .w-verdict.is-swap > *:nth-child(3) { animation-delay: 80ms; }
}
@keyframes w-swap { from { opacity: 0; transform: translateY(6px); } }
.w-ladder { list-style: none; display: grid; gap: 6px; margin-block-start: 24px; padding: 0; }
.w-ladder li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 12px 16px; background: rgba(255, 255, 255, .5); transition: background-color 180ms ease, color 180ms ease; }
.w-ladder h3 { font-family: var(--w-f-body); font-size: var(--w-s-body); font-weight: 600; letter-spacing: 0; }
.w-ladder p { grid-column: 1 / -1; font-size: var(--w-s-small); }
.w-ladder .w-ladder__s { font-size: var(--w-s-small); font-weight: 600; white-space: nowrap; }
.w-ladder li.is-hit { background: var(--w-ink); color: #fff; }
.w-ladder li.is-pass { background: rgba(255, 255, 255, .28); }
.w-try__note { margin-block-start: 16px; font-size: var(--w-s-small); color: var(--w-sun-ink); }
html:not(.js) .w-try__form { display: none; }
/* Kinds of steps and the extras strip */
.w-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 48px); }
.w-kinds > div > h3 { font-size: var(--w-s-h3); margin-block-end: 22px; }
.w-kinds dl { margin: 0; display: grid; gap: 22px; }
.w-kinds dt { font-weight: 600; margin-block-end: 4px; }
.w-kinds dd { margin: 0; }
.w-kinds .w-plan { display: inline; margin: 0; }
.w-extras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); margin-block-start: 56px; padding: 28px; background: var(--w-paper); }
.w-extras h3 { font-family: var(--w-f-body); font-size: var(--w-s-body); font-weight: 600; letter-spacing: 0; margin-block-end: 4px; }
/* The 24-hour window */
.w-window { margin: 0; }
.w-window__bar { position: relative; display: grid; grid-template-columns: 23fr 1fr 16fr; block-size: 72px; }
.w-window__open { background: var(--w-sun); display: flex; align-items: center; padding-inline: 20px; font-weight: 600; }
.w-window__edge { background: var(--w-ink); }
.w-window__after { background: var(--w-stone); display: flex; align-items: center; padding-inline: 20px; font-weight: 500; }
.w-window__wait { block-size: 14px; inline-size: calc(23 / 40 * 100%); background: var(--w-ink); margin-block-start: 10px; }
.w-window__marks { display: grid; grid-template-columns: 24fr 16fr; margin-block-start: 18px; gap: 20px; }
.w-window__marks span { display: grid; gap: 2px; }
.w-window__marks b { font-family: var(--w-f-display); font-size: var(--w-s-h3); font-weight: 600; direction: ltr; unicode-bidi: isolate; text-align: start; }
.w-window__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 40px; margin-block-start: 36px; }
.w-window__legend span { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: baseline; }
.w-window__legend i { inline-size: 26px; block-size: 12px; background: var(--w-sun); }
.w-window__legend i.w-window__k--wait { background: var(--w-ink); }
.w-window__legend i.w-window__k--after { background: var(--w-stone); }
:is(.w-section--white, .w-section--mist, .w-mist) .w-window__legend i.w-window__k--after { outline: 1px solid var(--w-ink-2); outline-offset: -1px; }
/* AI rules on the sea */
.w-ai { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 4vw, 56px); }
.w-ai h3 { font-size: var(--w-s-h3); margin-block-end: 8px; }
.w-ai__terms { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(28px, 4vw, 56px); margin-block-start: 56px; padding: 28px; background: var(--w-sea-2); }
.w-ai__terms h3 { font-size: var(--w-s-h3); margin-block-end: 8px; }

/* ---------- Docs and text pages (Read mode) ---------- */
.w-prose { max-inline-size: var(--w-measure); }
.w-prose > * + * { margin-block-start: 1em; }
.w-prose > :is(h2, h3) + * { margin-block-start: .6em; }
.w-prose > h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); margin-block-start: 2.2em; }
.w-prose > h3 { font-size: var(--w-s-h3); margin-block-start: 1.6em; }
.w-prose > :is(ul, ol):not([class]) { padding-inline-start: 1.4em; }
.w-prose > :is(ul, ol):not([class]) > li + li { margin-block-start: 6px; }
.w-prose a:not([class]) { font-weight: 500; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
@media (hover: hover) and (pointer: fine) { .w-prose a:not([class]):hover { text-decoration-color: currentColor; } }
.w-prose > .w-crumbs { margin-block-end: 0; }
.w-doc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; padding-block: clamp(28px, 3vw, 44px) var(--w-sec); }
.w-doc__nav { position: sticky; top: 24px; font-size: var(--w-s-small); max-block-size: calc(100vh - 48px); overflow: auto; scrollbar-color: var(--w-ink-2) var(--w-mist); }
.w-doc__nav > summary { display: none; }
.w-doc__nav h2 { font-family: var(--w-f-body); font-size: var(--w-s-small); color: var(--w-ink-2); margin: 20px 0 6px; font-weight: 600; letter-spacing: 0; }
.w-doc__nav ul { list-style: none; margin: 0; padding: 0; }
.w-doc__nav a { display: block; padding: 6px 10px; text-decoration: none; color: var(--w-ink); }
@media (hover: hover) and (pointer: fine) { .w-doc__nav a:not([aria-current]):hover { background: var(--w-mist); } }
.w-doc__nav a[aria-current="page"] { background: var(--w-ink); color: #fff; font-weight: 600; }
.w-doc__main h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); font-weight: 650; line-height: var(--w-lh-display); letter-spacing: var(--w-track-display); margin-block-start: 0; }
.w-doc__main > .w-crumbs + h1 { margin-block-start: 0; }
.w-doc__meta { color: var(--w-ink-2); font-size: var(--w-s-small); }
.w-doc__main .w-lead { max-inline-size: 56ch; }
.w-doc__pager { display: flex; justify-content: space-between; gap: 12px 24px; margin-block-start: 64px !important; padding-block-start: 24px; flex-wrap: wrap; border-block-start: 14px solid var(--w-mist); }
.w-doc__pager a { font-weight: 600; }
.w-contact { display: grid; gap: 40px clamp(28px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.w-company { font-size: inherit; }

/* ---------- Footer: the sea, the name at full width ---------- */
.w-footer { background: var(--w-sea); color: var(--w-on-sea); padding-block: clamp(64px, 7vw, 104px) 32px; overflow: hidden; font-size: var(--w-s-body); }
.w-footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr)); gap: 40px 32px; }
.w-footer__about > p { margin-block: 18px; color: var(--w-on-sea-2); max-inline-size: 34ch; }
.w-footer__contact { display: grid; gap: 6px; justify-items: start; }
.w-footer a { color: var(--w-on-sea); text-decoration: none; }
.w-footer a:is(:hover, :focus, :active) { color: var(--w-on-sea); }
.w-footer h2 { font-family: var(--w-f-body); font-size: var(--w-s-small); font-weight: 600; color: var(--w-on-sea-2); margin-block-end: 14px; letter-spacing: 0; }
.w-footer ul { list-style: none; display: grid; gap: 8px; }
@media (hover: hover) and (pointer: fine) { .w-footer a:hover { text-decoration: underline; text-underline-offset: .3em; } }
.w-wordmark { font-family: "Schibsted Grotesk", var(--w-f-display); font-weight: 700; font-size: clamp(2.4rem, 9.4vw, 9.5rem); line-height: .9; letter-spacing: -0.05em !important; margin-block: clamp(48px, 6vw, 88px) clamp(28px, 3vw, 40px) !important; white-space: nowrap; direction: ltr; text-align: center; color: var(--w-on-sea); }
.w-footer__legal { font-size: var(--w-s-small); color: var(--w-on-sea-2); max-inline-size: 76ch; }
.w-footer :focus-visible { outline-color: var(--w-sun); }

/* ---------- Forms (EDD checkout, account, support portal): square fields, one ink edge ---------- */
:is(.entry-content, .w-footer) :is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], select, textarea) {
	min-block-size: 48px; padding: 10px 14px; border: 1px solid var(--w-edge); border-radius: 0; background: var(--w-paper); color: var(--w-ink); max-inline-size: 100%;
	font: 400 var(--w-s-body)/1.4 var(--w-f-body);
}
:is(.entry-content, .w-footer) :is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], select, textarea):focus { border-color: var(--w-ink); background: var(--w-paper); color: var(--w-ink); }
:is(.entry-content, .w-footer) input[type="checkbox"], :is(.entry-content, .w-footer) input[type="radio"] { accent-color: var(--w-ink); }
#edd-purchase-button, .edd-submit, .edd-submit.button, .entry-content input[type="submit"], .entry-content button[type="submit"]:not([class*="w-"]) {
	background: var(--w-ink) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; min-block-size: 50px;
	padding: 12px 24px !important; font: 600 var(--w-s-body)/1.25 var(--w-f-body) !important; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { #edd-purchase-button:hover, .edd-submit:hover, .entry-content input[type="submit"]:hover { background: #26363B !important; } }
.edd-alert { border-radius: 0; }

/* ---------- Motion: entrances (once), only with script and without reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
	.w-ready [data-reveal] [data-r] { opacity: 0; transform: translateY(22px); transition: opacity 680ms var(--w-ease-out), transform 820ms var(--w-ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
	.w-ready [data-reveal] [data-r="shutter"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1000ms var(--w-ease-io); transition-delay: calc(var(--i, 0) * 80ms); }
	.w-ready [data-reveal] [data-r="shutter"] :is(img, video) { transform: scale(1.05); transition: transform 1400ms var(--w-ease-soft); transition-delay: calc(var(--i, 0) * 80ms); }
	.w-ready [data-reveal].is-in [data-r] { opacity: 1; transform: none; }
	.w-ready [data-reveal].is-in [data-r="shutter"] { clip-path: inset(0); }
	.w-ready [data-reveal].is-in [data-r="shutter"] :is(img, video) { transform: none; }
	.w-ready [data-reveal] .w-pin { opacity: 0; transition: opacity 300ms ease; transition-delay: calc(700ms + var(--pi, 0) * 70ms); }
	.w-ready [data-reveal].is-in .w-pin { opacity: 1; }

	.js .w-hero [data-load] { opacity: 0; transform: translateY(18px); animation: w-rise 860ms var(--w-ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
	.js .w-hero__stage[data-load] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); animation: w-shutter 1100ms var(--w-ease-io) 160ms forwards; }
	.js .w-hero__stage .w-phonebox { animation: w-rise 900ms var(--w-ease-out) 620ms both; }
}
@keyframes w-rise { to { opacity: 1; transform: none; } }
@keyframes w-shutter { to { clip-path: inset(0); } }
/* Movement of controls (press scale, arrow nudge, chevron turn, scene slide). Base rules above keep only colour and
   opacity fades, so with reduced motion nothing moves and the stage scenes still cross-fade. */
@media (prefers-reduced-motion: no-preference) {
	.w-arrow { transition: transform var(--w-t-hover) var(--w-ease-out); }
	.w-btn { transition: transform var(--w-t-press) var(--w-ease-out), background-color var(--w-t-hover) ease, color var(--w-t-hover) ease; }
	.w-film__toggle { transition: transform var(--w-t-press) var(--w-ease-out); }
	.w-ev, .w-chapters button, .w-chip { transition: transform var(--w-t-press) var(--w-ease-out), background-color 150ms ease, color 150ms ease; }
	.w-faq summary::after { transition: transform var(--w-t-ui) var(--w-ease-out); }
	.js .w-stage .w-scene { transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease, visibility 0s linear 160ms; }
	.js .w-stage .w-scene.is-on { transition: opacity 300ms var(--w-ease-out), transform 360ms var(--w-ease-out), filter 300ms var(--w-ease-out), visibility 0s; }
}
@media (prefers-reduced-motion: reduce) {
	.js .w-stage .w-scene, .js .w-stage .w-scene.is-on { transform: none; filter: none; }
	.w-btn:active, .w-ev:active, .w-chip:active, .w-chapters button:active, .w-film__toggle:active { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
	.w-header__end .w-btn { display: none; }
}
@media (max-width: 1180px) {
	.w-nav__list { gap: 18px; }
	.w-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.w-footer__about { grid-column: 1 / -1; }
	.w-kinds, .w-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
	.w-rail:not(.w-rail--index, :has(a.w-ev)), .w-day__foot .w-caption, .w-day__ctrl [data-play] { display: none; }
	.w-daylist { display: grid; gap: 4px; margin-block-start: 28px; }
	.w-day__foot { grid-template-columns: minmax(0, 1fr); margin-block-start: 20px; }
	.w-day__ctrl { justify-items: start; text-align: start; }
}
@media (max-width: 1060px) {
	.w-nav, .w-header__end { display: none; }
	.w-menu { display: block; }
}
@media (max-width: 1020px) {
	.w-hero__row, .w-fgroup--split, .w-start__grid, .w-tour__grid, .w-try__grid, .w-org__grid, .w-bigfact__grid, .w-split, .w-split--flip { grid-template-columns: minmax(0, 1fr); }
	.w-split--flip > :first-child, .w-split--flip > .w-split__text, .w-fgroup--flip .w-fgroup__text { order: 0; }
	.w-hero__stage { margin-inline-start: calc(var(--w-gut) * -1); padding-inline-start: var(--w-gut); }
	.w-hero__copy { padding-block-end: 36px; }
	.w-fgroup--split .w-field, .w-fgroup--flip .w-field, .w-start .w-field, .w-field--bleed { margin-inline: var(--w-bleed); padding-inline: var(--w-gut); }
	.w-split__media { margin-inline: calc(var(--w-gut) * -1); }
	.w-org__media { position: static; }
	.w-head, .w-fgroup__head, .w-cta, .w-headfield__grid, .w-faq__grid, .w-ai__terms { grid-template-columns: minmax(0, 1fr); }
	.w-head > *, .w-cta > :not(:first-child), .w-cta > :first-child { grid-column: 1; grid-row: auto; }
	.w-stair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
	.w-tier, .w-stair:not(.w-stair--compact) .w-tier { min-block-size: 0; }
	.w-feats--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.w-feats--row.w-feats--3 { grid-template-columns: minmax(0, 1fr); }
	.w-seq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 6px; }
	.w-grid--3, .w-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.w-terms, .w-paybox { grid-template-columns: minmax(0, 1fr); }
	.w-ai { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.w-doc { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.w-doc__nav { position: static; max-block-size: none; background: var(--w-mist); padding: 0 16px; }
	.w-doc__nav > summary { display: flex; align-items: center; min-block-size: 52px; cursor: pointer; font-weight: 600; list-style: none; }
	.w-doc__nav > summary::-webkit-details-marker { display: none; }
	.w-doc__nav[open] > nav { padding-block-end: 16px; }
}
@media (max-width: 760px) {
	.w-grid--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
	.w-pin__l { display: none; }
	.w-stage .w-pin, .w-comp .w-pin { display: none; }
	.w-legend { display: grid; }
	.w-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.w-phones > li:nth-child(n) { margin-block-start: 0; }
	.w-phones > li:nth-child(even) { margin-block-start: 14%; }
	.w-pair { grid-template-columns: minmax(0, 1fr); }
	.w-headfield__main { inline-size: 100%; }
	.w-headfield__panel { position: relative; inset: auto; top: auto; inline-size: 66%; margin-block-start: -14%; margin-inline-start: auto; margin-inline-end: 0; }
	.w-window__legend { grid-template-columns: minmax(0, 1fr); }
	.w-window__open, .w-window__after { padding-inline: 12px; font-size: var(--w-s-small); }
}
@media (max-width: 600px) {
	:root:lang(en) .w-br { display: none; }
	.w-page-head .w-br { display: none; }
	.w-header__bar { min-block-size: 64px; gap: 16px; }
	.w-brand svg { inline-size: 30px; block-size: 30px; }
	.w-menu__panel { top: 62px; }
	.w-stage, .w-comp { aspect-ratio: .98; }
	.w-scene .w-desk { inline-size: 100%; top: 2%; }
	.w-scene .w-phonebox { inline-size: 44%; top: 26%; }
	.w-scene--dp2 .w-desk { inline-size: 100%; }
	.w-scene--dp2 .w-desk2 { inset-inline-end: 0; top: 46%; inline-size: 60%; }
	.w-scene--c .w-desk { inline-size: 92%; inset-inline-end: 4%; }
	.w-scene--pp .w-phonebox { inline-size: 44%; inset-inline-start: 4%; top: 4%; }
	.w-scene--pp .w-phonebox + .w-phonebox { inset-inline-start: 52%; top: 12%; }
	/* C7: a single scene (.w-comp) stacks, so the phone never covers the desk shot's caption */
	.w-comp { aspect-ratio: auto; }
	.w-comp > .w-scene { position: static; display: grid; gap: 16px; }
	.w-comp > .w-scene > * { position: static; inline-size: 100%; }
	.w-comp > .w-scene .w-phonebox, .w-comp > .w-scene--pp .w-phonebox + .w-phonebox { inline-size: min(70%, 300px); margin: 0 auto; }
	.w-list--2, .w-stair, .w-feats--row, .w-seq, .w-kinds, .w-extras, .w-ai, .w-points, .w-grid--3, .w-grid--4, .w-paths--2 { grid-template-columns: minmax(0, 1fr); }
	.w-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.w-btn { white-space: normal; text-align: center; }
	.w-actions .w-btn { flex: 1 1 auto; }
	.w-tier__for { min-block-size: 0; }
	.w-window__bar { block-size: 64px; }
	.w-faq summary { padding-inline: 18px; }
	.w-faq details > :not(summary) { padding-inline: 18px; }
	.w-howto > li { --w-how-in: 48px; }
	.w-addon { padding: 20px; }
}

/* ---------- Print ---------- */
@media print {
	.w-header, .w-footer, .w-actions, .w-video, .w-film__toggle, .w-day__ctrl { display: none !important; }
	body { background: #fff; }
	.w-sun, .w-sea, .w-section--dark, .w-cta { background: #fff !important; color: #000 !important; }
}