/* ==========================================================================
   Shiok Digital — Breakdance global CSS
   Paste into: Breakdance › Settings › Custom Code (site-wide <head> CSS),
   or a Code Block inside the global Header template.
   Generated from the design system — edit the system, then regenerate.

   FONTS: set in Breakdance › Global Settings › Typography (Google Fonts):
   Archivo 700/600/500 · Instrument Sans 400/500/600 · IBM Plex Mono 400 · Nunito 900
   If you prefer loading them here instead, uncomment the next line.
   ========================================================================== */
/* @import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400&family=Nunito:wght@900&display=swap"); */

/* ---------- tokens/colors.css ---------- */
:root{
--blue-50:#F0F6FC;--blue-100:#DDEBF9;--blue-200:#B9D6F2;--blue-300:#8CBAE6;--blue-400:#5A9BDD;
--blue-500:#2472C6;--blue-600:#17579A;--blue-700:#0F3D6E;--blue-800:#0C3560;--blue-900:#0A2C50;--blue-950:#071E38;

--violet-50:#F6F2FF;--violet-100:#ECE5FF;--violet-200:#D3C4FE;--violet-300:#B49BFC;--violet-400:#8B62FA;
--violet-500:#6D3AF7;--violet-600:#5C25E0;--violet-700:#4C1FB8;--violet-800:#3A1690;--violet-900:#2E1065;

--neutral-0:#FFFFFF;--neutral-25:#FBFCFD;--neutral-50:#F5F7FA;--neutral-100:#EDF0F5;--neutral-200:#DFE4EC;
--neutral-300:#C6CDD9;--neutral-400:#9AA4B4;--neutral-500:#657083;--neutral-600:#545E6E;--neutral-700:#3C4553;
--neutral-800:#262D38;--neutral-900:#151A21;

--green-500:#0E7C5A;--green-100:#DCF3EA;
--amber-500:#B26B00;--amber-100:#FBEED2;
--red-500:#C42B1C;--red-100:#FBE3E0;

/* ---- semantic aliases ---- */
--brand-primary:var(--blue-700);
--brand-primary-hover:var(--blue-800);
--brand-primary-press:var(--blue-900);
--brand-accent:var(--violet-500);
--brand-accent-hover:var(--violet-600);
--brand-accent-press:var(--violet-700);

--text-strong:var(--neutral-900);
--text-body:var(--neutral-700);
--text-muted:var(--neutral-500);
--text-faint:var(--neutral-400);
--text-on-dark:var(--neutral-0);
--text-on-dark-muted:#A9BCD1;
--text-link:var(--brand-primary);
--text-link-hover:var(--brand-accent);

--surface-page:var(--neutral-0);
--surface-subtle:var(--neutral-50);
--surface-card:var(--neutral-0);
--surface-sunken:var(--neutral-100);
--surface-inverse:var(--blue-950);
--surface-accent-soft:var(--violet-50);
--surface-brand-soft:var(--blue-50);

--border-subtle:var(--neutral-200);
--border-default:var(--neutral-300);
--border-strong:var(--neutral-400);
--border-inverse:rgba(255,255,255,.16);
--focus-ring:var(--violet-500);

--status-success:var(--green-500);
--status-warning:var(--amber-500);
--status-danger:var(--red-500);
--status-info:var(--blue-600);
}

/* ---------- tokens/typography.css ---------- */
:root{
--font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
--font-text:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
--font-wordmark:"Nunito","Instrument Sans",sans-serif;

--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:900;

--text-display-1:72px;--text-display-2:56px;--text-display-3:44px;
--text-h1:36px;--text-h2:28px;--text-h3:22px;--text-h4:18px;
--text-lead:20px;--text-body-lg:17px;--text-body-md:15px;--text-body-sm:13px;--text-caption:12px;--text-eyebrow:12px;

--leading-tight:1.02;--leading-snug:1.12;--leading-heading:1.2;--leading-body:1.6;--leading-loose:1.75;

--tracking-display:-0.035em;--tracking-heading:-0.02em;--tracking-body:0em;--tracking-eyebrow:0.14em;
}

/* ---------- tokens/spacing.css ---------- */
:root{
--space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;--space-40:160px;

--gutter:24px;
--container-max:1200px;
--container-narrow:760px;
--section-y:var(--space-32);
--section-y-tight:var(--space-20);
}

/* ---------- tokens/radius.css ---------- */
:root{
--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-2xl:32px;--radius-pill:999px;
--radius-control:10px;--radius-card:16px;--radius-media:20px;
--border-width:1px;--border-width-strong:2px;
}

/* ---------- tokens/elevation.css ---------- */
:root{
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(10,44,80,.06);
--shadow-sm:0 1px 3px rgba(10,44,80,.07),0 1px 2px rgba(10,44,80,.04);
--shadow-md:0 6px 16px rgba(10,44,80,.08),0 1px 3px rgba(10,44,80,.05);
--shadow-lg:0 18px 40px rgba(10,44,80,.10),0 2px 6px rgba(10,44,80,.05);
--shadow-xl:0 32px 72px rgba(10,44,80,.14);
--shadow-accent:0 12px 28px rgba(109,58,247,.22);
--ring-focus:0 0 0 3px rgba(109,58,247,.28);
}

/* ---------- tokens/motion.css ---------- */
:root{
--ease-out:cubic-bezier(.22,.7,.2,1); /* @kind other */
--ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
--ease-entrance:cubic-bezier(.16,1,.3,1); /* @kind other */
--duration-instant:80ms; /* @kind other */
--duration-fast:140ms; /* @kind other */
--duration-base:220ms; /* @kind other */
--duration-slow:360ms; /* @kind other */
--duration-slower:560ms; /* @kind other */
--transition-control:all var(--duration-fast) var(--ease-out); /* @kind other */
--transition-surface:all var(--duration-base) var(--ease-out); /* @kind other */
}

/* ---------- tokens/base.css ---------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-text);font-size:var(--text-body-md);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading);margin:0}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
::selection{background:var(--violet-200);color:var(--blue-950)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---------- components/core/core.css ---------- */
.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-text);font-weight:var(--weight-semibold);letter-spacing:-0.005em;border:var(--border-width) solid transparent;border-radius:var(--radius-control);cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--transition-control)}
.sd-btn:disabled,.sd-btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed}
.sd-btn--sm{height:36px;padding:0 var(--space-4);font-size:var(--text-body-sm)}
.sd-btn--md{height:44px;padding:0 var(--space-5);font-size:var(--text-body-md)}
.sd-btn--lg{height:54px;padding:0 var(--space-8);font-size:var(--text-body-lg)}
.sd-btn--block{width:100%}
.sd-btn--primary{background:var(--brand-primary);color:var(--text-on-dark)}
.sd-btn--primary:hover:not(:disabled){background:var(--brand-primary-hover)}
.sd-btn--primary:active:not(:disabled){background:var(--brand-primary-press);transform:translateY(1px)}
.sd-btn--accent{background:var(--brand-accent);color:var(--text-on-dark);box-shadow:var(--shadow-accent)}
.sd-btn--accent:hover:not(:disabled){background:var(--brand-accent-hover)}
.sd-btn--accent:active:not(:disabled){background:var(--brand-accent-press);transform:translateY(1px);box-shadow:var(--shadow-xs)}
.sd-btn--secondary{background:var(--neutral-0);color:var(--brand-primary);border-color:var(--border-default)}
.sd-btn--secondary:hover:not(:disabled){border-color:var(--brand-primary);background:var(--surface-brand-soft)}
.sd-btn--secondary:active:not(:disabled){background:var(--blue-100);transform:translateY(1px)}
.sd-btn--ghost{background:transparent;color:var(--brand-primary)}
.sd-btn--ghost:hover:not(:disabled){background:var(--surface-brand-soft)}
.sd-btn--link{background:transparent;color:var(--brand-primary);height:auto;padding:0;border-radius:0}
.sd-btn--link:hover:not(:disabled){color:var(--brand-accent)}
.sd-btn--inverse{background:var(--neutral-0);color:var(--blue-950)}
.sd-btn--inverse:hover:not(:disabled){background:var(--blue-100)}

.sd-iconbtn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-control);border:var(--border-width) solid transparent;background:transparent;color:var(--text-body);cursor:pointer;transition:var(--transition-control)}
.sd-iconbtn--sm{width:32px;height:32px}
.sd-iconbtn--md{width:40px;height:40px}
.sd-iconbtn--lg{width:48px;height:48px}
.sd-iconbtn--ghost:hover{background:var(--surface-sunken);color:var(--text-strong)}
.sd-iconbtn--outline{border-color:var(--border-default)}
.sd-iconbtn--outline:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.sd-iconbtn--solid{background:var(--brand-primary);color:var(--text-on-dark)}
.sd-iconbtn--solid:hover{background:var(--brand-primary-hover)}
.sd-iconbtn--round{border-radius:var(--radius-pill)}

.sd-icon{display:inline-flex;flex:none;align-items:center;justify-content:center;vertical-align:middle}
.sd-icon svg{width:100%;height:100%;stroke-width:1.75}

.sd-card{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-card);transition:var(--transition-surface)}
.sd-card--flat{box-shadow:none}
.sd-card--raised{box-shadow:var(--shadow-md);border-color:transparent}
.sd-card--sunken{background:var(--surface-subtle);border-color:transparent}
.sd-card--inverse{background:var(--surface-inverse);border-color:var(--border-inverse);color:var(--text-on-dark)}
.sd-card--pad-sm{padding:var(--space-4)}
.sd-card--pad-md{padding:var(--space-6)}
.sd-card--pad-lg{padding:var(--space-8)}
.sd-card--pad-none{padding:0}
.sd-card--interactive{cursor:pointer}
.sd-card--interactive:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--violet-200)}

.sd-badge{display:inline-flex;align-items:center;gap:var(--space-1);min-height:24px;white-space:nowrap;padding:0 var(--space-2);border-radius:var(--radius-xs);font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:.01em}
.sd-badge--neutral{background:var(--neutral-100);color:var(--neutral-700)}
.sd-badge--brand{background:var(--surface-brand-soft);color:var(--blue-700)}
.sd-badge--accent{background:var(--surface-accent-soft);color:var(--violet-700)}
.sd-badge--success{background:var(--green-100);color:var(--green-500)}
.sd-badge--warning{background:var(--amber-100);color:var(--amber-500)}
.sd-badge--danger{background:var(--red-100);color:var(--red-500)}
.sd-badge--solid{background:var(--brand-primary);color:var(--text-on-dark)}

.sd-tag{display:inline-flex;align-items:center;gap:var(--space-2);height:30px;padding:0 var(--space-3);border-radius:var(--radius-pill);border:var(--border-width) solid var(--border-subtle);background:var(--neutral-0);color:var(--text-body);font-size:var(--text-body-sm);font-weight:var(--weight-medium);transition:var(--transition-control)}
.sd-tag--selected{border-color:var(--brand-accent);background:var(--surface-accent-soft);color:var(--violet-700)}
.sd-tag--clickable{cursor:pointer}
.sd-tag--clickable:hover{border-color:var(--border-strong)}
.sd-tag__remove{display:inline-flex;border:0;background:transparent;cursor:pointer;color:inherit;opacity:.6;padding:0}
.sd-tag__remove:hover{opacity:1}

.sd-wordmark{display:inline-flex;align-items:baseline;font-family:var(--font-wordmark);font-weight:var(--weight-black);letter-spacing:-0.03em;line-height:1}
.sd-wordmark__shiok{color:var(--brand-primary)}
.sd-wordmark__digital{color:var(--brand-accent)}
.sd-wordmark--inverse .sd-wordmark__shiok{color:var(--neutral-0)}
.sd-wordmark--inverse .sd-wordmark__digital{color:var(--violet-300)}
.sd-wordmark--mono .sd-wordmark__shiok,.sd-wordmark--mono .sd-wordmark__digital{color:currentColor}

/* ---------- components/forms/forms.css ---------- */
.sd-field{display:flex;flex-direction:column;gap:var(--space-2)}
.sd-field__label{font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--text-strong)}
.sd-field__req{color:var(--brand-accent);margin-left:2px}
.sd-field__hint{font-size:var(--text-caption);color:var(--text-muted)}
.sd-field__error{font-size:var(--text-caption);color:var(--status-danger);font-weight:var(--weight-medium)}

.sd-input,.sd-textarea,.sd-select{width:100%;font-family:var(--font-text);font-size:var(--text-body-md);color:var(--text-strong);background:var(--neutral-0);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-control);transition:var(--transition-control)}
.sd-input,.sd-select{height:46px;padding:0 var(--space-4)}
.sd-textarea{padding:var(--space-3) var(--space-4);min-height:120px;line-height:var(--leading-body);resize:vertical}
.sd-input::placeholder,.sd-textarea::placeholder{color:var(--text-faint)}
.sd-input:hover,.sd-textarea:hover,.sd-select:hover{border-color:var(--border-strong)}
.sd-input:focus,.sd-textarea:focus,.sd-select:focus{outline:none;border-color:var(--brand-accent);box-shadow:var(--ring-focus)}
.sd-input:disabled,.sd-textarea:disabled,.sd-select:disabled{background:var(--surface-subtle);color:var(--text-faint);cursor:not-allowed}
.sd-input--invalid,.sd-textarea--invalid,.sd-select--invalid{border-color:var(--status-danger)}
.sd-input--invalid:focus{box-shadow:0 0 0 3px rgba(196,43,28,.2)}
.sd-input-wrap{position:relative;display:block}
.sd-input-wrap .sd-icon{position:absolute;top:50%;transform:translateY(-50%);color:var(--text-faint);pointer-events:none}
.sd-input-wrap--lead .sd-icon{left:var(--space-4)}
.sd-input-wrap--lead .sd-input{padding-left:44px}
.sd-select-wrap{position:relative;display:block}
.sd-select{appearance:none;padding-right:40px;cursor:pointer}
.sd-select-wrap .sd-icon{position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}

.sd-choice{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font-size:var(--text-body-md);color:var(--text-body)}
.sd-choice input{position:absolute;opacity:0;width:0;height:0}
.sd-choice__box{flex:none;width:20px;height:20px;margin-top:2px;border:var(--border-width-strong) solid var(--border-default);background:var(--neutral-0);display:inline-flex;align-items:center;justify-content:center;color:transparent;transition:var(--transition-control)}
.sd-choice--checkbox .sd-choice__box{border-radius:var(--radius-xs)}
.sd-choice--radio .sd-choice__box{border-radius:var(--radius-pill)}
.sd-choice:hover .sd-choice__box{border-color:var(--border-strong)}
.sd-choice input:checked + .sd-choice__box{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--neutral-0)}
.sd-choice--radio input:checked + .sd-choice__box::after{content:"";width:8px;height:8px;border-radius:var(--radius-pill);background:var(--neutral-0)}
.sd-choice input:focus-visible + .sd-choice__box{box-shadow:var(--ring-focus)}
.sd-choice--disabled{opacity:.45;cursor:not-allowed}

.sd-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font-size:var(--text-body-md);color:var(--text-body)}
.sd-switch input{position:absolute;opacity:0;width:0;height:0}
.sd-switch__track{position:relative;flex:none;width:44px;height:26px;border-radius:var(--radius-pill);background:var(--neutral-300);transition:background var(--duration-base) var(--ease-out)}
.sd-switch__thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:var(--radius-pill);background:var(--neutral-0);box-shadow:var(--shadow-sm);transition:transform var(--duration-base) var(--ease-out)}
.sd-switch input:checked + .sd-switch__track{background:var(--brand-accent)}
.sd-switch input:checked + .sd-switch__track .sd-switch__thumb{transform:translateX(18px)}
.sd-switch input:focus-visible + .sd-switch__track{box-shadow:var(--ring-focus)}

/* ---------- components/feedback/feedback.css ---------- */
.sd-dialog__scrim{position:fixed;inset:0;background:rgba(7,30,56,.48);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:var(--space-6);z-index:60;animation:sd-fade var(--duration-base) var(--ease-out)}
.sd-dialog{background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;max-width:520px;padding:var(--space-8);position:relative;animation:sd-rise var(--duration-slow) var(--ease-entrance)}
.sd-dialog--sm{max-width:420px}.sd-dialog--lg{max-width:720px}
.sd-dialog__title{font-family:var(--font-display);font-size:var(--text-h3);color:var(--text-strong);letter-spacing:var(--tracking-heading);margin:0 0 var(--space-2)}
.sd-dialog__desc{font-size:var(--text-body-md);color:var(--text-muted);margin:0 0 var(--space-6)}
.sd-dialog__close{position:absolute;top:var(--space-4);right:var(--space-4)}
.sd-dialog__actions{display:flex;gap:var(--space-3);justify-content:flex-end;margin-top:var(--space-8)}
@keyframes sd-fade{from{opacity:0}to{opacity:1}}
@keyframes sd-rise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

.sd-toast{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--surface-inverse);color:var(--text-on-dark);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-lg);max-width:420px;animation:sd-rise var(--duration-slow) var(--ease-entrance)}
.sd-toast__body{display:flex;flex-direction:column;gap:2px;flex:1}
.sd-toast__title{font-weight:var(--weight-semibold);font-size:var(--text-body-md)}
.sd-toast__desc{font-size:var(--text-body-sm);color:var(--text-on-dark-muted)}
.sd-toast--success .sd-toast__icon{color:#4ADE9F}
.sd-toast--danger .sd-toast__icon{color:#FF9C90}
.sd-toast--info .sd-toast__icon{color:var(--violet-300)}
.sd-toast__close{color:var(--text-on-dark-muted)}
.sd-toast__close:hover{background:rgba(255,255,255,.1);color:#fff}

.sd-tooltip{position:relative;display:inline-flex}
.sd-tooltip__bubble{position:absolute;z-index:40;background:var(--neutral-900);color:var(--neutral-0);font-size:var(--text-caption);line-height:1.4;padding:6px 10px;border-radius:var(--radius-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.sd-tooltip:hover .sd-tooltip__bubble,.sd-tooltip:focus-within .sd-tooltip__bubble{opacity:1}
.sd-tooltip__bubble--top{bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px)}
.sd-tooltip:hover .sd-tooltip__bubble--top{transform:translate(-50%,0)}
.sd-tooltip__bubble--bottom{top:calc(100% + 8px);left:50%;transform:translate(-50%,-4px)}
.sd-tooltip:hover .sd-tooltip__bubble--bottom{transform:translate(-50%,0)}
.sd-tooltip__bubble--right{left:calc(100% + 8px);top:50%;transform:translate(-4px,-50%)}
.sd-tooltip:hover .sd-tooltip__bubble--right{transform:translate(0,-50%)}

/* ---------- components/navigation/navigation.css ---------- */
.sd-tabs{display:flex;gap:var(--space-6);border-bottom:var(--border-width) solid var(--border-subtle)}
.sd-tabs__tab{position:relative;background:none;border:0;padding:0 0 var(--space-3);font-family:var(--font-text);font-size:var(--text-body-md);font-weight:var(--weight-medium);color:var(--text-muted);cursor:pointer;transition:var(--transition-control)}
.sd-tabs__tab:hover{color:var(--text-strong)}
.sd-tabs__tab[aria-selected="true"]{color:var(--brand-primary);font-weight:var(--weight-semibold)}
.sd-tabs__tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand-accent);border-radius:2px}
.sd-tabs--pill{border:0;gap:var(--space-1);background:var(--surface-sunken);padding:4px;border-radius:var(--radius-pill);display:inline-flex}
.sd-tabs--pill .sd-tabs__tab{padding:8px var(--space-4);border-radius:var(--radius-pill)}
.sd-tabs--pill .sd-tabs__tab[aria-selected="true"]{background:var(--neutral-0);box-shadow:var(--shadow-sm);color:var(--brand-primary)}
.sd-tabs--pill .sd-tabs__tab[aria-selected="true"]::after{display:none}

.sd-accordion{border-top:var(--border-width) solid var(--border-subtle)}
.sd-accordion__item{border-bottom:var(--border-width) solid var(--border-subtle)}
.sd-accordion__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);background:none;border:0;padding:var(--space-5) 0;cursor:pointer;text-align:left;font-family:var(--font-display);font-size:var(--text-h4);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading);color:var(--text-strong);transition:var(--transition-control)}
.sd-accordion__trigger:hover{color:var(--brand-accent)}
.sd-accordion__trigger .sd-icon{transition:transform var(--duration-base) var(--ease-out);color:var(--text-muted)}
.sd-accordion__item--open .sd-accordion__trigger .sd-icon{transform:rotate(45deg);color:var(--brand-accent)}
.sd-accordion__panel{padding:0 var(--space-16) var(--space-5) 0;font-size:var(--text-body-md);color:var(--text-body);max-width:70ch}

.sd-breadcrumbs{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-body-sm);color:var(--text-muted)}
.sd-breadcrumbs a{color:var(--text-muted)}
.sd-breadcrumbs a:hover{color:var(--brand-primary)}
.sd-breadcrumbs__sep{color:var(--neutral-300)}
.sd-breadcrumbs__current{color:var(--text-strong);font-weight:var(--weight-medium)}

/* ---------- components/marketing/marketing.css ---------- */
.sd-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-eyebrow);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--brand-accent)}
.sd-eyebrow::before{content:"";width:18px;height:1px;background:currentColor;opacity:.7}

.sd-secheading{display:flex;flex-direction:column;gap:var(--space-4);max-width:640px}
.sd-secheading--center{align-items:center;text-align:center;margin:0 auto}
.sd-secheading--wide{max-width:820px}
.sd-secheading__title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-h1);line-height:var(--leading-snug);letter-spacing:var(--tracking-display);color:var(--text-strong);margin:0}
.sd-secheading__sub{font-size:var(--text-lead);line-height:1.5;color:var(--text-muted);margin:0}
.sd-secheading--inverse .sd-secheading__title{color:var(--text-on-dark)}
.sd-secheading--inverse .sd-secheading__sub{color:var(--text-on-dark-muted)}
.sd-secheading--inverse .sd-eyebrow{color:var(--violet-300)}

.sd-price{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-8);border-radius:var(--radius-card);border:var(--border-width) solid var(--border-subtle);background:var(--surface-card);position:relative;transition:var(--transition-surface)}
.sd-price--featured{border-color:var(--brand-accent);box-shadow:var(--shadow-lg)}
.sd-price__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.sd-price__name{font-family:var(--font-display);font-size:var(--text-h4);font-weight:var(--weight-semibold);color:var(--text-strong);letter-spacing:var(--tracking-heading)}
.sd-price__amount{display:flex;align-items:baseline;gap:var(--space-2)}
.sd-price__value{font-family:var(--font-display);font-size:var(--text-display-3);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);color:var(--brand-primary);line-height:1}
.sd-price__period{font-size:var(--text-body-sm);color:var(--text-muted)}
.sd-price__desc{font-size:var(--text-body-md);color:var(--text-muted);margin:0}
.sd-price__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.sd-price__list li{display:flex;gap:var(--space-3);font-size:var(--text-body-md);color:var(--text-body)}
.sd-price__list .sd-icon{color:var(--brand-accent);margin-top:3px}
.sd-price__rule{height:1px;background:var(--border-subtle)}

.sd-stat{display:flex;flex-direction:column;gap:var(--space-1)}
.sd-stat__value{font-family:var(--font-display);font-size:var(--text-display-3);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);color:var(--brand-primary);line-height:1}
.sd-stat__label{font-size:var(--text-body-sm);color:var(--text-muted)}
.sd-stat--inverse .sd-stat__value{color:var(--neutral-0)}
.sd-stat--inverse .sd-stat__label{color:var(--text-on-dark-muted)}
.sd-stat--accent .sd-stat__value{color:var(--brand-accent)}

.sd-quote{display:flex;flex-direction:column;gap:var(--space-6)}
.sd-quote__text{font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-medium);line-height:1.35;letter-spacing:var(--tracking-heading);color:var(--text-strong);margin:0}
.sd-quote__who{display:flex;align-items:center;gap:var(--space-3)}
.sd-quote__mono{width:40px;height:40px;border-radius:var(--radius-pill);background:var(--surface-brand-soft);color:var(--brand-primary);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-bold);font-size:var(--text-body-sm);flex:none}
.sd-quote__name{font-size:var(--text-body-md);font-weight:var(--weight-semibold);color:var(--text-strong);line-height:1.3}
.sd-quote__role{font-size:var(--text-body-sm);color:var(--text-muted);line-height:1.3}
.sd-quote--inverse .sd-quote__text,.sd-quote--inverse .sd-quote__name{color:var(--text-on-dark)}
.sd-quote--inverse .sd-quote__role{color:var(--text-on-dark-muted)}
.sd-quote--inverse .sd-quote__mono{background:rgba(255,255,255,.12);color:#fff}

.sd-work{display:flex;flex-direction:column;gap:var(--space-4);text-decoration:none;cursor:pointer}
.sd-work__media{position:relative;overflow:hidden;border-radius:var(--radius-media);background:var(--surface-sunken);aspect-ratio:4/3}
.sd-work__media > *{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--duration-slow) var(--ease-out)}
.sd-work:hover .sd-work__media > *{transform:scale(1.035)}
.sd-work__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.sd-work__title{font-family:var(--font-display);font-size:var(--text-h4);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading);color:var(--text-strong);margin:0}
.sd-work__cat{font-size:var(--text-body-sm);color:var(--text-muted)}
.sd-work:hover .sd-work__title{color:var(--brand-accent)}

/* ---------- components/patterns/patterns.css ---------- */
/* Page patterns — layout-level classes shared by the website kit and the Breakdance build */
.sd-section{padding:var(--section-y) var(--space-8)}
.sd-section--tight{padding-top:var(--section-y-tight);padding-bottom:var(--section-y-tight)}
.sd-section--subtle{background:var(--surface-subtle)}
.sd-section--inverse{background:var(--surface-inverse)}
.sd-container{max-width:var(--container-max);margin:0 auto}
.sd-display-1,.sd-display-2,.sd-display-3{font-family:var(--font-display);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);color:var(--text-strong);margin:0;text-wrap:balance}
.sd-display-1{font-size:var(--text-display-1)}
.sd-display-2{font-size:var(--text-display-2)}
.sd-display-3{font-size:var(--text-display-3)}
.sd-lead{font-size:var(--text-lead);line-height:1.5;color:var(--text-muted);margin:0;max-width:46ch;text-wrap:pretty}
.sd-h4{font-family:var(--font-display);font-size:var(--text-h4);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading);color:var(--text-strong);margin:0}
.sd-muted{color:var(--text-muted);margin:0}
.sd-link-arrow{font-weight:var(--weight-semibold);white-space:nowrap}

.sd-feature{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8);background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-card);transition:var(--transition-surface);color:inherit}
.sd-feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--violet-200);color:inherit}
.sd-feature__icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--surface-accent-soft);color:var(--brand-accent);display:flex;align-items:center;justify-content:center}

.sd-step{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-4);border-top:var(--border-width-strong) solid var(--border-subtle)}
.sd-step--active{border-top-color:var(--brand-accent)}
.sd-step__num{font-family:var(--font-mono);font-size:var(--text-body-sm);color:var(--brand-accent)}

.sd-check{display:flex;gap:var(--space-3)}
.sd-check__icon{flex:none;color:var(--brand-accent);margin-top:2px}
.sd-check__title{font-weight:var(--weight-semibold);color:var(--text-strong);font-size:var(--text-body-md)}
.sd-check__text{font-size:var(--text-body-sm);color:var(--text-muted)}

.sd-img-ph{width:100%;background:var(--surface-sunken);border-radius:var(--radius-media);display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-4);color:var(--text-muted);font-size:var(--text-caption);letter-spacing:.06em}
.sd-ratio-4x5{aspect-ratio:4/5}.sd-ratio-1x1{aspect-ratio:1/1}.sd-ratio-4x3{aspect-ratio:4/3}.sd-ratio-16x9{aspect-ratio:16/9}

.sd-nav{position:sticky;top:0;z-index:30;background:var(--surface-page);border-bottom:var(--border-width) solid transparent;transition:var(--transition-surface)}
.sd-nav--scrolled{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom-color:var(--border-subtle)}
.sd-nav__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-8);height:76px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.sd-nav__links{display:flex;gap:var(--space-8)}
.sd-nav__links a{font-size:var(--text-body-md);font-weight:var(--weight-medium);color:var(--text-muted)}
.sd-nav__links a:hover,.sd-nav__links a.is-active{color:var(--text-strong)}
.sd-nav__links a.is-active{font-weight:var(--weight-semibold)}
.sd-nav__actions{display:flex;align-items:center;gap:var(--space-3)}

.sd-footer{border-top:var(--border-width) solid var(--border-subtle);padding:var(--space-16) var(--space-8) var(--space-8)}
.sd-footer__label{font-size:var(--text-caption);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);font-weight:var(--weight-semibold)}
.sd-footer__col{display:flex;flex-direction:column;gap:var(--space-3)}
.sd-footer__col a{color:var(--text-body)}
.sd-footer__col a:hover{color:var(--brand-accent)}
.sd-footer__bottom{margin-top:var(--space-12);padding-top:var(--space-5);border-top:var(--border-width) solid var(--border-subtle);display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;font-size:var(--text-body-sm);color:var(--text-muted)}

@media (max-width:1023px){
.sd-section{padding:var(--space-20) var(--space-6)}
.sd-section--tight{padding-top:var(--space-16);padding-bottom:var(--space-16)}
.sd-display-1{font-size:52px}.sd-display-2{font-size:44px}.sd-display-3{font-size:36px}
.sd-nav__inner{padding:0 var(--space-6)}
.sd-nav__links{display:none}
}
@media (max-width:767px){
.sd-section{padding:var(--space-16) var(--space-5)}
.sd-section--tight{padding-top:var(--space-12);padding-bottom:var(--space-12)}
.sd-display-1{font-size:40px}.sd-display-2{font-size:36px}.sd-display-3{font-size:30px}
.sd-secheading__title{font-size:var(--text-h2)}
.sd-lead{font-size:var(--text-body-lg)}
.sd-feature{padding:var(--space-6)}
.sd-footer{padding:var(--space-12) var(--space-5) var(--space-6)}
}