/* www.sesamecreate.com, from the Claude Design canvas "sesamecreate.com Website Design".
   Tokens and .ss-* components are in css/ds (copied unchanged from the design system); this file is page layout.
   Class prefix: wb-. Type roles (.h1, .h2, .h3, .body, .body-sm, .label, .mono-label) are the design system's. */

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
/* Behind the status bar of a phone whose page runs edge to edge (viewport-fit=cover): the page colour, over the header. */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg-page)}
img{max-width:100%}
a{color:var(--pink-600)}
a:hover{color:var(--pink-700)}
/* a:hover is more specific than .ss-btn--primary, so a link-button's label would turn pink on its pink hover colour. */
.ss-btn--primary:hover:not(:disabled),.ss-btn--secondary:hover:not(:disabled){color:#fff}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
[id]{scroll-margin-top:96px}

.skip-link{position:absolute;left:12px;top:-60px;z-index:300;background:var(--ink-900);color:#fff;padding:8px 12px;border-radius:var(--radius-2);font:600 13px var(--font-body)}
.skip-link:focus{top:12px;color:#fff}

/* Type roles */
.display{font:700 clamp(48px,6.4vw,88px)/1.02 var(--font-display);letter-spacing:-.035em;margin:0}
.h1{font:700 clamp(36px,4.6vw,48px)/1.05 var(--font-display);letter-spacing:-.035em;margin:0}
.h2{font:600 clamp(28px,3.4vw,36px)/1.1 var(--font-display);letter-spacing:-.015em;margin:0}
.h3{font:600 22px/1.2 var(--font-display);margin:0}
.h3--lg{font-size:28px}
.body{font:400 16px/1.5 var(--font-body);margin:0}
.body-sm{font:400 14px/1.5 var(--font-body);margin:0}
.label{font:600 13px/1.3 var(--font-body)}
.mono-label{font:500 11px/1.3 var(--font-mono);letter-spacing:.06em}
.muted{color:var(--ink-500)}

/* Layout */
.wb-wrap{max-width:var(--container-max);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.wb-section{padding:96px 0}
.wb-section--white{background:var(--white)}
.wb-section--hero{padding:35px 0 80px}
.wb-section--intro{padding:96px 0 48px}
.wb-section--band{padding:48px 0}
.wb-section--ruled{border-top:1px solid var(--ink-200);border-bottom:1px solid var(--ink-200)}
.wb-stack{display:flex;flex-direction:column;gap:var(--gap,24px)}
.wb-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,12px)}
.wb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--min,260px),100%),1fr));gap:var(--gap,24px)}
.wb-grid--fill{grid-template-columns:repeat(auto-fill,minmax(min(var(--min,220px),100%),1fr))}
.wb-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:var(--gap,48px);align-items:var(--align,start)}
.wb-head{display:flex;flex-direction:column;gap:16px;max-width:760px}
.wb-head--center{align-items:center;text-align:center;max-width:860px;margin:0 auto;gap:20px}
.wb-headrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.wb-eyebrow{font:500 11px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--pink-600)}
.wb-meta{font:500 11px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.wb-metas{display:flex;flex-wrap:wrap;gap:8px 20px}
.wb-lede{margin:0;font-size:18px;line-height:1.55;color:var(--ink-500);max-width:var(--max,680px)}
.wb-prose-lg{margin:0;font-size:18px;line-height:1.65}

/* Links and buttons */
.wb-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 15px/1.5 var(--font-body);color:var(--pink-600);text-decoration:none;align-self:flex-start}
.wb-more:hover{color:var(--pink-700)}
.wb-more--sm{font-size:14px;line-height:1}
.wb-more--ink{color:var(--ink-900)}
.ss-btn.wb-btn--xl{height:52px;padding:0 26px;font-size:16px}
.ss-btn.wb-btn--dark-outline{background:transparent;color:#fff;border-color:var(--ink-500)}
.ss-btn.wb-btn--dark-outline:hover{border-color:#fff}

/* Blocks */
.wb-step{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--ink-900);padding-top:20px}
.wb-tile{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:24px;display:flex;flex-direction:column;gap:10px}
.wb-tile--page{background:var(--bg-page)}
.wb-tile--lg{padding:32px;gap:16px}
.wb-feature{display:flex;flex-direction:column;gap:10px}
.wb-stat{border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:28px;display:flex;flex-direction:column;gap:8px;background:var(--bg-page)}
.wb-stat--white{background:var(--white)}
.wb-stat__num{font:700 clamp(44px,5vw,64px)/1 var(--font-display);letter-spacing:-.035em}
.wb-check{display:flex;gap:12px;align-items:flex-start}
.wb-check .ss-icon{margin-top:3px}
.wb-quote{border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:20px;background:var(--bg-page);display:flex;gap:12px;align-items:flex-start}
.wb-quote .ss-icon{margin-top:3px}
.wb-badges{display:flex;flex-wrap:wrap;gap:8px}
.wb-note{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border:1px solid var(--info-600);background:var(--info-100);border-radius:var(--radius-2);color:var(--info-600)}
.wb-note p{color:var(--ink-900)}
.wb-note .ss-icon{margin-top:2px}
.wb-panel{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);overflow:hidden}
.wb-panel--shadow{box-shadow:var(--shadow-overlay)}
.wb-panel__body{padding:24px;display:flex;flex-direction:column;gap:18px}
.wb-panel__body--lg{padding:28px}
.wb-sales{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:32px;align-items:center}
.ss-stripe.wb-stripe--3{height:3px}
.ss-stripe.wb-stripe--8{height:8px}
.ss-stripe.wb-stripe--2{height:2px}

/* Header */
.wb-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(247,245,240,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--ink-200)}
.wb-header__in{max-width:var(--container-max);margin:0 auto;padding-block:12px;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px));display:flex;align-items:center;gap:8px 32px}
.wb-logo{display:flex;align-items:center;min-height:44px}
.wb-logo img{height:22px;width:auto;display:block}
.wb-nav{display:flex;flex-wrap:wrap;gap:0 22px;flex:1 1 auto}
.wb-nav a,.wb-header__link{display:inline-flex;align-items:center;min-height:44px;font:600 14px/1 var(--font-body);color:var(--ink-900);text-decoration:none}
.wb-nav a:hover,.wb-header__link:hover{color:var(--pink-600)}
.wb-nav a[aria-current=page],.wb-nav a[aria-current=true]{color:var(--pink-600)}
.wb-header__link--muted{color:var(--ink-500)}
.wb-header__actions{display:flex;align-items:center;gap:8px 20px}
.wb-header .ss-btn{height:44px;padding:0 18px}
.wb-menu{display:none;margin-left:auto}
.wb-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--ink-300);border-radius:var(--radius-2);background:var(--white);font:600 14px/1 var(--font-body)}
.wb-menu summary::-webkit-details-marker{display:none}
.wb-menu__panel{position:absolute;left:0;right:0;top:100%;background:var(--bg-page);border-bottom:1px solid var(--ink-200);box-shadow:var(--shadow-overlay);padding-top:8px;padding-bottom:20px;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px));display:flex;flex-direction:column}
.wb-menu__panel a:not(.ss-btn){display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--ink-200);font:600 16px/1 var(--font-body);color:var(--ink-900);text-decoration:none}
.wb-menu__panel .ss-btn{margin-top:16px}
@media(max-width:1040px){.wb-header__in{position:relative}.wb-nav,.wb-header__actions{display:none}.wb-menu{display:block}}
/* EN / EL: the language switcher, in the header and in the folded menu. */
.wb-lang{display:inline-flex;align-items:center;gap:2px;min-height:44px;font:600 13px/1 var(--font-body)}
.wb-lang a,.wb-lang span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:32px;padding:0 6px;border-radius:var(--radius-2);color:var(--ink-500);text-decoration:none}
.wb-lang a:hover{color:var(--pink-600)}
.wb-lang [aria-current]{color:var(--ink-900);background:var(--ink-100)}
.wb-menu__panel .wb-lang{min-height:48px;border-bottom:1px solid var(--ink-200)}
.wb-menu__panel .wb-lang a{display:inline-flex;min-height:32px;border-bottom:0;font:inherit;color:var(--ink-500)}

/* /el/ask, the Greek campaign landing page (Views/Home/Ask.cshtml): its own header and footer, no site menu. */
.wb-landing__head{justify-content:space-between;flex-wrap:wrap}
.wb-landing__brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none}
.wb-landing__brand img{height:22px;width:auto;display:block}
.wb-landing__by{color:var(--ink-500);text-transform:uppercase;border-left:1px solid var(--ink-300);padding-left:12px}
.wb-landing__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.wb-landing__actions .wb-header__link{gap:8px}
/* On a phone the header takes two rows, so it scrolls away instead of staying, and the phone shrinks to its icon. */
@media(max-width:720px){.wb-landing__header{position:static}}
@media(max-width:560px){.wb-landing__phone-text{display:none}.wb-landing__phone{justify-content:center;min-width:44px;border:1px solid var(--ink-300);border-radius:var(--radius-2)}.wb-landing__actions{flex-wrap:nowrap;width:100%;gap:8px}.wb-landing__actions .ss-btn{flex:1 1 auto;min-width:0;padding:6px 12px;height:auto;min-height:44px;white-space:normal;text-align:center;line-height:1.2}}
.wb-landing__hero{padding:80px 0 72px}
.wb-landing__intro{padding-top:16px}
.wb-landing__title{margin:0;font:700 clamp(40px,5.2vw,72px)/1.04 var(--font-display);letter-spacing:-.03em}
.wb-landing__form{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);overflow:hidden;box-shadow:var(--shadow-overlay);scroll-margin-top:88px}
.wb-landing__form-in{padding:32px;display:flex;flex-direction:column;gap:20px}
.wb-landing__form .ss-btn{width:100%}
.wb-landing__choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:20px}
.wb-landing__form select{cursor:pointer;font-size:16px;appearance:none;-webkit-appearance:none;padding-right:28px;background:url(/icons/chevron-down.svg) no-repeat right center/16px}
.wb-landing__hotel{display:flex;flex-direction:column;background:var(--bg-page);border:1px solid var(--ink-200);border-radius:var(--radius-2);overflow:hidden;text-decoration:none;color:var(--ink-900)}
.wb-landing__hotel img{display:block;width:100%;height:auto;border-bottom:1px solid var(--ink-200)}
.wb-landing__hotel-name{display:flex;flex-direction:column;gap:4px;padding:14px 16px}
.wb-landing__hotel:hover{border-color:var(--ink-500)}
.wb-landing__hotel:hover .label{color:var(--pink-600)}
.wb-landing__trust{padding:56px 0;background:var(--white);border-top:1px solid var(--ink-200);border-bottom:1px solid var(--ink-200)}
.wb-landing__step{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--ink-900);padding-top:20px}
.wb-landing__step .mono-label{color:var(--pink-600)}
.wb-landing__step .h3,.wb-landing__step p{margin:0}
.wb-landing__theme{display:inline-flex;align-items:center;min-height:32px;text-decoration:none}
.wb-landing__theme:hover .ss-badge{border-color:var(--ink-900);color:var(--ink-900)}
.wb-landing__included{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;background:var(--bg-page);border:1px solid var(--ink-200);border-radius:var(--radius-2)}
.wb-landing__included .label{font-size:15px}
.wb-landing__nofees{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));border:1px solid var(--ink-200);border-radius:var(--radius-2);background:var(--bg-page)}
.wb-landing__nofee{display:flex;gap:14px;align-items:flex-start;padding:24px}
.wb-landing__nofee + .wb-landing__nofee{border-left:1px solid var(--ink-200)}
@media(max-width:720px){.wb-landing__nofee + .wb-landing__nofee{border-left:0;border-top:1px solid var(--ink-200)}}
.wb-landing__nofee .label{font-size:16px}
.wb-landing__sales{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:20px 24px;background:var(--ink-900);color:#fff;border-radius:var(--radius-2)}
.wb-landing__sales .label{font-size:16px;color:#fff}
.wb-landing__sales .body-sm{color:var(--ink-300)}
.wb-landing__sales-btn{background:#fff;color:var(--ink-900);gap:8px;max-width:100%;height:auto;min-height:48px;padding-block:12px;white-space:normal;text-align:center}
.wb-landing__sales-btn:hover{background:var(--ink-100);color:var(--ink-900)}
.wb-landing__writer{display:flex;gap:16px;align-items:center;background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:16px}
.wb-landing__writer img{width:64px;height:64px;border-radius:var(--radius-2);display:block;flex:0 0 auto}
.wb-landing__writer .label{font-size:16px}
.wb-landing__call{display:inline-flex;align-items:center;min-height:44px;font:600 16px/1 var(--font-body);color:#fff;text-decoration:none}
.wb-landing__call:hover{color:var(--pink-100)}
.wb-landing__foot{padding-top:32px}
.wb-landing__legal{align-items:center}
.wb-landing__links{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.wb-landing__links a,.wb-landing__links .wb-linkbtn{display:inline-flex;align-items:center;min-height:44px}

/* Greek pages: Space Grotesk and DM Sans have no Greek letters, so headings are Manrope and text is Inter (loaded by
   _Layout on Greek pages only). JetBrains Mono has Greek and stays. html:lang(el) outranks the design system's :root. */
html:lang(el){--font-display:'Manrope',ui-sans-serif,system-ui,sans-serif;--font-body:'Inter',ui-sans-serif,system-ui,sans-serif}
/* The Greek labels are longer, so the Greek header folds into the menu sooner. */
@media(max-width:1240px){html:lang(el) .wb-header__in{position:relative}html:lang(el) .wb-nav,html:lang(el) .wb-header__actions{display:none}html:lang(el) .wb-menu{display:block}}

/* Footer */
.wb-footer{background:var(--white);border-top:1px solid var(--ink-200)}
.wb-footer__in{max-width:var(--container-max);margin:0 auto;padding-top:64px;padding-bottom:32px;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:48px}
.wb-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:32px}
.wb-footer__col{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.wb-footer__col--brand{gap:12px}
.wb-footer__col--brand img{height:20px;width:auto}
.wb-footer a,.wb-footer .wb-linkbtn{font:400 14px/1.5 var(--font-body);color:var(--ink-900);text-decoration:none}
.wb-footer a:hover,.wb-footer .wb-linkbtn:hover{color:var(--pink-600)}
.wb-footer__base{display:flex;flex-direction:column;gap:16px}
.wb-footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.wb-linkbtn{background:none;border:0;padding:0;cursor:pointer;text-align:left}
.wb-linkbtn[hidden]{display:none}

/* Closing band */
.wb-cta{padding:96px 0;background:var(--ink-900);color:#fff}
.wb-cta__in{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.wb-cta__title{margin:0;font:700 clamp(36px,4.5vw,64px)/1.05 var(--font-display);letter-spacing:-.035em;max-width:860px}
.wb-cta__text{margin:0;font-size:18px;line-height:1.55;color:var(--ink-300);max-width:640px}
.wb-cta .wb-meta{color:var(--ink-300)}

/* Home: hero and the build panel */
.wb-hero__title{margin:0;font:700 clamp(44px,6.4vw,88px)/1.02 var(--font-display);letter-spacing:-.035em}
.wb-hero__form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.wb-hero__form .ss-field{flex:1 1 260px}
.wb-build__row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--ink-200)}
.wb-build__row:last-child{border-bottom:0}

/* Home: every copywriter in one row that scrolls sideways, a card per snap. site.js adds the arrows. */
.wb-slider{list-style:none;margin:0;padding:0 0 12px;display:flex;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--ink-200) transparent}
.wb-slider__slide{flex:0 0 min(280px,82%);scroll-snap-align:start}
@media (prefers-reduced-motion:reduce){.wb-slider{scroll-behavior:auto}}
[data-slider-nav][hidden]{display:none}

/* Home: copywriter cards open on hover or focus */
.wb-persona{position:relative;overflow:hidden;height:340px;background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:24px;display:flex;flex-direction:column;gap:14px;transition:border-color var(--dur-base) var(--ease-out)}
.wb-persona img,.wb-persona video{width:88px;height:88px;border-radius:var(--radius-2);display:block;object-fit:cover}
/* A copywriter with a video: it stays in view above the details panel, which slides up only to just below it */
.wb-persona--video video{position:relative;z-index:1}
.wb-persona--video .wb-persona__more{top:112px;padding-top:14px}
.wb-persona__more{position:absolute;inset:0;background:var(--white);padding:24px;display:flex;flex-direction:column;gap:12px;transform:translateY(100%);opacity:0;overflow:hidden;transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out)}
.wb-persona__more .wb-more{margin-top:auto}
.wb-persona:hover,.wb-persona:focus-within{border-color:var(--ink-900)}
.wb-persona:hover .wb-persona__more,.wb-persona:focus-within .wb-persona__more{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.wb-persona__more{transition:opacity var(--dur-fast) linear}}
/* No hover on touch screens: the details sit in the card instead, without repeating the name and teaser. */
@media (hover:none){
  .wb-persona{height:auto}
  .wb-persona__more{position:static;inset:auto;padding:0;transform:none;opacity:1;background:none}
  .wb-persona__more [aria-hidden=true]{display:none}
}

/* Home: example sites, each with a screenshot of its home page (wwwroot/img/examples) */
.wb-example .ss-card__media{border-bottom:1px solid var(--ink-200)}
.wb-example .ss-card__media img{display:block}
.wb-example .ss-card__body{display:flex;flex-direction:column;gap:2px}
.wb-example .ss-card__title{font-size:20px}

/* Home: the page editor mock */
.wb-editor{border:1px solid var(--ink-200);border-radius:var(--radius-2);overflow:hidden;background:var(--bg-page);box-shadow:var(--shadow-overlay)}
.wb-editor__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;background:var(--white);border-bottom:1px solid var(--ink-200)}
.wb-editor__body{display:flex;flex-wrap:wrap}
.wb-editor__nav{flex:1 1 200px;max-width:100%;background:var(--white);border-right:1px solid var(--ink-200);padding:20px;display:flex;flex-direction:column;gap:4px}
.wb-editor__nav .body-sm{padding:8px 10px}
.wb-editor__nav .wb-meta{padding-bottom:8px}
.wb-editor__nav .wb-meta + .wb-meta,.wb-editor__nav .body-sm + .wb-meta{padding:16px 0 8px}
.wb-editor__item--on{background:var(--pink-100);color:var(--pink-700);font-weight:600;border-radius:var(--radius-1)}
.wb-editor__item--sel{background:var(--ink-100);font-weight:600;border-radius:var(--radius-1)}
.wb-editor__canvas{flex:999 1 420px;min-width:0;padding:32px;display:flex;flex-direction:column;gap:20px}
.wb-editor__photo{height:220px;background:var(--ink-100);border-radius:var(--radius-2);display:grid;place-items:center}
.wb-editor__block{position:relative;border:2px solid var(--pink-500);border-radius:var(--radius-2);padding:24px;background:var(--white);display:flex;flex-direction:column;gap:10px}
.wb-editor__tag{position:absolute;top:-11px;left:16px;background:var(--pink-500);color:#fff;padding:3px 8px;border-radius:var(--radius-1);text-transform:uppercase}
.wb-editor__fakebtn{align-self:flex-start;padding:10px 16px;background:var(--ink-900);color:#fff;border-radius:var(--radius-2);font:600 14px/1 var(--font-body)}
.wb-editor__ghost{border:1px dashed var(--ink-300);border-radius:var(--radius-2);padding:20px;display:flex;flex-direction:column;gap:8px;opacity:.6}
.wb-editor__side{flex:1 1 280px;max-width:100%;background:var(--white);border-left:1px solid var(--ink-200);padding:24px;display:flex;flex-direction:column;gap:18px}
.wb-editor__thumb{width:72px;height:48px;background:var(--ink-100);border-radius:var(--radius-1)}
.wb-fake-input{display:flex;align-items:center;height:40px;padding:0 12px;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-2);font-size:14px;color:var(--text-primary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* Home: SESAME EDIT chat */
.wb-chat__me{align-self:flex-end;max-width:80%;background:var(--ink-900);color:#fff;border-radius:var(--radius-2);padding:12px 16px}
.wb-chat__ai{align-self:flex-start;max-width:85%;background:var(--bg-page);border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:14px 16px;display:flex;flex-direction:column;gap:10px}

/* Theme cards: a screenshot of the theme's demo site, or the theme's name in a grey box when it has no demo */
.wb-card .ss-card__media{border-bottom:1px solid var(--ink-200)}
.wb-card .ss-card__media img,.wb-card .ss-card__media video{display:block;width:100%;height:100%;object-fit:cover}
.wb-card .wb-card__ph{font-size:12px;padding:16px;text-align:center}
.wb-card .ss-card__media{position:relative}
/* Themes: the bar along the bottom of a recording (site.js initVideoProgress) */
.wb-tv{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(20,20,24,.22);overflow:hidden;pointer-events:none}
.wb-tv__buf{position:absolute;top:0;bottom:0;left:0;width:0;background:rgba(255,255,255,.6);transition:width .25s ease-out}
.wb-tv__fill{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--pink-600)}
.wb-tv__load{position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,var(--pink-600),transparent);animation:wb-tv-buffer 1.1s ease-in-out infinite}
.wb-tv__load[hidden]{display:none}
@keyframes wb-tv-buffer{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.wb-card .ss-card__title{font-size:20px}
.wb-card__actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px}
/* The demo site itself, in a new tab: at the far end of the row, apart from the request link */
.wb-card__open{margin-left:auto}
.wb-fn{color:inherit;text-decoration:none;margin-left:1px}

/* Personas page */
.wb-copywriter{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);overflow:hidden;display:flex;flex-direction:column}
.wb-copywriter img,.wb-copywriter video{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.wb-copywriter__body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.wb-copywriter__head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.wb-copywriter__body strong{color:var(--ink-900);font-weight:600}
.wb-copywriter .wb-more{margin-top:auto}
.wb-filters{display:flex;flex-wrap:wrap;gap:16px}
.wb-filters[hidden]{display:none}
.wb-filters .ss-field{flex:0 1 260px}
.wb-filters .ss-tabs{flex:1 1 auto;overflow-x:auto;margin-bottom:32px;white-space:nowrap}
.wb-filtered[hidden]{display:none}
.wb-empty[hidden]{display:none}

/* Pricing */
.wb-plan{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:32px;display:flex;flex-direction:column;gap:20px}
.wb-plan--featured{border:2px solid var(--ink-900);padding:31px}
.wb-plan__price{display:flex;align-items:baseline;gap:8px}
.wb-plan__num{font:700 56px/1 var(--font-display);letter-spacing:-.035em}
.wb-plan__list{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--ink-200);padding-top:20px}
.wb-plan__list .wb-check{gap:10px}
.wb-plan .ss-btn{margin-top:auto}
.wb-faq{display:flex;flex-direction:column;border-top:1px solid var(--ink-900);max-width:880px}
.wb-faq details{border-bottom:1px solid var(--ink-200);padding:18px 0}
.wb-faq summary{cursor:pointer;font:600 18px/1.3 var(--font-display);display:flex;justify-content:space-between;gap:16px;list-style:none}
.wb-faq summary::-webkit-details-marker{display:none}
.wb-faq summary::after{content:"+";font:400 22px/1 var(--font-body);color:var(--ink-500)}
.wb-faq details[open] summary::after{content:"\2212"}
.wb-faq p{margin:12px 0 0}

/* Specifications */
.wb-spec{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--ink-900)}
.wb-spec__row{display:flex;flex-wrap:wrap;gap:8px 32px;padding:20px 0;border-bottom:1px solid var(--ink-200)}
.wb-spec dt{flex:0 0 240px;font:600 15px/1.3 var(--font-body)}
.wb-spec dd{margin:0;flex:1 1 420px;color:var(--ink-500)}

/* Integrations */
.wb-int-search{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px}
.wb-int-search[hidden]{display:none}
.wb-int-search .ss-field{flex:0 1 420px;min-width:0}
.wb-int-search .wb-meta{padding-bottom:14px}
.wb-chips{display:flex;flex-wrap:wrap;gap:8px}
.wb-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--ink-300);border-radius:var(--radius-2);background:var(--white);font:600 13px/1 var(--font-body);color:var(--ink-900);text-decoration:none}
.wb-chip:hover{border-color:var(--ink-900);color:var(--ink-900)}
.wb-chip[hidden]{display:none}
.wb-int-cat{display:flex;flex-direction:column;gap:20px}
.wb-int-cat[hidden]{display:none}
.wb-int-cat__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;border-top:1px solid var(--ink-900);padding-top:20px}
.wb-int{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:14px 16px;display:flex;align-items:center;gap:14px}
.wb-int[hidden]{display:none}
.wb-int__icon{flex:none;width:48px;height:48px;border:1px solid var(--ink-200);border-radius:var(--radius-2);background:var(--white);overflow:hidden;display:grid;place-items:center}
.wb-int__icon img{display:block;width:100%;height:100%;object-fit:contain}
.wb-int__icon--none{background:var(--ink-100);color:var(--ink-500)}
.wb-int__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.wb-int .label{font-size:15px}

/* Contact */
.wb-form{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:32px;display:flex;flex-direction:column;gap:20px}
.wb-form__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:8px}
.wb-form__errors{padding:12px 16px;border:1px solid var(--danger);background:var(--danger-100);border-radius:var(--radius-2);color:var(--ink-900);font-size:14px}
.wb-form__errors ul{margin:0;padding-left:18px}
.wb-form__choice{display:flex;gap:8px;flex-wrap:wrap}
.ss-field__hint--error:empty{display:none}
.wb-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.wb-contact-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 18px/1 var(--font-body);color:var(--ink-900);text-decoration:none}
.wb-contact-link:hover{color:var(--pink-600)}
.wb-next{display:flex;gap:16px;align-items:flex-start}
.wb-next .mono-label{color:var(--pink-600);padding-top:4px}
.wb-next__text{display:flex;flex-direction:column;gap:4px}
.wb-next .label{font-size:15px}

/* Consent bar (Sesame.Partners' design) */
.wb-consent{position:fixed;left:24px;bottom:24px;z-index:210;width:min(420px,calc(100vw - 48px));padding:20px;background:var(--surface-card);border:1px solid var(--border-default);box-shadow:var(--shadow-overlay)}
.wb-consent[hidden]{display:none}
.wb-consent__title{margin:0 0 6px;font:600 16px/1.3 var(--font-display);color:var(--text-primary)}
.wb-consent__text{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--ink-700)}
.wb-consent__text a{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}
.wb-consent__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Legal pages */
.wb-prose{max-width:720px;margin:0 auto;padding:72px 24px 96px;font-size:16px;line-height:1.65;color:var(--ink-700)}
.wb-prose__title{font:700 clamp(36px,4.6vw,56px)/1.05 var(--font-display);letter-spacing:-.03em;margin:0 0 20px;color:var(--text-primary)}
.wb-prose__meta{margin:0 0 32px;font-size:14px;color:var(--text-secondary)}
.wb-prose__lede{font-size:18px;line-height:1.6;color:var(--text-primary)}
.wb-prose h2{font:600 24px/1.25 var(--font-display);letter-spacing:-.02em;color:var(--text-primary);margin:56px 0 14px}
.wb-prose h3{font:600 17px/1.35 var(--font-display);color:var(--text-primary);margin:32px 0 8px}
.wb-prose p,.wb-prose ul,.wb-prose ol,.wb-prose address{margin:0 0 14px}
.wb-prose ul,.wb-prose ol{padding-left:22px}
.wb-prose li{margin:0 0 6px}
.wb-prose address{font-style:normal}
.wb-prose strong{font-weight:600;color:var(--text-primary)}
.wb-prose a{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}
.wb-prose a:hover{color:var(--text-accent)}
.wb-prose code{font:500 14px var(--font-mono)}
.wb-prose__toc{margin:32px 0 8px;padding:20px 24px;background:var(--surface-card);border:1px solid var(--border-default)}
.wb-prose__toc ol{margin:0;columns:2;column-gap:32px;font-size:15px}
.wb-prose__toc li{break-inside:avoid}
.wb-prose__table{overflow-x:auto;margin:0 0 20px;border:1px solid var(--border-default);background:var(--surface-card)}
.wb-prose__table table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.wb-prose__table th,.wb-prose__table td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--border-default)}
.wb-prose__table tr:last-child td{border-bottom:0}
.wb-prose__table th{font-weight:600;color:var(--text-primary);background:var(--surface-sunken)}

/* Home: the Home 2 blocks (flow, Builder credentials, plugin groups, tools, chat, editor tabs) */
.wb-accent{color:var(--pink-600)}

/* Personas: a word beside each name */
.wb-persona__name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* From your link: the flow visual */
.wb-flow{background:var(--bg-page);border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,auto) minmax(0,1.45fr);gap:40px;align-items:center}
.wb-flow__in{display:flex;flex-direction:column;gap:12px}
.wb-flow__in > .wb-meta{margin-bottom:4px}
.wb-source{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.wb-source .label{font-size:14px}
.wb-source .mono-label{color:var(--ink-500);letter-spacing:.02em}
.wb-or{display:flex;align-items:center;gap:12px}
.wb-or::before,.wb-or::after{content:"";flex:1 1 auto;height:1px;background:var(--ink-300)}
.wb-flow__ai{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.wb-flow__mark{position:relative;width:56px;height:56px;background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);display:grid;place-items:center;font:700 30px/1 var(--font-display);letter-spacing:-.02em;color:var(--ink-900)}
.wb-flow__mark .ss-icon{position:absolute;top:7px;right:7px;color:var(--pink-500)}
.ss-stripe.wb-flow__stripe{width:72px;height:3px}
.wb-flow__does{display:flex;flex-direction:column;gap:4px;color:var(--ink-700)}
.wb-flow__arrow{color:var(--pink-600);margin-top:4px}
.wb-preview{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);overflow:hidden;box-shadow:var(--shadow-overlay)}
.wb-preview__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--ink-200)}
.wb-preview__bar .ss-badge{justify-self:end}
.wb-dots{display:flex;gap:4px}
.wb-dots span{width:6px;height:6px;background:var(--ink-300);display:block}
.wb-preview__img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:top}
.wb-preview__cap{padding:14px 18px 16px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--ink-200)}
.wb-ph{background:var(--ink-100);display:flex;align-items:center;justify-content:center;text-align:center;padding:8px}
@media(max-width:900px){
  .wb-flow{grid-template-columns:minmax(0,1fr);padding:24px;gap:28px}
  .wb-flow__arrow{transform:rotate(90deg)}
}

/* Hotelwize Builder: credentials and a compact line of numbers */
.wb-builder__kicker{font:600 clamp(20px,2.2vw,26px)/1.2 var(--font-display);letter-spacing:-.015em;color:var(--pink-600);display:flex;align-items:center;gap:12px}
.wb-builder__kicker::before{content:"";width:28px;height:2px;background:var(--pink-600);flex:none}
.wb-builder__title{margin:0;font:700 clamp(36px,4.6vw,56px)/1.05 var(--font-display);letter-spacing:-.035em}
.wb-cred{border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:24px;background:var(--bg-page);display:flex;gap:16px;align-items:flex-start}
.wb-cred .ss-icon{color:var(--pink-600);margin-top:2px}
.wb-statline{display:flex;flex-wrap:wrap;align-items:flex-end;border-top:1px solid var(--ink-900);border-bottom:1px solid var(--ink-200)}
.wb-statline__lead{flex:2 1 400px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;padding:28px 32px 28px 0}
.wb-statline__big{font:700 clamp(60px,7vw,96px)/.88 var(--font-display);letter-spacing:-.045em}
.wb-statline__big .wb-accent{color:var(--pink-600)}
.wb-statline__caption{display:flex;flex-direction:column;gap:4px;padding-bottom:6px}
.wb-statline__caption .label{font-size:16px}
.wb-statline__item{flex:1 1 150px;padding:28px 20px 28px 0;display:flex;flex-direction:column;gap:8px}
.wb-statline__num{font:700 32px/1 var(--font-display);letter-spacing:-.03em}
.wb-statline__item .label{color:var(--ink-500)}

/* Plugins: grouped by what they do for the hotel, four in one row (2 x 2 on smaller screens) */
.wb-plugins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media(max-width:1100px){.wb-plugins{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.wb-plugins{grid-template-columns:minmax(0,1fr)}}
.wb-plugroup{border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:24px;background:var(--bg-page);display:flex;flex-direction:column}
.wb-plugroup > .wb-meta{padding-bottom:10px;border-bottom:1px solid var(--ink-900)}
.wb-plug{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--ink-200)}
.wb-plug:last-child{border-bottom:0;padding-bottom:0}
.wb-plug .ss-icon{margin-top:1px}
.wb-plug__text{display:flex;flex-direction:column;gap:4px}
.wb-plug .label{font-size:15px}
.wb-addons{border:1px solid var(--ink-200);border-radius:var(--radius-2);padding:20px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.wb-addons__title{display:flex;align-items:center;gap:12px;flex:0 1 auto;min-width:0}
.wb-addons__title .ss-icon{color:var(--pink-600)}
.wb-addons__title .label{font-size:15px}
.wb-addons .wb-badges{flex:1 1 360px}
.wb-addons .wb-more{align-self:center}

/* Tools: three tools, each with a small preview of what it does */
.wb-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:900px){.wb-tools{grid-template-columns:minmax(0,1fr)}}
.wb-tool{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);overflow:hidden;display:flex;flex-direction:column}
.wb-tool__preview{padding:20px;background:var(--ink-100);border-bottom:1px solid var(--ink-200);display:flex;flex-direction:column;gap:10px;min-height:152px}
.wb-tool__body{padding:24px;display:flex;flex-direction:column;gap:10px}
.wb-tool__row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wb-tool__row .body-sm{color:var(--ink-700);display:flex;align-items:center;gap:6px}
.wb-tool__row .mono-label{color:var(--ink-700)}
.wb-bars{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px 12px;align-items:center}
.wb-bars .body-sm{color:var(--ink-700)}
.wb-bar{display:block;height:8px;background:var(--ink-900)}
.wb-redirect{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wb-redirect .mono-label{color:var(--ink-700)}
.wb-redirect .mono-label:last-child{color:var(--ink-900)}
.wb-redirect .ss-icon{color:var(--ink-500)}

/* AI chatbot: As easy as chatting */
.wb-chatbot{padding:128px 0}
.wb-chatbot__title{margin:0;font:700 clamp(48px,6.4vw,88px)/1.02 var(--font-display);letter-spacing:-.035em}
.wb-chatbot .wb-lede{font-size:20px;--max:520px}
.wb-chatbot__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:8px}
.wb-chatbot__steps .wb-step{gap:8px;padding-top:14px}
.wb-chatbot__steps .label{font-size:15px}
.wb-chatbot__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;border-bottom:1px solid var(--ink-200)}
.wb-chatbot__photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wb-chatbot__photos .wb-ph{height:56px;border:1px solid var(--ink-200);border-radius:var(--radius-1)}
.wb-chatbot__photos .wb-ph--on{border:2px solid var(--pink-500)}


@media(max-width:560px){
  .wb-chatbot{padding:80px 0}
  .wb-statline__lead{padding-right:0}
}

/* Home-2: Personas headline animation */
@keyframes h2-word{0%{opacity:0;transform:translateY(.35em)}8%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-.2em)}}
@keyframes h2-line{0%,22%{transform:scaleX(0)}34%,86%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}
@keyframes h2-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.h2-pt .h2-w{display:inline-block;animation:h2-word 7s var(--ease-out) infinite both}
.h2-pt .h2-w--2{animation-delay:.18s}
.h2-pt .h2-w--3{animation-delay:.36s}
.h2-pt .h2-cw{position:relative}
.h2-pt .h2-cw::after{content:"";position:absolute;left:0;right:.35em;bottom:-.06em;height:5px;background:var(--ai-stripe);transform-origin:left center;transform:scaleX(0);animation:h2-line 7s var(--ease-out) infinite}
.h2-pt .h2-caret{display:inline-block;width:3px;height:.85em;margin-left:6px;vertical-align:-.06em;background:var(--pink-500);animation:h2-blink 1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.h2-pt .h2-w{animation:none}.h2-pt .h2-cw::after{animation:none;transform:scaleX(1)}.h2-pt .h2-caret{animation:none;display:none}}

/* Home-2: SESAME CREATE flow animation */
@keyframes h2-mark{0%,100%{box-shadow:0 0 0 0 rgba(232,71,154,0)}50%{box-shadow:0 0 0 8px rgba(232,71,154,.14)}}
@keyframes h2-spark{0%,100%{transform:scale(1) rotate(0deg);opacity:1}50%{transform:scale(1.4) rotate(25deg);opacity:.55}}
@keyframes h2-do{0%{color:var(--ink-400);transform:translateY(0)}6%,30%{color:var(--ink-900);transform:translateY(-2px)}36%,100%{color:var(--ink-400);transform:translateY(0)}}
@keyframes h2-in{0%,100%{border-color:var(--ink-200)}12%,30%{border-color:var(--pink-500)}}
.wb-flow__mark{animation:h2-mark 3s var(--ease-in-out) infinite}
.wb-flow__mark .ss-icon{animation:h2-spark 3s var(--ease-in-out) infinite}
.wb-flow__does .h2-do{display:inline-block;animation:h2-do 4.5s var(--ease-out) infinite}
.wb-flow__does .h2-do--2{animation-delay:1.5s}
.wb-flow__does .h2-do--3{animation-delay:3s}
.wb-flow__in .wb-source{animation:h2-in 4.5s var(--ease-out) infinite}
.wb-flow__in .wb-source + .wb-or + .wb-source{animation-delay:.4s}
.wb-preview{animation:h2-in 4.5s var(--ease-out) 3.4s infinite}
@media (prefers-reduced-motion:reduce){.wb-flow__mark,.wb-flow__mark .ss-icon,.wb-flow__does .h2-do,.wb-flow__in .wb-source,.wb-preview{animation:none}.wb-flow__does .h2-do{color:var(--ink-700)}}
.wb-edtabs{display:flex;gap:4px;padding:0 16px;border-bottom:1px solid var(--ink-200);background:var(--white)}
.wb-edtab{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;font:600 13px/1 var(--font-body);color:var(--ink-500)}
.wb-edtab[aria-selected=true]{border-bottom-color:var(--pink-500);color:var(--ink-900)}
.wb-edtab .ss-icon{color:var(--pink-500)}
.wb-editor__side--tabs{padding:0;gap:0}
.wb-edpanel{display:flex;flex-direction:column;flex:1 1 auto}
.wb-edpanel--fields{padding:24px;gap:18px}
.wb-edpanel__bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 20px;border-bottom:1px solid var(--ink-200)}
.wb-edpanel__log{padding:18px 20px;display:flex;flex-direction:column;gap:12px;flex:1 1 auto;background:var(--bg-page)}
.wb-edpanel__ask{display:flex;gap:8px;align-items:center;padding:14px 20px;border-top:1px solid var(--ink-200);background:var(--white)}
.wb-edpanel__ask .wb-fake-input{flex:1 1 auto;min-width:0}

/* Phone width: 16px gutters, tighter sections */
@media(max-width:560px){
  :root{--gutter:16px}
  .wb-section{padding:64px 0}
  .wb-section--hero{padding:32px 0 56px}
  .wb-section--intro{padding:56px 0 32px}
  .wb-cta{padding:64px 0}
  .wb-hero__form .ss-btn{width:100%}
  .wb-tile--lg,.wb-form,.wb-plan,.wb-sales{padding:24px}
  .wb-plan--featured{padding:23px}
  .wb-editor__canvas{padding:20px}
  .wb-consent{left:16px;right:16px;bottom:16px;width:auto}
  .wb-prose{padding:48px 16px 72px}
  .wb-prose__toc ol{columns:1}
  .wb-spec dt{flex-basis:100%}
}

/* A theme's page (/themes/{slug}, Views/Home/Theme.cshtml) */
.wb-card__media{color:inherit;text-decoration:none}
.wb-card__link{color:inherit;text-decoration:none}
.wb-card__link:hover{color:var(--pink-600)}
.wb-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:500 13px/1 var(--font-body);color:var(--ink-500)}
.wb-crumbs a{color:var(--ink-500);text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.wb-crumbs a:hover{color:var(--ink-900);text-decoration:underline}
.wb-crumbs [aria-current]{color:var(--ink-900)}
.wb-theme-hero{padding:40px 0 0}
.wb-theme-hero__head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:32px 48px;align-items:end}
.wb-theme-hero__title{margin:0;font:700 clamp(56px,8vw,120px)/.95 var(--font-display);letter-spacing:-.045em;overflow-wrap:anywhere}
.wb-theme-hero__lede{margin:0;font-size:20px;line-height:1.5;color:var(--ink-700);max-width:520px}
.wb-theme-frame{margin:8px 0 0;background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);overflow:hidden}
.wb-theme-frame__bar{display:flex;align-items:center;gap:12px;padding:0 14px;min-height:44px;border-bottom:1px solid var(--ink-200);background:var(--ink-50)}
.wb-theme-frame__dots{display:flex;gap:6px}
.wb-theme-frame__dots span{width:10px;height:10px;border-radius:999px;background:var(--ink-300)}
.wb-theme-frame__host{flex:1 1 auto;text-align:center;text-transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-theme-frame__play{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;border:0;background:none;color:var(--ink-900);cursor:pointer;border-radius:var(--radius-2)}
.wb-theme-frame__play:focus-visible{outline:2px solid var(--pink-600);outline-offset:-4px}
.wb-theme-frame__play .wb-theme-frame__resume,.wb-theme-frame__play[data-paused] .wb-theme-frame__pause{display:none}
.wb-theme-frame__play[data-paused] .wb-theme-frame__resume{display:inline-block}
.wb-theme-frame__screen{background:var(--ink-100)}
.wb-theme-frame__screen video,.wb-theme-frame__screen img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
/* The hero's bar sits under the recording, not over it */
.wb-theme-frame__screen .wb-tv{position:relative;background:var(--ink-100)}
.wb-theme-frame__screen .wb-tv__buf{background:var(--ink-300)}
.wb-theme-frame__screen .wb-tv__fill{transition:width .3s linear}
.wb-theme-frame__ph{display:grid;place-items:center;aspect-ratio:16/10;font:500 12px var(--font-mono);color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em}
.wb-theme-frame__cap{padding:12px 16px;color:var(--ink-500);border-top:1px solid var(--ink-200)}
.wb-theme-section{padding-top:96px}
.wb-theme-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px 48px;align-items:start}
.wb-theme-split--rule{border-top:1px solid var(--ink-900);padding-top:20px}
.wb-theme-split--end{align-items:end}
.wb-theme-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);overflow:hidden}
/* The rules between the cards are drawn by each card, so a short last row leaves white, not a grey cell */
.wb-theme-type{box-shadow:1px 0 0 var(--ink-200),0 1px 0 var(--ink-200);padding:24px;display:flex;flex-direction:column;gap:12px;min-height:200px;box-sizing:border-box}
.wb-theme-type__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wb-theme-type__icon{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;background:var(--ink-100);border-radius:var(--radius-2);color:var(--ink-900)}
.wb-theme-type__name{font-size:20px}
.wb-theme-map{background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);overflow:hidden}
.wb-theme-map ol{list-style:none;margin:0;padding:8px 0}
.wb-theme-map li{display:flex;align-items:center;gap:12px;padding:10px 24px;color:var(--ink-500)}
.wb-theme-map li.wb-theme-map__sub{padding-left:52px}
.wb-theme-map__name{flex:1 1 auto;font:600 15px/1.3 var(--font-body);color:var(--ink-900);min-width:0}
.wb-theme-write{background:var(--ink-900);color:#fff;border-radius:var(--radius-2);overflow:hidden}
.wb-theme-write__in{padding:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:40px;align-items:center}
.wb-theme-write .h2{color:#fff}
.wb-theme-write .body,.wb-theme-write .wb-meta{color:var(--ink-300)}
.wb-theme-sample{background:var(--white);color:var(--ink-900);border-radius:var(--radius-2);padding:20px;display:flex;flex-direction:column;gap:12px}
.wb-theme-sample .wb-meta{color:var(--ink-500)}
.wb-theme-sample__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wb-theme-sample__text{margin:0;font:400 18px/1.55 var(--font-body);min-height:3.1em}
.wb-theme-sample__text[data-typing]::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.15em;background:var(--pink-600);animation:wb-caret 1s steps(1) infinite}
@keyframes wb-caret{50%{opacity:0}}
.wb-theme-plugins{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:10px}
.wb-theme-plugins li{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-2);font:600 14px/1.3 var(--font-body)}
.wb-theme-plugins .ss-icon{color:var(--success-600,var(--success))}
.wb-tabs{display:inline-flex;align-self:flex-start;border:1px solid var(--ink-900);border-radius:var(--radius-2);overflow:hidden}
.wb-tabs[hidden]{display:none}
[data-tab-panel][hidden]{display:none}
.wb-tab{min-height:44px;padding:0 22px;border:0;background:var(--white);color:var(--ink-900);font:600 14px/1 var(--font-body);cursor:pointer}
.wb-tab+.wb-tab{border-left:1px solid var(--ink-900)}
.wb-tab:hover{background:var(--ink-50)}
.wb-tab[aria-pressed="true"]{background:var(--ink-900);color:#fff}
.wb-tab:focus-visible,.wb-tpl-scroll:focus-visible{outline:2px solid var(--pink-600);outline-offset:2px}
.wb-tpl-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:end;padding:40px;background:var(--ink-100);border-radius:var(--radius-2)}
.wb-tpl-desk,.wb-tpl-mob{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.wb-tpl-chrome{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--ink-50);border:1px solid var(--ink-200);border-bottom:0;border-radius:6px 6px 0 0}
.wb-tpl-url{flex:1 1 auto;text-align:center;text-transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-tpl-scroll{height:560px;overflow-y:auto;background:var(--white);border:1px solid var(--ink-200);margin-top:-10px;border-radius:0 0 6px 6px;overscroll-behavior:contain}
.wb-tpl-scroll img{display:block;width:100%;height:auto}
.wb-tpl-phone{padding:10px;background:var(--ink-900);border-radius:36px}
.wb-tpl-scroll--phone{height:580px;margin:0;border:0;border-radius:28px;scrollbar-width:none}
.wb-tpl-scroll--phone::-webkit-scrollbar{display:none}
.wb-tpl-cap{color:var(--ink-500);text-align:center}
.wb-tpl-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
@media(max-width:860px){.wb-tpl-stage{grid-template-columns:minmax(0,1fr);padding:20px}.wb-tpl-mob{max-width:300px;justify-self:center;width:100%}.wb-tpl-scroll{height:420px}.wb-tpl-scroll--phone{height:520px}}
@media(max-width:640px){.wb-theme-write__in{padding:28px 20px}.wb-theme-map li{padding:10px 16px}.wb-theme-map li.wb-theme-map__sub{padding-left:40px}.wb-theme-section{padding-top:64px}}
@media (prefers-reduced-motion:reduce){.wb-tv__load{animation:none;width:100%;opacity:.45;background:var(--pink-600)}.wb-theme-frame__screen .wb-tv__fill{transition:none}.wb-theme-sample__text[data-typing]::after{animation:none}}