:root{--wb-primary:#2563eb;--wb-bg:#ffffff;--wb-text:#1f2937;--wb-font:'Inter', -apple-system, BlinkMacSystemFont, sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--wb-font);color:var(--wb-text);background:var(--wb-bg);line-height:1.6}
.wb-container{max-width:1200px;margin:0 auto;padding:0 20px}
.wb-main{min-height:100vh}
.wb-section{padding:40px 0}
.wb-text-center{text-align:center}
.wb-btn{display:inline-block;padding:12px 28px;border-radius:6px;text-decoration:none;font-weight:600;cursor:pointer;border:none;font-size:1rem;transition:opacity .2s}
.wb-btn:hover{opacity:.85}
.wb-btn-primary{background:var(--wb-primary);color:#fff}
.wb-btn-secondary{background:transparent;color:var(--wb-primary);border:2px solid var(--wb-primary)}
.wb-site-nav,.wb-navbar{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.1)}
.wb-navbar-inner{display:flex;align-items:center;justify-content:space-between}
.wb-navbar-logo{font-size:1.25rem;font-weight:700}
.wb-navbar-menu{display:flex;list-style:none;gap:24px}
.wb-navbar-menu a{text-decoration:none;color:inherit;font-weight:500}
/* HIDDEN EVERYWHERE UNTIL THE NARROW QUERY BELOW TURNS IT ON. A bar that did
   not ask to collapse never draws this element at all, so the rule costs those
   pages nothing; a bar that did must not grow a second menu control on a
   desktop, which is the one thing this feature promised not to touch. */
.wb-navbar-toggle{display:none;align-items:center;justify-content:center;padding:8px;background:none;border:0;color:inherit;cursor:pointer}
.wb-hero{padding:80px 0;text-align:center}
.wb-hero h1{font-size:3rem;margin-bottom:16px}
.wb-hero-subtitle{font-size:1.25rem;opacity:.8;margin-bottom:32px}
/* THE PAGE IS A 12-COLUMN GRID. A block says how many it takes; taking all 12
   is what a header or a footer is. The two --span values are computed in PHP
   (see renderColumns) rather than by css arithmetic, because `round()` in a
   grid-column is not something every browser this catalog serves can do. */
.wb-columns{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.wb-column{min-width:0;grid-column:span var(--wb-span,12)}
/* A BLOCK INSIDE A BOX IS NOT A BAND, and this is the rule that says so.
   Every block draws itself as `.wb-section` round a `.wb-container` - 40px of
   air above and below, and a gutter sized for a 1200px page. On the PAGE that
   is exactly right: the air is what holds one band off the next. Nested, it is
   the defect that made built pages look stretched. A column holding a heading,
   two paragraphs and a button carried 240px of padding nobody asked for, and
   the container's 20px gutter was being taken out of a column 300px wide.
   A BOX THAT NARROWS THE WIDTH WEARS `wb-nested`, and only those: a column, a
   flex box, a repeat row and a collection card. A `section` does NOT, and that
   omission is the rule stated the other way round - a section is a band the
   full width of the page, so blocks inside it are spaced exactly as blocks on
   the page, which is what LayoutBandRoleTest holds it to. Nor does any box the
   OPERATOR named: given a class, that box is the site's own element and the
   site's stylesheet dresses it. One class, so this is ONE rule rather than one
   per container, and a narrowing box added later inherits it by wearing it.
   4px AND NOT 0, because two paragraphs with no air between them read as one
   paragraph. It is deliberately below the smallest value the padding control
   offers, so any padding an operator sets is visibly larger than the default.
   NO `!important` ON EITHER LINE. A block's own padding arrives as an inline
   style and has to keep winning: `!important` here would make the Padding
   control dead on every nested block, which is the exact failure the editor's
   Block Options panel is written to avoid. */
.wb-nested .wb-section{padding:4px 0}
.wb-nested .wb-container{max-width:none;padding:0}
/* A COLUMN THAT IS A CARD, without the operator writing a stylesheet first.
   Typed into a column's Class box, it is the one piece of decoration a row of
   three asks for often enough to ship with the engine: the row stops being
   three stacks of text separated by gaps and becomes three cards. It carries
   its own padding, so it does not depend on what was dropped inside it - and
   that padding survives the rule above, which reaches containers and bands and
   not the box wearing the class. */
.wb-card{background:#fff;border-radius:12px;border:1px solid #e2e8f0;box-shadow:0 4px 12px rgba(0,0,0,.05);padding:24px}
/* THE FLEX CONTAINER. One class per choice the block offers, so the renderer
   maps a switch onto a rule and never computes a length. Every size is on the
   8px scale: none, 8, 24, 48. The band exists to carry the padding and the
   shared style bag; the flex box inside it carries the layout. */
.wb-flex-band--pad-none{padding:0}
.wb-flex-band--pad-sm{padding:8px}
.wb-flex-band--pad-md{padding:24px}
.wb-flex-band--pad-lg{padding:48px}
.wb-flex{display:flex}
/* Without this a long word or a wide image in one child refuses to shrink and
   pushes the whole row past the edge of the page. Same reason .wb-column has it. */
.wb-flex>*{min-width:0}
.wb-flex--row{flex-direction:row}
.wb-flex--column{flex-direction:column}
.wb-flex--gap-none{gap:0}
.wb-flex--gap-sm{gap:8px}
.wb-flex--gap-md{gap:24px}
.wb-flex--gap-lg{gap:48px}
.wb-flex--align-start{align-items:flex-start}
.wb-flex--align-center{align-items:center}
.wb-flex--align-end{align-items:flex-end}
.wb-flex--align-stretch{align-items:stretch}
.wb-flex--justify-start{justify-content:flex-start}
.wb-flex--justify-center{justify-content:center}
.wb-flex--justify-end{justify-content:flex-end}
.wb-flex--justify-between{justify-content:space-between}
.wb-flex--wrap{flex-wrap:wrap}
.wb-flex--nowrap{flex-wrap:nowrap}
.wb-collection{display:grid;gap:16px}
.wb-collection-grid{grid-template-columns:repeat(var(--wb-cards,3),minmax(0,1fr))}
.wb-collection-list{grid-template-columns:1fr}
.wb-collection-card{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.wb-collection-list .wb-collection-card{flex-direction:row;align-items:center;gap:14px;padding:12px}
.wb-collection-img{width:100%;height:150px;object-fit:cover}
.wb-collection-list .wb-collection-img{width:96px;height:72px;border-radius:8px;flex:0 0 96px}
.wb-collection-title{display:block;padding:12px 14px 0;font-weight:600;color:inherit;text-decoration:none}
.wb-collection-list .wb-collection-title{padding:0}
.wb-collection-blurb{margin:6px 14px 14px;color:#6b7280;font-size:.9em}
.wb-collection-list .wb-collection-blurb{margin:4px 0 0}
.wb-collection-heading{margin:0 0 14px}
.wb-collection-empty{color:#6b7280}
.wb-gallery{display:grid;gap:12px}
.wb-gallery img{width:100%;height:200px;object-fit:cover;border-radius:8px}
.wb-video-wrapper{position:relative;padding-bottom:56.25%;height:0}
.wb-video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}
/* THE DOWNLOAD CARD. It wraps rather than shrinking the button, because the
   one thing on it that must stay pressable on a narrow phone is the link, and
   a Download that has been squeezed to two characters is not one. Every length
   is on the 8px scale. */
.wb-file-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:24px;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:rgba(0,0,0,.02)}
.wb-file-card__body{min-width:0}
.wb-file-card__title{font-weight:600;font-size:1.1rem}
.wb-file-card__note{margin-top:8px;opacity:.8}
/* The name, the format and the size. Quieter than the title on purpose: they
   tell a visitor what they are about to receive, they are not the heading. */
.wb-file-card__facts{margin-top:8px;font-size:.9rem;opacity:.6;overflow-wrap:anywhere}
.wb-testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.wb-testimonial-card{background:rgba(0,0,0,.03);padding:24px;border-radius:8px}
.wb-testimonial-card blockquote{font-style:italic;margin-bottom:12px}
.wb-testimonial-author{font-weight:600}
.wb-testimonial-role{opacity:.6;font-size:.9rem}
.wb-pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.wb-pricing-card{background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:32px;text-align:center}
.wb-pricing-featured{border-color:var(--wb-primary);box-shadow:0 4px 24px rgba(0,0,0,.1)}
.wb-pricing-price{font-size:2rem;font-weight:700;margin:16px 0}
.wb-pricing-card ul{list-style:none;margin:16px 0;text-align:left}
.wb-pricing-card li{padding:6px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.wb-faq-item{border-bottom:1px solid rgba(0,0,0,.1);padding:16px 0}
.wb-faq-item summary{cursor:pointer;font-weight:600;font-size:1.1rem}
.wb-faq-answer{padding:12px 0;opacity:.85}
.wb-divider{border:none;border-top:1px solid rgba(0,0,0,.1);margin:0}
.wb-footer{padding:40px 0;background:rgba(0,0,0,.03);text-align:center}
.wb-footer-copyright{opacity:.6;font-size:.9rem;margin-top:8px}
.wb-social{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.wb-social-link{text-decoration:none;color:var(--wb-primary);font-weight:500}
.wb-form-block{max-width:600px;margin:0 auto;padding:24px;background:rgba(0,0,0,.02);border-radius:12px}
.wb-form-title{margin-bottom:16px}
.wb-form-field{margin-bottom:16px}
.wb-form-field label{display:block;margin-bottom:4px;font-weight:500;font-size:.9rem}
.wb-form-field input,.wb-form-field textarea,.wb-form-field select{width:100%;padding:10px 12px;border:1px solid rgba(0,0,0,.2);border-radius:6px;font-size:1rem;font-family:inherit}
.wb-form-field--checkbox{display:flex;align-items:center;gap:8px}
.wb-form-field--checkbox label{display:flex;align-items:center;gap:8px;margin:0}
.wb-form-submit-row{margin-top:20px}
.wb-form-success{padding:16px;text-align:center;color:#16a34a;font-weight:600}
.wb-form-block--trigger{text-align:center}
.wb-form-trigger-title{margin-bottom:12px;font-weight:600}
.wb-form-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:9999}
.wb-form-modal{background:#fff;border-radius:12px;padding:0;max-width:520px;width:90%;max-height:90vh;overflow-y:auto}
.wb-form-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.1)}
.wb-form-modal-title{font-weight:700;font-size:1.1rem}
.wb-form-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:4px 8px}
.wb-form-modal-body{padding:24px}
.wb-auth-form{max-width:480px;margin:0 auto;padding:40px 36px 32px;background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.04)}
.wb-auth-form--compact{max-width:400px;padding:28px 24px 24px}
.wb-auth-form__title{text-align:center;margin:0 0 24px;font-size:1.35rem;font-weight:700;color:var(--wb-text,#1f2937);letter-spacing:-.01em}
.wb-auth-form__subtitle{text-align:center;color:#6b7280;font-size:.9rem;margin:-12px 0 20px;line-height:1.5}
.wb-auth-form__form{display:flex;flex-direction:column;gap:14px}
.wb-auth-field label{display:block;font-size:.8rem;font-weight:600;margin-bottom:6px;letter-spacing:.02em;color:#374151}
.wb-auth-field input{width:100%;padding:11px 14px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:.95rem;font-family:inherit;background:#f9fafb;transition:border-color .2s,box-shadow .2s,background .2s;box-sizing:border-box}
.wb-auth-field input:focus{outline:none;border-color:var(--wb-primary);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--wb-primary) 12%,transparent)}
.wb-auth-field input::placeholder{color:#9ca3af}
.wb-auth-field--error{color:#dc2626;font-size:.88rem;padding:8px 12px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;line-height:1.4}
.wb-auth-submit{width:100%;margin-top:6px;padding:12px;font-size:1rem;font-weight:600;letter-spacing:.01em;border:none;border-radius:10px;color:#fff;background:var(--wb-primary);cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s}
.wb-auth-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--wb-primary) 30%,transparent)}
.wb-auth-submit:disabled{opacity:.6;cursor:not-allowed}
.wb-auth-form__success{text-align:center;padding:24px 16px;color:#15803d;font-weight:600;font-size:1.05rem;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;line-height:1.5}
.wb-auth-ok-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:#16a34a;color:#fff;border-radius:50%;font-size:.9rem;vertical-align:middle;margin-right:6px}
.wb-auth-form__links{text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid #f3f4f6;font-size:.85rem;display:flex;flex-direction:column;gap:8px;align-items:center}
.wb-auth-toggle{color:var(--wb-primary);text-decoration:none;cursor:pointer;font-size:.85rem;font-weight:500}
.wb-auth-toggle:hover{text-decoration:underline}
.wb-auth-toggle--alt{color:#6b7280;font-size:.82rem;font-weight:400}
.wb-auth-toggle--alt strong{color:var(--wb-primary);font-weight:600}
.wb-auth-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;background:#fff;border:1.5px solid #e5e7eb;border-radius:10px;font-size:.9375rem;font-weight:500;color:#374151;cursor:pointer;font-family:inherit;transition:border-color .2s,box-shadow .2s,background .2s}
.wb-auth-google:hover{border-color:#d1d5db;background:#f9fafb;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.wb-auth-google:active{transform:scale(.99)}
.wb-auth-google:disabled{opacity:.6;cursor:not-allowed}
.wb-auth-google__icon{flex-shrink:0}
.wb-auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:.8rem;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em}
.wb-auth-divider::before,.wb-auth-divider::after{content:'';flex:1;height:1px;background:#e5e7eb}
.wb-auth-step{animation:wbPaneFade .3s ease}
.wb-auth-continue{width:100%;margin-top:6px;padding:12px;font-size:1rem;font-weight:600;letter-spacing:.01em;border:none;border-radius:10px;color:#fff;background:var(--wb-primary);cursor:pointer;transition:transform .15s,box-shadow .15s}
.wb-auth-continue:hover{transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--wb-primary) 30%,transparent)}
.wb-auth-step2-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#f3f4f6;border-radius:8px;margin-bottom:14px;font-size:.875rem;color:#374151}
.wb-auth-step2-email{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-auth-step2-change{color:var(--wb-primary);font-size:.8125rem;font-weight:500;text-decoration:none;flex-shrink:0;margin-left:12px}
.wb-auth-step2-change:hover{text-decoration:underline}
.wb-auth-pane{animation:wbPaneFade .3s ease}
@keyframes wbPaneFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* THREE STEPS, not two. A tablet that jumps straight to one column turns a
   three-across card grid into a column of giants; halving the grid keeps two
   across, which is what the width is actually good for. */
@media(max-width:1024px){.wb-columns{grid-template-columns:repeat(6,minmax(0,1fr))}.wb-column{grid-column:span var(--wb-span-md,6)}.wb-collection-grid{grid-template-columns:repeat(min(2,var(--wb-cards,3)),minmax(0,1fr))}}
@media(max-width:768px){.wb-hero h1{font-size:2rem}.wb-columns{grid-template-columns:minmax(0,1fr)}.wb-column{grid-column:1/-1}.wb-collection-grid{grid-template-columns:minmax(0,1fr)}.wb-navbar-inner{flex-direction:column;gap:12px}.wb-navbar-menu{flex-wrap:wrap;justify-content:center}}
/* A ROW BECOMES A COLUMN ON A PHONE, on its own. This is the whole reason the
   direction is a class and not an inline style: a site people open on a phone
   cannot ship a three-across row that stays three-across at 360px, and an
   operator should not have to build the narrow version by hand. Kept as its own
   query rather than folded into the line above so the rule is readable, and so
   that a change to it is a change to one thing.
   `justify-content` is left alone deliberately: spread apart still means spread
   apart down a column, and re-packing it would silently undo the setting.
   `align-items` is NOT left alone, and the axis is the reason the two settings
   are treated differently. Align works on the CROSS axis, so in a row it means
   "where the blocks sit vertically" and costs nothing horizontally. Turning the
   direction turns that axis with it: the `align-items:center` an operator chose
   to line a logo up beside a heading would, once stacked, size every child to
   its own content instead. The children are `.wb-section` divs and that rule
   gives them no width of their own, so three full-width cards would collapse
   into three narrow slivers as wide as their longest word. Only the default
   `stretch` survives the turn, so the collapse resets to it: an align chosen
   for a row is not the align that was meant for a column. */
@media(max-width:768px){.wb-flex--row{flex-direction:column;align-items:stretch}}
/* THE MENU BUTTON, and only for a bar that asked for one.
   Its own query rather than another clause on the line above, because every
   rule here is conditional on an attribute the renderer emits for one opted-in
   block, and folding that into the shared phone query would put four selectors
   nobody can read beside the two that apply to every site.
   `data-wb-ready` IS WRITTEN BY site.js, and gating on it is what decides the
   no-script failure mode. Hiding the list on the attribute the renderer emits
   would leave a visitor whose script did not arrive with a menu that is gone
   and a button that does nothing. Gating on the attribute the RUNTIME writes
   means the bar falls back to exactly what it does today, links wrapped onto
   as many lines as they need, and the button stays hidden because it would be
   a control that cannot work.
   The bar stays a row here: the shared query above turns it into a column, and
   a logo stacked above its own menu button is not what a collapsed bar is. The
   list takes the full width so it wraps under both of them when it opens. */
@media(max-width:768px){
.wb-navbar[data-wb-navbar-collapse][data-wb-ready] .wb-navbar-inner{flex-direction:row;flex-wrap:wrap;gap:8px}
.wb-navbar[data-wb-navbar-collapse][data-wb-ready] .wb-navbar-toggle{display:inline-flex;margin-left:auto}
.wb-navbar[data-wb-navbar-collapse][data-wb-ready] .wb-navbar-menu{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:8px;padding:8px 0}
.wb-navbar[data-wb-navbar-collapse][data-wb-ready][data-wb-open] .wb-navbar-menu{display:flex}
}