/* Runtime replacements for the exported layout. All original design rules remain local. */
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
img.emoji { display:inline !important; width:1em !important; height:1em !important; margin:0 .07em !important; padding:0 !important; border:0 !important; box-shadow:none !important; background:none !important; vertical-align:-.1em !important; }
dialog.site-modal,dialog.site-menu { border:0; padding:0; max-width:100vw; max-height:100dvh; }
dialog:not([open]) { display:none !important; }
dialog[open] { display:block; }
dialog::backdrop { background:rgba(0,0,0,.65); }
html:has(dialog[open]) { overflow:hidden; }
dialog.site-modal { position:fixed; inset:0; margin:auto; overflow-y:auto; }
dialog.contact-modal { width:640px; background:white !important; }
dialog.contact-modal::backdrop { background:#150773; }
dialog.proposal-modal { width:100vw; height:100dvh; background:#f8f8f8; }
.site-modal .dialog-message { max-width:100%; }
.site-modal .elementor-location-popup { display:block; }
.site-modal-close,.site-menu-close { position:fixed; right:30px; top:20px; z-index:5; border:0; background:transparent; color:inherit; font-size:44px; line-height:1; padding:8px; cursor:pointer; }
dialog.site-menu { position:fixed; inset:0 0 0 auto; margin:0; height:100dvh; color:white; overflow:auto; }
.site-menu .ee-offcanvas__content { display:block; padding:24px; }
.site-menu .elementor-nav-menu--dropdown { display:none; }
dialog.site-menu::backdrop { background:rgba(0,0,0,.8); }
.site-menu .elementor-fixed { position:absolute; }
.site-menu .elementor-location-header { width:100%; }
.site-menu { --menu-width:40vw; }
.site-menu[open] { animation:menu-reveal .3s ease; }
.site-menu.is-closing { animation:menu-hide .3s ease forwards; }
body.site-menu-open > [canvas] { transform:translateX(calc(-1 * var(--site-menu-width))); transition:transform .3s; }
body > [canvas] { transition:transform .3s; }
@keyframes menu-reveal { from { clip-path:inset(0 0 0 100%); } to { clip-path:inset(0); } }
@keyframes menu-hide { from { clip-path:inset(0); } to { clip-path:inset(0 0 0 100%); } }
.site-entrance-pending { visibility:hidden; }
.elementor-tab-title[role=button] { cursor:pointer; }
.elementor-tab-title:focus-visible,a:focus-visible,button:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.elementor-tab-content.elementor-active { display:block; }
/* Language controls share the logo's top edge and the menu's bottom edge. */
.wpml-ls .wpml-ls-flag { display:block; width:32px; height:auto; }
.site-language-hero .wpml-ls,.site-language-menu .wpml-ls { padding:0; border:0; }
.site-language-hero .wpml-ls a,.site-language-menu .wpml-ls a { padding:0; }
.elementor-element.site-language-hero { position:absolute; left:136px; top:20px; right:auto; bottom:auto; width:auto; margin:0; z-index:100; }
.elementor-element.site-language-hero > .elementor-widget-container { margin:0; padding:0; }
dialog.site-menu[open] { display:flex; flex-direction:column; }
.site-menu .ee-offcanvas__content { flex:1 0 auto; }
.site-menu .elementor-element.site-language-menu { flex:0 0 auto; align-self:flex-end; width:auto; margin:0 24px 24px; }
.site-menu .elementor-element.site-language-menu > .elementor-widget-container { margin:0; padding:0; }
/* Two plans side by side on desktop, stacked below. */
.elementor-500 .elementor-element.elementor-element-d6c2fbf.site-plans > .elementor-container { flex-wrap:wrap; }
@media(min-width:1025px){
 .elementor-500 .elementor-element.elementor-element-d6c2fbf.site-plans > .elementor-container { max-width:1020px; flex-wrap:nowrap; gap:20px; }
 .site-plans .elementor-column.site-plan { width:50%; }
 .site-plans .elementor-column.site-plan > .elementor-element-populated { padding:0; }
}
/* Terms acceptance before checkout. */
dialog.terms-modal { width:min(760px,100vw - 32px); height:min(720px,100dvh - 32px); background:white; color:#000; overflow:hidden; }
dialog.terms-modal::backdrop { background:#150773; }
.terms-panel { display:flex; flex-direction:column; height:100%; padding:32px; box-sizing:border-box; gap:16px; }
.terms-panel h2 { margin:0; font-family:"benton-modern-display",Sans-serif; font-size:40px; line-height:1.1; }
.terms-hint { margin:0; font-family:"forma-djr-micro",Sans-serif; font-size:16px; }
.terms-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; border:1px solid #ddd; padding:8px 20px; }
.terms-scroll:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.elementor-924.terms-scroll .elementor-element.elementor-global-927 { font-size:17px; }
.terms-actions { display:flex; justify-content:flex-end; align-items:center; gap:16px; flex-wrap:wrap; }
.elementor-924.terms-scroll h3 { font-size:28px; }
/* Cancel is a white button; accept is dark blue. */
dialog.terms-modal .terms-cancel { cursor:pointer; font-size:20px; background-color:#fff; color:#000; border-color:#000; }
dialog.terms-modal .terms-accept { cursor:pointer; font-size:20px; background-color:#150773; color:#fff; border-color:#150773; }
dialog.terms-modal .terms-accept:hover:not(:disabled),dialog.terms-modal .terms-accept:focus:not(:disabled) { background-color:#1223E6; border-color:#1223E6; color:#fff; }
dialog.terms-modal .terms-accept:disabled { opacity:.4; cursor:not-allowed; background-color:#150773; color:#fff; border-color:#150773; }
@media(max-width:767px){dialog.terms-modal { width:100vw; height:100dvh; }.terms-panel { padding:24px 16px; }.terms-panel h2 { font-size:32px; }.elementor-924.terms-scroll h3 { font-size:24px; }}
@media(max-width:767px){.elementor-element.site-language-hero { position:absolute; left:86px; top:10px; }}
@media(max-width:1024px){.site-menu { --menu-width:71vw; }}
@media(max-width:767px){.site-menu { --menu-width:100vw; }dialog.contact-modal { width:100vw; }}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{transition:none!important;animation:none!important;}}

/* Phones show one plan at a time, chosen with the switch above the cards. */
.site-plan-switch { display:none; }
@media(max-width:767px){
 .site-plan-switch { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; margin:0 0 24px; }
 .site-plan-switch .site-plan-label { padding:8px 4px; border:0; border-radius:0; background:none; letter-spacing:.2px; color:#8A8A8E; font-family:"forma-djr-micro",Sans-serif; font-weight:500; font-size:20px; line-height:1; cursor:pointer; transition:color .2s; }
 .site-plan-switch .site-plan-label[aria-pressed="true"] { color:#150773; }
 .site-plan-switch .site-plan-label:hover,.site-plan-switch .site-plan-label:focus { background:none; color:#150773; }
 /* iPhone-style switch, always blue; only the plan names change color. */
 .site-plan-switch .site-plan-toggle,.site-plan-switch .site-plan-toggle:hover,.site-plan-switch .site-plan-toggle:focus { position:relative; flex:none; width:51px; height:31px; padding:0; border:0; border-radius:16px; background:#1223E6; box-shadow:none; cursor:pointer; }
 .site-plan-switch .site-plan-toggle:focus-visible { outline:2px solid #1223E6; outline-offset:3px; }
 .site-plan-switch .site-plan-toggle span { position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#FFFFFF; box-shadow:0 0 2px rgba(0,0,0,.2); transition:transform .25s; }
 .site-plan-switch .site-plan-toggle[aria-checked="true"] span { transform:translateX(20px); }
 .site-plans[data-active="pro"] .site-plan-extra,.site-plans[data-active="business"] .site-plan:not(.site-plan-extra) { display:none; }
}

/* Portfolio slider: flat cards like the rest of the site, with blue photos; original colors and zoom on hover. Motion and drag are in site.js. */
#work{overflow-x:clip;background:#F8F8F8}
/* Same bottom spacing as the other gray section (The Plans) on desktop. */
@media(min-width:1025px){#work{padding-bottom:7%}}
#work>.elementor-background-overlay{display:none}
.site-work-slider{flex:0 0 100vw;width:100vw;max-width:100vw;margin:20px 0 0 calc(50% - 50vw);overflow-x:auto;scrollbar-width:none}
.site-work-slider::-webkit-scrollbar{display:none}
.site-work-slider:focus-visible{outline:2px solid #1223E6;outline-offset:2px}
.site-work-slider.is-draggable{cursor:grab;user-select:none}
.site-work-slider.is-dragging,.site-work-slider.is-dragging .site-work-card{cursor:grabbing}
.site-work-track{display:flex;align-items:stretch;gap:20px;width:max-content;padding:0 20px}
.site-work-card{display:flex;flex:none;flex-direction:column;width:clamp(270px,25vw,360px);background:#FFFFFF;color:#000000;text-decoration:none;transition:background .3s,color .3s}
.site-work-card:focus{color:#000000}
/* Hover: blue card, white text and button, black-and-white photo. */
a.site-work-card:hover,a.site-work-card:focus-visible{background:#1223E6;color:#FFFFFF}
.site-work-card:focus-visible{outline:2px solid #1223E6;outline-offset:2px}
.site-work-photo{position:relative;isolation:isolate;display:block;flex:none;aspect-ratio:1/1.1;overflow:hidden;background:#1223E6}
.site-work-photo img{display:block;width:100%;max-width:none;height:100%;border-radius:0;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.05);transition:filter .4s,transform .6s}
.site-work-photo img[src$="aline.jpg"]{filter:grayscale(1) brightness(1.35) contrast(1.05)}
/* Duotone: highlights become a light blue, shadows the site's blue. */
.site-work-photo::before,.site-work-photo::after{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity .4s}
.site-work-photo::before{background:#A9B2FF;mix-blend-mode:multiply}
.site-work-photo::after{background:#1223E6;mix-blend-mode:screen}
.site-work-card:hover .site-work-photo img,.site-work-card:focus-visible .site-work-photo img{filter:grayscale(1) contrast(1.05);transform:scale(1.06)}
.site-work-card:hover .site-work-photo::before,.site-work-card:hover .site-work-photo::after,.site-work-card:focus-visible .site-work-photo::before,.site-work-card:focus-visible .site-work-photo::after{opacity:0}
.site-work-copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:24px}
.site-work-name{margin-bottom:12px;font-family:"forma-djr-micro",Sans-serif;font-size:26px;font-weight:500;line-height:1.15}
.site-work-text{margin-bottom:24px;font-family:"forma-djr-micro",Sans-serif;font-size:17px;line-height:1.4;letter-spacing:.2px}
.site-work-button{margin-top:auto;padding:12px 24px;border:2px solid #1223E6;background:#1223E6;color:#FFFFFF;font-family:"benton-modern-display",Sans-serif;font-size:20px;line-height:1.2;letter-spacing:.2px;transition:background .3s,border-color .3s,color .3s}
.site-work-card:hover .site-work-button,.site-work-card:focus-visible .site-work-button{border-color:#FFFFFF;background:#FFFFFF;color:#1223E6}
/* Testimonial cards: solid blue like the Features cards. */
.site-work-quote{margin:0;padding:32px;background:#1223E6;color:#FFFFFF;cursor:inherit}
.site-work-mark{display:block;height:56px;color:#5FECC8;font-family:"benton-modern-display",Sans-serif;font-size:96px;line-height:1}
.site-work-quote blockquote{margin:0 0 32px;padding:0;border:0;font-family:"forma-djr-micro",Sans-serif;font-size:19px;font-style:normal;line-height:1.45;letter-spacing:.2px;color:#FFFFFF}
.site-work-quote figcaption{display:flex;align-items:center;gap:14px;margin-top:auto;font-family:"forma-djr-micro",Sans-serif;font-size:15px;font-style:normal;line-height:1.3;text-align:left;color:#FFFFFF}
.site-work-quote figcaption *{font-style:normal;color:#FFFFFF}
.site-work-quote figcaption img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover}
.site-work-quote strong{display:block;font-size:18px;font-weight:500}
@media(prefers-reduced-motion:reduce){.site-work-card,.site-work-photo img,.site-work-photo::before,.site-work-photo::after,.site-work-button{transition:none}.site-work-card:hover .site-work-photo img,.site-work-card:focus-visible .site-work-photo img{transform:none}}

/* WhatsApp button: fixed in the bottom right corner, like the logo in the top left, above every section (the highest z-index on the site is 100000). */
.site-whatsapp{position:fixed;right:20px;bottom:20px;z-index:100001;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:#1223E6;color:#FFFFFF;opacity:0;visibility:hidden;transform:translateY(12px);transition:background .3s,opacity .3s,transform .3s,visibility 0s .3s}
/* Hidden over the hero; site.js shows it once the hero's Learn more button reaches its height. */
.site-whatsapp.is-visible{opacity:1;visibility:visible;transform:none;transition:background .3s,opacity .3s,transform .3s}
/* Darker blue only on mouse hover and keyboard focus, so it does not stay dark after a click or tap. */
.site-whatsapp:focus{color:#FFFFFF}
@media(hover:hover){.site-whatsapp:hover{background:#150773;color:#FFFFFF}}
.site-whatsapp:focus-visible{background:#150773;outline:2px solid #1223E6;outline-offset:3px}
.site-whatsapp svg{width:36px;height:36px}
@media(max-width:767px){.site-whatsapp{right:16px;bottom:16px;width:56px;height:56px}.site-whatsapp svg{width:32px;height:32px}}

:root{--fh-u:clamp(16px,1.2vw,19px)}
/* New design. Headline font: Inter Tight (variable, latin, OFL), self-hosted; weight 400 and normal spacing match the reference. Accent: blue #1223E6; black: #2B2B2B. */
@font-face{font-family:"Inter Tight";src:url("InterTight-Variable-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
body :is(h1,h2,h3,h4,h5,h6),body :is(h1,h2,h3,h4,h5,h6).elementor-heading-title{font-family:"Inter Tight",Sans-serif !important;font-weight:500 !important;letter-spacing:0}
/* Unity42 logo in the fixed header spot of the confirmation pages. */
.elementor-icon:has(.site-logo){line-height:0}
.site-logo{display:block;width:auto !important;height:44px !important;max-width:none}
@media (max-width:1024px){.site-logo{height:36px !important}}

/* Hero. Sizes are in em of a base that grows with the screen (16px to 19px), like the reference.
   The hero is 115% of the screen, like the reference; the first screen holds the navigation, badge, role and name, and the rest shows more of the photo. */
.fh-hero{--fh-black:#2B2B2B;--fh-accent:#1223E6;position:relative;z-index:0;height:115vh;margin-top:-140px;overflow:hidden;background:#8C8A8A;color:#FFFFFF;font-family:"Inter Tight",Sans-serif;font-size:var(--fh-u);font-weight:400;line-height:1.6}
/* The photo is aligned to the top so the space above the head is never cropped, and moves slower than the page. */
.fh-hero-media{position:absolute;inset:0;will-change:transform}
.fh-hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.fh-hero-screen{position:relative;height:100vh}
.fh-hero-nav{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:2em}
.fh-hero-nav a{color:#FFFFFF;text-decoration:none}
/* Header margins: the logo is the same distance from the top as the content is from the side edges (2em, 35px at 1440px; 16px on phones), like the reference. The links are no taller than the logo, so it sets the height of the bar. */
.fh-hero-logo{display:flex;align-items:center;padding:0}
.fh-hero-logo img{display:block;width:auto;height:1.9em}
.fh-hero-links{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.fh-hero-links a{position:relative;display:block;padding:.15em 1.25em;line-height:1.6}
/* Hover: a small dot grows under the link. */
.fh-hero-links a::after{content:"";position:absolute;left:50%;bottom:-.45em;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform .3s cubic-bezier(.3,.86,.36,.95)}
.fh-hero-links a:hover::after,.fh-hero-links a:focus-visible::after{transform:scale(1)}
.fh-hero-nav a:hover,.fh-hero-nav a:focus{color:#FFFFFF}
.fh-hero-nav a:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
/* The language link is a small outlined pill, set apart from the section links. */
.fh-hero-links li:last-child{margin-left:.6em}
.fh-hero-links .fh-hero-lang{padding:.15em .85em;border:1px solid rgba(255,255,255,.6);border-radius:999px;font-size:.85em;letter-spacing:.04em;transition:background .3s,color .3s,border-color .3s}
.fh-hero-links .fh-hero-lang::after{display:none}
.fh-hero-links .fh-hero-lang:hover,.fh-hero-links .fh-hero-lang:focus-visible{background:#FFFFFF;border-color:#FFFFFF;color:var(--fh-black)}
.fh-hero-menu{display:none}
/* Badge on the left; its bottom lines up with the bottom of the role text on the right. */
.fh-hero-badge{position:absolute;left:0;bottom:calc(50% - .6em);z-index:1;display:flex;align-items:center;justify-content:space-between;width:14em;height:4.75em;padding:0 .6em 0 2.5em;box-sizing:border-box;border-radius:0 2.375em 2.375em 0;background:#2B2B2B}
.fh-hero-badge p{margin:0;font-size:1em;line-height:1.2}
.fh-hero-globe{display:flex;align-items:center;justify-content:center;flex:none;width:3.55em;height:3.55em;border-radius:50%}
/* The globe turns around a tilted axis that swings from one diagonal to the other and back, like the reference (±15°, 5.4s). */
.fh-hero-globe svg{width:2.1em;height:2.1em;overflow:visible;transform:rotate(-15deg);animation:fh-globe-tilt 5.4s cubic-bezier(.35,0,.65,1) infinite}
@keyframes fh-globe-tilt{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}}
/* Role on the right, around the middle of the first screen, with the arrow just above it. */
.fh-hero-role{position:absolute;right:8vw;bottom:calc(50% - .6em);z-index:1}
.fh-hero-arrow{position:absolute;left:0;bottom:calc(100% + 1.6em);width:1.1em;height:1.1em}
.fh-hero-role p{margin:0;font-size:clamp(24.8px,2.3vw,44.16px);line-height:1.4}
/* Name: 15vw, ending 3.125em above the bottom of the first screen. */
.elementor-kit-1068 .fh-hero h1.fh-hero-name{position:absolute;left:0;right:0;bottom:calc(var(--fh-u) * 3.125);z-index:1;margin:0;color:#FFFFFF;font-size:15vw;line-height:1;letter-spacing:0;white-space:nowrap;pointer-events:none}
.fh-hero-track{display:inline-flex;will-change:transform}
.fh-hero-spacer{padding:0 .2em}
@media (max-width:767px){
 .fh-hero{height:110vh;margin-top:-80px}
 .fh-hero-screen{height:100svh}
 .fh-hero-nav{padding:1em}
 .fh-hero-links{display:none}
 .fh-hero-menu{display:flex;align-items:center;gap:.6em;padding:0;line-height:1.6}
 .fh-hero-menu::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
 /* The globe icon sits centred on the last line of the role text, with the same side margin as the text. */
 .fh-hero-badge{left:auto;right:calc(1.25em - .725em);top:auto;bottom:calc(3.8em + 1.078em - 1.775em);width:auto;height:auto;padding:0;background:none;transform:none}
 .fh-hero-badge p{display:none}
 .elementor-kit-1068 .fh-hero h1.fh-hero-name{font-size:calc(var(--fh-u) * 9);bottom:auto;top:56.4%}
 .fh-hero-role{left:1.25em;right:auto;top:auto;bottom:3.8em;transform:none}
 .fh-hero-arrow{bottom:calc(100% + 1.2em)}
 .fh-hero-role p{font-size:1.55em}
}

/* Menu button on the home pages: hidden at the top, it grows into a black circle as soon as the page starts scrolling.
   Hovering fills it with the accent colour from the bottom. */
body:has(.fh-hero) .elementor-element.elementor-element-e5a94f8{top:calc(var(--fh-u) * 1.65);transform:scale(0);transition:transform .4s cubic-bezier(.36,0,.66,-.56)}
body:not(.rtl):has(.fh-hero) .elementor-element.elementor-element-e5a94f8{right:calc(var(--fh-u) * 1.65)}
body.fh-scrolled .elementor-element.elementor-element-e5a94f8{transform:scale(1);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
body:has(.fh-hero) .elementor-element.elementor-element-e5a94f8.elementor-view-default .elementor-icon{position:relative;display:block;width:calc(var(--fh-u) * 4.57);height:calc(var(--fh-u) * 4.57);font-size:var(--fh-u);overflow:hidden;border-radius:50%;background:#2B2B2B}
body:has(.fh-hero) .elementor-element.elementor-element-e5a94f8 .elementor-icon svg{display:none}
body:has(.fh-hero) .elementor-element.elementor-element-e5a94f8 .elementor-icon::before{content:"";position:absolute;inset:0;border-radius:50%;background:#1223E6;transform:translateY(101%);transition:transform .4s cubic-bezier(.3,.86,.36,.95)}
body:has(.fh-hero) .elementor-element.elementor-element-e5a94f8 .elementor-icon::after{content:"";position:absolute;left:50%;top:50%;width:1.5em;height:.45em;margin:-.225em 0 0 -.75em;border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;box-sizing:border-box}
@media (hover:hover){body:has(.fh-hero) .elementor-element.elementor-element-e5a94f8 .elementor-icon:hover::before{transform:none}}
body:has(.fh-hero) .elementor-element.elementor-element-e5a94f8 .elementor-icon:focus-visible{outline:2px solid #1223E6;outline-offset:3px}

/* About: four boxes of the same size and weight (Fernanda, SiteToaster, software development, OiToronto). */
.fh-about{position:relative;display:grid;grid-template-columns:1fr 1fr;font-family:"Inter Tight",Sans-serif;font-weight:400}
/* Small upward notch at the bottom centre, in the colour of the next section, like the reference (37 by 18.5px). */
.fh-about::after{content:"";position:absolute;left:50%;bottom:0;width:37px;height:18.5px;background:#F8F8F8;clip-path:polygon(0 100%,50% 0,100% 100%);transform:translateX(-50%);pointer-events:none}
.fh-about-box{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;min-height:clamp(360px,36vw,520px);padding:72px clamp(24px,8vw,160px);text-decoration:none}
.fh-about-fernanda{color:#FFFFFF;background:radial-gradient(120% 90% at 100% 100%,rgba(255,93,0,.9),rgba(255,93,0,0) 60%),linear-gradient(135deg,#1223E6 0%,#150773 100%)}
.fh-about-sitetoaster{color:#2B2B2B;background:#FFFFFF}
.fh-about-fernanda:hover,.fh-about-fernanda:focus{color:#FFFFFF}
.fh-about-sitetoaster:hover,.fh-about-sitetoaster:focus{color:#2B2B2B}
.fh-about-software{color:#FFFFFF;background:#2B2B2B}
.fh-about-oitoronto{color:#2B2B2B;background:#EDEDED}
.fh-about-software:hover,.fh-about-software:focus{color:#FFFFFF}
.fh-about-oitoronto:hover,.fh-about-oitoronto:focus{color:#2B2B2B}

/* Checkerboard on wide screens: the second row puts the light OiToronto box under the blue one and the dark software box under the white one. */
@media (min-width:768px){.fh-about-oitoronto{grid-column:1;grid-row:2}.fh-about-software{grid-column:2;grid-row:2}}
/* The call to action is the headline. Above it, the name has a small accent: an orange dot and medium weight, followed by a lighter label. */
.fh-about-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.25em .6em;font-size:17px;line-height:1.3}
.fh-about-name{display:inline-flex;align-items:center;gap:.55em;font-weight:500}
.fh-about-name::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#FF5D00}
.fh-about-tag{opacity:.65}
.fh-about-title{max-width:17em;font-size:clamp(28px,2.9vw,46px);line-height:1.15}
/* Links are pill buttons with the arrow, like the other rounded elements of the new design. Hovering the box fills the button from the bottom: white on the dark boxes, blue on the light ones. */
.fh-about-link{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:.8em 1.4em;overflow:hidden;border:1px solid currentColor;border-radius:999px;font-size:17px;line-height:1.2;transition:color .4s cubic-bezier(.3,.86,.36,.95),border-color .4s}
.fh-about-link::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fh-btn-fill);transform:translateY(101%);transition:transform .4s cubic-bezier(.3,.86,.36,.95)}
.fh-about-link svg{width:18px;height:18px;transition:transform .3s cubic-bezier(.3,.86,.36,.95)}
.fh-about-fernanda{--fh-btn-fill:#FFFFFF;--fh-btn-text:#2B2B2B}
.fh-about-software{--fh-btn-fill:#FFFFFF;--fh-btn-text:#2B2B2B}
.fh-about-sitetoaster,.fh-about-oitoronto{--fh-btn-fill:#1223E6;--fh-btn-text:#FFFFFF}
.fh-about-fernanda .fh-about-link{border-color:rgba(255,255,255,.5)}
.fh-about-software .fh-about-link{border-color:rgba(255,255,255,.5)}
.fh-about-sitetoaster .fh-about-link,.fh-about-oitoronto .fh-about-link{border-color:rgba(43,43,43,.35)}
.fh-about-price{font-size:17px;line-height:1.3;color:#6B6B70}
/* Top notch carved into the boxes: the boxes overlap the hero by the notch height and a V is cut where they meet, so the photo shows through it. */
.fh-about{z-index:1;margin-top:-18.5px}
.fh-about-box{position:relative}
@media (min-width:768px){
 .fh-about-fernanda{clip-path:polygon(0 0,calc(100% - 18.5px) 0,100% 18.5px,100% 100%,0 100%)}
 .fh-about-sitetoaster{clip-path:polygon(0 18.5px,18.5px 0,100% 0,100% 100%,0 100%)}
}
@media (max-width:767px){
 .fh-about-fernanda{clip-path:polygon(0 0,calc(50% - 18.5px) 0,50% 18.5px,calc(50% + 18.5px) 0,100% 0,100% 100%,0 100%)}
}
@media (max-width:767px){
 .fh-about{grid-template-columns:1fr}
 .fh-about-box,.fh-about-box.fh-about-small{min-height:0;padding:64px 24px;gap:18px}
}
@media (prefers-reduced-motion:reduce){
 .fh-about-link,.fh-about-link::before,.fh-about-link svg,body:has(.fh-hero) .elementor-element.elementor-element-e5a94f8,body:has(.fh-hero) .elementor-element.elementor-element-e5a94f8 .elementor-icon::before{transition:none}
}

/* Experience & education page (public/fernanda/ and public/pt-br/fernanda/). Same type, colours and header margins as the home hero, on white. */
body.fp-page{margin:0;background:#FFFFFF;color:#2B2B2B;font-family:"Inter Tight",Sans-serif;font-size:var(--fh-u);font-weight:400;line-height:1.6}
.fp-page a{color:inherit}
.fp-nav{display:flex;justify-content:space-between;align-items:center;padding:2em}
.fp-logo{display:flex;align-items:center}
.fp-logo img{display:block;width:auto;height:1.9em}
.fp-links{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.fp-links a{position:relative;display:block;padding:.15em 1.25em;text-decoration:none}
.fp-links a::after{content:"";position:absolute;left:50%;bottom:-.45em;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform .3s cubic-bezier(.3,.86,.36,.95)}
.fp-links a:hover::after,.fp-links a:focus-visible::after{transform:scale(1)}
.fp-links li:last-child{margin-left:.6em}
.fp-links .fp-lang{padding:.15em .85em;border:1px solid rgba(43,43,43,.4);border-radius:999px;font-size:.85em;letter-spacing:.04em;transition:background .3s,color .3s,border-color .3s}
.fp-links .fp-lang::after{display:none}
.fp-links .fp-lang:hover,.fp-links .fp-lang:focus-visible{background:#2B2B2B;border-color:#2B2B2B;color:#FFFFFF}
.fp-page a:focus-visible{outline:2px solid #1223E6;outline-offset:3px}
.fp{max-width:78em;margin:0 auto;padding:0 2em}
.fp-head{padding:10vh 0 8vh}
.fp-eyebrow{margin:0;color:#6B6B70}
.fp-head h1{margin:.25em 0 .35em;font-size:clamp(48px,7.5vw,136px);line-height:1;letter-spacing:-.01em}
.fp-intro{max-width:32em;margin:0;font-size:clamp(20px,1.8vw,30px);line-height:1.4}
.fp-section{padding:3em 0 1em;border-top:1px solid rgba(43,43,43,.15)}
.fp-section h2{margin:0 0 1em;color:#6B6B70;font-size:.8em;letter-spacing:.08em;text-transform:uppercase}
.fp-list{margin:0;padding:0;list-style:none}
.fp-item{display:grid;grid-template-columns:1fr 3fr;gap:2em;padding:2em 0}
.fp-item+.fp-item{border-top:1px solid rgba(43,43,43,.08)}
.fp-dates{margin:0;color:#6B6B70}
.fp-body h3{margin:0;font-size:clamp(24px,2.2vw,38px);line-height:1.2}
.fp-org{margin:.3em 0 0;color:#6B6B70}
.fp-org a{text-decoration-color:rgba(43,43,43,.3);text-underline-offset:.2em}
.fp-org a:hover{color:#1223E6}
.fp-summary{max-width:38em;margin:1em 0 0;font-size:1.1em;line-height:1.5}
.fp-points{max-width:42em;margin:.8em 0 0;padding-left:1.1em;color:#3A3A3F}
.fp-points li{margin:.35em 0}
.fp-foot{padding:4em 0 5em;border-top:1px solid rgba(43,43,43,.15)}
.fp-cta{display:inline-flex;align-items:center;gap:.3em;font-size:clamp(32px,4vw,64px);line-height:1.1;text-decoration:none;transition:color .3s}
.fp-cta svg{width:.8em;height:.8em;transition:transform .3s cubic-bezier(.3,.86,.36,.95)}
.fp-cta:hover,.fp-cta:focus-visible{color:#1223E6}
.fp-cta:hover svg,.fp-cta:focus-visible svg{transform:translateX(.15em)}
.fp-more{display:flex;flex-wrap:wrap;gap:.4em 1.4em;margin:2.5em 0 0;color:#6B6B70}
.fp-more a{color:#2B2B2B;text-underline-offset:.2em}
.fp-more a:hover{color:#1223E6}
@media (max-width:767px){
 .fp-nav{padding:1em}
 .fp-links li:not(:last-child){display:none}
 .fp{padding:0 1em}
 .fp-head{padding:8vh 0 6vh}
 .fp-item{grid-template-columns:1fr;gap:.4em;padding:1.6em 0}
}

/* New footer (home, SiteToaster and Fernanda pages), in the layout of the reference: big call to action, a line with a round button, contact pills and a bottom row of small columns. */
.fh-footer{position:relative;z-index:1;background:radial-gradient(120% 90% at 100% 100%,rgba(255,93,0,.9),rgba(255,93,0,0) 60%),linear-gradient(135deg,#1223E6 0%,#150773 100%);color:#FFFFFF;font-family:"Inter Tight",Sans-serif;font-size:var(--fh-u);font-weight:400;line-height:1.6}
.fh-footer a{color:inherit;text-decoration:none}
.fh-footer-inner{max-width:78em;margin:0 auto;padding:9em 2em 2em}
.fh-footer-title{margin:0;font-size:clamp(48px,6.2vw,108px);line-height:1.05;letter-spacing:-.01em}
.fh-footer-line{position:relative;margin:4.5em 0 3.5em;border-top:1px solid rgba(255,255,255,.2)}
.fh-footer-cta{position:absolute;right:8%;top:0;display:flex;align-items:center;justify-content:center;width:11em;height:11em;overflow:hidden;isolation:isolate;border-radius:50%;background:#FFFFFF;color:#2B2B2B !important;font-size:1.05em;transform:translateY(-50%);transition:color .45s}
.fh-footer-cta::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:#FF5D00;transform:translateY(101%);transition:transform .45s cubic-bezier(.3,.86,.36,.95)}
.fh-footer-cta:hover::before,.fh-footer-cta:focus-visible::before{transform:none}
.fh-footer-pills{display:flex;flex-wrap:wrap;gap:1em}
.fh-footer-pills a{padding:1.1em 2em;border:1px solid rgba(255,255,255,.3);border-radius:999px;transition:background .3s,color .3s,border-color .3s}
.fh-footer-pills a:hover,.fh-footer-pills a:focus-visible{background:#FFFFFF;border-color:#FFFFFF;color:#2B2B2B}
.fh-footer-bottom{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:1.5em 3em;margin-top:8em}
.fh-footer-col p{margin:0}
.fh-footer-col p+p{margin-top:.6em}
.fh-footer-col .fh-footer-label{color:rgba(255,255,255,.45);font-size:.7em;letter-spacing:.08em;text-transform:uppercase}
.fh-footer-col a+a{margin-left:1.4em}
.fh-footer-col a{position:relative}
.fh-footer-col a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.3,.86,.36,.95)}
.fh-footer-col a:hover::after,.fh-footer-col a:focus-visible::after{transform:none}
.fh-footer a:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
@media (max-width:900px){.fh-footer-bottom{grid-template-columns:1fr 1fr}}
@media (max-width:767px){
 .fh-footer-inner{padding:6em 1em 1.5em}
 .fh-footer-line{margin:5em 0 3em}
 .fh-footer-cta{right:1em;width:8.5em;height:8.5em}
 .fh-footer-bottom{grid-template-columns:1fr;margin-top:5em}
}
@media (prefers-reduced-motion:reduce){.fh-footer-cta::before,.fh-footer-col a::after{transition:none}}

/* SiteToaster page (public/sitetoaster/ and public/pt-br/sitetoaster/) in the new style: same type, colours, buttons and header as the home and Fernanda pages. */
body.st-page{background:#FFFFFF}
.st-page .st{color:#2B2B2B;font-family:"Inter Tight",Sans-serif;font-size:var(--fh-u);line-height:1.6}
.st-page .st :is(h1,h2,h3){margin:0;color:inherit;letter-spacing:-.01em}
.st-page .st p{margin:0}
.st-page .st-nav{position:relative;z-index:5}
.st-page .fp-links a,.st-page .st-nav-menu{color:#2B2B2B}
.st-nav-menu{display:none;align-items:center;gap:.6em;text-decoration:none}
.st-nav-menu::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.st-wrap{max-width:78em;margin:0 auto;padding:0 2em}
.st-page .st section{padding:5em 0}
.st-eyebrow{display:inline-flex;align-items:center;gap:.55em;font-weight:500}
.st-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:#FF5D00}
.st-page .st h1{margin:.3em 0 .4em;font-size:clamp(56px,8vw,140px);line-height:.98}
.st-page .st h2{font-size:clamp(40px,5vw,84px);line-height:1.02}
.st-lead{max-width:30em;font-size:clamp(20px,1.6vw,28px);line-height:1.4}
.st-lead+.st-lead{margin-top:1em}
.st-art{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.st-hero-grid,.st-split{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:4em}
.st-split > img{order:0}
.st-split-top{align-items:start}
.st-page .st .st-hero{padding-top:5em}
.st-hero .st-lead{color:#3A3A3F}
/* Buttons: pill with the arrow; hovering fills it from the bottom. */
.st-page .st-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;margin-top:2em;padding:.8em 1.4em;overflow:hidden;border:1px solid rgba(43,43,43,.35);border-radius:999px;color:#2B2B2B;font-size:17px;line-height:1.2;text-decoration:none;transition:color .4s cubic-bezier(.3,.86,.36,.95),border-color .4s}
.st-page .st-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#1223E6;transform:translateY(101%);transition:transform .4s cubic-bezier(.3,.86,.36,.95)}
.st-page .st-btn svg{width:18px;height:18px;transition:transform .3s cubic-bezier(.3,.86,.36,.95)}
.st-page .st-btn:hover,.st-page .st-btn:focus-visible{color:#FFFFFF;border-color:#1223E6}
.st-page .st-btn:hover::before,.st-page .st-btn:focus-visible::before{transform:none}
.st-page .st-btn:hover svg,.st-page .st-btn:focus-visible svg{transform:translateX(4px)}
.st-page .st-btn-fill{background:#2B2B2B;border-color:#2B2B2B;color:#FFFFFF}
.st-page .st a:focus-visible{outline:2px solid #1223E6;outline-offset:3px}
/* What we do */
.st-what{background:#F4F4F4}
.st-what h2{margin-bottom:.5em}
/* Features: numbered grid. */
.st-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1em 2em;margin-bottom:3em}
.st-feature-list{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none;counter-reset:st-feature;border-top:1px solid rgba(43,43,43,.15)}
.st-feature-list li{padding:2.2em 2em 2.6em 0;border-bottom:1px solid rgba(43,43,43,.15);counter-increment:st-feature}
.st-feature-list li::before{content:counter(st-feature,decimal-leading-zero);display:block;margin-bottom:1.6em;color:#FF5D00;font-size:.85em;font-weight:500}
.st-page .st .st-feature-list h3{margin-bottom:.5em;font-size:clamp(24px,2vw,32px);line-height:1.15}
.st-feature-list p{color:#3A3A3F}
/* Plans */
.st-pricing{background:#F4F4F4}
.st-plans{display:grid;grid-template-columns:1fr 1fr;gap:1.5em}
.st-plan{display:flex;flex-direction:column;padding:2.6em;border-radius:24px;background:#FFFFFF}
.st-plan.site-plan-extra{background:#2B2B2B;color:#FFFFFF}
.st-page .st .st-plan h3{font-size:clamp(28px,2.4vw,40px)}
.st-plan-price{display:flex;align-items:baseline;gap:.25em;margin:1.2em 0 1.4em !important}
.st-plan-currency,.st-plan-per{font-size:1.05em;opacity:.7}
.st-plan-amount{font-size:clamp(56px,6vw,96px);line-height:1;letter-spacing:-.02em}
.st-plan ul{flex:1;margin:0;padding:1.4em 0 0;list-style:none;border-top:1px solid rgba(128,128,128,.3)}
.st-plan li{display:flex;gap:.7em;padding:.35em 0}
.st-plan li::before{content:"";flex:none;width:6px;height:6px;margin-top:.7em;border-radius:50%;background:#FF5D00}
.st-plan .st-btn{align-self:flex-start}
.st-page .st-plan.site-plan-extra .st-btn-fill{background:#FFFFFF;border-color:#FFFFFF;color:#2B2B2B}
.st-page .st-plan.site-plan-extra .st-btn-fill:hover,.st-page .st-plan.site-plan-extra .st-btn-fill:focus-visible{color:#FFFFFF;border-color:#1223E6}
.st-plans-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1em 2em;margin-top:2.5em;color:#3A3A3F}
.st-plans-note .st-btn{margin-top:0}
/* Plan switch on phones. */
.st-page .site-plan-switch .site-plan-label{color:#8A8A8E;font-family:"Inter Tight",Sans-serif;font-weight:500}
.st-page .site-plan-switch .site-plan-label[aria-pressed="true"],.st-page .site-plan-switch .site-plan-label:hover{color:#2B2B2B}
/* FAQ: accordion with a plus that turns into a minus. */
.st-faq-list{border-top:1px solid rgba(43,43,43,.15)}
.st-faq-item{border-bottom:1px solid rgba(43,43,43,.15)}
.st-page .st-faq-q{position:relative;display:block;padding:1.3em 3em 1.3em 0;color:#2B2B2B;font-size:clamp(19px,1.5vw,24px);line-height:1.35;cursor:pointer}
.st-faq-icon{position:absolute;right:.4em;top:50%;width:16px;height:16px;transform:translateY(-50%)}
.st-faq-icon::before,.st-faq-icon::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:currentColor;transition:transform .3s cubic-bezier(.3,.86,.36,.95)}
.st-faq-icon::after{transform:rotate(90deg)}
.st-faq-q[aria-expanded="true"] .st-faq-icon::after{transform:rotate(0)}
.st-faq-q:focus-visible{outline:2px solid #1223E6;outline-offset:2px}
.st-page .st-faq-a{padding:0 3em 1.6em 0;color:#3A3A3F;border:0}
/* Clients: the slider keeps its own styles. */
.st-page .st .st-work{padding-bottom:4em}
.st-work .st-head{margin-bottom:2.5em}
/* Call to action */
.st-cta{background:#F4F4F4}
.st-actions{display:flex;flex-wrap:wrap;gap:1em}
.st-actions .st-btn{margin-top:2em}
/* Menu button on the SiteToaster page: a dark circle that appears as soon as the page starts scrolling, like on the home. */
.st-menu-btn{position:fixed;top:calc(var(--fh-u) * 1.65);right:calc(var(--fh-u) * 1.65);z-index:99;display:block;width:calc(var(--fh-u) * 4.57);height:calc(var(--fh-u) * 4.57);overflow:hidden;isolation:isolate;border-radius:50%;background:#2B2B2B;transform:scale(0);transition:transform .4s cubic-bezier(.36,0,.66,-.56)}
body.fh-scrolled .st-menu-btn{transform:scale(1);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.st-menu-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:#1223E6;transform:translateY(101%);transition:transform .4s cubic-bezier(.3,.86,.36,.95)}
.st-menu-btn:hover::before,.st-menu-btn:focus-visible::before{transform:none}
.st-menu-btn span{position:absolute;left:50%;top:50%;width:calc(var(--fh-u) * 1.5);height:calc(var(--fh-u) * .45);border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;box-sizing:border-box;transform:translate(-50%,-50%)}
@media (max-width:1024px){
 .st-hero-grid,.st-split{grid-template-columns:1fr;gap:3em}
 .st-art{max-width:380px}
 .st-feature-list{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
 .st-page .st-nav-menu{display:flex}
 .st-page .fp-links{display:none}
 .st-wrap{padding:0 1em}
 .st-page .st section{padding:3.5em 0}
 .st-feature-list{grid-template-columns:1fr}
 .st-plans{grid-template-columns:1fr}
 .st-plan{padding:2em 1.5em}
}
@media (prefers-reduced-motion:reduce){.st-page .st-btn,.st-page .st-btn::before,.st-page .st-btn svg,.st-menu-btn,.st-menu-btn::before,.st-faq-icon::before,.st-faq-icon::after{transition:none}}

.st-page .st .st-lead+.st-lead{margin-top:1em}
.st-page .st .st-what h2{margin-bottom:.5em}
/* Client cards on the SiteToaster page use the new type and pill buttons. */
/* Side menu in the new style, like the reference: dark panel, small labels over a thin line, big links that slide in from the right one after the other. */
@keyframes fh-menu-in{from{opacity:0;transform:translateX(90px)}to{opacity:1;transform:none}}
dialog.fh-menu{width:min(560px,100vw);padding:clamp(88px,10vh,120px) clamp(28px,5vw,80px) 40px;box-sizing:border-box;background:#2B2B2B;color:#FFFFFF;font-family:"Inter Tight",Sans-serif;font-size:var(--fh-u);font-weight:400;line-height:1.4}
dialog.fh-menu[open]{display:flex;flex-direction:column}
dialog.fh-menu::backdrop{background:rgba(0,0,0,.5)}
.fh-menu a{color:#FFFFFF;text-decoration:none}
.fh-menu-label{margin:0 0 1.6em;padding-bottom:1.6em;border-bottom:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.5);font-size:.7em;letter-spacing:.08em;text-transform:uppercase}
.fh-menu-links{margin:0;padding:0;list-style:none}
.fh-menu-links a{position:relative;display:inline-flex;align-items:center;padding:.06em 0;font-size:clamp(40px,4.2vw,64px);line-height:1.25}
.fh-menu-links a::before{content:"";position:absolute;left:-.45em;top:50%;width:.16em;height:.16em;margin-top:-.08em;border-radius:50%;background:#FF5D00;transform:scale(0);transition:transform .3s cubic-bezier(.3,.86,.36,.95)}
.fh-menu-links a:hover::before,.fh-menu-links a:focus-visible::before{transform:none}
.fh-menu-lang{align-self:flex-start;margin-top:2em;padding:.15em .85em;border:1px solid rgba(255,255,255,.4);border-radius:999px;font-size:.85em;letter-spacing:.04em;transition:background .3s,color .3s}
.fh-menu .fh-menu-lang:hover,.fh-menu .fh-menu-lang:focus-visible{background:#FFFFFF;color:#2B2B2B}
.fh-menu-socials{margin-top:auto;padding-top:3em}
.fh-menu-socials .fh-menu-label{margin-bottom:1em}
.fh-menu-socials p:last-child{margin:0}
.fh-menu-socials a+a{margin-left:1.6em}
.fh-menu a:focus-visible,.fh-menu-close:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
dialog.fh-menu[open] .fh-menu-links li,dialog.fh-menu[open] .fh-menu-lang,dialog.fh-menu[open] .fh-menu-socials{animation:fh-menu-in .8s cubic-bezier(.3,.86,.36,.95) both}
dialog.fh-menu[open] .fh-menu-links li:nth-child(1){animation-delay:.08s}
dialog.fh-menu[open] .fh-menu-links li:nth-child(2){animation-delay:.14s}
dialog.fh-menu[open] .fh-menu-links li:nth-child(3){animation-delay:.2s}
dialog.fh-menu[open] .fh-menu-links li:nth-child(4){animation-delay:.26s}
dialog.fh-menu[open] .fh-menu-lang{animation-delay:.32s}
dialog.fh-menu[open] .fh-menu-socials{animation-delay:.38s}
/* Close buttons (menu and contact popup): a cross that turns on hover. */
.fh-menu-close,.fh-contact-close{position:absolute;top:24px;right:24px;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;transition:transform .3s cubic-bezier(.3,.86,.36,.95)}
.fh-menu-close span,.fh-contact-close span{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%)}
.fh-menu-close span::before,.fh-menu-close span::after,.fh-contact-close span::before,.fh-contact-close span::after{content:"";position:absolute;left:0;top:10px;width:22px;height:1.5px;background:currentColor;transform:rotate(45deg)}
.fh-menu-close span::after,.fh-contact-close span::after{transform:rotate(-45deg)}
.fh-menu-close:hover,.fh-contact-close:hover{transform:rotate(90deg)}
/* Contact popup in the new style: white card, underlined fields, pill button. */
dialog.fh-contact{position:fixed;inset:0;width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:clamp(32px,5vw,64px);box-sizing:border-box;overflow:auto;border:0;border-radius:24px;background:#FFFFFF;color:#2B2B2B;font-family:"Inter Tight",Sans-serif;font-size:var(--fh-u);font-weight:400;line-height:1.5}
dialog.fh-contact::backdrop{background:rgba(43,43,43,.7)}
dialog.fh-contact[open]{animation:fh-contact-in .45s cubic-bezier(.3,.86,.36,.95)}
@keyframes fh-contact-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.fh-contact h2{margin:0;padding-right:48px;color:#2B2B2B;font-family:"Inter Tight",Sans-serif;font-size:clamp(36px,4vw,56px);font-weight:500;line-height:1.05;letter-spacing:-.01em}
.fh-contact-text{margin:.6em 0 1.6em;color:#6B6B70}
.fh-contact form{margin:0}
.fh-field{display:block;margin:0 0 1.4em}
.fh-field span{display:block;margin-bottom:.2em;color:#6B6B70;font-size:.8em;letter-spacing:.04em}
.fh-contact .fh-field input,.fh-contact .fh-field textarea{display:block;width:100%;margin:0;padding:.4em 0 .6em;box-sizing:border-box;border:0;border-bottom:1px solid rgba(43,43,43,.25);border-radius:0;background:transparent;color:#2B2B2B;font:inherit;font-size:1.15em;outline:0;box-shadow:none;transition:border-color .3s}
.fh-contact .fh-field textarea{resize:vertical;min-height:6em}
.fh-contact .fh-field input:focus,.fh-contact .fh-field textarea:focus{border-bottom-color:#1223E6}
.fh-contact .fh-contact-send{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;margin-top:.6em;padding:.8em 1.6em;overflow:hidden;border:1px solid #2B2B2B;border-radius:999px;background:#2B2B2B;color:#FFFFFF;font:inherit;font-size:17px;line-height:1.2;cursor:pointer;transition:border-color .4s}
.fh-contact .fh-contact-send::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#1223E6;transform:translateY(101%);transition:transform .4s cubic-bezier(.3,.86,.36,.95)}
.fh-contact .fh-contact-send:hover,.fh-contact .fh-contact-send:focus-visible{border-color:#1223E6}
.fh-contact .fh-contact-send:hover::before,.fh-contact .fh-contact-send:focus-visible::before{transform:none}
.fh-contact .fh-contact-send svg{width:18px;height:18px}
.fh-contact-send:focus-visible,.fh-contact-close:focus-visible{outline:2px solid #1223E6;outline-offset:3px}
/* Inner pages: the header shows Menu and the language on phones; the round menu button appears while scrolling. */
@media (max-width:767px){
 .fp-nav .st-nav-menu{display:flex;margin-left:1.2em}
 .fp-nav nav{margin-left:auto}
 .fp-page .fp-links li:not(:last-child){display:none}
}
.fp-nav .st-nav-menu{color:#2B2B2B}
.fp-thanks .fp-head{padding:16vh 0 18vh}
.fp-thanks .fp-cta{margin-top:1.2em}
/* About boxes: an invisible link covers each box, so the whole box is clickable, and the buttons sit above it.
   The OiToronto box has a second button to follow its WhatsApp channel. */
.fh-about-cover{position:absolute;inset:0;z-index:0}
.fh-about-box > :not(.fh-about-cover){position:relative;z-index:1;pointer-events:none}
.fh-about-box .fh-about-link{pointer-events:auto}
.fh-about-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.fh-about-actions .fh-about-link{margin-top:0}
.fh-about-box:hover:not(:has(.fh-about-follow:hover)) .fh-about-main,.fh-about-main:focus-visible,.fh-about-follow:hover,.fh-about-follow:focus-visible{color:var(--fh-btn-text);border-color:var(--fh-btn-fill)}
.fh-about-box:hover:not(:has(.fh-about-follow:hover)) .fh-about-main::before,.fh-about-main:focus-visible::before,.fh-about-follow:hover::before,.fh-about-follow:focus-visible::before{transform:none}
.fh-about-box:hover:not(:has(.fh-about-follow:hover)) .fh-about-main svg,.fh-about-main:focus-visible svg,.fh-about-follow:hover svg{transform:translateX(4px)}
.fh-about-link:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* The old page styles colour links and add borders to buttons and fields; these keep the new parts as designed. */
.fh-about-box .fh-about-link{color:inherit}
dialog .fh-menu-close,dialog .fh-contact-close{border:0 !important;background:transparent !important;box-shadow:none !important;color:inherit !important}
dialog.fh-contact .fh-field input,dialog.fh-contact .fh-field textarea{padding:.4em 0 .6em !important;border:0 !important;border-bottom:1px solid rgba(43,43,43,.25) !important;border-radius:0 !important;background:transparent !important;color:#2B2B2B !important;box-shadow:none !important}
dialog.fh-contact .fh-field input:focus,dialog.fh-contact .fh-field textarea:focus{border-bottom-color:#1223E6 !important}
.fh-footer-cta:hover,.fh-footer-cta:focus-visible{color:#FFFFFF !important}
/* Round menu button over a dark background: white circle with dark lines. */
body.fh-menu-invert .st-menu-btn,body.fh-menu-invert .elementor-element.elementor-element-e5a94f8.elementor-view-default .elementor-icon{background:#FFFFFF;transition:background .3s}
body.fh-menu-invert .st-menu-btn span,body.fh-menu-invert .elementor-element.elementor-element-e5a94f8 .elementor-icon::after{border-color:#2B2B2B}
body.fh-menu-invert .st-menu-btn:hover span,body.fh-menu-invert .elementor-element.elementor-element-e5a94f8 .elementor-icon:hover::after{border-color:#FFFFFF}
/* SiteToaster plans: the Terms button sits on the left, under the note. */
.st-plans-note{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0}
.st-plans-note .st-btn{margin-top:1.2em}

/* Terms popup (full screen) and the terms step before Stripe, in the new style. */
dialog.proposal-modal{background:#FFFFFF;color:#2B2B2B}
dialog.proposal-modal::backdrop,dialog.terms-modal::backdrop{background:rgba(43,43,43,.7)}
dialog.proposal-modal .elementor-924 .elementor-section > .elementor-container{max-width:46em;margin:0 auto}
dialog.proposal-modal .elementor-widget-text-editor,dialog.terms-modal{font-family:"Inter Tight",Sans-serif;font-size:var(--fh-u);line-height:1.6;color:#2B2B2B}
dialog.proposal-modal .elementor-widget-text-editor{padding:clamp(72px,10vh,120px) 0 80px}
dialog.proposal-modal .elementor-widget-text-editor h3,dialog.terms-modal .terms-scroll h3{margin:2em 0 .6em;color:#2B2B2B !important;font-size:clamp(22px,1.8vw,28px) !important;line-height:1.2}
dialog.proposal-modal .elementor-widget-text-editor h3:first-child,dialog.terms-modal .terms-scroll h3:first-child{margin-top:0}
dialog.proposal-modal .elementor-widget-text-editor p,dialog.terms-modal .terms-scroll p{color:#3A3A3F;font-family:"Inter Tight",Sans-serif}
dialog.proposal-modal .site-terms-version,dialog.terms-modal .site-terms-version{margin-top:2.5em;color:#6B6B70;font-size:.85em}
/* The close icon of the full-screen popup becomes the same thin cross as the menu. */
dialog.proposal-modal .elementor-element-edc8ff3{position:fixed !important;top:24px !important;right:24px !important;left:auto !important;z-index:5}
dialog.proposal-modal .elementor-element-edc8ff3 .elementor-icon{position:relative;display:block;width:48px;height:48px;color:#2B2B2B !important;transition:transform .3s cubic-bezier(.3,.86,.36,.95)}
dialog.proposal-modal .elementor-element-edc8ff3 .elementor-icon i{display:none}
dialog.proposal-modal .elementor-element-edc8ff3 .elementor-icon::before,dialog.proposal-modal .elementor-element-edc8ff3 .elementor-icon::after{content:"";position:absolute;left:13px;top:23px;width:22px;height:1.5px;background:currentColor;transform:rotate(45deg)}
dialog.proposal-modal .elementor-element-edc8ff3 .elementor-icon::after{transform:rotate(-45deg)}
dialog.proposal-modal .elementor-element-edc8ff3 .elementor-icon:hover{transform:rotate(90deg)}
/* Terms step before Stripe: white card, scrollable text, pill buttons. */
dialog.terms-modal{width:min(760px,calc(100vw - 32px));height:min(760px,calc(100dvh - 32px));border-radius:24px;background:#FFFFFF}
dialog.terms-modal[open]{animation:fh-contact-in .45s cubic-bezier(.3,.86,.36,.95)}
dialog.terms-modal .terms-panel{padding:clamp(28px,4vw,48px);gap:18px}
dialog.terms-modal .terms-panel h2{color:#2B2B2B;font-family:"Inter Tight",Sans-serif;font-size:clamp(36px,4vw,56px);font-weight:500;line-height:1.05;letter-spacing:-.01em}
dialog.terms-modal .terms-hint{display:flex;align-items:center;gap:.6em;color:#6B6B70;font-family:"Inter Tight",Sans-serif;font-size:15px}
dialog.terms-modal .terms-hint::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#FF5D00}
dialog.terms-modal .terms-scroll{padding:24px 28px;border:0;border-radius:16px;background:#F4F4F4}
dialog.terms-modal .terms-scroll .elementor-global-927{font-size:16px}
dialog.terms-modal .terms-actions{gap:12px}
dialog.terms-modal .terms-actions .elementor-button{position:relative;isolation:isolate;overflow:hidden;padding:.8em 1.5em;border:1px solid #2B2B2B;border-radius:999px;font-family:"Inter Tight",Sans-serif;font-size:17px;font-weight:400;line-height:1.2;transition:color .4s,border-color .4s,opacity .3s}
dialog.terms-modal .terms-cancel{background:transparent;color:#2B2B2B}
dialog.terms-modal .terms-cancel:hover,dialog.terms-modal .terms-cancel:focus{background:transparent;color:#2B2B2B;border-color:#2B2B2B;opacity:.7}
dialog.terms-modal .terms-accept,dialog.terms-modal .terms-accept:disabled{background:#2B2B2B;color:#FFFFFF;border-color:#2B2B2B}
dialog.terms-modal .terms-accept:disabled{opacity:.3}
dialog.terms-modal .terms-accept:hover:not(:disabled),dialog.terms-modal .terms-accept:focus:not(:disabled){background:#1223E6;border-color:#1223E6}
dialog.terms-modal .terms-accept:focus-visible,dialog.terms-modal .terms-cancel:focus-visible{outline:2px solid #1223E6;outline-offset:3px}
dialog.proposal-modal .dialog-widget-content,dialog.proposal-modal .dialog-message,dialog.proposal-modal .elementor-924,dialog.proposal-modal .elementor-section,dialog.proposal-modal .elementor-column,dialog.proposal-modal .elementor-widget-wrap{background:#FFFFFF !important;box-shadow:none !important}
/* Client cards on the SiteToaster page in the new style: rounded white cards, photo with rounded corners
   (blue tint, original colours on hover), new type, pill button with arrow; the testimonial is a dark card with an orange quote mark. */
.st-page .site-work-track{gap:16px}
.st-page .site-work-card{border-radius:24px;overflow:hidden;box-sizing:border-box;background:#FFFFFF;color:#2B2B2B;font-family:"Inter Tight",Sans-serif}
.st-page a.site-work-card:hover,.st-page a.site-work-card:focus-visible{background:#FFFFFF;color:#2B2B2B}
.st-page .site-work-photo{border-radius:0}
.st-page .site-work-copy{padding:20px 24px 24px}
.st-page .site-work-name{font-family:"Inter Tight",Sans-serif;font-size:clamp(22px,1.7vw,26px);font-weight:400;letter-spacing:-.01em}
.st-page .site-work-text{color:#6B6B70;font-family:"Inter Tight",Sans-serif;font-size:16px;letter-spacing:0}
.st-page .site-work-button{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;overflow:hidden;padding:.7em 1.3em;border:1px solid rgba(43,43,43,.35);border-radius:999px;background:transparent;color:#2B2B2B;font-family:"Inter Tight",Sans-serif;font-size:15px;transition:color .4s,border-color .4s}
.st-page .site-work-button::after{content:"→";font-size:1.1em;line-height:1;transition:transform .3s cubic-bezier(.3,.86,.36,.95)}
.st-page .site-work-button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#1223E6;transform:translateY(101%);transition:transform .4s cubic-bezier(.3,.86,.36,.95)}
.st-page .site-work-card:hover .site-work-button,.st-page .site-work-card:focus-visible .site-work-button{border-color:#1223E6;background:transparent;color:#FFFFFF}
.st-page .site-work-card:hover .site-work-button::before,.st-page .site-work-card:focus-visible .site-work-button::before{transform:none}
.st-page .site-work-card:hover .site-work-button::after{transform:translateX(4px)}
.st-page .site-work-quote{padding:32px;background:#2B2B2B;color:#FFFFFF}
.st-page .site-work-mark{color:#FF5D00;font-family:"Inter Tight",Sans-serif}
.st-page .site-work-quote blockquote{font-family:"Inter Tight",Sans-serif;font-size:19px;letter-spacing:0}
.st-page .site-work-quote figcaption{font-family:"Inter Tight",Sans-serif}
.st-page .site-work-quote strong{font-weight:500}
/* Three plans side by side; on phones they stack, so the old two-plan switch is not used on this page. */
.st-plans{grid-template-columns:repeat(3,1fr)}
.st-page .site-plan-switch{display:none !important}
@media (min-width:768px){.st-page .site-plans .st-plan{display:flex !important}}
@media (max-width:1024px){.st-plans{grid-template-columns:1fr}}
.st-page .site-work-mark{font-family:Georgia,"Times New Roman",serif;height:48px}
/* Pro is the popular plan: About gradient, white text and a small label. Business goes back to white, like Starter. */
.st-plan.site-plan-extra{background:#FFFFFF;color:#2B2B2B}
.st-page .st-plan.site-plan-extra .st-btn-fill{background:#2B2B2B;border-color:#2B2B2B;color:#FFFFFF}
.st-plan.st-plan-popular{position:relative;background:radial-gradient(120% 90% at 100% 100%,rgba(255,93,0,.9),rgba(255,93,0,0) 60%),linear-gradient(135deg,#1223E6 0%,#150773 100%);color:#FFFFFF}
.st-plan-popular ul{border-top-color:rgba(255,255,255,.3)}
.st-plan-tag{position:absolute;top:2.6em;right:2.6em;display:inline-flex;align-items:center;gap:.5em;padding:.3em .9em;border:1px solid rgba(255,255,255,.5);border-radius:999px;font-size:.8em}
.st-plan-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#FF5D00}
.st-page .st-plan-popular .st-btn-fill{background:#FFFFFF;border-color:#FFFFFF;color:#2B2B2B}
.st-page .st-plan-popular .st-btn-fill:hover,.st-page .st-plan-popular .st-btn-fill:focus-visible{color:#FFFFFF;border-color:#1223E6}
/* Testimonial card with the same gradient instead of black. */
.st-page .site-work-quote{background:radial-gradient(120% 90% at 100% 100%,rgba(255,93,0,.9),rgba(255,93,0,0) 60%),linear-gradient(135deg,#1223E6 0%,#150773 100%)}
/* Side menu on the brand blue. */
dialog.fh-menu{background:#1223E6}
dialog.fh-menu .fh-menu-label{color:rgba(255,255,255,.65);border-bottom-color:rgba(255,255,255,.3)}
dialog.fh-menu .fh-menu-lang:hover,dialog.fh-menu .fh-menu-lang:focus-visible{color:#1223E6}
/* FAQ on wide screens: one word per line in the heading, and a wider column for the questions. */
@media (min-width:1025px){
 .st-faq .st-split{grid-template-columns:auto minmax(0,44em);justify-content:space-between;gap:8em}
 .st-page .st .st-faq h2{width:min-content}
}
/* About page: portrait beside the introduction. */
.fp-head-photo{display:grid;grid-template-columns:1fr minmax(0,26em);align-items:center;gap:4em}
.fp-portrait{display:block;width:100%;height:auto;border-radius:24px}
@media (max-width:900px){.fp-head-photo{grid-template-columns:1fr;gap:2.5em}.fp-portrait{max-width:420px}}
/* About page: bold orange-and-white gradient behind the header and the intro: white on the text side, building to a strong orange glow
   behind the photo and the top right corner, fading into white below. */
.fp-head-photo{position:relative}
.fp-head-photo::before{content:"";position:absolute;z-index:-1;top:-260px;bottom:-5em;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;
 background:
  linear-gradient(to bottom,#FFFFFF 0%,#FFFFFF 24%,rgba(255,255,255,0) 52%,rgba(255,255,255,0) 78%,#FFFFFF 100%),
  radial-gradient(45% 65% at 72% 95%,rgba(255,122,31,.5),rgba(255,122,31,0) 70%),
  radial-gradient(35% 55% at 30% 100%,rgba(255,93,0,.18),rgba(255,93,0,0) 70%),
  linear-gradient(115deg,#FFFFFF 0%,#FFFFFF 30%,#FFEBDD 62%,#FFD3B5 100%)}
.fp-head.fp-head-photo{padding-top:2.5vh}
/* Bottom notch carved into the last boxes, like the top one: the footer slides under the boxes and its blue shows through the V. */
.fh-about::after{display:none}
body:has(.fh-about) .fh-footer{z-index:0;margin-top:-18.5px}
@media (min-width:768px){
 .fh-about-oitoronto{clip-path:polygon(0 0,100% 0,100% calc(100% - 18.5px),calc(100% - 18.5px) 100%,0 100%)}
 .fh-about-software{clip-path:polygon(0 0,100% 0,100% 100%,18.5px 100%,0 calc(100% - 18.5px))}
}
@media (max-width:767px){
 .fh-about-oitoronto{clip-path:polygon(0 0,100% 0,100% 100%,calc(50% + 18.5px) 100%,50% calc(100% - 18.5px),calc(50% - 18.5px) 100%,0 100%)}
}
/* About page: no gradient behind the header; orange bullets in the experience lists. */
.fp-head-photo::before{display:none}
.fp-points li::marker{color:#FF5D00}
.fp-points{padding-left:0;list-style:none}
.fp-points li{display:flex;gap:.7em}
.fp-points li::before{content:"";flex:none;width:6px;height:6px;margin-top:.7em;border-radius:50%;background:#FF5D00}
/* About boxes: the hovered button text takes the fill's text colour (white on the blue fill). */
.fh-about-box .fh-about-follow:hover,.fh-about-box .fh-about-follow:focus-visible,.fh-about-box:hover:not(:has(.fh-about-follow:hover)) .fh-about-main,.fh-about-box .fh-about-main:focus-visible{color:var(--fh-btn-text)}
/* SiteToaster page: section menu that sticks to the top while scrolling; the current section is underlined in orange. */
.st-subnav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(43,43,43,.1);font-family:"Inter Tight",Sans-serif;font-size:var(--fh-u)}
.st-subnav-inner{display:flex;align-items:center;gap:.4em;max-width:78em;margin:0 auto;padding:0 2em;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.st-subnav-inner::-webkit-scrollbar{display:none}
.st-subnav-brand{display:inline-flex;align-items:center;gap:.5em;margin-right:1.2em;font-weight:500;color:#2B2B2B}
.st-subnav-brand::before{content:"";width:8px;height:8px;border-radius:50%;background:#FF5D00}
.st-subnav a{position:relative;display:block;padding:1em .9em;color:#6B6B70;text-decoration:none;transition:color .3s}
.st-subnav a::after{content:"";position:absolute;left:.9em;right:.9em;bottom:0;height:2px;background:#FF5D00;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.3,.86,.36,.95)}
.st-subnav a:hover,.st-subnav a:focus-visible,.st-subnav a.is-current{color:#2B2B2B}
.st-subnav a.is-current::after{transform:none}
.st-page .st section[id]{scroll-margin-top:var(--st-subnav-h,0px)}
@media (max-width:767px){.st-subnav-inner{padding:0 1em}.st-subnav-brand{display:none}}
.st-page .ee-offcanvas__container,.st-page [canvas]{overflow:clip}
.st-page .st .st-hero h1{margin-top:0}
/* About page, education: the items become boxes with a cut corner, like the ones on the homepage. */
.fp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:1em 0 3em}
.fp-cards .fp-item{display:flex;flex-direction:column;gap:18px;padding:40px clamp(24px,2.6vw,44px) 48px;clip-path:polygon(0 0,calc(100% - 18.5px) 0,100% 18.5px,100% 100%,0 100%);color:#2B2B2B;background:#EDEDED}
.fp-cards .fp-item+.fp-item{border-top:0}
.fp-cards .fp-item:nth-child(1){color:#FFFFFF;background:radial-gradient(120% 90% at 100% 100%,rgba(255,93,0,.9),rgba(255,93,0,0) 60%),linear-gradient(135deg,#1223E6 0%,#150773 100%)}
.fp-cards .fp-item:nth-child(2){color:#FFFFFF;background:#2B2B2B}
.fp-cards .fp-body h3{font-size:clamp(22px,1.9vw,32px);line-height:1.2}
.fp-cards .fp-org,.fp-cards .fp-summary{color:inherit;opacity:.7}
.fp-cards .fp-summary{font-size:1em}
@media (max-width:900px){.fp-cards{grid-template-columns:1fr}}
.fp-cards .fp-dates{color:inherit}
/* About page: larger section titles and dates with an orange dot. */
.fp-section h2{margin:0 0 .5em;color:#2B2B2B;font-size:clamp(36px,4.2vw,68px);font-weight:500;line-height:1.05;letter-spacing:-.01em;text-transform:none}
.fp-dates{display:inline-flex;align-items:center;align-self:start;gap:.55em;color:#2B2B2B;font-weight:500}
.fp-dates::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#FF5D00}
/* Highlighted numbers as small boxes with a cut corner; the same gap above (summary) and below (points). */
.fp-stats{display:flex;flex-wrap:wrap;gap:8px;margin:1.4em 0;padding:0;list-style:none}
.fp-stats+.fp-points{margin-top:0}
.fp-stats li{display:flex;flex-direction:column;flex:0 1 13em;padding:18px 22px 20px;background:radial-gradient(120% 120% at 100% 100%,rgba(255,93,0,.9),rgba(255,93,0,0) 60%),linear-gradient(135deg,#1223E6 0%,#150773 100%);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.fp-stats strong{color:#FFFFFF;font-size:clamp(26px,2.2vw,38px);font-weight:400;line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
.fp-stats span{margin-top:.35em;color:rgba(255,255,255,.8);font-size:.85em;line-height:1.35}
/* Experience dates: no tag, just the years larger and in blue (the education boxes keep the orange dot).
   Side by side with the title, they share its size and line height, so they line up with its first line. */
.fp-list:not(.fp-cards) .fp-dates{justify-self:start;color:#1223E6;font-size:clamp(22px,2vw,34px);font-weight:500;line-height:1.2;letter-spacing:-.01em;white-space:nowrap}
.fp-list:not(.fp-cards) .fp-dates::before{display:none}
@media (min-width:768px){.fp-list:not(.fp-cards) .fp-dates{margin-top:calc((clamp(24px,2.2vw,38px) - clamp(22px,2vw,34px)) * .6)}}
/* Features: boxes that touch and alternate colours like the homepage (dark and light in a checkerboard on three columns). */
.st-feature-list{gap:0;border-top:0}
.st-feature-list li{padding:2.4em 2.2em 2.8em;border-bottom:0;background:#EDEDED;color:#2B2B2B}
.st-feature-list li:nth-child(6n+1),.st-feature-list li:nth-child(6n+5){color:#FFFFFF;background:radial-gradient(120% 90% at 100% 100%,rgba(255,93,0,.9),rgba(255,93,0,0) 60%),linear-gradient(135deg,#1223E6 0%,#150773 100%)}
.st-feature-list li:nth-child(6n+3){color:#FFFFFF;background:#2B2B2B}
.st-page .st .st-feature-list li h3{color:inherit}
.st-feature-list li p{color:inherit;opacity:.8}
/* Feature boxes touch, like the homepage. The cut is used sparingly, only where it adds rhythm: a V where two boxes meet,
   or a single corner. --n is the notch size, as on the homepage. */
.st-feature-list li{--n:18.5px}
/* Features: a V at the top between 2 and 3 and another at the bottom between 4 and 5, offset like a zigzag. */
@media (min-width:1025px){
 .st-feature-list li:nth-child(2){clip-path:polygon(0 0,calc(100% - var(--n)) 0,100% var(--n),100% 100%,0 100%)}
 .st-feature-list li:nth-child(3){clip-path:polygon(var(--n) 0,100% 0,100% 100%,0 100%,0 var(--n))}
 .st-feature-list li:nth-child(4){clip-path:polygon(0 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,0 100%)}
 .st-feature-list li:nth-child(5){clip-path:polygon(0 0,100% 0,100% 100%,var(--n) 100%,0 calc(100% - var(--n)))}
}
/* Two columns: colours rearranged into a checkerboard; one V at the top and one corner cut at the bottom right. */
@media (min-width:768px) and (max-width:1024px){
 .st-feature-list li:nth-child(2),.st-feature-list li:nth-child(3),.st-feature-list li:nth-child(6){color:#2B2B2B;background:#EDEDED}
 .st-feature-list li:nth-child(4){color:#FFFFFF;background:#2B2B2B}
 .st-feature-list li:nth-child(1),.st-feature-list li:nth-child(5){color:#FFFFFF;background:radial-gradient(120% 90% at 100% 100%,rgba(255,93,0,.9),rgba(255,93,0,0) 60%),linear-gradient(135deg,#1223E6 0%,#150773 100%)}
 .st-feature-list li:nth-child(1){clip-path:polygon(0 0,calc(100% - var(--n)) 0,100% var(--n),100% 100%,0 100%)}
 .st-feature-list li:nth-child(2){clip-path:polygon(var(--n) 0,100% 0,100% 100%,0 100%,0 var(--n))}
 .st-feature-list li:nth-child(6){clip-path:polygon(0 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,0 100%)}
}
/* Phones: the boxes are stacked, so the cuts sit on the sides of a seam: a sideways V on the right between 1 and 2
   and on the left between 4 and 5. */
@media (max-width:767px){
 .st-feature-list li:nth-child(1){clip-path:polygon(0 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,0 100%)}
 .st-feature-list li:nth-child(2){clip-path:polygon(0 0,calc(100% - var(--n)) 0,100% var(--n),100% 100%,0 100%)}
 .st-feature-list li:nth-child(4){clip-path:polygon(0 0,100% 0,100% 100%,var(--n) 100%,0 calc(100% - var(--n)))}
 .st-feature-list li:nth-child(5){clip-path:polygon(var(--n) 0,100% 0,100% 100%,0 100%,0 var(--n))}
}
/* Menu hover, after companion.uprock.pro's footer menu: an orange square with an arrow opens next to the word and pushes it aside.
   Top menus (home hero and inner pages): the square opens on the right of the word; as the menu is right-aligned, the word and everything
   on its left slide left, while the items on its right stay put. The language pills keep their own hover. */
.fh-hero-links a,.fp-links a{display:flex;align-items:center}
.fh-hero-links a::before,.fp-links a::before{display:none}
.fh-hero-links a::after,.fp-links a::after{content:"";position:static;flex:none;width:0;height:1.3em;margin:0;border-radius:0;opacity:0;transform:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/.8em .8em no-repeat,#FF5D00;
 transition:width .35s cubic-bezier(.3,.86,.36,.95),margin .35s cubic-bezier(.3,.86,.36,.95),opacity .3s}
.fh-hero-links a:hover::after,.fh-hero-links a:focus-visible::after,.fp-links a:hover::after,.fp-links a:focus-visible::after{width:1.3em;margin-left:.4em;opacity:1;transform:none}
.fh-hero-links .fh-hero-lang::after,.fp-links .fp-lang::after{display:none}
/* Side menu (left-aligned list): the square opens in front of the word and pushes it right, as on the reference; smaller square, smaller type. */
.fh-menu-links a{font-size:clamp(34px,3.4vw,52px);white-space:nowrap}
.fh-menu-links a::before{content:"";position:static;flex:none;width:0;height:.62em;margin:0;border-radius:0;opacity:0;transform:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/.4em .4em no-repeat,#FF5D00;
 transition:width .35s cubic-bezier(.3,.86,.36,.95),margin .35s cubic-bezier(.3,.86,.36,.95),opacity .3s}
.fh-menu-links a:hover::before,.fh-menu-links a:focus-visible::before{width:.62em;margin-right:.3em;opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fh-hero-links a::after,.fp-links a::after,.fh-menu-links a::before{transition:none}}
/* Standard content width in pixels: 1440px of content with a 32px gutter (16px on phones), shared by the page content, the SiteToaster
   sections and their section menu, the footer, and the text inside the homepage boxes. The top bars stay full width. */
:root{--fh-container:1440px;--fh-gutter:32px}
@media (max-width:767px){:root{--fh-gutter:16px}}
.fp,.st-wrap,.st-subnav-inner,.fh-footer-inner{box-sizing:content-box;max-width:var(--fh-container);padding-left:var(--fh-gutter);padding-right:var(--fh-gutter)}
/* Footer: the last row (copyright to GitHub) runs the full width of the screen, with the same side padding as the top bar (2em). */
.fh-footer{overflow-x:clip}
.fh-footer-bottom{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 2em}
@media (max-width:767px){.fh-footer-bottom{padding:0 1em}}
/* Homepage boxes: the background stays edge to edge, the text lines up with the standard container
   (left column from the container's left edge, right column up to its right edge, 64px between them). */
@media (min-width:768px){
 .fh-about-fernanda,.fh-about-oitoronto{padding-left:max(var(--fh-gutter),calc((100vw - var(--fh-container)) / 2));padding-right:clamp(24px,4vw,64px)}
 .fh-about-sitetoaster,.fh-about-software{padding-left:clamp(24px,4vw,64px);padding-right:max(var(--fh-gutter),calc((100vw - var(--fh-container)) / 2))}
}
@media (max-width:767px){.fh-about-box,.fh-about-box.fh-about-small{padding-left:var(--fh-gutter);padding-right:var(--fh-gutter)}}
/* SiteToaster section menu: hidden at the top of the page, then fixed at the top on the homepage gradient as soon as the page scrolls (site.js sets
   body.st-subnav-shown). The solid colour under the gradient lets the round menu button detect a dark background and turn white. */
.st-subnav{position:fixed;top:0;left:0;right:0;border-bottom:0;color:#FFFFFF;background-color:#150773;
 background-image:radial-gradient(40% 220% at 92% 100%,rgba(255,93,0,.85),rgba(255,93,0,0) 70%),linear-gradient(100deg,#1223E6 0%,#150773 100%);
 backdrop-filter:none;-webkit-backdrop-filter:none;transform:translateY(-100%);visibility:hidden;
 transition:transform .45s cubic-bezier(.3,.86,.36,.95),visibility 0s .45s}
body.st-subnav-shown .st-subnav{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.3,.86,.36,.95),visibility 0s}
.st-subnav-brand{color:#FFFFFF}
.st-subnav a{color:rgba(255,255,255,.7)}
.st-subnav a:hover,.st-subnav a:focus-visible,.st-subnav a.is-current{color:#FFFFFF}
.st-subnav a:focus-visible{outline:2px solid #FFFFFF;outline-offset:-4px}
@media (prefers-reduced-motion:reduce){.st-subnav,body.st-subnav-shown .st-subnav{transition:none}}
/* SiteToaster section menu: an arrow after the "SiteToaster" label points at the section links, which sit close to it.
   On hover the links get a thin underline drawn from the left, like the footer links (the orange bar still marks the current section). */
.st-subnav-brand{margin-right:.35em}
.st-subnav-brand::after{content:"";flex:none;width:1.6em;height:.75em;margin-left:.45em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='white' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h27M22 1l6 6-6 6'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.st-subnav a::before{content:"";position:absolute;left:.9em;right:.9em;bottom:calc(1em - 3px);height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.3,.86,.36,.95)}
.st-subnav a:hover::before,.st-subnav a:focus-visible::before{transform:none}
@media (prefers-reduced-motion:reduce){.st-subnav a::before{transition:none}}
/* Footer pills: on hover they fill with white from the bottom up, like the other buttons. */
.fh-footer-pills a{position:relative;isolation:isolate;overflow:hidden;transition:color .4s cubic-bezier(.3,.86,.36,.95),border-color .4s}
.fh-footer-pills a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#FFFFFF;transform:translateY(101%);transition:transform .4s cubic-bezier(.3,.86,.36,.95)}
.fh-footer-pills a:hover,.fh-footer-pills a:focus-visible{background:transparent;border-color:#FFFFFF;color:#2B2B2B}
.fh-footer-pills a:hover::before,.fh-footer-pills a:focus-visible::before{transform:none}
@media (prefers-reduced-motion:reduce){.fh-footer-pills a,.fh-footer-pills a::before{transition:none}}
/* Plans: the bullet list is 1px smaller than the body text. */
.st-plan li{font-size:calc(var(--fh-u) - 1px)}
/* Terms popup (proposal-modal) in the style of the contact / sign-up popup: a centred white card with rounded corners over the dimmed page,
   sliding up as it opens. The text scrolls inside the card; translateZ makes the card the containing block of the fixed close button,
   so the X stays in the card's top right corner. */
dialog.proposal-modal{width:min(760px,calc(100vw - 32px));height:min(760px,calc(100dvh - 32px));max-height:none;padding:0;border:0;border-radius:24px;overflow:hidden;background:#FFFFFF;transform:translateZ(0)}
dialog.proposal-modal[open]{animation:fh-contact-in .45s cubic-bezier(.3,.86,.36,.95)}
dialog.proposal-modal .dialog-widget-content{height:100%;overflow-y:auto;overscroll-behavior:contain}
dialog.proposal-modal .elementor-924 .elementor-section > .elementor-container{max-width:none}
dialog.proposal-modal .elementor-widget-text-editor{padding:clamp(32px,5vw,64px) clamp(28px,5vw,64px)}
@media (prefers-reduced-motion:reduce){dialog.proposal-modal[open]{animation:none}}
dialog.proposal-modal .elementor-section,dialog.proposal-modal .elementor-widget-wrap{padding:0 !important}
/* SiteToaster hero with more colour: the last word of the title takes the brand gradient, and the illustration sits on an orange sun. */
.st-page .st .st-hero h1 .st-grad{background:linear-gradient(100deg,#1223E6 0%,#150773 55%,#FF5D00 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.st-hero .st-art{background:radial-gradient(circle closest-side at 50% 54%,#FF5D00 0 88%,transparent 88.5%)}
/* FAQ with a bit more colour: orange round icons that turn into the blue gradient when the answer is open, and the open question in blue. */
.st-page .st-faq-icon{right:0;width:36px;height:36px;border-radius:50%;background:#FF5D00;color:#FFFFFF;transition:transform .3s cubic-bezier(.3,.86,.36,.95)}
.st-page .st-faq-icon::before,.st-page .st-faq-icon::after{left:11px;top:17px;width:14px}
.st-page .st-faq-q:hover .st-faq-icon{transform:translateY(-50%) scale(1.1)}
.st-page .st-faq-q[aria-expanded="true"]{color:#1223E6}
.st-page .st-faq-q[aria-expanded="true"] .st-faq-icon{background:#1223E6}
.st-page .st-faq-list,.st-page .st-faq-item{border-color:rgba(18,35,230,.2)}
@media (prefers-reduced-motion:reduce){.st-page .st-faq-icon{transition:none}}
/* Phones: the header menu uses the same round icon as the scroll menu button instead of the word Menu. */
.st-nav-menu{position:relative;justify-content:center;width:calc(var(--fh-u) * 3);height:calc(var(--fh-u) * 3);overflow:hidden;isolation:isolate;border-radius:50%;background:#2B2B2B;font-size:0;gap:0}
.st-nav-menu::before{width:calc(var(--fh-u) * 1.1);height:calc(var(--fh-u) * .38);border-radius:0;background:none;border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;box-sizing:border-box}
.st-nav-menu::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:#1223E6;transform:translateY(101%);transition:transform .4s cubic-bezier(.3,.86,.36,.95)}
.st-nav-menu:hover::after,.st-nav-menu:focus-visible::after{transform:none}
/* Phones: the plans become tabs, one plan at a time (Pro first). */
.st-plan-tabs{display:none}
@media (max-width:767px){
 .st-plan-tabs{display:flex;gap:4px;margin:0 0 16px;padding:4px;border-radius:999px;background:#FFFFFF}
 .st-plan-tabs button{flex:1;padding:.85em 0;border:0;border-radius:999px;background:none;color:#2B2B2B;font:500 16px/1 "Inter Tight",Sans-serif;cursor:pointer;transition:background .3s,color .3s}
 .st-plan-tabs button[aria-pressed="true"]{background:#2B2B2B;color:#FFFFFF}
 .st-plan-tabs button[data-switch="pro"][aria-pressed="true"]{background:linear-gradient(135deg,#1223E6 0%,#150773 100%)}
 .st-plan-tabs button:focus,.st-plan-tabs button:focus-visible{outline:none}
 .st-plans[data-active="starter"] .st-plan:not(.st-plan-starter),.st-plans[data-active="pro"] .st-plan:not(.st-plan-pro),.st-plans[data-active="business"] .st-plan:not(.st-plan-business){display:none}
}
/* Phones: the last footer lines, from the copyright to GitHub, sit closer together. */
@media (max-width:767px){
 .fh-footer-bottom{gap:1.1em;margin-top:3.5em}
 .fh-footer-col p+p{margin-top:.3em}
}
@media (max-width:767px){.fp-nav .st-nav-menu{margin-left:12px}}
/* Phone plan tabs: the highlight slides between the tabs, and the new plan slides in from the side of the picked tab. */
@media (max-width:767px){
 .st-plan-tabs{position:relative;isolation:isolate}
 .st-plan-tabs::before{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc((100% - 16px) / 3);border-radius:999px;background:#FF5D00;transition:transform .45s cubic-bezier(.3,.86,.36,.95)}
 .st-plan-tabs[data-active="pro"]::before{transform:translateX(calc(100% + 4px));background:linear-gradient(135deg,#1223E6 0%,#150773 100%)}
 .st-plan-tabs[data-active="business"]::before{transform:translateX(calc(200% + 8px))}
 .st-plan-tabs button[aria-pressed="true"],.st-plan-tabs button[data-switch="pro"][aria-pressed="true"]{background:none}
 .st-pricing{overflow-x:clip}
 .st-plans.st-slide-left .st-plan{animation:st-plan-from-right .5s cubic-bezier(.3,.86,.36,.95)}
 .st-plans.st-slide-right .st-plan{animation:st-plan-from-left .5s cubic-bezier(.3,.86,.36,.95)}
}
@keyframes st-plan-from-right{from{opacity:0;transform:translateX(60%)}to{opacity:1;transform:none}}
@keyframes st-plan-from-left{from{opacity:0;transform:translateX(-60%)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.st-plan-tabs::before{transition:none}.st-plans .st-plan{animation:none !important}}
/* Phones: the SiteToaster section bar is left out; its links live in the side menu instead. */
@media (max-width:767px){.st-subnav{display:none}}
/* Side menu on SiteToaster pages: the page's sections are listed, open, under Get a website. */
.fh-menu-sub{margin:.2em 0 .6em;padding:0 0 0 .15em;list-style:none}
.fh-menu-sub a{position:relative;display:inline-block;padding:.25em 0;color:rgba(255,255,255,.7) !important;font-size:clamp(17px,1.3vw,20px);transition:color .3s}
.fh-menu-sub a::before{content:"";display:inline-block;width:.9em;height:1px;margin:0 .6em .3em 0;background:currentColor;vertical-align:middle;opacity:.6}
.fh-menu-sub a:hover,.fh-menu-sub a:focus-visible{color:#FFFFFF !important}
/* Logo and menu button keep the same margin from the top as from the side, on every page.
   Desktop: the header sits 2 units in; the round button that appears on scroll uses the same 2 units.
   Phones: everything sits 1 unit (16px) in, and the scroll button keeps the header icon's size, so it simply stays put. */
.fp-logo{align-self:flex-start}
body:has(.fh-hero) .elementor-element.elementor-element-e5a94f8{top:calc(var(--fh-u) * 2)}
body:not(.rtl):has(.fh-hero) .elementor-element.elementor-element-e5a94f8{right:calc(var(--fh-u) * 2)}
.st-menu-btn{top:calc(var(--fh-u) * 2);right:calc(var(--fh-u) * 2)}
@media (max-width:767px){
 body:has(.fh-hero) .elementor-element.elementor-element-e5a94f8{top:var(--fh-u)}
 body:not(.rtl):has(.fh-hero) .elementor-element.elementor-element-e5a94f8{right:var(--fh-u)}
 body:has(.fh-hero) .elementor-element.elementor-element-e5a94f8.elementor-view-default .elementor-icon{width:calc(var(--fh-u) * 3);height:calc(var(--fh-u) * 3)}
 body:has(.fh-hero) .elementor-element.elementor-element-e5a94f8 .elementor-icon::after{width:1.1em;height:.38em;margin:-.19em 0 0 -.55em}
 .st-menu-btn{top:var(--fh-u);right:var(--fh-u);width:calc(var(--fh-u) * 3);height:calc(var(--fh-u) * 3)}
 .st-menu-btn span{width:calc(var(--fh-u) * 1.1);height:calc(var(--fh-u) * .38)}
}
/* SiteToaster hero title: always two lines ("Pay Monthly" / "Websites"); the first line never wraps. */
.st-nowrap{white-space:nowrap}
.st-page .st .st-hero h1{font-size:min(clamp(56px,8vw,140px),calc((100vw - 32px) / 5.7))}
.st-page .st-faq-q{font-weight:500}
.st-page .site-work-name{font-weight:500}
body .fh-hero-name,body .fh-hero-name *{font-weight:400 !important}
/* Get a website, phones: in the hero and the closing call to action the illustration comes before the title. */
@media (max-width:1024px){.st-hero .st-art,.st-cta .st-art{order:-1}}
/* SiteToaster logo: in blue above the hero title, and in white at the top of the side menu on the SiteToaster pages. */
.st-hero-logo{display:block;width:clamp(64px,5.5vw,88px);height:auto;margin:0 0 clamp(20px,2vw,32px)}
.fh-menu-logo{display:block;width:clamp(56px,4.5vw,72px);height:auto;margin:0 0 clamp(24px,3vh,40px)}
/* Get a website hero: closer to the header. */
.st-page .st .st-hero{padding-top:1.5em}
@media (max-width:767px){.st-page .st .st-hero{padding-top:.5em}}
/* Side menu header: the logo and the close X sit at the same distance from the top as from their side (--m, the menu's side padding).
   The X is 22px inside a 48px button, so the button is moved out by 13px. The content starts lower, below the logo. */
dialog.fh-menu{--m:clamp(28px,5vw,80px)}
dialog.fh-menu .fh-menu-close{top:calc(var(--m) - 13px);right:calc(var(--m) - 13px)}
.fh-menu-logo{position:absolute;top:var(--m);left:var(--m);width:clamp(72px,6vw,88px);margin:0}
dialog.fh-menu:has(.fh-menu-logo){padding-top:calc(var(--m) + clamp(72px,6vw,88px) + clamp(40px,6vh,64px))}
/* Side menu on desktop: the close X sits closer to the corner (24px), apart from the logo. */
@media (min-width:768px){dialog.fh-menu .fh-menu-close{top:24px;right:24px}}
/* Phones: header margins in fixed pixels, so the logo and the round menu button stay 16px from the top and the sides even when
   the phone enlarges text (which would otherwise grow the em-based padding and logo but not the button). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:767px){.fp-nav{padding:16px}.fp-logo img{height:30px}}
/* Old WordPress CSS reserves 32px for the admin bar when jumping to an anchor; there is no admin bar here. */
html{scroll-padding-top:0 !important}
/* Side menu on desktop: a bigger close button, close to the size of the round open button; the links start closer to the logo
   and sit closer to each other. */
@media (min-width:768px){
 dialog.fh-menu .fh-menu-close{width:calc(var(--fh-u) * 4.2);height:calc(var(--fh-u) * 4.2)}
 dialog.fh-menu .fh-menu-close span{width:30px;height:30px}
 dialog.fh-menu .fh-menu-close span::before,dialog.fh-menu .fh-menu-close span::after{top:14px;width:30px}
 dialog.fh-menu:has(.fh-menu-logo){padding-top:calc(var(--m) + clamp(72px,6vw,88px) + 28px)}
 .fh-menu-links a{line-height:1.1}
}
/* Side menu labels (Navigation, Socials) sit closer to their divider line; the line itself stays where it was. */
dialog.fh-menu .fh-menu-label{padding-top:.8em;padding-bottom:.8em}
/* Phones: the Unity42 logo sits a little further in, 24px from the top and from the side (the round menu button stays at 16px). */
@media (max-width:767px){.fp-logo,.fh-hero-logo{margin:8px 0 0 8px}}
/* Phones, homepage: the round menu button is always shown (not only after scrolling), like the inner pages' header icon. */
@media (max-width:767px){body:has(.fh-hero) .elementor-element.elementor-element-e5a94f8{transform:scale(1)}}
@media (max-width:767px){.fh-hero-nav .fh-hero-menu{display:none}}
/* Homepage boxes on phones: inset from the screen edges (16px), so the cuts can sit on the sides where two boxes meet:
   a sideways V on the right between the first two boxes and on the left between the last two. The top and bottom V cuts
   (which overlapped the hero and the footer) are left to the larger screens. */
@media (max-width:767px){
 .fh-about{margin:var(--fh-gutter)}
 body:has(.fh-about) .fh-footer{margin-top:0}
 .fh-about-box,.fh-about-box.fh-about-small{padding-left:24px;padding-right:24px}
 .fh-about-fernanda{clip-path:polygon(0 0,100% 0,100% calc(100% - 18.5px),calc(100% - 18.5px) 100%,0 100%)}
 .fh-about-sitetoaster{clip-path:polygon(0 0,calc(100% - 18.5px) 0,100% 18.5px,100% 100%,0 100%)}
 .fh-about-software{clip-path:polygon(0 0,100% 0,100% 100%,18.5px 100%,0 calc(100% - 18.5px))}
 .fh-about-oitoronto{clip-path:polygon(18.5px 0,100% 0,100% 100%,0 100%,0 18.5px)}
}
/* Phones: a light grey band around the homepage boxes, so the inset and the cuts show next to the white SiteToaster box;
   the OiToronto box gets a slightly deeper grey to stand out from it. */
@media (max-width:767px){
 .fh-about{margin:0;padding:var(--fh-gutter);background:#FFFFFF}
 .fh-about-sitetoaster{background:#F4F4F6}
}
/* Phones: the homepage boxes go edge to edge and touch each other (no band around them); the side cuts stay, and the text
   lines up with the page gutter. */
@media (max-width:767px){
 .fh-about{padding:0}
 .fh-about-box,.fh-about-box.fh-about-small{padding-left:var(--fh-gutter);padding-right:var(--fh-gutter)}
}
/* Phones: a cut at every join, alternating sides: right (Fernanda/SiteToaster), left (SiteToaster/Software),
   right (Software/OiToronto) and left (OiToronto/footer). */
@media (max-width:767px){
 .fh-about-sitetoaster,.fh-about-oitoronto{clip-path:polygon(0 0,calc(100% - 18.5px) 0,100% 18.5px,100% 100%,18.5px 100%,0 calc(100% - 18.5px))}
 .fh-about-software{clip-path:polygon(18.5px 0,100% 0,100% calc(100% - 18.5px),calc(100% - 18.5px) 100%,0 100%,0 18.5px)}
 body:has(.fh-about) .fh-footer{clip-path:polygon(0 18.5px,18.5px 0,100% 0,100% 100%,0 100%)}
}
/* Get a website, phones: the same padding at the top and bottom of each section; the features end 16px under the boxes, like the
   sides. The hero illustration sits a little lower under the header. */
@media (max-width:767px){
 .st-page .st section,.st-page .st .st-work{padding-top:1.75em;padding-bottom:1.75em}
 .st-page .st .st-features{padding-bottom:var(--fh-gutter)}
 .st-page .st .st-hero{padding-top:40px}
}
/* Phones: the feature boxes sit closer to the Features title, and the hero button closer to the text above it. */
@media (max-width:767px){
 .st-features .st-head{margin-bottom:.9em}
 .st-page .st-hero .st-btn{margin-top:1.2em}
 .st-page .st .st-hero h1{margin-bottom:.12em}
}
/* Phones: tighter spacing around the plans note and the What we do button; the What we do illustration sits a little lower. */
@media (max-width:767px){
 .st-plans-note{margin-top:1.4em}
 .st-page .st-what .st-btn{margin-top:1.2em}
 .st-what .st-art{margin-top:16px}
}
/* Phones: the plan tabs sit close to the Plans title, and tapping a tab shows no highlight (the blue tap flash phones add). */
@media (max-width:767px){
 .st-pricing .st-head{margin-bottom:1.4em}
 .st-plan-tabs button,.st-plan-tabs button:hover,.st-plan-tabs button:focus,.st-plan-tabs button:active{-webkit-tap-highlight-color:transparent;border:0 !important;box-shadow:none !important;outline:none !important}
}
.st-page .st-plan-amount{font-weight:500}
/* Phones: the FAQ questions sit closer to their title. */
@media (max-width:767px){.st-faq .st-split{gap:1.6em}}
@media (max-width:767px){.st-work .st-head{margin-bottom:1.4em}}
@media (max-width:767px){.fh-footer-inner{padding-top:3.5em}}
@media (max-width:767px){.st-what .st-split{gap:2em}}
/* Get a website hero: a larger subtitle, closer to the title. */
.st-page .st-hero .st-lead{font-size:clamp(22px,2vw,34px);line-height:1.3;text-wrap:balance}
.st-page .st .st-hero h1{margin-bottom:.2em}
@media (max-width:767px){.st-page .st .st-hero h1{margin-bottom:.12em}}
/* Current page in the menus: not a link; no arrow, just an orange underline. */
.fp-links a[aria-current="page"],.fh-hero-links a[aria-current="page"],.fh-menu-links a[aria-current="page"]{text-decoration:underline !important;text-decoration-color:#FF5D00 !important;text-decoration-thickness:2px !important;text-underline-offset:.25em;cursor:default}
.fh-menu-links a[aria-current="page"]{text-decoration-thickness:3px !important;text-underline-offset:.15em}
.fp-links a[aria-current="page"]::after,.fh-hero-links a[aria-current="page"]::after,.fh-menu-links a[aria-current="page"]::before,.fh-menu-links a[aria-current="page"]::after{display:none !important}
/* Side menu on desktop: the logo's top lines up with the close button's top (24px). */
@media (min-width:768px){
 .fh-menu-logo{top:24px}
 dialog.fh-menu:has(.fh-menu-logo){padding-top:calc(24px + clamp(72px,6vw,88px) + 28px)}
}
/* SiteToaster logo at the end of the hero title: as tall as the lowercase letters (the s) and sitting on the baseline. */
.st-hero-mark{display:inline-block;width:auto;height:.54em;margin-left:.06em;vertical-align:baseline}
/* Get a website hero: the SiteToaster logo sits in its own narrow column between the text and the illustration, the title
   starts a little below the top of the illustration, and a blue strip with the main selling points closes the hero. */
.st-hero-brand{display:block;width:clamp(64px,6vw,96px);height:auto}
@media (min-width:1025px){
 .st-hero-grid{grid-template-columns:1.1fr auto .9fr;align-items:start;gap:3em}
 .st-hero-grid > div:first-child{padding-top:2.5em}
 .st-hero-brand{align-self:center}
}
@media (max-width:1024px){
 .st-hero-grid > div:first-child{order:1}
}
.st-page .st .st-hero{padding-bottom:0}
/* The strip is solid orange with large white text scrolling sideways like a marquee (the list is doubled so the loop is seamless). */
.st-hero-strip{margin:4em 0 0;padding:.45em 0;overflow:hidden;background:#FF5D00;color:#FFFFFF}
.st-strip-track{display:flex;width:max-content;animation:st-strip 30s linear infinite}
.st-strip-track ul{display:flex;flex:none;margin:0;padding:0;list-style:none}
.st-strip-track li{display:flex;align-items:center;gap:.5em;padding-right:.5em;font-size:clamp(34px,4.6vw,76px);font-weight:600;line-height:1.15;letter-spacing:-.01em;white-space:nowrap}
.st-strip-track li::after{content:"";flex:none;width:.22em;height:.22em;border-radius:50%;background:#FFFFFF}
@keyframes st-strip{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.st-strip-track{animation:none}}
.st-page .st .st-hero{padding-bottom:0}
@media (max-width:767px){
 .st-page .st .st-hero{padding-bottom:0}
 .st-hero-strip{margin-top:2.5em}
}
/* Starter and Business sign-up buttons: solid blue instead of black (the hover still fills with orange from the bottom). */
.st-page .st-plan-starter .st-btn-fill,.st-page .st-plan.site-plan-extra .st-btn-fill{background:#1223E6;border-color:#1223E6;color:#FFFFFF}
/* Hero title in capitals, with the SiteToaster logo back after "Websites", as tall as the capital S. The logo column is gone,
   so the hero goes back to two columns. */
.st-page .st .st-hero h1{text-transform:uppercase}
.st-hero-mark{height:.72em}
@media (min-width:1025px){.st-hero-grid{grid-template-columns:1.1fr .9fr;gap:4em}}
.st-page .st .st-hero h1{font-size:min(clamp(52px,7vw,110px),calc((100vw - 32px) / 6.8))}
/* Plan sign-up buttons (all three): the hover fill is orange instead of blue. */
.st-page .st-plan .st-btn-fill::before{background:#FF5D00}
.st-page .st-plan .st-btn-fill:hover,.st-page .st-plan .st-btn-fill:focus-visible{color:#FFFFFF !important;border-color:#FF5D00 !important}
/* Hero strip, wavy version (built by site.js): thin white text riding a wave, blue dots, sliding sideways. The plain list stays
   as the fallback without JavaScript and for screen readers. */
.st-hero-strip.is-wave{padding:0}
.st-hero-strip.is-wave .st-strip-track{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);animation:none}
.st-strip-wave{display:block;height:clamp(84px,8vw,140px);width:calc(clamp(84px,8vw,140px) * var(--st-strip-ratio,20));fill:#FFFFFF;font-family:"Inter Tight",Sans-serif;font-weight:200;letter-spacing:-.01em;animation:st-strip 60s linear infinite}
.st-strip-wave .st-strip-dot{fill:#1223E6;font-weight:700}
@media (prefers-reduced-motion:reduce){.st-strip-wave{animation:none}}
/* Hero strip, inverted: a blue ribbon that waves along with the text, white thin text, orange dots; no flat background. */
.st-hero-strip.is-wave{background:none}
.st-strip-band{fill:none;stroke:#1223E6;stroke-width:100}
.st-strip-wave .st-strip-dot{fill:#FF5D00}
.st-strip-wave{height:clamp(96px,9vw,160px);width:calc(clamp(96px,9vw,160px) * var(--st-strip-ratio,20))}
/* Hero strip: the wave stays still and only the text slides along it (animated in site.js). */
.st-strip-wave{animation:none}
/* Hero subtitle: tighter line spacing. */
.st-page .st-hero .st-lead{line-height:1.15}
/* Hero strip sits on the border between the hero and What we do: half over each section. The next section gets the same
   extra space at the top so its content does not move under the ribbon. */
.st-hero-strip.is-wave{position:relative;z-index:2;margin-bottom:calc(clamp(96px,9vw,160px) / -2)}
.st-page .st .st-hero{overflow:visible}
.st-page .st .st-hero + .st-what{padding-top:calc(5em + clamp(96px,9vw,160px) / 2)}
@media (max-width:767px){.st-page .st .st-hero + .st-what{padding-top:calc(1.75em + clamp(96px,9vw,160px) / 2)}}
/* ===== Get a website: new hero and What we do (no illustrations), after the bold colour-block ads Fernanda likes, kept sober
   like the homepage. The hero is a full-width blue block: a thin top line (brand ____ price), the title in white with a
   short orange rule before its second line, three orange chevrons fading in from the blue, the subtitle with the buttons,
   and the SiteToaster lockup at the bottom right. ===== */
.st-page .st .st-hero-v2{padding:clamp(28px,3vw,48px) 0 clamp(32px,4vw,64px);overflow:hidden;background:linear-gradient(135deg,#1223E6 0%,#150773 100%);color:#FFFFFF}
.st-hero-v2 .st-rule{flex:1;min-width:2em;height:1px;background:currentColor;opacity:.55}
.st-hero-top{display:flex;align-items:center;gap:.8em;margin:0 0 clamp(36px,5vw,80px);font-size:clamp(16px,1.3vw,22px);font-weight:500;line-height:1.2}
.st-hero-body{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(24px,4vw,64px)}
.st-page .st .st-hero-v2 h1{margin:0;color:#FFFFFF}
.st-h1-second{display:inline-flex;align-items:center;gap:.22em}
.st-h1-second .st-rule{flex:none;width:1.3em;min-width:0;height:.07em;background:#FF5D00;opacity:1}
.st-hero-shapes{display:flex;justify-content:flex-end;height:clamp(150px,17vw,280px)}
.st-hero-shapes span{flex:none;height:100%;aspect-ratio:.72;clip-path:polygon(0 0,52% 0,100% 50%,52% 100%,0 100%,48% 50%);background:linear-gradient(90deg,rgba(255,93,0,0) 0%,rgba(255,93,0,.9) 70%,#FF5D00 100%)}
.st-hero-shapes span + span{margin-left:-18%}
.st-hero-shapes span:first-child{background:linear-gradient(90deg,rgba(255,93,0,.35) 0%,#FF5D00 60%)}
.st-hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:2em 4em;margin-top:clamp(36px,5vw,80px)}
.st-page .st-hero-v2 .st-lead{max-width:24em;margin:0;color:rgba(255,255,255,.85);font-size:clamp(20px,1.7vw,28px);line-height:1.25;text-wrap:balance}
.st-hero-v2 .st-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2vw,32px)}
.st-page .st-hero-v2 .st-btn{margin-top:0;border-color:rgba(255,255,255,.5);color:#FFFFFF}
.st-page .st-hero-v2 .st-btn::before{background:#FFFFFF}
.st-page .st-hero-v2 .st-btn:hover,.st-page .st-hero-v2 .st-btn:focus-visible{border-color:#FFFFFF;color:#2B2B2B}
.st-page .st-hero-v2 .st-btn-accent{background:#FF5D00;border-color:#FF5D00}
.st-hero-lockup{display:flex;align-items:flex-end;gap:.9em;flex:0 1 22em;margin:0;font-size:clamp(16px,1.2vw,20px);font-weight:500;line-height:1.15}
.st-hero-lockup img{flex:none;width:clamp(56px,4.6vw,76px);height:auto}
.st-hero-lockup .st-rule{align-self:flex-end;margin-bottom:.35em}
@media (max-width:1024px){
 .st-hero-body{grid-template-columns:1fr}
 .st-hero-shapes{justify-content:flex-start;height:clamp(120px,22vw,200px)}
 .st-hero-foot{flex-direction:column;align-items:stretch}
}
@media (max-width:767px){
 .st-page .st .st-hero-v2{padding:24px 0 32px}
 .st-hero-top{font-size:15px}
}
/* What we do: sober grey section; title on the left, text on the right, then three key numbers in boxes that touch
   (blue gradient, dark, white) with one V cut where the first two meet. */
.st-page .st .st-hero-v2 + .st-what{padding-top:5em}
@media (max-width:767px){.st-page .st .st-hero-v2 + .st-what{padding-top:1.75em}}
.st-what-head{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,4vw,64px);align-items:start}
.st-page .st .st-what-v2 h2{margin:0}
.st-what-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(40px,5vw,72px) 0 0;padding:0;list-style:none;--n:18.5px}
.st-what-stats li{display:flex;flex-direction:column;justify-content:flex-end;gap:.6em;min-height:clamp(170px,15vw,230px);padding:clamp(24px,2.5vw,40px);background:#FFFFFF;color:#2B2B2B}
.st-what-stats li:nth-child(1){background:radial-gradient(120% 90% at 100% 100%,rgba(255,93,0,.9),rgba(255,93,0,0) 60%),linear-gradient(135deg,#1223E6 0%,#150773 100%);color:#FFFFFF}
.st-what-stats li:nth-child(2){background:#2B2B2B;color:#FFFFFF}
.st-what-stats strong{font-size:clamp(36px,3.6vw,60px);font-weight:600;line-height:1;letter-spacing:-.02em}
.st-what-stats li:nth-child(3) strong{color:#1223E6}
.st-what-stats span{max-width:18em;font-size:clamp(16px,1.2vw,19px);line-height:1.35;opacity:.8}
.st-what-v2 > .st-wrap > .st-btn{margin-top:clamp(28px,3vw,44px)}
@media (min-width:768px){
 .st-what-stats li:nth-child(1){clip-path:polygon(0 0,calc(100% - var(--n)) 0,100% var(--n),100% 100%,0 100%)}
 .st-what-stats li:nth-child(2){clip-path:polygon(var(--n) 0,100% 0,100% 100%,0 100%,0 var(--n))}
}
@media (max-width:767px){
 .st-what-head{grid-template-columns:1fr;gap:1em}
 .st-what-stats{grid-template-columns:1fr;margin-top:28px}
 .st-what-stats li{min-height:0}
 .st-what-stats li:nth-child(1){clip-path:polygon(0 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,0 100%)}
 .st-what-stats li:nth-child(2){clip-path:polygon(0 0,calc(100% - var(--n)) 0,100% var(--n),100% 100%,0 100%)}
}
/* Hero and What we do fixes: the lockup does not stretch when the foot stacks; the title lines keep the tight line height;
   more room under the top line on phones; the numbers in the boxes line up at the top. */
@media (max-width:1024px){.st-hero-lockup{flex:none}}
.st-h1-second{line-height:inherit;vertical-align:top}
@media (max-width:767px){.st-hero-top{margin-bottom:28px}.st-hero-foot{margin-top:28px}}
.st-what-stats li{justify-content:flex-start}
.st-page .st .st-hero-v2 .st-hero-top{margin:0 0 clamp(28px,4.5vw,72px)}
.st-page .st .st-hero-v2 .st-hero-lockup{margin:0}
/* What we do: four separate boxes (with gaps, rounded like the plan cards), the selling points that used to run in the strip. */
.st-what-stats{grid-template-columns:repeat(4,1fr);gap:16px}
.st-what-stats li{clip-path:none !important;border-radius:24px}
@media (max-width:1024px){.st-what-stats{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.st-what-stats{grid-template-columns:1fr;gap:12px}}
.st-what-stats li:nth-child(4){background:#FF5D00;color:#FFFFFF}
/* What we do boxes: one selling point each, set large, sitting at the bottom of the box. */
.st-what-stats li{justify-content:flex-end}
.st-what-stats strong{font-size:clamp(26px,2.3vw,38px);font-weight:500;line-height:1.1;letter-spacing:-.01em;white-space:normal}
/* What we do: three boxes only (the price is already in the hero): blue gradient, dark, orange. */
.st-what-stats{grid-template-columns:repeat(3,1fr)}
.st-what-stats li:nth-child(3){background:#FF5D00;color:#FFFFFF}
.st-what-stats li:nth-child(3) strong{color:#FFFFFF}
@media (max-width:767px){.st-what-stats{grid-template-columns:1fr}}
/* Hero title in sentence case (the first version of this hero otherwise). */
.st-page .st .st-hero-v2 h1{text-transform:none}
/* Hero: the subtitle and buttons sit closer to the title. */
.st-page .st .st-hero-v2 .st-hero-foot{margin-top:clamp(16px,2vw,32px)}
.st-hero-v2 .st-hero-body{align-items:end}
/* Footer pills fill with orange on hover (text stays white). */
.fh-footer-pills a::before{background:#FF5D00}
.fh-footer-pills a:hover,.fh-footer-pills a:focus-visible{border-color:#FF5D00;color:#FFFFFF}
/* Hero: the title is centred on the chevrons, which are about as tall as the two title lines. */
.st-hero-v2 .st-hero-body{align-items:center}
.st-hero-shapes{--h:clamp(120px,22vw,200px);height:var(--h)}
@media (min-width:1025px){.st-hero-shapes{--h:clamp(150px,14vw,230px)}}
.st-hero-shapes span + span{margin-left:calc(var(--h) * -.36)}
.st-hero-top,.st-hero-lockup{font-weight:400}
.st-page .st-hero-v2 .st-lead{max-width:22em;font-size:clamp(22px,2.2vw,36px);line-height:1.2}
.st-what-head > div{max-width:34em}
@media (min-width:768px){dialog.fh-menu:not(:has(.fh-menu-logo)){padding-top:24px}dialog.fh-menu:not(:has(.fh-menu-logo)) > .fh-menu-label{padding-top:0}}
@media (min-width:768px){dialog.fh-menu:not(:has(.fh-menu-logo)) > .fh-menu-label{margin-right:calc(var(--fh-u) * 4.2 + 36px - var(--m))}}
/* Side menu on desktop: the close button stays where it was (24px from the top and side); the logo, or the Navigation label on
   pages without a logo, starts at the top of the X drawn inside it, so they line up by their tops. */
@media (min-width:768px){
 dialog.fh-menu{--x-top:calc(24px + (var(--fh-u) * 4.2 - 30px) / 2)}
 .fh-menu-logo{top:var(--x-top)}
 dialog.fh-menu:has(.fh-menu-logo){padding-top:calc(var(--x-top) + clamp(72px,6vw,88px) + 28px)}
 dialog.fh-menu:not(:has(.fh-menu-logo)){padding-top:var(--x-top)}
}
@media (max-width:767px){.st-what-stats br{display:none}}
/* Side menu on phones: Navigation starts at the top of the close X (same as the logo on the SiteToaster pages), with its line
   stopping before the button; on the SiteToaster pages it sits closer under the logo. */
@media (max-width:767px){
 dialog.fh-menu:not(:has(.fh-menu-logo)){padding-top:var(--m)}
 dialog.fh-menu:not(:has(.fh-menu-logo)) > .fh-menu-label{padding-top:0;margin-right:44px}
 dialog.fh-menu:has(.fh-menu-logo){padding-top:calc(var(--m) + 72px + 20px)}
}
@media (max-width:767px){.st-page .st-plan .st-btn{margin-top:1.2em}}
.st-page .st-faq-a,.st-page .st-faq-a p{line-height:1.4}
.st-page .st-faq-q{line-height:1.2}
/* Hero lockup: the SiteToaster logo a little smaller on desktop. */
@media (min-width:1025px){.st-hero-lockup img{width:clamp(50px,4vw,64px)}}
/* Hero shapes: four half discs overlapping like the old arrows, each fading in from transparent to orange. */
.st-hero-shapes span{width:calc(var(--h) * .5);aspect-ratio:auto;clip-path:none;border-radius:0 999px 999px 0}
.st-hero-shapes span + span{margin-left:calc(var(--h) * -.18)}
/* About: the same blue hero as Get a website, without the photo. */
.fp-hero{padding:clamp(28px,3vw,48px) 0 clamp(32px,4vw,64px);overflow:hidden;background:linear-gradient(135deg,#1223E6 0%,#150773 100%);color:#FFFFFF;letter-spacing:.2px}
.fp-hero-wrap{max-width:calc(1440px + 64px);margin:0 auto;padding:0 32px;box-sizing:border-box}
.fp-hero .st-hero-top{margin:0 0 clamp(28px,4.5vw,72px)}
.fp-hero h1{margin:0;color:#FFFFFF;font-size:min(clamp(52px,7vw,110px),calc((100vw - 32px) / 6.8));font-weight:500;line-height:.98;letter-spacing:-.01em}
.fp-hero .st-hero-foot{margin-top:clamp(16px,2vw,32px)}
.fp-hero .fp-intro{max-width:30em;color:rgba(255,255,255,.85);font-size:clamp(20px,1.7vw,28px);line-height:1.3}
@media (max-width:767px){
 .fp-hero{padding:24px 0 32px}
 .fp-hero-wrap{padding:0 16px}
 .fp-hero .st-hero-top{margin-bottom:28px}
 .fp-hero .st-hero-foot{margin-top:16px}
}
/* About: no divider right under the blue hero. */
.fp-main .fp > .fp-section:first-child{border-top:0}
.fp-hero .st-hero-top > span:not(.st-rule){white-space:nowrap}
.fp-hero .st-hero-top .st-rule{min-width:1em}
/* About hero: colours swapped (orange background, blue half discs, blue title rule), and the half discs face the other way. */
.fp-hero{background:linear-gradient(135deg,#FF5D00 0%,#F04A00 100%)}
.fp-hero .st-h1-second .st-rule{background:#1223E6}
.fp-hero .st-hero-shapes{justify-content:flex-start;transform:scaleX(-1)}
.fp-hero .st-hero-shapes span{background:linear-gradient(90deg,rgba(18,35,230,0) 0%,rgba(18,35,230,.9) 70%,#1223E6 100%)}
.fp-hero .st-hero-shapes span:first-child{background:linear-gradient(90deg,rgba(18,35,230,.35) 0%,#1223E6 60%)}
.fp-hero .fp-intro{color:#FFFFFF}
@media (max-width:1024px){.fp-hero .st-hero-shapes{justify-content:flex-end}}
/* Inner pages with a coloured hero: the header takes the hero's colour (orange on About, blue on Get a website), with a
   white logo, white menu text and the language pill outlined in white. */
body:has(.fp-hero) .fp-nav{background:#FF5D00}
.st-page:has(.st-hero-v2) .fp-nav{background:#1223E6}
body:has(.fp-hero) .fp-nav .fp-logo img,.st-page:has(.st-hero-v2) .fp-nav .fp-logo img{filter:brightness(0) invert(1)}
body:has(.fp-hero) .fp-nav .fp-links a,.st-page:has(.st-hero-v2) .fp-nav .fp-links a{color:#FFFFFF}
body:has(.fp-hero) .fp-nav .fp-lang,.st-page:has(.st-hero-v2) .fp-nav .fp-lang{border-color:rgba(255,255,255,.6)}
body:has(.fp-hero) .fp-nav .fp-lang:hover,body:has(.fp-hero) .fp-nav .fp-lang:focus-visible,.st-page:has(.st-hero-v2) .fp-nav .fp-lang:hover,.st-page:has(.st-hero-v2) .fp-nav .fp-lang:focus-visible{background:#FFFFFF;border-color:#FFFFFF;color:#2B2B2B}
/* On the orange header the hover arrow box and the current page underline turn blue; on the blue header the round menu
   button fills orange on hover instead of blue. */
body:has(.fp-hero) .fp-nav .fp-links a::after{background-color:#1223E6}
body:has(.fp-hero) .fp-nav .fp-links a[aria-current="page"]{text-decoration-color:#1223E6 !important}
.st-page:has(.st-hero-v2) .fp-nav .st-nav-menu::after{background:#FF5D00}
/* Header and hero share one horizontal gradient, so the header runs into the hero without a seam. */
body:has(.fp-hero) .fp-nav,body .fp-hero{background:linear-gradient(90deg,#FF5D00 0%,#C42F00 100%)}
.st-page:has(.st-hero-v2) .fp-nav,.st-page .st .st-hero-v2{background:linear-gradient(90deg,#1223E6 0%,#150773 100%)}
/* Header logo a little smaller on desktop, on the inner pages and the homepage. */
@media (min-width:768px){.fp-logo img,.fh-hero-logo img{height:1.4em}}
/* Heroes of About and Get a website: more space at the bottom. */
.st-page .st .st-hero-v2,body .fp-hero{padding-bottom:clamp(64px,8vw,128px)}
@media (max-width:767px){.st-page .st .st-hero-v2,body .fp-hero{padding-bottom:56px}}
/* Homepage logo keeps its top at the same height as the menu, like the inner pages. */
@media (min-width:768px){.fh-hero-logo{align-self:flex-start;align-items:flex-start}}
/* SiteToaster section menu: the orange comes in from the middle of the bar. */
.st-subnav{background-image:radial-gradient(60% 260% at 100% 100%,rgba(255,93,0,.9),rgba(255,93,0,0) 85%),linear-gradient(100deg,#1223E6 0%,#150773 100%)}
/* Heroes of About and Get a website: entrance animation on load. The top line fades in and its rule draws from the left,
   the title lines rise in one after the other and the title rule draws, the half discs slide in one by one and then keep
   drifting together and back slowly, and the text, buttons and logo below fade up last. */
@media (prefers-reduced-motion:no-preference){
 .st-hero-v2{--ease:cubic-bezier(.3,.86,.36,.95)}
 .st-hero-v2 .st-hero-top > span:not(.st-rule){animation:hero-fade .8s var(--ease) .1s both}
 .st-hero-v2 .st-hero-top .st-rule{transform-origin:left center;animation:hero-draw 1.2s var(--ease) .2s both}
 .st-hero-v2 h1 > .st-nowrap:first-child{display:inline-block;animation:hero-rise 1s var(--ease) .15s both}
 .st-hero-v2 h1 > .st-h1-second{animation:hero-rise 1s var(--ease) .3s both}
 .st-hero-v2 .st-h1-second .st-rule{transform-origin:left center;animation:hero-draw .9s var(--ease) .6s both}
 .st-hero-shapes span:nth-child(1){--i:0}
 .st-hero-shapes span:nth-child(2){--i:1}
 .st-hero-shapes span:nth-child(3){--i:2}
 .st-hero-shapes span:nth-child(4){--i:3}
 .st-hero-shapes span{animation:hero-shape-in 1s var(--ease) both,hero-shape-drift 5s ease-in-out infinite alternate;animation-delay:calc(.35s + var(--i) * .12s),calc(1.6s + var(--i) * .12s)}
 .st-hero-v2 .st-hero-foot > *{animation:hero-rise-soft .9s var(--ease) .6s both}
 .st-hero-v2 .st-hero-foot > .st-hero-lockup{animation-delay:.75s}
}
@keyframes hero-fade{from{opacity:0}}
@keyframes hero-draw{from{transform:scaleX(0)}}
@keyframes hero-rise{from{opacity:0;transform:translateY(.35em)}}
@keyframes hero-rise-soft{from{opacity:0;transform:translateY(24px)}}
@keyframes hero-shape-in{from{opacity:0;transform:translateX(calc(var(--h) * -.4))}}
@keyframes hero-shape-drift{to{transform:translateX(calc(var(--h) * .05 * (var(--edge) - var(--i))))}}
/* The half disc on the container edge (--edge) stays put and the others drift towards it, so the group never leaves the margins. */
.st-hero-shapes{--edge:3}
.fp-hero .st-hero-shapes{--edge:0}
@media (max-width:1024px){.st-hero-shapes{--edge:0}.fp-hero .st-hero-shapes{--edge:3}}
/* Get a website: the orange half discs face inwards too (towards the title) and move like the ones on About. */
.st-page .st-hero-v2 .st-hero-shapes{justify-content:flex-start;transform:scaleX(-1);--edge:0}
@media (max-width:1024px){.st-page .st-hero-v2 .st-hero-shapes{justify-content:flex-end;--edge:3}}
/* Side menu: the current page is shown in orange text, without the arrow or the underline. */
.fh-menu-links a[aria-current="page"]{color:#FF5D00 !important;text-decoration:none !important}
/* SiteToaster section menu: instead of underlining the current section, a loading bar runs under the section links, from the
   first to the last. A faint track shows the whole way and the orange bar fills it as the sections are read (site.js sets the
   positions). The current section stays white. */
.st-subnav a.is-current::after{transform:scaleX(0)}
.st-subnav::before,.st-subnav::after{content:"";position:absolute;bottom:0;left:var(--st-bar-left,0);height:2px;pointer-events:none}
.st-subnav::before{width:var(--st-bar-track,0);background:rgba(255,255,255,.25)}
.st-subnav::after{width:var(--st-bar-width,0);background:#FF5D00;transition:width .15s linear}
/* About, phones: tighter spacing. Experience sits higher under the hero, its content starts closer to the heading, the divider
   before Education has 24px on each side, and the space under the last card equals the side margins (16px). */
@media (max-width:767px){
 .fp-main .fp > .fp-section{padding:24px 0 0}
 .fp-main .fp > .fp-section:first-child{padding-top:32px}
 .fp-main .fp-section h2{margin-bottom:12px}
 .fp-main .fp-list:not(.fp-cards) > .fp-item:first-child{padding-top:0}
 .fp-main .fp-list:not(.fp-cards) > .fp-item:last-child{padding-bottom:24px}
 .fp-main .fp-cards{padding:0 0 var(--fh-gutter)}
}
/* About hero (orange), phones: 32px under the intro text. */
@media (max-width:767px){body .fp-hero{padding-bottom:32px}}
/* Phones: the hero shapes run across the full content width (inside the 16px side margins), sized so the four half discs fill
   the width (each is .5h wide and overlaps the previous by .18h, so the row is 1.46h). */
@media (max-width:767px){
 .st-hero-v2 .st-hero-shapes{--h:calc((100vw - var(--fh-gutter) * 2) / 1.46)}
 .st-page .st .st-hero-v2{padding-bottom:32px}
}
/* Phones: every popup (contact form, terms, proposal) fills the whole screen, with no rounded corners. The terms scroll with
   the popup itself instead of inside a box; the Cancel / Accept buttons stay pinned to the bottom of the screen. */
@media (max-width:767px){
 dialog.fh-contact,dialog.terms-modal,dialog.proposal-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
 dialog.fh-contact{padding:72px var(--fh-gutter) 40px}
 dialog.fh-contact .fh-contact-close{top:12px;right:4px}
 dialog.terms-modal{overflow-y:auto;overscroll-behavior:contain}
 dialog.terms-modal .terms-panel{height:auto;min-height:100%;padding:32px var(--fh-gutter) 0}
 dialog.terms-modal .terms-scroll{flex:none;overflow:visible;padding:0;border-radius:0;background:none}
 dialog.terms-modal .terms-scroll:focus-visible{outline:0}
 dialog.terms-modal .terms-actions{position:sticky;bottom:0;margin:auto calc(var(--fh-gutter) * -1) 0;padding:16px var(--fh-gutter);background:#FFFFFF;box-shadow:0 -1px 0 rgba(43,43,43,.12)}
 dialog.proposal-modal .elementor-widget-text-editor{padding:72px var(--fh-gutter) 48px}
}
/* The Terms popup (footer link) uses the same text size as the terms shown before signing up (17px). */
dialog.proposal-modal .elementor-widget-text-editor{font-size:17px !important}
dialog.proposal-modal .elementor-widget-text-editor p:not(.site-terms-version),dialog.proposal-modal .elementor-widget-text-editor li{font-size:inherit !important;line-height:1.5}
dialog.proposal-modal .site-terms-version{font-size:.85em !important;line-height:1.5}
/* Terms popup (footer link): the "Close" text only shows on phones, where the close button becomes a pill pinned to the bottom of
   the screen, like the Cancel / Accept bar of the signup terms. */
.proposal-close-text{display:none}
@media (max-width:767px){
 dialog.proposal-modal .elementor-widget-text-editor{padding-top:32px;padding-bottom:96px}
 dialog.proposal-modal .elementor-element-edc8ff3{top:auto !important;right:0 !important;bottom:0 !important;left:0 !important;display:flex;justify-content:flex-end;padding:16px var(--fh-gutter);background:#FFFFFF;box-shadow:0 -1px 0 rgba(43,43,43,.12)}
 dialog.proposal-modal .elementor-element-edc8ff3 .elementor-widget-container,dialog.proposal-modal .elementor-element-edc8ff3 .elementor-icon-wrapper{width:auto}
 dialog.proposal-modal .elementor-element-edc8ff3 .elementor-icon{width:auto;height:auto;padding:.8em 1.5em;border:1px solid #2B2B2B;border-radius:999px;font-family:"Inter Tight",Sans-serif;font-size:17px !important;line-height:1.2;transform:none !important}
 dialog.proposal-modal .elementor-element-edc8ff3 .elementor-icon::before,dialog.proposal-modal .elementor-element-edc8ff3 .elementor-icon::after{display:none}
 dialog.proposal-modal .proposal-close-text{display:inline;font-size:17px;line-height:1.2}
}
/* Get a website, phones: slightly wider client cards (270px → screen width minus 96px, 294px on a 390px phone), still leaving
   about 64px of the next card in view. */
@media (max-width:767px){.st-page .site-work-card{width:calc(100vw - 96px)}}
/* What we do, phones: the three highlights become a plain list instead of coloured boxes: an orange dot (8px in from the left) before each item and
   thin lines between them, like the FAQ. */
@media (max-width:767px){
 .st-what-stats{gap:0;margin-top:24px}
 .st-what-stats li,.st-what-stats li:nth-child(n){flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:14px;min-height:0;padding:18px 0 18px 8px;border-radius:0;border-top:1px solid rgba(43,43,43,.15);background:none;color:#2B2B2B;clip-path:none !important}
 .st-what-stats li:last-child{border-bottom:1px solid rgba(43,43,43,.15)}
 .st-what-stats li::before{content:"";flex:none;width:8px;height:8px;margin-top:10px;border-radius:50%;background:#FF5D00}
 .st-what-stats li strong,.st-what-stats li:nth-child(n) strong{color:#2B2B2B;font-size:22px;line-height:1.25}
}
/* Homepage boxes, tablets and desktop: the title lines are balanced (similar lengths, no single word left on the last line). */
@media (min-width:768px){.fh-about-title{text-wrap:balance}}
/* Hero shapes, phones: a little more space between the shapes and the text below, on About and Get a website. */
@media (max-width:767px){.st-page .st .st-hero-v2 .st-hero-foot,.fp-hero .st-hero-foot{margin-top:24px}}
/* Homepage hero, phones: the arrow, role and globe sit lower (2.6em from the bottom instead of 3.8em), further from the name;
   the globe stays centred on the last line of the role. */
@media (max-width:767px){
 .fh-hero-role{bottom:2.6em}
 .fh-hero-badge{bottom:calc(2.6em + 1.078em - 1.775em)}
}
/* Hero shapes: whole-pixel sizes and their own compositing layer, so the edges where the half discs overlap don't flicker as
   thin vertical lines while they drift (the phone size, worked out from the screen width, gave fractional pixels). */
.st-hero-shapes{height:round(var(--h),1px)}
.st-hero-shapes span{width:round(down,calc(var(--h) * .5),1px);will-change:transform;backface-visibility:hidden}
.st-hero-shapes span + span{margin-left:round(calc(var(--h) * -.18),1px)}
/* About, phones: the number boxes take the full width, one under the other. */
@media (max-width:767px){.fp-stats li{flex:1 1 100%}}
/* About, phones: bigger numbers and labels in the full-width boxes, alternating left and right (the corner cut follows the side). */
@media (max-width:767px){
 .fp-stats li{padding:20px 24px 22px}
 .fp-stats strong{font-size:40px}
 .fp-stats span{font-size:16px}
 .fp-stats li:nth-child(even){align-items:flex-end;text-align:right;clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px)}
}