/* Sukesh Das: critical layer. Fonts, tokens, base type, buttons, header, drawer, heroes and motion states.
   Printed inline in the head. Everything below the first screen lives in main.css. */

@font-face { font-family: "Geist"; src: url(../fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(../fonts/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"); size-adjust: 105.85%; ascent-override: 94.94%; descent-override: 27.87%; line-gap-override: 0%; }
/* Bengali web font, used only inside articles written in Bengali (lists and cards use the phone's own Bengali font) */
@font-face { font-family: "SD Bengali"; src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/noto-sans-bengali@5.3.0/files/noto-sans-bengali-bengali-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC; }

:root {
	--ink-950: #0A0B0F;
	--ink-900: #0F1116;
	--ink-850: #12141A;
	--ink-800: #1A1D24;
	--ink-700: #262A33;
	--chrome: #F2F4F7;
	--slate-300: #C5CBD3;
	--slate-400: #9BA3AF;
	--slate-500: #6B7280;
	--cobalt-700: #2448D8;
	--cobalt-600: #2F5BFF;
	--cobalt-500: #4C72FF;
	--cobalt-300: #8AA8FF;
	--sky-300: #7DD3FC;
	--sage-50: #F8FAF5;
	--mint-50: #F4FDF9;
	--mist-100: #EAEFF6;
	--white: #FFFFFF;
	--live: #34D399;

	/* Light theme roles */
	--bg: var(--sage-50);
	--bg-alt: var(--mist-100);
	--surface-alt: var(--white);
	--surface: var(--white);
	--surface-2: #F1F4EF;
	--fg: #0B0D12;
	--fg-2: #2B313B;
	--muted: #555E6B;
	--faint: #7A828E;
	--line: #E3E8E1;
	--line-2: #D3DAD1;
	--accent: var(--cobalt-600);
	--accent-ink: var(--cobalt-700);
	--accent-soft: rgba(47, 91, 255, .08);
	--sd-icon-accent: var(--cobalt-600);
	--card-shadow: 0 1px 2px rgba(11, 13, 18, .04), 0 14px 34px -18px rgba(11, 20, 40, .18);
	--card-shadow-lg: 0 2px 4px rgba(11, 13, 18, .04), 0 30px 60px -28px rgba(11, 20, 40, .32);

	--f-display: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", "Nirmala UI", Arial, sans-serif;
	--f-text: var(--f-display);
	--f-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ease: cubic-bezier(.22, 1, .36, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--wrap: 1240px;
	--gutter: 24px;
	--header-h: 76px;
	--section: clamp(64px, 7vw, 104px);
	--r-xs: 8px;
	--r-sm: 12px;
	--r: 20px;
	--r-lg: 28px;
	--r-pill: 999px;

	--glass-blur: saturate(1.6) blur(14px);
	--glass-blur-lg: saturate(1.8) blur(20px);
	--glass-dark-fill: rgba(255, 255, 255, .05);
	--glass-dark-edge: rgba(255, 255, 255, .1);
	--glass-dark-shine: inset 0 1px 0 rgba(255, 255, 255, .08);
	--chrome-text: linear-gradient(180deg, #FFFFFF 0%, #D5DBE4 52%, #8C96A5 100%);
	--cobalt-text: linear-gradient(100deg, #2F5BFF 0%, #3E8BFF 55%, #4FB6F5 100%);
	--sky-text: linear-gradient(100deg, #9DB5FF 0%, #7DD3FC 100%);
	--success: #0E9F6E;
	--glow: radial-gradient(55% 60% at 72% 18%, rgba(47, 91, 255, .34), transparent 70%), radial-gradient(38% 42% at 96% 6%, rgba(125, 211, 252, .2), transparent 70%), radial-gradient(40% 50% at 8% 100%, rgba(47, 91, 255, .12), transparent 70%);
}

/* Dark theme: the theme script sets data-theme on <html> before the first paint */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: var(--ink-950);
	--bg-alt: #13161D;
	--surface-alt: #1B1F28;
	--surface: var(--ink-850);
	--surface-2: var(--ink-800);
	--fg: var(--chrome);
	--fg-2: #DCE1E8;
	--muted: var(--slate-400);
	--faint: #7D8592;
	--line: rgba(255, 255, 255, .08);
	--line-2: rgba(255, 255, 255, .14);
	--accent: var(--cobalt-300);
	--accent-ink: var(--cobalt-300);
	--accent-soft: rgba(138, 168, 255, .1);
	--sd-icon-accent: var(--cobalt-300);
	--card-shadow: 0 0 0 1px rgba(255, 255, 255, .02), 0 20px 40px -24px rgba(0, 0, 0, .8);
	--card-shadow-lg: 0 30px 60px -28px rgba(0, 0, 0, .9);
	--cobalt-text: linear-gradient(100deg, #8AA8FF 0%, #7DD3FC 100%);
	--success: #34D399;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--f-text);
	font-size: 17px;
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
svg { display: inline-block; flex: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--cobalt-600); color: #fff; }
:focus-visible { outline: 2px solid var(--cobalt-600); outline-offset: 3px; border-radius: 4px; }
.sd-dark :focus-visible, .sd-drawer :focus-visible { outline-color: var(--sky-300); }

.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.sd-skip { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 18px; background: var(--cobalt-600); color: #fff; border-radius: var(--r-sm); transform: translateY(-160%); transition: transform .3s var(--ease); }
.sd-skip:focus { transform: none; }

/* Dark context: heroes, bands and cards that stay dark in both themes */
.sd-dark {
	--fg: var(--chrome);
	--fg-2: #DCE1E8;
	--muted: var(--slate-400);
	--faint: #7D8592;
	--line: rgba(255, 255, 255, .09);
	--line-2: rgba(255, 255, 255, .15);
	--accent: var(--cobalt-300);
	--accent-ink: var(--cobalt-300);
	--surface: var(--ink-850);
	--surface-2: var(--ink-800);
	--sd-icon-accent: var(--cobalt-300);
	--success: #34D399;
	background: var(--ink-950);
	color: var(--fg);
}

/* Layout */
.sd-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sd-wrap--narrow { max-width: calc(820px + var(--gutter) * 2); }
.sd-section { position: relative; padding-block: var(--section); }
.sd-section--tight { padding-block: clamp(48px, 5vw, 72px); }
/* Alternate sections: a clearly different shade with hairlines top and bottom, so neighbours never blend */
.sd-section--alt { --surface: var(--surface-alt); background: var(--bg-alt); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.sd-section:not(.sd-dark):not(.sd-section--alt) + .sd-section:not(.sd-dark):not(.sd-section--alt),
.sd-section--alt + .sd-section--alt { padding-top: 0; }

/* Type */
.sd-h1, .sd-h2, .sd-h3 { font-family: var(--f-display); color: var(--fg); font-weight: 600; text-wrap: balance; }
.sd-h1 { font-size: clamp(44px, 5.8vw, 84px); line-height: 1; letter-spacing: -.045em; }
.sd-h2 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -.04em; }
.sd-h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; letter-spacing: -.022em; }
/* Bengali vowel signs sit above and below the letters: headings need taller lines and no tight tracking */
[lang="bn"] :is(h1, h2, h3, h4, .sd-h1, .sd-h2, .sd-h3), :is(h1, h2, h3, h4)[lang="bn"] { line-height: 1.4; letter-spacing: 0; }
.sd-article[lang="bn"] { --f-display: "Geist", "Geist Fallback", "SD Bengali", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --f-text: var(--f-display); font-family: var(--f-text); }
[lang="bn"] .sd-article__title { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.34; }
[lang="bn"] .sd-prose { line-height: 1.9; }
/* Gradient emphasis. Word-split headings carry the gradient on each word, because the words animate on their own layers. */
.sd-h1 em, .sd-h2 em, .sd-h3 em, .sd-words em .sd-w { font-style: normal; background: var(--cobalt-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.sd-words em { background: none; color: inherit; }
.sd-dark .sd-h1 em, .sd-dark .sd-h2 em, .sd-dark .sd-words em .sd-w { background-image: var(--sky-text); }
.sd-dark .sd-words em { background: none; }
.sd-lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--muted); max-width: 38.45em; text-wrap: pretty; }
.sd-mono { font-family: var(--f-mono); font-size: 12px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.sd-eyebrow { display: inline-flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; padding: 7px 14px 7px 12px; border-radius: var(--r-pill); font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sd-dark .sd-eyebrow { color: var(--slate-300); background: var(--glass-dark-fill); box-shadow: inset 0 0 0 1px var(--glass-dark-edge), var(--glass-dark-shine); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.sd-dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
/* The ring grows and fades with transform and opacity only, so it never repaints the page */
.sd-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(52, 211, 153, .45); animation: sd-pulse 2.4s var(--ease) infinite; }
@keyframes sd-pulse { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(3.3); opacity: 0; } }
.sd-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sd-label b { font-weight: 500; color: var(--accent); }

/* Icons */
.sd-icon { width: var(--s, 20px); height: var(--s, 20px); }

/* Buttons */
.sd-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 50px;
	padding: 0 20px 0 24px;
	border: 0;
	border-radius: var(--r-pill);
	font: 500 15.5px/1 var(--f-text);
	letter-spacing: -.005em;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .4s var(--ease-out);
}
.sd-btn:active { transform: scale(.98); }
.sd-btn--primary { background: var(--cobalt-600); color: #fff; box-shadow: 0 10px 28px -10px rgba(47, 91, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .22); }
.sd-btn--primary:hover { background: var(--cobalt-500); color: #fff; box-shadow: 0 14px 34px -10px rgba(47, 91, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .28); }
.sd-btn--light { background: #fff; color: var(--ink-950); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6); }
.sd-btn--light:hover { background: var(--chrome); color: var(--ink-950); }
.sd-btn--dark { background: var(--ink-950); color: #fff; }
.sd-btn--dark:hover { background: var(--cobalt-600); color: #fff; }
:root[data-theme="dark"] .sd-btn--dark { background: #fff; color: var(--ink-950); }
.sd-btn--ghost { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }
.sd-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.sd-btn--glass, .sd-dark .sd-btn--ghost { background: rgba(255, 255, 255, .06); color: var(--chrome); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .1); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.sd-btn--glass:hover, .sd-dark .sd-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .14); }
.sd-btn--block { width: 100%; justify-content: space-between; }
.sd-btn__short { display: none; }
.sd-btn--sm { min-height: 42px; padding: 0 14px 0 18px; font-size: 14.5px; gap: 10px; }
.sd-btn__icon { position: relative; display: inline-flex; width: 18px; height: 18px; overflow: hidden; }
.sd-btn__icon .sd-icon { --s: 18px; position: absolute; inset: 0; transition: transform .5s var(--ease-out); }
.sd-btn__icon .sd-icon + .sd-icon { transform: translateX(-120%); }
.sd-btn:hover .sd-btn__icon .sd-icon:first-child { transform: translateX(120%); }
.sd-btn:hover .sd-btn__icon .sd-icon + .sd-icon { transform: none; }
.sd-btn__icon .i-angle-right + .i-angle-right { transform: translate(-110%, 110%); }
.sd-btn:hover .sd-btn__icon .i-angle-right:first-child { transform: translate(110%, -110%); }

.sd-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0 4px;
	border: 0;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat, linear-gradient(var(--line-2), var(--line-2)) 0 100% / 100% 1px no-repeat;
	font: 500 15px/1.35 var(--f-text);
	color: var(--fg);
	cursor: pointer;
	transition: background-size .5s var(--ease-out), color .3s;
}
.sd-link:hover { background-size: 100% 1px, 100% 1px; color: var(--accent-ink); }
.sd-link .sd-icon { --s: 16px; transition: transform .4s var(--ease-out); }
.sd-link:hover .sd-icon { transform: translateX(3px); }
.sd-link:hover .i-angle-right { transform: translate(2px, -2px); }
.sd-link--quiet { color: var(--muted); }

/* Header: floating glass pill. See-through over dark heroes, frosted light glass once the page scrolls. */
.sd-header {
	--nav-fg: rgba(11, 13, 18, .7);
	--nav-fg-on: var(--ink-950);
	--nav-pill: rgba(11, 13, 18, .06);
	--nav-pill-2: rgba(11, 13, 18, .1);
	--dd-gap: 22px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 70;
	padding-top: 12px;
	color: var(--ink-950);
	pointer-events: none;
	transition: padding-top .4s var(--ease-out), color .4s var(--ease-out);
}
.admin-bar .sd-header { top: 32px; }
.sd-header.is-scrolled { padding-top: 8px; --dd-gap: 20px; }
.sd-header--over-dark:not(.is-scrolled) {
	--nav-fg: rgba(242, 244, 247, .72);
	--nav-fg-on: #fff;
	--nav-pill: rgba(255, 255, 255, .08);
	--nav-pill-2: rgba(255, 255, 255, .14);
	color: #fff;
}
.sd-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 62px;
	padding: 0 8px 0 22px;
	border: 1px solid rgba(11, 13, 18, .06);
	border-radius: var(--r-pill);
	background: rgba(248, 250, 245, .78);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 30px -16px rgba(11, 20, 40, .28);
	pointer-events: auto;
	transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), height .4s var(--ease-out);
}
/* The blur sits on a layer behind the bar so dropdown panels inside it can blur the page too */
.sd-header__bar::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); pointer-events: none; }
.sd-header.is-scrolled .sd-header__bar { height: 58px; background: rgba(248, 250, 245, .86); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 16px 40px -20px rgba(11, 20, 40, .35); }
.sd-header--over-dark:not(.is-scrolled) .sd-header__bar { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 30px -16px rgba(0, 0, 0, .6); }

.sd-logo { display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--f-display); font-size: 21px; font-weight: 650; line-height: 1; letter-spacing: -.035em; white-space: nowrap; color: var(--fg); }
.sd-header .sd-logo, .sd-drawer .sd-logo { color: inherit; padding-block: 12px; }
.sd-logo__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt-600); transition: transform .5s var(--ease-out); }
.sd-dark .sd-logo__dot, .sd-header--over-dark:not(.is-scrolled) .sd-logo__dot, :root[data-theme="dark"] .sd-logo__dot { background: var(--cobalt-500); box-shadow: 0 0 12px rgba(76, 114, 255, .8); }
.sd-logo:hover .sd-logo__dot { transform: scale(1.5); }
.sd-logo--image img { width: auto; height: var(--logo-h, 36px); max-width: 220px; object-fit: contain; }
.sd-logo.has-dark .sd-logo__img--dark { display: none; }
.sd-header--over-dark:not(.is-scrolled) .sd-logo.has-dark .sd-logo__img--main, .sd-dark .sd-logo.has-dark .sd-logo__img--main, :root[data-theme="dark"] .sd-logo.has-dark .sd-logo__img--main { display: none; }
.sd-header--over-dark:not(.is-scrolled) .sd-logo.has-dark .sd-logo__img--dark, .sd-dark .sd-logo.has-dark .sd-logo__img--dark, :root[data-theme="dark"] .sd-logo.has-dark .sd-logo__img--dark { display: block; }

.sd-header__brand { flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.sd-nav { position: relative; flex: 0 0 auto; }
.sd-nav__list { position: relative; display: flex; align-items: center; gap: 2px; }
.sd-nav__item { display: flex; align-items: center; }
.sd-nav__item.has-dd:not(.has-mega) { position: relative; }
.sd-nav__link { display: block; padding: 9px 15px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 500; line-height: 20px; letter-spacing: -.005em; color: var(--nav-fg); transition: color .3s var(--ease-out), background-color .3s var(--ease-out); }
.sd-nav__link:hover, .sd-nav__link[aria-current], .sd-nav__item.is-open > .sd-nav__link { color: var(--nav-fg-on); }
.sd-nav__item.has-dd > .sd-nav__link { padding-right: 3px; }
.sd-nav__caret { display: grid; place-items: center; width: 24px; height: 24px; margin-right: 9px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--nav-fg); cursor: pointer; transition: color .3s var(--ease-out), background-color .3s var(--ease-out); }
.sd-nav__caret .sd-icon { --s: 14px; transition: transform .45s var(--ease-out); }
.sd-nav__item:hover > .sd-nav__caret, .sd-nav__item.is-open > .sd-nav__caret { color: var(--nav-fg-on); }
.sd-nav__caret:hover { background: var(--nav-pill); }
.sd-nav__item.is-open > .sd-nav__caret .sd-icon { transform: rotate(180deg); }
html:not(.js) .sd-nav__link:hover, html:not(.js) .sd-nav__link[aria-current] { background: var(--nav-pill); }
.sd-nav__pill { position: absolute; top: 50%; left: 0; width: var(--w, 0); height: 38px; margin-top: -19px; border-radius: var(--r-pill); background: var(--nav-pill); transform: translateX(var(--x, 0)); opacity: 0; pointer-events: none; transition: transform .5s var(--ease-out), width .5s var(--ease-out), opacity .3s var(--ease-out), background-color .4s var(--ease-out); }
.sd-nav.has-pill .sd-nav__pill { opacity: 1; }
.sd-nav.is-instant .sd-nav__pill { transition: none; }
.sd-dd { position: absolute; top: calc(100% + var(--dd-gap)); z-index: 5; visibility: hidden; opacity: 0; pointer-events: none; }

.sd-header__actions { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.sd-header__cta.sd-btn { min-height: 44px; }
.sd-header__cta.sd-btn--glass { background: var(--ink-950); color: #fff; box-shadow: 0 8px 20px -10px rgba(11, 13, 18, .6); }
.sd-header__cta.sd-btn--glass:hover { background: var(--cobalt-600); color: #fff; }
.sd-header--over-dark:not(.is-scrolled) .sd-header__cta.sd-btn--glass { background: #fff; color: var(--ink-950); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .6); }
.sd-header--over-dark:not(.is-scrolled) .sd-header__cta.sd-btn--glass:hover { background: var(--cobalt-600); color: #fff; }
.sd-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--nav-pill); color: inherit; cursor: pointer; transition: background-color .3s var(--ease-out); }
.sd-burger:hover { background: var(--nav-pill-2); }
.sd-burger__lines { display: inline-flex; flex-direction: column; gap: 5px; width: 18px; }
.sd-burger__lines i { display: block; width: 100%; height: 1.5px; border-radius: 2px; background: currentColor; transition: width .4s var(--ease-out); }
.sd-burger__lines i:last-child { width: 66%; }
.sd-burger:hover .sd-burger__lines i:last-child { width: 100%; }

/* Theme switch */
.sd-theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--nav-pill); color: inherit; cursor: pointer; overflow: hidden; transition: background-color .3s var(--ease-out); }
.sd-theme-toggle:hover { background: var(--nav-pill-2); }
.sd-cart-link { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--nav-pill); color: inherit; transition: background-color .3s var(--ease-out); }
.sd-cart-link[hidden] { display: none; }
.sd-cart-link:hover { background: var(--nav-pill-2); }
.sd-cart-link__count { position: absolute; top: 4px; right: 3px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--cobalt-600); color: #fff; font: 600 10.5px/1 var(--f-text); box-shadow: 0 0 0 2px var(--bg); }
.sd-cart-link__count.is-empty { display: none; }
html:not(.js) .sd-theme-toggle { display: none; }
.sd-theme-toggle .sd-icon { position: absolute; --s: 18px; transition: transform .6s var(--ease-out), opacity .4s var(--ease-out); }
.sd-theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
:root[data-theme="dark"] .sd-theme-toggle__sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .sd-theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(.4); }
html.sd-vt-theme::view-transition-old(root), html.sd-vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Dark theme header */
:root[data-theme="dark"] .sd-header.is-scrolled, :root[data-theme="dark"] .sd-header:not(.sd-header--over-dark) { --nav-fg: rgba(242, 244, 247, .72); --nav-fg-on: #fff; --nav-pill: rgba(255, 255, 255, .08); --nav-pill-2: rgba(255, 255, 255, .14); color: #fff; }
:root[data-theme="dark"] .sd-header.is-scrolled .sd-header__bar, :root[data-theme="dark"] .sd-header:not(.sd-header--over-dark) .sd-header__bar { background: rgba(18, 20, 26, .78); border-color: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 40px -18px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .sd-header .sd-header__cta.sd-btn--glass { background: #fff; color: var(--ink-950); }
:root[data-theme="dark"] .sd-header .sd-header__cta.sd-btn--glass:hover { background: var(--cobalt-600); color: #fff; }

/* Drawer: only the hidden state is needed for the first paint; the panel styles live in main.css */
.sd-drawer[hidden] { display: none; }
body.sd-lock { overflow: hidden; }

/* Hero backdrop: cobalt glow, a faint dot grid and grain */
.sd-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--glow), var(--ink-950); }
.sd-hero-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(70% 60% at 62% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(70% 60% at 62% 30%, #000 10%, transparent 75%); }
.sd-hero-bg::after { content: ""; position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Blueprint variant (About): square grid lines fading out from the top right, a cobalt glow, no dots or grain */
.sd-hero-bg--grid { background: radial-gradient(closest-side, rgba(47, 91, 255, .42), rgba(10, 11, 15, 0)) calc(100% + 30vw) -30vw / 70vw 70vw no-repeat, var(--ink-950); }
.sd-hero-bg--grid::before { background-image: linear-gradient(to right, rgba(155, 163, 175, .08) 1px, transparent 1px), linear-gradient(to bottom, rgba(155, 163, 175, .08) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: radial-gradient(ellipse 80% 75% at 70% 30%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 80% 75% at 70% 30%, #000 20%, transparent 78%); }
.sd-hero-bg--grid::after { display: none; }

/* Home hero */
.sd-hero { position: relative; isolation: isolate; padding-top: calc(var(--header-h) + clamp(28px, 5vh, 64px)); padding-bottom: clamp(28px, 4vw, 48px); overflow: hidden; color: var(--chrome); }
.sd-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
.sd-hero__copy { padding-bottom: clamp(16px, 3vw, 44px); }
.sd-hero__title { margin: 26px 0 22px; max-width: 10.25em; font-size: clamp(46px, 5.6vw, 80px); }
.sd-hero__intro { max-width: 33.15em; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.55; color: var(--slate-400); }
.sd-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: clamp(26px, 3vw, 36px); }
.sd-stars { --star: 14px; --gold: #F5B83D; display: inline-block; flex: none; width: calc((var(--star) + 2px) * 5 - 2px); height: var(--star); vertical-align: -2px; background: linear-gradient(90deg, var(--gold) calc((var(--star) + 2px) * var(--on, 5)), rgba(245, 184, 61, .25) 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 1.8l3 6.2 6.8.9-5 4.7 1.3 6.7L12 17l-6.1 3.3 1.3-6.7-5-4.7 6.8-.9z'/%3E%3C/svg%3E") 0 0 / calc(var(--star) + 2px) var(--star) repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 1.8l3 6.2 6.8.9-5 4.7 1.3 6.7L12 17l-6.1 3.3 1.3-6.7-5-4.7 6.8-.9z'/%3E%3C/svg%3E") 0 0 / calc(var(--star) + 2px) var(--star) repeat-x; }
.sd-hero__visual { position: relative; height: clamp(420px, 44vw, 600px); }
.sd-hero__disc { position: absolute; left: 50%; bottom: 0; width: min(100%, 480px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 30%, var(--ink-800), var(--ink-900) 70%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 120px -30px rgba(47, 91, 255, .55); }
.sd-hero__disc::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; padding: 1.5px; background: conic-gradient(from 200deg, #2F5BFF, #7DD3FC, rgba(47, 91, 255, .15), #2F5BFF); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: sd-rot 12s linear infinite; will-change: transform; }
@keyframes sd-rot { to { transform: rotate(1turn); } }
@property --sd-ring { syntax: "<angle>"; inherits: false; initial-value: 200deg; }
@keyframes sd-ring { to { --sd-ring: 560deg; } }
.sd-hero__photo { position: absolute; left: 50%; bottom: 0; width: auto; height: 104%; max-width: none; transform: translateX(-50%) translateY(var(--sd-parallax, 0)) scaleX(var(--sd-flip, 1)); -webkit-mask-image: linear-gradient(to top, transparent 0, #000 14%); mask-image: linear-gradient(to top, transparent 0, #000 14%); }
.sd-chip-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(18, 20, 26, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .1), 0 20px 40px -20px #000; color: var(--chrome); -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); }
.sd-chip-float strong { display: block; font-size: 21px; font-weight: 650; line-height: 1.05; letter-spacing: -.03em; }
.sd-chip-float small { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--slate-400); }
.sd-chip-float__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--cobalt-600); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 18px -8px rgba(47, 91, 255, .9); }
.sd-chip-float__icon .sd-icon { --s: 18px; }
.sd-chip-float--b { right: -8px; bottom: 20%; }
/* Home hero: copy with the badges under it on the left, portrait on the right */
.sd-hero--home .sd-hero__grid { grid-template-areas: "copy visual" "badges visual"; grid-template-rows: 1fr auto; row-gap: 0; }
.sd-hero--home .sd-hero__copy { grid-area: copy; align-self: end; padding-bottom: 0; }
.sd-hero--home .sd-hero__visual { grid-area: visual; }
.sd-hero__badges { grid-area: badges; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(28px, 3vw, 40px); margin: clamp(32px, 3.4vw, 44px) 0 clamp(16px, 3vw, 44px); padding: 0; list-style: none; color: #fff; }
.sd-hero__badge { display: flex; align-items: center; gap: 11px; }
/* The badge files have empty space around the artwork, so each one is cropped to it, then shown in white */
.sd-hero__badge-img { position: relative; display: block; height: var(--h, 40px); aspect-ratio: var(--ar); overflow: hidden; }
.sd-hero__badge-img img { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; max-width: none; filter: brightness(0) invert(1); opacity: .94; }
.sd-hero__badge--squarespace { --ar: 925 / 317; --w: 110.7%; --x: -.32%; --y: -.32%; --h: 40px; }
.sd-hero__badge--google { --ar: 809 / 402; --w: 126.58%; --x: -12.36%; --y: -26.37%; --h: 40px; }
.sd-hero__fi { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding-bottom: 2px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9); font: 700 16px/1 var(--f-display); letter-spacing: -.02em; }
.sd-hero__badge-text { display: grid; gap: 4px; line-height: 1.1; }
.sd-hero__badge-text b { font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; }
.sd-hero__badge-text small { font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-400); }

/* Hero service strip */
.sd-strip { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(20px, 3vw, 32px); border-radius: 22px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .07); -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); }
.sd-strip__item { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 20px; color: var(--chrome); transition: background-color .35s var(--ease-out); }
.sd-strip__item:first-child { border-radius: 22px 0 0 22px; }
.sd-strip__item:last-child { border-radius: 0 22px 22px 0; }
.sd-strip__item + .sd-strip__item { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08); }
.sd-strip__item:hover { background: rgba(255, 255, 255, .05); }
.sd-strip__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #fff; --sd-icon-accent: var(--cobalt-300); transition: background-color .35s, transform .5s var(--ease-out); }
.sd-strip__item:hover .sd-strip__icon { background: var(--cobalt-600); transform: rotate(-6deg); --sd-icon-accent: #fff; }
.sd-strip__text { display: grid; gap: 4px; min-width: 0; }
.sd-strip__text small { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-400); }
.sd-strip__text b { font-size: 15.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.012em; }
.sd-strip__go { margin-left: auto; color: rgba(242, 244, 247, .4); transition: transform .4s var(--ease-out), color .3s; }
.sd-strip__item:hover .sd-strip__go { color: #fff; transform: translate(2px, -2px); }

/* Inner page hero */
.sd-page-hero { position: relative; isolation: isolate; padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) 0 clamp(48px, 6vw, 80px); overflow: hidden; color: var(--chrome); }
/* Brand mark watermark on the right of page heroes that have no image of their own */
.sd-page-hero:not(.sd-about-hero):not(.sd-product-hero)::after { content: ""; position: absolute; z-index: -1; top: calc(50% + var(--header-h) / 2); right: clamp(12px, 7vw, 150px); height: clamp(200px, 28vw, 380px); aspect-ratio: 279 / 512; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 279 512' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='165' y1='0' x2='0' y2='190' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2350B8F6'/%3E%3Cstop offset='1' stop-color='%233366FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M144 22 22 177.5 144 333' stroke='url(%23g)' stroke-width='44' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M135 178 256 333.5 135 489' stroke='%23fff' stroke-width='44' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .08; pointer-events: none; }
@media (max-width: 700px) { .sd-page-hero:not(.sd-about-hero):not(.sd-product-hero)::after { right: -20px; height: 180px; opacity: .06; } }
.sd-page-hero__title { max-width: 16em; margin-top: 22px; font-size: clamp(40px, 5.2vw, 72px); text-wrap: pretty; }
.sd-page-hero__lead { max-width: 46em; margin-top: clamp(18px, 2vw, 26px); color: var(--slate-400); }
.sd-page-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 26px; color: var(--slate-400); }
.sd-crumbs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400); }
.sd-crumbs a:hover { color: #fff; }
.sd-crumbs span[aria-hidden] { opacity: .45; }

/* Motion: word-by-word blur rise, blur-up reveals and photo reveals */
.sd-w { display: inline-block; }
.sd-w > span { display: inline; }
html.js .sd-words .sd-w { opacity: 0; transform: translate3d(0, .4em, 0); filter: blur(8px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); transition-delay: calc(60ms + var(--w, 0) * 40ms); }
html.js .sd-words.is-in .sd-w { opacity: 1; transform: none; filter: blur(0); }
/* The first screen animates in with CSS alone, from the first paint, so it never waits for the script */
@keyframes sd-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sd-rise-word { from { opacity: 0; transform: translate3d(0, .4em, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sd-rise-nb { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes sd-rise-word-nb { from { opacity: 0; transform: translate3d(0, .4em, 0); } to { opacity: 1; transform: none; } }
html.js .sd-hero-fade { animation: sd-rise .9s var(--ease-out) calc(160ms + var(--i, 0) * 80ms) both; }
/* Decorative pieces around the hero photo only fade; the photo itself paints at once */
html.js .sd-fade-in { opacity: 0; transition: opacity .9s var(--ease-out); transition-delay: calc(320ms + var(--i, 0) * 90ms); }
html.js .is-ready .sd-fade-in { opacity: 1; }
html.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0) scale(.985); filter: blur(10px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
html.js [data-reveal].is-visible { opacity: 1; transform: none; filter: blur(0); }
html.js [data-reveal].is-visible.is-done { filter: none; }
html.js [data-wipe] { clip-path: inset(12% 8% 12% 8% round var(--r-lg)); opacity: .2; transition: clip-path 1.2s var(--ease-out), opacity .9s var(--ease-out); }
html.js [data-wipe].is-visible { clip-path: inset(0 0 0 0 round var(--r-lg)); opacity: 1; }
html.js [data-wipe] img { transform: scale(1.14); transition: transform 1.6s var(--ease-out); }
html.js [data-wipe].is-visible img { transform: scale(1); }
html.js .sd-hero__photo { transform: translateX(-50%) translateY(28px) scale(1.03) scaleX(var(--sd-flip, 1)); transition: transform 1.6s var(--ease-out); }
html.js .is-ready .sd-hero__photo { transform: translateX(-50%) translateY(var(--sd-parallax, 0)) scale(1) scaleX(var(--sd-flip, 1)); }
.sd-about-hero .sd-hero__photo { --sd-flip: -1; }

@keyframes sd-failsafe { to { opacity: 1; transform: none; filter: none; clip-path: none; } }
@keyframes sd-failsafe-op { to { opacity: 1; } }
html.js:not(.sd-ready) .sd-fade-in { animation: sd-failsafe-op .6s ease 2.5s forwards; }
html.js:not(.sd-ready) .sd-words .sd-w, html.js:not(.sd-ready) [data-reveal], html.js:not(.sd-ready) [data-wipe] { animation: sd-failsafe .6s ease 2.5s forwards; }
html.js [data-hero] .sd-words .sd-w { animation: sd-rise-word .8s var(--ease-out) calc(60ms + var(--w, 0) * 40ms) both; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .4s var(--ease) both sd-vt-out; }
::view-transition-new(root) { animation: .5s var(--ease-out) both sd-vt-in; }
@keyframes sd-vt-out { to { opacity: 0; } }
@keyframes sd-vt-in { from { opacity: 0; } }

/* Breakpoints: 1920+ wide, 1440 desktop, 1280 laptop, 1080 tablet landscape,
   820 tablet portrait and unfolded foldables, 600 phones, 400 small phones and fold cover screens. */
@media (min-width: 1920px) {
	:root { --wrap: 1320px; }
	body { font-size: 18px; }
}
@media (max-width: 1280px) {
	.sd-nav__link { padding: 9px 12px; }
	.sd-nav__item.has-dd > .sd-nav__link { padding-right: 2px; }
	.sd-nav__caret { margin-right: 6px; }
	.sd-strip__item { padding: 16px 16px; gap: 12px; }
	.sd-strip__go { display: none; }
}
@media (max-width: 1080px) {
	.sd-nav { display: none; }
	.sd-burger { display: inline-flex; }
	.sd-header__actions { flex: 0 0 auto; }
	.sd-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
	.sd-hero__title { font-size: clamp(42px, 5.8vw, 64px); }
	.sd-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sd-strip__item:first-child { border-radius: 22px 0 0 0; }
	.sd-strip__item:nth-child(2) { border-radius: 0 22px 0 0; }
	.sd-strip__item:nth-child(3) { border-radius: 0 0 0 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
	.sd-strip__item:last-child { border-radius: 0 0 22px 0; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .08); }
	.sd-chip-float--b { right: -2%; }
}
@media (max-width: 820px) {
	html.js .sd-words .sd-w, html.js .sd-hero-fade, html.js [data-reveal], html.js .sd-drawer__list > li, html.js .sd-drawer__foot { filter: none; }
	html.js .sd-hero-fade { animation-name: sd-rise-nb; }
	html.js [data-hero] .sd-words .sd-w { animation-name: sd-rise-word-nb; }
	.sd-hero__grid { grid-template-columns: 1fr; }
	.sd-hero__copy { padding-bottom: 0; }
	.sd-hero__visual { width: 100%; max-width: 460px; height: clamp(360px, 90vw, 480px); margin: 16px auto 0; }
	.sd-hero__title { max-width: 9.56em; font-size: clamp(40px, 8.6vw, 64px); }
	.sd-hero--home .sd-hero__grid { grid-template-areas: "copy" "badges" "visual"; grid-template-rows: auto; }
	.sd-hero__badges { margin-bottom: 0; }
}
@media (max-width: 782px) {
	.admin-bar .sd-header { top: 46px; }
}
@media (max-width: 600px) {
	:root { --header-h: 68px; --gutter: 20px; }
	body { font-size: 16.5px; }
	.sd-header, .sd-header.is-scrolled { padding-top: 8px; }
	.sd-header__bar, .sd-header.is-scrolled .sd-header__bar { height: 56px; padding: 0 6px 0 18px; }
	.sd-header__cta { display: none; }
	.sd-hide-sm { display: none; }
	/* Two buttons side by side, with a shorter label where one is set */
	.sd-hero__ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
	.sd-hero__ctas .sd-btn { width: 100%; min-width: 0; min-height: 50px; justify-content: center; gap: 8px; padding: 0 14px; }
	.sd-hero__ctas .sd-btn:only-child { grid-column: 1 / -1; }
	.sd-btn__long { display: none; }
	.sd-btn__short { display: inline; }
	/* Phones: a centred hero. Headline, intro and both buttons first, then the portrait and the badges. */
	.sd-hero--home { padding-top: calc(var(--header-h) + 28px); padding-bottom: 36px; }
	.sd-hero--home .sd-hero__grid { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
	.sd-hero--home .sd-hero__copy { display: contents; }
	.sd-hero--home .sd-eyebrow { order: 1; align-self: center; }
	.sd-hero--home .sd-hero__title { order: 2; max-width: 11em; margin: 18px auto 14px; text-wrap: balance; }
	.sd-hero--home .sd-hero__intro { order: 3; max-width: 24em; margin-inline: auto; font-size: 16.5px; text-wrap: balance; }
	.sd-hero--home .sd-hero__ctas { order: 4; margin-top: 26px; }
	.sd-hero--home .sd-hero__visual { order: 5; width: 100%; height: clamp(200px, 30svh, 290px); margin: 30px auto 0; }
	.sd-hero--home .sd-hero__disc { width: auto; height: 100%; }
	.sd-hero__badges { order: 6; align-self: stretch; display: grid; grid-template-columns: auto auto auto; justify-content: space-between; align-items: center; gap: 12px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
	.sd-hero__badge { gap: 8px; }
	.sd-hero__badge--squarespace { --h: 31px; }
	.sd-hero__badge--google { --h: 31px; }
	.sd-hero__fi { width: 30px; height: 30px; font-size: 13.5px; }
	.sd-hero__badge-text { gap: 3px; }
	.sd-hero__badge-text b { font-size: 13.5px; }
	.sd-hero__badge-text small { font-size: 8px; letter-spacing: .1em; }
	.sd-chip-float { padding: 9px 12px 9px 9px; gap: 9px; border-radius: 14px; }
	.sd-chip-float strong { font-size: 17px; }
	.sd-chip-float__icon { width: 30px; height: 30px; border-radius: 9px; }
	.sd-chip-float--b { right: 0; bottom: 16%; }
	.sd-strip { grid-template-columns: 1fr; }
	.sd-strip__item, .sd-strip__item:first-child, .sd-strip__item:nth-child(2), .sd-strip__item:nth-child(3), .sd-strip__item:last-child { border-radius: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); padding: 14px 16px; }
	.sd-strip__item:first-child { border-radius: 22px 22px 0 0; box-shadow: none; }
	.sd-strip__item:last-child { border-radius: 0 0 22px 22px; }
	.sd-strip__go { display: block; }
	.sd-page-hero__title { max-width: none; }
}
@media (max-width: 400px) {
	:root { --gutter: 16px; }
	.sd-h1, .sd-hero__title, .sd-page-hero__title { font-size: clamp(34px, 10.4vw, 42px); letter-spacing: -.04em; }
	.sd-h2 { font-size: clamp(28px, 8.4vw, 34px); }
	.sd-logo { font-size: 19px; }
	.sd-eyebrow { font-size: 10.5px; }
	.sd-btn { padding: 0 16px 0 18px; }
	.sd-hero__ctas .sd-btn { padding: 0 12px; }
	.sd-hero__ctas .sd-btn__icon { display: none; }
	.sd-drawer__list > li > a, .sd-drawer__row > a { font-size: 24px; padding-block: 14px; }
	.sd-header__bar, .sd-header.is-scrolled .sd-header__bar { padding-left: 16px; }
	.sd-chip-float small { display: none; }
}
@media (max-width: 320px) {
	.sd-chip-float { display: none; }
}
/* Short phones: a smaller portrait keeps the main button inside the first screen */
@media (max-width: 600px) and (max-height: 760px) {
	.sd-hero--home .sd-hero__visual { height: clamp(150px, 24svh, 220px); }
}
@media (max-width: 360px) {
	.sd-hero__badges { gap: 8px; }
	.sd-hero__badge--squarespace, .sd-hero__badge--google { --h: 26px; }
	.sd-hero__fi { width: 26px; height: 26px; font-size: 12px; }
	.sd-hero__badge-text b { font-size: 12px; }
	.sd-hero__badge-text small { font-size: 7px; }
}
/* Foldables spanning two screens: keep the hero text and the photo on either side of the hinge */
@media (horizontal-viewport-segments: 2) {
	.sd-hero__grid { grid-template-columns: 1fr 1fr; column-gap: calc(env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px) + 48px); }
	.sd-hero__visual { max-width: none; margin: 0; }
	.sd-hero--home .sd-hero__grid { grid-template-areas: "copy visual" "badges visual"; grid-template-rows: 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
	html.js .sd-fade-in { opacity: 1; transition: none; }
	html.js .sd-hero-fade, html.js [data-hero] .sd-words .sd-w { animation: none; }
	html.js .sd-words .sd-w, html.js .sd-hero-fade, html.js [data-reveal], html.js [data-wipe], html.js [data-wipe] img, html.js .sd-drawer__list > li, html.js .sd-drawer__foot, html.js .sd-hero__photo { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; }
	html.js .sd-hero__photo { transform: translateX(-50%) scaleX(var(--sd-flip, 1)); }
	.sd-drawer__panel, .sd-drawer__backdrop, .sd-header, .sd-header__bar, .sd-nav__pill, .sd-btn__icon .sd-icon, .sd-theme-toggle .sd-icon, .sd-nav__caret .sd-icon, .sd-drawer__sub, .sd-drawer__toggle { transition: none; }
	.sd-dot::after, .sd-hero__disc::before { animation: none; }
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Home-only hero rules for phones and upright tablets live in critical-home.css (printed on the homepage only). */