/* Public site: tokens, layout, header, footer and the shared marketing sections.
   Loaded only by includes/header.php. Components reuse .sf-button, .sf-card,
   .sf-badge and .sf-control from ui-primitives.css; this file only sets their
   public tokens and the section layouts around them. */


/* ---- Tokens ------------------------------------------------------------ */
[data-canvas=public]{
  --sf-site-max:77.5rem;
  --sf-site-gutter:clamp(1.125rem,3.6vw,3.5rem);
  --sf-band-space:clamp(4rem,7vw,6.5rem);
  /* Appearance tokens are shared with the workspace in system-theme.css. */
  --sf-ui-radius:.625rem;--sf-ui-radius-large:1rem;--sf-ui-shadow:none;
  --sf-site-line:color-mix(in srgb,var(--sf-theme-border) 35%,transparent);
  --sf-form-label:var(--sf-ui-text);--sf-checkbox-accent:var(--sf-ui-primary);--sf-checkbox-surface:var(--sf-ui-surface);--sf-checkbox-border:var(--sf-ui-control-border);
  /* Tailwind's blue-grey slate reads navy next to black type; public pages use neutral greys. */
  --color-slate-50:#fafafa;--color-slate-100:#f4f4f5;--color-slate-200:#e6e6e9;--color-slate-300:#d4d4d8;--color-slate-400:#a1a1aa;
  --color-slate-500:#71717a;--color-slate-600:#55555d;--color-slate-700:#3f3f46;--color-slate-800:#27272a;--color-slate-900:#18181b;--color-slate-950:#0a0a0a;
  font-family:var(--sf-ui-font);color:var(--sf-ui-text);background:var(--sf-ui-bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01"
}
[data-canvas=public] .site{background:var(--sf-ui-bg)}
[data-canvas=public] :is(h1,h2,h3,h4):not(.sf-kicker){color:inherit;letter-spacing:-.02em}
[data-canvas=public] ::selection{background:var(--sf-ui-text);color:var(--sf-ui-surface)}

/* Lists drop browser margins at zero specificity, so spacing utilities still apply. */
:where(.sf-steps,.sf-flow,.sf-chips,.sf-list,.sf-strip ul){margin:0}

/* ---- Layout -------------------------------------------------------------- */
.sf-wrap{width:min(var(--sf-site-max),100% - 2 * var(--sf-site-gutter));margin-inline:auto}
.sf-wrap--narrow{--sf-site-max:48rem}
.sf-band{padding-block:var(--sf-band-space)}
.sf-band--soft{background:var(--sf-ui-raised);border-block:1px solid var(--sf-ui-border)}
.sf-band--line{border-top:1px solid var(--sf-ui-border)}
.sf-form-stack{display:grid;gap:1.25rem}
.sf-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.sf-split--start{align-items:start}
.sf-site-grid-bg{position:relative;isolation:isolate}
.sf-site-grid-bg:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(var(--sf-site-line) 1px,#0000 1px) 0 0/4.5rem 4.5rem,linear-gradient(90deg,var(--sf-site-line) 1px,#0000 1px) 0 0/4.5rem 4.5rem;-webkit-mask-image:radial-gradient(120% 90% at 50% 0,#000 35%,#0000 80%);mask-image:radial-gradient(120% 90% at 50% 0,#000 35%,#0000 80%)}

/* ---- Type ---------------------------------------------------------------- */
.sf-eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin:0;padding:.3rem .95rem;border:1px solid var(--sf-ui-border);border-radius:999px;background:var(--sf-ui-surface);color:var(--sf-ui-muted);font-size:.875rem;font-weight:500;line-height:1.5}
.sf-eyebrow:has(>b){padding-left:.3rem}
.sf-eyebrow b{padding:.15rem .6rem;border-radius:999px;background:var(--sf-ui-text);color:var(--sf-ui-surface);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.sf-kicker{margin:0 0 .9rem;color:var(--sf-accent);font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.sf-display{margin:1.5rem 0 0;font-size:clamp(2.5rem,4.8vw,3.75rem);font-weight:700;line-height:1.05;letter-spacing:-.04em!important;text-wrap:balance}
.sf-heading{margin:0;font-size:clamp(1.875rem,3.3vw,2.625rem);font-weight:700;line-height:1.12;letter-spacing:-.03em!important;text-wrap:balance}
.sf-lead{max-width:40rem;margin:1.25rem 0 0;color:var(--sf-ui-muted);font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.65}
.sf-head{max-width:46rem;margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.sf-head:last-child{margin-bottom:0}
.sf-head--center{margin-inline:auto;text-align:center}
.sf-head--center .sf-lead{margin-inline:auto}
.sf-head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.25rem 2rem;max-width:none}
.sf-head--row>div{max-width:40rem}
.sf-head--row>.sf-lead{max-width:28rem;margin-top:0}
.sf-prose{color:var(--sf-ui-muted);font-size:1.0625rem;line-height:1.75}
.sf-prose>*+*{margin-top:1rem}

/* ---- Actions --------------------------------------------------------------- */
.sf-arrow-link{display:inline-flex;align-items:center;gap:.45rem;min-height:1.5rem;color:var(--sf-ui-text);font-weight:600;text-decoration:none;text-underline-offset:.25em}
.sf-arrow-link:after{content:"\2192";transition:translate .18s ease}
.sf-arrow-link:hover{text-decoration:underline}
.sf-arrow-link:hover:after{translate:3px 0}
.sf-arrow-link:focus-visible{outline:2px solid var(--sf-ui-focus);outline-offset:3px;border-radius:.25rem}

/* ---- Cards and grids -------------------------------------------------------- */
.sf-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(var(--sf-grid-cols,3),minmax(0,1fr))}
.sf-grid--1{--sf-grid-cols:1}
.sf-grid--2{--sf-grid-cols:2}
.sf-grid--4{--sf-grid-cols:4}
.sf-tile{display:flex;flex-direction:column;gap:.75rem;min-width:0;padding:clamp(1.5rem,2.3vw,2rem);color:var(--sf-ui-text);text-decoration:none;transition:border-color .18s ease}
.sf-tile h3{margin:.75rem 0 0;font-size:1.25rem;font-weight:650;line-height:1.3}
.sf-tile p{margin:0;color:var(--sf-ui-muted);line-height:1.65}
.sf-tile h3:first-child{margin-top:0}
.sf-list{display:grid;gap:.6rem;padding:0;list-style:none;color:var(--sf-ui-muted)}
.sf-list li{display:flex;gap:.7rem;line-height:1.55}
.sf-list li:before{content:"";flex:none;width:.375rem;height:.375rem;margin-top:.6rem;border-radius:999px;background:var(--sf-ui-text)}
.sf-pillars>*{padding-top:1.5rem;border-top:1px solid var(--sf-ui-text)}
.sf-pillars h3{margin:1rem 0 .5rem;font-size:1.125rem;font-weight:650}
.sf-pillars p{margin:0;color:var(--sf-ui-muted);line-height:1.65}
.sf-tile>.sf-arrow-link{margin-top:auto;padding-top:.75rem}
.sf-tile--row{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
.sf-tile--row h3{margin-top:0}
.sf-tile--compact{padding:1.25rem 1.5rem}
.sf-tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.sf-tile:has(.sf-arrow-link:hover){--sf-card-border:var(--sf-ui-text)}
.sf-icon-box{display:grid;flex:none;place-items:center;width:3rem;height:3rem;color:var(--sf-ui-text);background:var(--sf-ui-raised);border:1px solid var(--sf-ui-border);border-radius:.75rem}
.pricing-choice-card.is-popular{--sf-card-border:var(--sf-ui-text)}

/* A row of short benefits between two hairlines. */
.sf-strip{border-block:1px solid var(--sf-ui-border);background:var(--sf-ui-raised)}
.sf-strip ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem 2rem;margin-block:0;padding-block:1.75rem;list-style:none}
.sf-strip li{display:flex;align-items:center;gap:.75rem;font-weight:500}
.sf-strip svg{flex:none}

/* Numbered steps and connected flows. */
.sf-steps{display:grid;gap:0;padding:0;list-style:none;counter-reset:sf-step}
.sf-steps li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.25rem 1rem;padding:1.25rem 0;border-top:1px solid var(--sf-ui-border);counter-increment:sf-step}
.sf-steps li:before{content:counter(sf-step,decimal-leading-zero);grid-row:span 2;color:var(--sf-ui-subtle);font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.75}
.sf-steps strong{font-size:1.0625rem;font-weight:650}
.sf-steps p{margin:0;color:var(--sf-ui-muted);line-height:1.6}
.sf-flow{display:grid;grid-template-columns:repeat(var(--sf-flow-cols,6),minmax(0,1fr));gap:.75rem;padding:0;list-style:none}
.sf-flow li{position:relative;display:grid;gap:.35rem;padding:1.25rem;background:var(--sf-ui-surface);border:1px solid var(--sf-ui-border);border-radius:var(--sf-ui-radius-large)}
.sf-flow li:not(:last-child):after{content:"";position:absolute;top:50%;right:-.6rem;z-index:1;width:.45rem;height:.45rem;border-top:1.5px solid var(--sf-ui-subtle);border-right:1.5px solid var(--sf-ui-subtle);transform:translateY(-50%) rotate(45deg)}
.sf-flow--3{--sf-flow-cols:3}
.sf-flow--4{--sf-flow-cols:4}
.sf-flow--5{--sf-flow-cols:5}
.sf-flow small{color:var(--sf-ui-subtle);font-size:.8125rem;font-weight:500}
.sf-flow strong{font-size:1rem;font-weight:650}
.sf-flow--stack{grid-template-columns:minmax(0,1fr)!important}
.sf-flow--stack li:not(:last-child):after{display:block!important;top:auto;right:auto;bottom:-.55rem;left:1.75rem;transform:rotate(135deg)}

/* Category and industry chips. */
.sf-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;list-style:none}
.sf-chip{display:inline-flex;align-items:center;gap:.5rem;min-height:2.5rem;padding:.4rem .9rem;color:var(--sf-ui-text);background:var(--sf-ui-surface);border:1px solid var(--sf-ui-border);border-radius:999px;font-size:.9375rem;font-weight:500;text-decoration:none;transition:border-color .18s ease}
.sf-chip svg{flex:none;color:var(--sf-ui-muted)}
.sf-chip small{color:var(--sf-ui-subtle);font-size:.8125rem}
a.sf-chip:hover{border-color:var(--sf-ui-text)}
a.sf-chip:focus-visible{outline:2px solid var(--sf-ui-focus);outline-offset:2px}

/* Questions. */
.sf-faq{border-top:1px solid var(--sf-ui-border)}
.sf-faq details{border-bottom:1px solid var(--sf-ui-border)}
.sf-faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.5rem;padding:1.15rem 0;font-size:1.0625rem;font-weight:600;list-style:none;cursor:pointer}
.sf-faq summary::-webkit-details-marker{display:none}
.sf-faq summary:after{content:"+";flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--sf-ui-border);border-radius:999px;color:var(--sf-ui-muted);font-size:1.125rem;font-weight:400;transition:rotate .18s ease}
.sf-faq details[open] summary:after{rotate:45deg}
.sf-faq summary:focus-visible{outline:2px solid var(--sf-ui-focus);outline-offset:4px;border-radius:.25rem}
.sf-faq details>div{max-width:46rem;padding:0 3rem 1.4rem 0;color:var(--sf-ui-muted);line-height:1.7}

/* A black panel for the closing call to action. Black in both themes. */
.sf-cta-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem;padding:clamp(2.25rem,5vw,4rem);color:#fff;background:#0a0a0a;border:1px solid #0a0a0a;border-radius:1.5rem}
.sf-cta-panel .sf-lead{color:#c4c4cc}
.sf-cta-panel .sf-kicker{color:#a1a1aa}
html[data-theme=dark] [data-canvas=public] .sf-cta-panel{background:var(--sf-ui-surface);border-color:var(--sf-ui-border)}

/* ---- Product illustrations (decorative, aria-hidden or role=img) ------------- */
.sf-preview-figure{margin:0}
.sf-preview-caption{margin-top:.75rem;color:var(--sf-ui-subtle);font-size:.8125rem;text-align:center}
.sf-preview{position:relative;margin:0;padding:clamp(1rem,2.4vw,1.75rem);color:#d4d4d8;background:#0a0a0a;border-radius:1.5rem;background-image:linear-gradient(#ffffff09 1px,#0000 1px),linear-gradient(90deg,#ffffff09 1px,#0000 1px);background-size:2.25rem 2.25rem}
html[data-theme=dark] [data-canvas=public] .sf-preview{border:1px solid var(--sf-ui-border)}
.sf-preview-window{overflow:hidden;background:#131316;border:1px solid #ffffff17;border-radius:1rem}
.sf-preview-bar{display:flex;align-items:center;gap:.4rem;padding:.75rem 1rem;border-bottom:1px solid #ffffff12;font-size:.75rem;color:#8b8b94}
.sf-preview-bar i{width:.5rem;height:.5rem;border-radius:999px;background:#ffffff26}
.sf-preview-bar span{margin-left:.5rem}
.sf-preview-body{display:grid;grid-template-columns:7rem minmax(0,1fr);min-height:17rem}
.sf-preview-nav{display:grid;align-content:start;gap:.7rem;padding:1.1rem 1rem;border-right:1px solid #ffffff12}
.sf-preview-nav i{height:.4rem;border-radius:999px;background:#ffffff1f}
.sf-preview-nav i:first-child{width:80%;background:#ffffff4d}
.sf-preview-nav i:nth-child(odd){width:65%}
.sf-preview-main{display:grid;align-content:start;gap:1rem;padding:1.1rem}
.sf-preview-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.sf-preview-kpis span{display:grid;gap:.15rem;padding:.7rem .75rem;background:#ffffff0a;border:1px solid #ffffff12;border-radius:.6rem}
.sf-preview-kpis small{color:#8b8b94;font-size:.6875rem}
.sf-preview-kpis strong{color:#fff;font-size:.9375rem;font-weight:600}
.sf-preview-kpis--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sf-preview-list{display:grid;gap:.5rem;margin:0;padding:1rem;list-style:none}
.sf-preview-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;background:#ffffff08;border:1px solid #ffffff12;border-radius:.7rem}
.sf-preview-list li.is-current{background:#ffffff14;border-color:#ffffff4d}
.sf-preview-list small,.sf-preview-board small{display:block;color:#8b8b94;font-size:.75rem}
.sf-preview-list strong{display:block;color:#fff;font-size:.9375rem;font-weight:600}
.sf-preview-list em{flex:none;color:#a1a1aa;font-size:.8125rem;font-style:normal}
.sf-preview-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.sf-preview-board>div{display:grid;align-content:start;gap:.5rem;padding:.6rem;background:#ffffff06;border:1px solid #ffffff12;border-radius:.6rem}
.sf-preview-board b{color:#a1a1aa;font-size:.75rem;font-weight:600}
.sf-preview-board span{padding:.6rem;color:#fff;background:#ffffff0d;border-radius:.5rem;font-size:.8125rem;font-weight:500;line-height:1.35}
.sf-preview-chart{width:100%;height:auto;padding:.5rem;background:#ffffff06;border:1px solid #ffffff12;border-radius:.6rem}
.sf-preview-card{position:absolute;display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;color:#0a0a0a;background:#fff;border:1px solid #e6e6e9;border-radius:.9rem;box-shadow:0 18px 40px -16px #0000004d}
.sf-preview-card small{display:block;color:#6b6b73;font-size:.75rem}
.sf-preview-card strong{display:block;font-size:.9375rem;font-weight:650}
.sf-preview-card i{display:grid;flex:none;place-items:center;width:2.25rem;height:2.25rem;color:#0a0a0a;background:#f4f4f5;border-radius:.6rem}
.sf-preview-card--a{top:34%;left:-1.75rem}
.sf-preview-card--b{right:-1.5rem;bottom:9%}
.sf-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;overflow:hidden;background:var(--sf-ui-border);border:1px solid var(--sf-ui-border);border-radius:var(--sf-ui-radius-large)}
.sf-calendar>*{min-height:6.25rem;padding:.6rem;background:var(--sf-ui-surface);font-size:.8125rem}
.sf-calendar>b{min-height:0;padding:.6rem;color:var(--sf-ui-subtle);background:var(--sf-ui-raised);font-weight:600}
.sf-calendar span{display:block;color:var(--sf-ui-subtle)}
.sf-calendar em{display:block;margin-top:.4rem;padding:.3rem .45rem;color:var(--sf-ui-text);background:var(--sf-ui-raised);border-left:2px solid var(--sf-ui-text);border-radius:.3rem;font-size:.75rem;font-style:normal;font-weight:500;line-height:1.3;overflow-wrap:break-word}
.sf-calendar em.is-review{border-left-color:var(--sf-accent)}

/* ---- Homepage and page heroes ------------------------------------------------ */
.sf-hero{padding-block:clamp(3rem,6vw,4.75rem) clamp(3.5rem,7vw,5.5rem)}
.sf-hero .sf-split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.sf-hero .sf-actions,.sf-page-hero .sf-actions{gap:.75rem;margin-top:2.25rem}
.sf-hero-note{margin:1.5rem 0 0;color:var(--sf-ui-subtle);font-size:.9375rem}
.sf-hero-note a:not(.sf-arrow-link){color:var(--sf-ui-text);text-decoration:underline;text-underline-offset:.2em}
.sf-page-hero{padding-block:clamp(3.5rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem)}
.sf-page-hero .sf-head{margin-bottom:0}
.sf-page-hero .sf-display{font-size:clamp(2.25rem,4.2vw,3.25rem)}
.sf-page-hero .sf-head--center .sf-actions{justify-content:center}

/* Newsletter: the form posts to subscribe.php and is validated by interactions.js. */
.sf-newsletter-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:.75rem}
.sf-newsletter-form .sf-field span{color:var(--sf-ui-text);font-weight:500}
.sf-newsletter-note{margin:.85rem 0 0;color:var(--sf-ui-subtle);font-size:.875rem}

/* ---- Header -------------------------------------------------------------------- */
.site:has(>.sf-public-header){overflow-x:clip;overflow-y:visible}
html:has(.sf-public-header),body:has(.sf-public-header){overflow-x:clip}
html.overflow-hidden:has(.sf-public-header){overflow:hidden}
.site:has(>.sf-public-header) section[id]{scroll-margin-top:6rem}
.sf-public-header{position:sticky;top:0;z-index:40;color:var(--sf-ui-text);background:var(--sf-ui-surface);border-bottom:1px solid var(--sf-ui-border)}
.sf-public-mainbar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:4.5rem}
.sf-public-brand-group{display:flex;align-items:center;min-width:0}
.sf-public-brand{display:inline-flex;align-items:center;gap:.6rem;min-width:0;color:var(--sf-ui-text);font-size:1.25rem;font-weight:700;letter-spacing:-.025em;text-decoration:none}
.sf-public-brand-mark{display:grid;flex:none;place-items:center;width:2rem;height:2rem}
.sf-public-brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.sf-public-primary-nav{display:flex;align-items:center;gap:.25rem}
.sf-public-header-actions{display:flex;flex:none;align-items:center;gap:.5rem}
.sf-public-theme-toggle{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2.75rem;min-height:2.75rem;padding:0}
.sf-public-theme-toggle svg{flex:none;width:1.25rem;height:1.25rem}
.sf-nav-top-link{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:.3rem;min-height:2.75rem;padding:.5rem .85rem;color:var(--sf-ui-muted);background:none;border:0;border-radius:.5rem;font:inherit;font-size:.9375rem;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .16s ease,background .16s ease}
.sf-nav-top-link:hover,.sf-nav-top-link[aria-expanded=true]{color:var(--sf-ui-text);background:var(--sf-ui-raised)}
.sf-nav-top-link.is-active{color:var(--sf-ui-text)}
.sf-public-primary-nav .sf-nav-top-link.is-active:after{content:"";position:absolute;right:.85rem;bottom:.3rem;left:.85rem;height:2px;border-radius:2px;background:currentColor}
.sf-nav-chevron{flex:none;transition:rotate .18s ease}
[data-public-nav-toggle][aria-expanded=true] .sf-nav-chevron{rotate:180deg}
.sf-public-signin{min-height:2.75rem}
.sf-public-header :is(.sf-nav-top-link,.sf-public-brand,.sf-public-signin,.sf-nav-destination,.sf-nav-category-link):focus-visible{outline:2px solid var(--sf-ui-focus);outline-offset:2px}
.sf-nav-fallback{display:flex;flex-wrap:wrap;gap:1rem;padding-block:.75rem}

/* Dropdown panels. */
.sf-nav-dropdown{position:absolute;top:100%;right:0;left:0;z-index:2;padding:.5rem var(--sf-site-gutter) 0}
.sf-nav-dropdown.hidden{display:none}
.sf-nav-panel{max-width:var(--sf-site-max);max-height:calc(100dvh - var(--sf-public-header-bottom,80px) - 1.5rem);margin:auto;padding:1.25rem;overflow-y:auto;overscroll-behavior:contain;background:var(--sf-ui-surface);border:1px solid var(--sf-ui-border);border-radius:1rem;box-shadow:0 24px 48px -16px #00000029}
.sf-nav-columns{display:grid;grid-template-columns:repeat(var(--sf-nav-columns,3),minmax(0,1fr));gap:1rem 1.5rem}
.sf-nav-column{display:grid;align-content:start;gap:.1rem;min-width:0}
.sf-nav-column--wide{grid-column:span 2}
.sf-nav-section-label{margin:0 .75rem .35rem;color:var(--sf-ui-subtle);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.sf-nav-destination{display:grid;gap:.15rem;padding:.6rem .75rem;color:var(--sf-ui-text);border-radius:.6rem;text-decoration:none;transition:background .16s ease}
.sf-nav-destination strong{font-size:.9375rem;font-weight:600;line-height:1.4}
.sf-nav-destination small{color:var(--sf-ui-muted);font-size:.8125rem;line-height:1.45}
.sf-nav-destination:hover,.sf-nav-destination[aria-current=page],.sf-nav-category-link:hover,.sf-nav-category-link[aria-current=page]{background:var(--sf-ui-raised)}
.sf-nav-more{margin-top:1rem;padding:1rem .75rem 0;border-top:1px solid var(--sf-ui-border)}
.sf-nav-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.1rem .5rem}
.sf-nav-category-link{display:flex;align-items:center;gap:.6rem;min-width:0;min-height:2.5rem;padding:.45rem .75rem;color:var(--sf-ui-text);border-radius:.5rem;font-size:.875rem;font-weight:500;line-height:1.35;text-decoration:none}
.sf-nav-category-link svg{flex:none;color:var(--sf-ui-muted)}

/* ---- Pricing feature explorer -------------------------------------------------- */
.sf-pricing-inclusion-note{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.25rem;margin-top:2rem;color:var(--sf-ui-muted);font-size:.875rem;text-align:center}
.sf-feature-explorer [hidden]{display:none!important}
.sf-feature-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-bottom:1.5rem}
.sf-feature-search{flex:1;min-width:14rem;max-width:31rem}
.sf-feature-search>svg{color:var(--sf-ui-subtle)}
.sf-feature-status{margin:0 0 0 auto;color:var(--sf-ui-subtle);font-size:.8125rem}
.sf-feature-results{display:grid;align-items:start;gap:1rem;min-width:0}
.sf-feature-layout{min-width:0}
.sf-feature-category-picker{display:none}
.is-feature-ready .sf-feature-layout{display:grid;grid-template-columns:16.5rem minmax(0,1fr);align-items:start;gap:2rem}
.sf-feature-nav{display:grid;gap:.25rem;min-width:0;position:sticky;top:6rem;max-height:calc(100dvh - 7rem);overflow-y:auto}
.sf-feature-nav-label{margin:0 0 .7rem;padding-left:.875rem;color:var(--sf-ui-subtle);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.sf-feature-category{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;justify-content:stretch;min-height:3rem;padding:.65rem .875rem;text-align:left;white-space:normal}
.sf-feature-category[aria-pressed=true]{--sf-button-color:var(--sf-ui-text);--sf-button-bg:var(--sf-ui-raised);--sf-button-border:color-mix(in srgb,var(--sf-ui-text) 55%,var(--sf-ui-surface));--sf-button-hover:var(--sf-ui-raised)}
.sf-feature-category[aria-pressed=true]>span:first-child{font-weight:600}
.sf-feature-count{display:grid;place-items:center;min-width:1.65rem;height:1.5rem;padding:0 .4rem;background:var(--sf-ui-raised);border-radius:.4rem;color:var(--sf-ui-subtle);font-size:.75rem;font-variant-numeric:tabular-nums}
.sf-feature-category[aria-pressed=true] .sf-feature-count{background:var(--sf-ui-surface);color:var(--sf-ui-text)}
.sf-feature-panel{min-width:0;overflow:hidden}
.sf-feature-panel>summary{display:grid;grid-template-columns:3rem minmax(0,1fr) 1.25rem;align-items:center;gap:1rem;padding:1.75rem;list-style:none;cursor:pointer}
.sf-feature-panel>summary::-webkit-details-marker{display:none}
.sf-feature-panel>summary:focus-visible{outline:2px solid var(--sf-ui-focus);outline-offset:-4px;border-radius:var(--sf-ui-radius-large)}
.sf-feature-panel-icon{display:grid;place-items:center;width:3rem;height:3rem;color:var(--sf-accent);background:color-mix(in srgb,var(--sf-accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--sf-accent) 15%,transparent);border-radius:.875rem}
.sf-feature-panel-icon svg{width:1.5rem;height:1.5rem}
.sf-feature-panel-heading{display:grid;gap:.4rem;min-width:0}
.sf-feature-panel-heading strong{font-size:1.25rem;font-weight:650;line-height:1.3;letter-spacing:-.02em}
.sf-feature-panel-heading>span{color:var(--sf-ui-muted);font-size:.875rem;line-height:1.6}
.sf-feature-panel-arrow{color:var(--sf-ui-subtle);transition:rotate .25s ease}
.sf-feature-panel[open] .sf-feature-panel-arrow{rotate:180deg}
.sf-feature-panel-content{padding:0 1.75rem 1.75rem}
.sf-feature-panel[open] .sf-feature-panel-content{animation:sf-feature-reveal .3s ease both}
.sf-feature-panel-note{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:0 0 .5rem;padding-bottom:1rem;border-bottom:1px solid var(--sf-ui-border);color:var(--sf-ui-subtle);font-size:.8125rem}
.sf-feature-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem;margin:0;padding:0;list-style:none}
.sf-feature-checklist>li{display:grid;grid-template-columns:1.125rem minmax(0,1fr);align-content:start;gap:.65rem;padding:1rem 0;border-bottom:1px solid var(--sf-ui-border);font-size:.875rem;line-height:1.55;overflow-wrap:anywhere}
.sf-feature-checklist strong{font-weight:550}
.sf-feature-check{color:var(--sf-accent);padding-top:.12rem}
.sf-feature-check svg{width:1.125rem;height:1.125rem}
.sf-feature-explanation{display:block;margin-top:.3rem;color:var(--sf-ui-muted);font-size:.8125rem;line-height:1.65}
.sf-feature-limits{margin-top:1.5rem;font-size:.875rem}
.sf-feature-empty{display:grid;align-content:center;gap:.6rem;min-height:18rem;border:1px dashed var(--sf-ui-control-border);border-radius:var(--sf-ui-radius-large)}
.sf-feature-empty strong{color:var(--sf-ui-text);font-size:1.125rem}
.sf-feature-empty p{margin:0}
.sf-feature-availability{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--sf-ui-border);font-size:.875rem}
.sf-feature-availability>summary{width:fit-content;padding:.25rem 0;color:var(--sf-ui-muted);cursor:pointer}
.sf-feature-availability>summary:focus-visible{outline:2px solid var(--sf-ui-focus);outline-offset:3px}
.sf-feature-availability>.sf-card{margin-top:1rem}
@keyframes sf-feature-reveal{from{opacity:0;translate:0 .4rem}to{opacity:1;translate:0 0}}
@media (max-width:63.999rem){
  .is-feature-ready .sf-feature-layout{grid-template-columns:minmax(0,1fr);gap:1rem}
  .sf-feature-nav{display:none}
  .sf-feature-category-picker{display:grid;margin-bottom:1.25rem}
}
@media (max-width:39.999rem){
  .sf-feature-toolbar{gap:.75rem;margin-bottom:1rem}
  .sf-feature-search{flex-basis:100%;max-width:none}
  .sf-feature-status{margin-left:0;flex:1}
  .sf-feature-panel>summary{grid-template-columns:2.5rem minmax(0,1fr) 1.25rem;gap:.75rem;padding:1.25rem}
  .sf-feature-panel-icon{width:2.5rem;height:2.5rem}
  .sf-feature-panel-heading strong{font-size:1.125rem}
  .sf-feature-panel-content{padding:0 1.25rem 1.25rem}
  .sf-feature-checklist{grid-template-columns:minmax(0,1fr)}
}
html[data-motion=off] .sf-feature-panel[open] .sf-feature-panel-content{animation:none}
html[data-motion=off] .sf-feature-panel-arrow{transition:none}
@media (prefers-reduced-motion:reduce){.sf-feature-panel-content{animation:none!important}.sf-feature-panel-arrow{transition:none}}

/* ---- Footer -------------------------------------------------------------------- */
.sf-public-footer{padding-block:clamp(3.5rem,6vw,4.5rem) 2rem;color:var(--sf-ui-muted);background:var(--sf-ui-bg);border-top:1px solid var(--sf-ui-border)}
.sf-public-footer a{color:inherit;text-decoration:none}
.sf-public-footer :is(ul,nav,.sf-footer-contact) a{display:inline-block;padding-block:.2rem}
.sf-public-footer a:hover{color:var(--sf-ui-text);text-decoration:underline;text-underline-offset:.2em}
.sf-public-footer a:focus-visible{outline:2px solid var(--sf-ui-focus);outline-offset:2px;border-radius:.2rem}
.sf-footer-top{display:grid;grid-template-columns:minmax(17.5rem,1fr) minmax(0,3fr);gap:3rem}
.sf-footer-brand p{max-width:22rem;margin:1rem 0 0;line-height:1.65}
.sf-footer-brand .sf-public-brand{color:var(--sf-ui-text)}
.sf-footer-brand .sf-public-brand:hover{text-decoration:none}
.sf-footer-contact{display:grid;gap:.4rem;margin-top:1.25rem;font-size:.9375rem}
.sf-footer-contact a{color:var(--sf-ui-text);font-weight:500}
.sf-footer-columns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem}
.sf-footer-columns h2{margin:0 0 1rem;color:var(--sf-ui-text);font-size:.875rem;font-weight:600}
.sf-footer-columns ul{display:grid;gap:.7rem;margin:0;padding:0;list-style:none;font-size:.9375rem}
.sf-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--sf-ui-border);font-size:.875rem}
.sf-footer-bottom p{margin:0}
.sf-footer-bottom nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.sf-footer-operator{flex-basis:100%;color:var(--sf-ui-subtle)}

/* Public support cards and social profiles use the shared card/button primitives. */
.sf-support-link{--sf-card-border:color-mix(in srgb,var(--sf-accent) 40%,var(--sf-ui-border));display:grid;grid-template-columns:1.4rem minmax(0,1fr);align-items:center;gap:.9rem;padding:1.125rem;text-decoration:none}
.sf-footer-contact>a.sf-support-link{display:grid;padding:1.125rem;margin-bottom:.5rem}
.sf-footer-contact .sf-support-link>strong{grid-column:1/-1}
.sf-support-link>svg{color:var(--sf-accent)}
.sf-support-link>span{display:grid;gap:.35rem;min-width:0}
.sf-support-label{color:var(--sf-ui-muted);font-size:.8125rem;font-weight:500;line-height:1.4}
.sf-support-link strong{color:var(--sf-accent);font-size:.9375rem;font-weight:650;line-height:1.5;overflow-wrap:anywhere}
.sf-support-link:hover strong{text-decoration:underline;text-underline-offset:.2em}
.sf-footer-phone{min-height:2rem}
.sf-footer-phone>span{margin-right:.3rem;color:var(--sf-ui-subtle);font-size:.8125rem}
.sf-contact-channels{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:1rem;max-width:66rem;margin:2.5rem auto 0;text-align:left}
.sf-contact-channel{min-height:6.5rem;padding:1.5rem}
.sf-contact-channel:not(.sf-contact-channel--email){--sf-card-border:var(--sf-ui-border)}
.sf-contact-channel:not(.sf-contact-channel--email) strong{color:var(--sf-ui-text);font-size:1.125rem;font-variant-numeric:tabular-nums}
.sf-public-social{margin-top:1.75rem}
.sf-public-social>p{margin:0 0 .65rem;color:var(--sf-ui-text);font-size:.875rem;font-weight:600}
.sf-social-links{display:flex;flex-wrap:wrap;gap:.5rem}
.sf-public-social a.sf-social-link{display:inline-flex;align-items:center;gap:.6rem;min-width:2.75rem;min-height:2.75rem;padding:.6rem .75rem}
.sf-public-social .sf-social-link>svg{width:1.125rem;height:1.125rem}
.sf-social-links--compact a.sf-social-link{padding:.6rem}
@media(max-width:63.999rem){.sf-contact-channels{grid-template-columns:minmax(0,1fr);max-width:36rem}.sf-contact-channel{min-height:5.5rem}}

/* ---- Responsive ---------------------------------------------------------------- */
@media (min-width:64rem){
  .sf-public-header #mobile-menu-toggle,.sf-public-header #mobile-menu{display:none}
}
@media (max-width:63.999rem){
  .sf-public-primary-nav{display:none}
  .sf-public-header #mobile-menu-toggle{display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0}
  .sf-public-mobile-menu{position:absolute;top:100%;right:0;left:0;max-height:calc(100dvh - var(--sf-public-header-bottom,72px));padding:.75rem var(--sf-site-gutter) max(1rem,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:var(--sf-ui-surface);border-top:1px solid var(--sf-ui-border);border-bottom:1px solid var(--sf-ui-border);box-shadow:0 24px 40px -20px #00000040}
  .sf-public-mobile-menu.hidden{display:none}
  .sf-public-mobile-menu .sf-nav-top-link{width:100%;min-height:3.25rem;padding:.85rem .25rem;font-size:1rem;color:var(--sf-ui-text);border-radius:0}
  .sf-public-mobile-menu .sf-nav-top-link:hover{background:none}
  .sf-public-mobile-menu>nav>*{border-bottom:1px solid var(--sf-ui-border)}
  .sf-public-mobile-menu .sf-nav-dropdown{position:static;padding:0}
  .sf-public-mobile-menu .sf-nav-panel{max-height:none;padding:.5rem 0 1rem;overflow:visible;border:0;border-radius:0;box-shadow:none}
  .sf-public-mobile-menu .sf-nav-columns{grid-template-columns:minmax(0,1fr);gap:1rem}
  .sf-public-mobile-menu .sf-nav-column--wide{grid-column:auto}
  .sf-public-mobile-menu .sf-nav-section-label,.sf-public-mobile-menu .sf-nav-destination{margin-inline:0;padding-inline:.25rem}
  .sf-public-mobile-menu .sf-nav-more{padding-inline:.25rem}
  .sf-public-mobile-menu .sf-nav-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-mobile-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding-top:1rem}
  html.sf-public-nav-open{overflow:hidden}
  .sf-split,.sf-hero .sf-split{grid-template-columns:minmax(0,1fr)}
  .sf-grid{--sf-grid-cols:2}
  .sf-grid--2{--sf-grid-cols:1}
  .sf-strip ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sf-flow li:nth-child(3n):after{display:none}
  .sf-footer-top{grid-template-columns:minmax(0,1fr)}
  .sf-footer-columns{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sf-preview-card--a{left:-.75rem}
  .sf-preview-card--b{right:-.75rem}
}
@media (max-width:47.999rem){
  .sf-footer-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-cta-panel{grid-template-columns:minmax(0,1fr)}
  .sf-newsletter-form{grid-template-columns:minmax(0,1fr)}
  .sf-calendar-frame{overflow-x:auto}
  .sf-calendar{min-width:36rem}
}
@media (max-width:39.999rem){
  .sf-public-mainbar{gap:.75rem}
  .sf-public-signin,.sf-public-header-actions>.sf-public-cta{display:none}
  .sf-grid,.sf-grid--4{--sf-grid-cols:1}
  .sf-strip ul{grid-template-columns:minmax(0,1fr)}
  .sf-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-flow li:after{display:none}
  .sf-hero .sf-actions .sf-button,.sf-page-hero .sf-actions .sf-button{flex:1 1 100%}
  .sf-preview-body{grid-template-columns:minmax(0,1fr)}
  .sf-preview-nav{display:none}
  .sf-preview-card{position:static;margin-top:.75rem}
  .sf-faq details>div{padding-right:0}
}
@media (max-width:22rem){.sf-public-brand{font-size:1.0625rem}.sf-public-mobile-menu .sf-nav-category-grid{grid-template-columns:minmax(0,1fr)}}
/* Shared illustrative workflow and calendar controls. Content is visible before JS. */
.sf-workflow-hub{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin:0 0 1.25rem;color:var(--sf-ui-text)}
.sf-workflow-hub svg{color:var(--sf-accent)}
.sf-workflow-hub span{color:var(--sf-ui-subtle);font-size:.875rem}
.sf-workflow-demo{position:relative}
.sf-workflow-demo .sf-flow li{display:flex;min-width:0;padding:0;border:0;background:transparent}
.sf-story-select{appearance:none;min-width:0;margin:0;color:inherit;font:inherit;cursor:pointer;background:transparent;border:1px solid var(--sf-ui-control-border);border-radius:inherit}
.sf-story-select:focus-visible{outline:2px solid var(--sf-ui-focus);outline-offset:4px}
.sf-story-marker{position:absolute;top:0;left:0;z-index:2;box-sizing:border-box;border:1px solid var(--sf-accent);border-radius:var(--sf-ui-radius-large);pointer-events:none;transition:transform var(--sf-motion-story) var(--sf-motion-ease),width var(--sf-motion-story) var(--sf-motion-ease),height var(--sf-motion-story) var(--sf-motion-ease)}
.sf-workflow-demo .sf-flow li:after{display:none}
.sf-flow .sf-story-select{position:relative;display:grid;grid-template-rows:auto auto minmax(2.8em,1fr) auto;align-content:start;justify-content:stretch;gap:.4rem;width:100%;padding:1rem;white-space:normal;text-align:left;background:var(--sf-ui-surface);border:1px solid var(--sf-ui-control-border);border-radius:var(--sf-ui-radius-large);transition:border-color 300ms ease,background var(--sf-motion-story) var(--sf-motion-ease)}
.sf-flow .sf-story-select>small{color:var(--sf-ui-muted);font-size:.8125rem;line-height:1.4}
.sf-flow .sf-story-select>strong{align-self:start;color:var(--sf-ui-text);font-size:1rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.sf-flow .sf-story-select:focus-visible{outline-offset:5px}
.sf-flow-connector{position:absolute;top:50%;right:-1.15rem;z-index:1;width:1.5rem;height:.75rem;translate:0 -50%;pointer-events:none}
.sf-flow-connector path{stroke:var(--sf-ui-subtle);stroke-width:1.2}
.sf-flow-connector circle{fill:var(--sf-accent);opacity:0}
.sf-flow li:last-child .sf-flow-connector{display:none}
.sf-workflow-demo .sf-flow li:is(.is-story-current,:focus-within){background:transparent}
.sf-workflow-demo .sf-flow li:is(.is-story-current,:focus-within) .sf-story-select{border-color:var(--sf-accent);background:color-mix(in srgb,var(--sf-accent) 6%,var(--sf-ui-surface))}
.sf-demo-caption{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1.25rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--sf-ui-border)}
.sf-demo-caption>p{display:grid;align-content:start;flex:1 1 20rem;gap:.35rem;min-height:4.5rem;margin:0;font-size:.875rem;line-height:1.55}
.sf-demo-caption strong{color:var(--sf-ui-text);font-weight:600}
.sf-demo-caption span{color:var(--sf-ui-muted)}
.sf-demo-caption .sf-actions{gap:.25rem}
.sf-demo-caption [data-story-toggle]{min-width:10.25rem}
.sf-demo-caption>.sf-story-measure{position:absolute;top:0;left:0;min-height:0;visibility:hidden;pointer-events:none}
.sf-content-demo .sf-calendar{min-width:0}
.sf-content-demo .sf-calendar em{padding:0;transition:border-color var(--sf-motion-normal) ease,background var(--sf-motion-normal) ease}
.sf-calendar .sf-story-select{min-height:2rem;width:100%;padding:.3rem .25rem;white-space:normal;font-size:.75rem!important;overflow-wrap:anywhere}
.sf-content-demo .sf-calendar em:is(.is-story-current,:focus-within){border-left-color:var(--sf-accent);background:var(--sf-ui-hover)}
.sf-content-demo .sf-calendar .sf-story-select[aria-pressed=true]{--sf-button-color:var(--sf-accent)}
.sf-preview[data-preview-depth] .sf-preview-window{translate:var(--sf-preview-x,0) var(--sf-preview-y,0);transition:translate var(--sf-motion-normal) var(--sf-motion-ease)}
.sf-preview[data-preview-depth] .sf-preview-card{translate:calc(var(--sf-preview-x,0px) * -1.3) calc(var(--sf-preview-y,0px) * -1.3);transition:translate var(--sf-motion-normal) var(--sf-motion-ease)}
.sf-preview[data-motion-preview]{background-image:radial-gradient(ellipse at 80% 10%,#1687f510,transparent 65%),linear-gradient(#ffffff09 1px,#0000 1px),linear-gradient(90deg,#ffffff09 1px,#0000 1px);background-size:auto,2.25rem 2.25rem,2.25rem 2.25rem}
.sf-tile .sf-icon-box svg{transition:translate var(--sf-motion-fast) ease}
.sf-tile:focus-within .sf-icon-box svg{color:var(--sf-ui-primary)}
.sf-chip{transition:border-color var(--sf-motion-fast) ease,background var(--sf-motion-fast) ease}
.sf-chip:is(:hover,:focus-visible){border-color:var(--sf-ui-primary);background:var(--sf-ui-raised)}
@keyframes sf-preview-enter{from{opacity:.45;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes sf-preview-chart-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sf-preview-float{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-4px)}}
@keyframes sf-preview-card-float{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-8px)}}
@keyframes sf-preview-point-pulse{0%,35%,100%{transform:scale(1);opacity:1}55%{transform:scale(1.45);opacity:.65}}
@keyframes sf-preview-chart-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes sf-workflow-pulse{0%{opacity:0;translate:0 0}20%{opacity:.8}80%{opacity:.8}100%{opacity:0;translate:22px 0}}
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion=off]) .has-story-marker .sf-flow li.is-story-current:not(:focus-within) .sf-story-select{border-color:var(--sf-ui-control-border)}
  html:not([data-motion=off]) .is-preview-revealed .sf-preview-window{animation:sf-preview-enter var(--sf-motion-slow) var(--sf-motion-ease)}
  html:not([data-motion=off]) .is-preview-revealed :is(.sf-preview-nav,.sf-preview-kpis,.sf-preview-board,.sf-preview-list){animation:sf-preview-enter var(--sf-motion-slow) var(--sf-motion-ease) .12s backwards}
  html:not([data-motion=off]) .is-preview-revealed .sf-preview-card--a{animation:sf-preview-enter var(--sf-motion-slow) var(--sf-motion-ease) .65s backwards}
  html:not([data-motion=off]) .is-preview-revealed .sf-preview-card--b{animation:sf-preview-enter var(--sf-motion-slow) var(--sf-motion-ease) .9s backwards}
  html:not([data-motion=off]) .is-preview-revealed .sf-preview-chart polyline{stroke-dasharray:1;animation:sf-preview-chart-draw .9s var(--sf-motion-ease) .25s backwards}
  /* Ambient transforms compose with the pointer's independent translate. */
  html:not([data-motion=off]) .sf-preview[data-preview-ambient] .sf-preview-window{animation:sf-preview-float 10s ease-in-out 1.5s infinite}
  html:not([data-motion=off]) .sf-preview[data-preview-ambient].is-preview-revealed .sf-preview-window{animation:sf-preview-enter var(--sf-motion-slow) var(--sf-motion-ease),sf-preview-float 10s ease-in-out 1.5s infinite}
  html:not([data-motion=off]) .sf-preview[data-preview-ambient] .sf-preview-card--a{animation:sf-preview-card-float 7s ease-in-out 1.7s infinite}
  html:not([data-motion=off]) .sf-preview[data-preview-ambient] .sf-preview-card--b{animation:sf-preview-card-float 9s ease-in-out 2s infinite reverse}
  html:not([data-motion=off]) .sf-preview[data-preview-ambient].is-preview-revealed .sf-preview-card--a{animation:sf-preview-enter var(--sf-motion-slow) var(--sf-motion-ease) .65s backwards,sf-preview-card-float 7s ease-in-out 1.7s infinite}
  html:not([data-motion=off]) .sf-preview[data-preview-ambient].is-preview-revealed .sf-preview-card--b{animation:sf-preview-enter var(--sf-motion-slow) var(--sf-motion-ease) .9s backwards,sf-preview-card-float 9s ease-in-out 2s infinite reverse}
  html:not([data-motion=off]) .sf-preview[data-preview-ambient] .sf-preview-chart circle:not(.sf-preview-chart-tracker){transform-box:fill-box;transform-origin:center;animation:sf-preview-point-pulse 5s ease-in-out 1.5s infinite}
  html:not([data-motion=off]) .sf-preview[data-preview-ambient] .sf-preview-chart circle:nth-child(2){animation-delay:2.1s}
  html:not([data-motion=off]) .sf-preview[data-preview-ambient] .sf-preview-chart circle:nth-child(3){animation-delay:2.7s}
  html:not([data-motion=off]) .sf-preview[data-preview-ambient] .sf-preview-chart>path{animation:sf-preview-chart-breathe 8s ease-in-out infinite}
  html:not([data-motion=off]) .sf-preview[data-preview-ambient]:not(.is-preview-moving) *,html[data-motion-paused=true] .sf-preview[data-preview-ambient] *{animation-play-state:paused!important}
  html:not([data-motion=off]) .is-story-playing .is-story-current .sf-flow-connector circle{animation:sf-workflow-pulse var(--sf-motion-story-step) ease-in-out infinite}
  html:not([data-motion=off]) .sf-nav-dropdown:not(.hidden) .sf-nav-panel{animation:sf-preview-enter var(--sf-motion-normal) var(--sf-motion-ease)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html:not([data-motion=off]) .sf-tile:hover .sf-icon-box svg{translate:0 -2px}
}
@media (max-width:63.999rem){
  .sf-workflow-demo .sf-flow{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .sf-workflow-demo .sf-flow li{padding:0}
  .sf-workflow-demo .sf-flow .sf-story-select{grid-template-rows:auto auto auto;padding:.85rem 1.1rem}
  .sf-flow-connector{top:auto;right:auto;bottom:-1rem;left:1.5rem;translate:0 0;rotate:90deg}
}
@media (max-width:39.999rem){
  .sf-demo-caption{grid-template-columns:minmax(0,1fr);gap:.85rem}
  .sf-content-demo .sf-calendar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-content-demo .sf-calendar>b,.sf-content-demo .sf-calendar>div:not(:has(em)){display:none}
  .sf-content-demo .sf-calendar>div{display:grid;grid-template-columns:1.5rem minmax(0,1fr);align-items:center;gap:.35rem;min-height:4rem;padding:.5rem;font-size:.8125rem}
  .sf-calendar .sf-story-select{min-height:2.75rem;padding:.25rem;font-size:.75rem!important}
  .sf-demo-caption>p{min-height:6rem}
}
html[data-motion-paused=true] :is(.is-preview-revealed,.is-story-playing) *{animation-play-state:paused}
html[data-motion=off] .sf-story-marker{display:none}
html[data-motion=off] :is(.sf-preview,.sf-tile,.sf-workflow-demo) *{transition:none}
@media (prefers-reduced-motion:reduce){.sf-story-marker{display:none}.sf-public-header *,.sf-arrow-link:after,.sf-faq summary:after,.sf-preview *,.sf-tile *,.sf-chip,.sf-workflow-demo *{transition:none!important}}