/* 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?v=2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(../fonts/geist-mono.woff2?v=2) 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: #0C0E12;
	--ink-900: #101217;
	--ink-850: #14161B;
	--ink-800: #1B1E26;
	--ink-700: #262A33;
	--chrome: #F2F4F7;
	--slate-300: #C5CBD3;
	--slate-400: #9BA3AF;
	--slate-500: #6B7280;
	--cobalt-700: #9A3412;
	--cobalt-600: #C2410C;
	--cobalt-500: #EA580C;
	--cobalt-300: #FF8B4D;
	--sky-300: #FFB27A;
	--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(194, 65, 12, .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, #C2410C 0%, #EE4B22 55%, #FF8B4D 100%);
	--sky-text: linear-gradient(100deg, #FFC29A 0%, #FFB27A 100%);
	--success: #0E9F6E;
	--glow: radial-gradient(55% 60% at 72% 18%, rgba(194, 65, 12, .34), transparent 70%), radial-gradient(38% 42% at 96% 6%, rgba(255, 139, 77, .2), transparent 70%), radial-gradient(40% 50% at 8% 100%, rgba(194, 65, 12, .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(255, 160, 110, .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, #FF8B4D 0%, #FFB27A 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(194, 65, 12, .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(194, 65, 12, .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(194, 65, 12, .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(194, 65, 12, .55); }
.sd-hero__disc::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; padding: 1.5px; background: conic-gradient(from 200deg, #C2410C, #FFB27A, rgba(194, 65, 12, .15), #C2410C); -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(194, 65, 12, .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 are cropped to the artwork and already white */
.sd-hero__badge-img { position: relative; display: block; height: var(--h, 40px); aspect-ratio: var(--ar); }
.sd-hero__badge-img img { display: block; width: 100%; height: 100%; max-width: none; opacity: .94; }
.sd-hero__badge--squarespace { --ar: 280 / 96; --h: 40px; }
.sd-hero__badge--google { --ar: 193 / 96; --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: 1; transform: translateY(-50%) rotate(-8deg); border-radius: 22%; box-shadow: 0 40px 120px -20px rgba(255, 107, 53, .45); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3ClinearGradient id='og' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FF8B4D'/%3E%3Cstop offset='1' stop-color='%23EE4B22'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='512' height='512' rx='116' fill='url(%23og)'/%3E%3Cg transform='translate(18 -2)'%3E%3Crect x='132' y='92' width='72' height='312' rx='36' fill='%23FFFFFF'/%3E%3Cpath d='M168 232 C168 176 214 156 262 156 C318 156 356 192 356 250 L356 300 L284 300 L284 256 C284 236 272 226 254 226 C230 226 204 238 204 268 L204 300 L168 300 Z' fill='%23FFFFFF'/%3E%3Cpath d='M284 307 H356 V380 Q356 404 332 404 H308 Q284 404 284 380 Z' fill='%231A1C22'/%3E%3Crect x='297' y='398' width='18' height='40' rx='9' fill='%231A1C22'/%3E%3Crect x='329' y='398' width='18' height='40' rx='9' fill='%231A1C22'/%3E%3C/g%3E%3Cpath d='M400 66 C407.36 104.64 407.36 104.64 446 112 C407.36 119.36 407.36 119.36 400 158 C392.64 119.36 392.64 119.36 354 112 C392.64 104.64 392.64 104.64 400 66Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .16; 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); }
/* Sections further down the page are only laid out and painted as they come near the screen, which
   takes a large share of the start-up work off phones. "auto" remembers each section's real height once seen. */
.sd-main > section:nth-child(n+3) { content-visibility: auto; contain-intrinsic-size: auto 800px; }
/* Service pages: the credential badges sit on the same line as the buttons, after a thin divider */
@media (min-width: 1000px) {
	.sd-svc-hero__actions { display: flex; align-items: center; gap: clamp(28px, 3vw, 44px); margin-top: clamp(28px, 3vw, 40px); }
	.sd-svc-hero__actions .sd-hero__ctas { flex: none; margin-top: 0; }
	.sd-svc-hero__actions .sd-hero__badges { flex-wrap: nowrap; gap: clamp(22px, 2.4vw, 34px); margin: 0; padding-left: clamp(28px, 3vw, 44px); border-left: 1px solid rgba(255, 255, 255, .14); }
	.sd-svc-hero__actions .sd-hero__badge--squarespace, .sd-svc-hero__actions .sd-hero__badge--google { --h: 36px; }
}
.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; } }
/* Only if the theme script never runs: on a slow phone it can take a few seconds to start, and a fallback that
   fires before it would animate dozens of blurred and clipped blocks on the main thread for nothing. */
html.js:not(.sd-ready) .sd-fade-in { animation: sd-failsafe-op .6s ease 6s 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 6s 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). */