/* The feature index shares the new salon pages' typography, space and colours. */
.features-overview { --fo-purple:#5147e5; --fo-ink:#101426; --fo-muted:#626b7d; color:var(--fo-ink); padding-bottom:95px; }
.features-overview *, .features-overview *::before, .features-overview *::after { box-sizing:border-box; min-width:0; }
.sv-page .fo-container { width:min(100% - 64px,1280px); margin-inline:auto; }
.features-overview h1, .features-overview h2, .features-overview h3, .features-overview h4 { margin:0; text-wrap:initial; }
.features-overview h2 { font-size:clamp(34px,3.5vw,50px); line-height:1.12; letter-spacing:-.05em; font-weight:780; }
.features-overview em { color:var(--fo-purple); font-style:normal; }
.features-overview p { color:var(--fo-muted); }
.features-overview .fo-eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 20px; color:var(--fo-purple); font-size:10px; font-weight:750; line-height:1.5; letter-spacing:.1em; text-transform:uppercase; }
.fo-hero { padding:78px 0 62px; text-align:center; }
.fo-hero .fo-eyebrow { justify-content:center; }
.fo-hero .fo-eyebrow > span { width:7px; height:7px; border-radius:50%; background:#8174e8; box-shadow:0 0 0 5px #f0edfd; }
.sv-page .fo-hero h1 { max-width:1120px; margin:auto; font-size:clamp(45px,5.3vw,76px); line-height:1.06; letter-spacing:-.06em; font-weight:820; }
.features-overview .fo-lead { max-width:620px; margin:25px auto 30px; font-size:18px; line-height:1.8; }
.fo-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:15px; }
.fo-secondary { display:inline-flex; justify-content:center; align-items:center; gap:18px; padding:15px 21px; min-height:56px; border-radius:13px; border:1px solid #dfdce9; font-size:14px; font-weight:650; }
.fo-secondary > .sv-icon { width:19px; height:19px; color:var(--fo-purple); }
.fo-secondary:hover { background:#f7f5fd; border-color:#bdb3e6; }
.features-overview .fo-hero-note { display:flex; align-items:center; justify-content:center; gap:7px; font-size:11px; line-height:1.7; margin:20px 0 0; }
.fo-hero-note > .sv-icon { color:#688b73; width:15px; height:15px; flex-shrink:0; }
.features-overview .fo-link { display:inline-flex; align-items:center; gap:10px; color:var(--fo-purple); font-size:13px; font-weight:700; line-height:1.5; }
.fo-link > .sv-icon { width:18px; height:18px; flex-shrink:0; }
.fo-link:hover { text-decoration:underline; text-underline-offset:4px; }
.features-overview a:focus-visible, .features-overview button:focus-visible, .fo-workflow-panel:focus-visible { outline:3px solid var(--fo-purple); outline-offset:4px; }
.fo-workflow { padding:35px; border:1px solid #e9e5f3; background:linear-gradient(120deg,#f7f5fd,#f2f0f9); border-radius:30px; scroll-margin-top:110px; }
.fo-workflow-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding:2px 5px 28px; }
.fo-workflow-heading .fo-eyebrow { margin-bottom:11px; }
.features-overview .fo-workflow-heading h2 { font-size:27px; letter-spacing:-.035em; line-height:1.2; }
.fo-workflow-heading > p { max-width:300px; margin:0; font-size:12px; line-height:1.7; }
.fo-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:6px; border:1px solid #e6e1ef; border-radius:16px; background:#ffffffb8; }
.fo-tabs[hidden], .fo-workflow-panel[hidden] { display:none; }
.fo-tabs button { display:flex; align-items:center; justify-content:flex-start; gap:11px; border:0; padding:15px 17px; border-radius:10px; font:inherit; font-size:12px; font-weight:650; line-height:1.5; background:transparent; color:#736c82; cursor:pointer; }
.fo-tabs button > .sv-icon { width:18px; height:18px; flex-shrink:0; }
.fo-tabs button[aria-selected=true] { background:var(--fo-purple); color:#fff; box-shadow:0 5px 12px #5147e519; }
.fo-tabs button:hover:not([aria-selected=true]) { background:#eeebf7; color:#5147e5; }
.fo-tab-arrow { margin-left:auto; color:#a69cb8; }.fo-tabs button:last-child .fo-tab-arrow { visibility:hidden; }.fo-tabs button[aria-selected=true] .fo-tab-arrow { color:#d5d0fc; }
.fo-workflow-panel { display:grid; grid-template-columns:.77fr 1.23fr; gap:45px; align-items:center; padding:38px 0 5px; min-height:520px; }
.fo-workflow-panel + .fo-workflow-panel { margin-top:35px; border-top:1px solid #ded8eb; }
.fo-tabs:not([hidden]) ~ .fo-workflow-panel { margin-top:0; border:0; }
.fo-story { padding:10px 0 20px 5px; }
.fo-plan-tag { display:inline-block; padding:5px 8px; border:1px solid #ddd7e8; border-radius:6px; background:#ffffffb8; color:#7a7087; font-size:9px; line-height:1.5; font-weight:550; }
.fo-story > .fo-plan-tag { margin-bottom:23px; }
.fo-story h3 { font-size:clamp(25px,2.5vw,35px); line-height:1.17; letter-spacing:-.045em; font-weight:740; }
.fo-story > p { font-size:14px; line-height:1.85; margin:21px 0; }
.fo-story-result { display:flex; align-items:flex-start; gap:10px; padding-top:20px; margin-top:24px; border-top:1px solid #dfdaea; font-size:12px; line-height:1.7; }
.fo-story-result > .sv-icon { width:17px; height:17px; flex-shrink:0; color:#8271c2; margin-top:1px; }.fo-story-result strong { font-weight:600; }
.fo-story .fo-link { margin-top:23px; font-size:12px; }
.fo-product { margin:0; width:100%; }.fo-panel-kassa .fo-product { max-width:520px; justify-self:center; }
.fo-window { border:1px solid #dfdae9; border-radius:14px; box-shadow:0 18px 40px #3428520b; background:#fff; overflow:hidden; }
.fo-window-bar { display:flex; align-items:center; gap:18px; padding:14px 17px; border-bottom:1px solid #ece9f2; background:#fdfcff; font-size:10px; color:#81798f; }
.fo-window-bar > span:not(.fo-window-dots) { display:flex; align-items:center; gap:8px; }.fo-window-bar b { font-weight:400; color:#d6d0df; padding-inline:3px; }.fo-window-bar small { margin-left:auto; font-size:8px; color:#a79bb6; }
.fo-window-dots { display:flex; gap:4px; }.fo-window-dots i { width:5px; height:5px; background:#dad3e6; border-radius:50%; }
.fo-frame { position:relative; width:100%; height:390px; overflow:hidden; background:#fff; }
.fo-frame iframe { position:absolute; inset:0 auto auto 0; border:0; transform-origin:top left; pointer-events:none; user-select:none; }
.fo-product figcaption { font-size:9px; line-height:1.7; text-align:center; color:#8e849d; margin-top:12px; }
.fo-directory { padding-top:100px; scroll-margin-top:100px; }
.fo-heading { max-width:740px; margin:0 auto 42px; text-align:center; }
.fo-heading .fo-eyebrow { justify-content:center; }.fo-heading > p:last-child { max-width:600px; font-size:16px; line-height:1.8; margin:24px auto 0; }
.fo-category-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 44px; }
.fo-category-nav a { display:flex; align-items:center; gap:10px; padding:13px 18px; border:1px solid #e6e3ed; border-radius:11px; font-size:12px; font-weight:650; transition:background .15s; }
.fo-category-nav .sv-icon { width:17px; height:17px; color:#8a7bb5; }.fo-category-nav span { color:#a89db9; padding-left:10px; }.fo-category-nav a:hover { background:#f5f2fc; }
.fo-groups { display:grid; gap:28px; }
.fo-group { --group-bg:#f1eefb; --group-ink:#7b66b6; --group-light:#e8e1f6; display:grid; grid-template-columns:.7fr 1.3fr; align-items:start; gap:38px; padding:35px; background:var(--group-bg); border:1px solid #27203b08; border-radius:25px; scroll-margin-top:104px; }
.fo-tone-peach { --group-bg:#fbf2eb; --group-ink:#a47b5f; --group-light:#f5e5d9; }.fo-tone-mint { --group-bg:#eef6f1; --group-ink:#5b896d; --group-light:#dfede4; }.fo-tone-pink { --group-bg:#faf0f4; --group-ink:#a36e88; --group-light:#f1dfe8; }
.fo-group-heading { padding:5px 5px 10px; }.fo-group-icon { display:grid; place-items:center; width:47px; height:47px; border-radius:14px; background:var(--group-light); color:var(--group-ink); margin-bottom:30px; }.fo-group-icon .sv-icon { width:23px; height:23px; }
.fo-group-heading .fo-eyebrow { color:var(--group-ink); font-size:9px; margin-bottom:16px; }.fo-group-heading h3 { font-size:clamp(28px,2.6vw,36px); line-height:1.17; letter-spacing:-.044em; }.fo-group-heading > p:last-child { margin:21px 0 0; font-size:14px; line-height:1.85; max-width:345px; }
.fo-feature-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.fo-feature { display:flex; flex-direction:column; align-items:flex-start; background:#ffffffe8; border:1px solid #ffffff; border-radius:16px; padding:22px; transition:box-shadow .18s,border-color .18s; }
.fo-feature:hover { border-color:var(--group-ink); box-shadow:0 6px 18px #39214608; }.fo-feature:hover .fo-feature-cta .sv-icon { transform:translateX(3px); }
.fo-feature-top { display:flex; align-items:center; justify-content:space-between; width:100%; gap:9px; margin-bottom:21px; }.fo-feature-symbol { color:var(--group-ink); flex-shrink:0; }.fo-feature-symbol > .sv-icon { width:22px; height:22px; }.fo-feature .fo-plan-tag { font-size:8px; padding:4px 6px; border-color:#ebe6f0; text-align:right; }
.fo-feature h4 { font-size:19px; line-height:1.25; font-weight:700; letter-spacing:-.028em; }.fo-feature > p { font-size:12px; line-height:1.85; margin:14px 0 21px; }.fo-feature-cta { display:flex; align-items:center; gap:10px; color:var(--group-ink); margin-top:auto; font-size:11px; font-weight:650; }.fo-feature-cta > .sv-icon { width:16px; height:16px; transition:transform .18s; }
.fo-everywhere { display:grid; grid-template-columns:75px 1fr auto; align-items:center; gap:32px; padding:55px 10px; border-bottom:1px solid #e7e4ed; }.fo-everywhere-icon { display:grid; place-items:center; width:75px; height:90px; border:1px solid #e7e2f1; border-radius:23px; background:#faf8fe; color:#9787bd; }.fo-everywhere-icon .sv-icon { width:34px; height:34px; }.fo-everywhere h2 { font-size:29px; }.fo-everywhere .fo-eyebrow { margin-bottom:12px; font-size:9px; }.fo-everywhere p:last-child { font-size:13px; line-height:1.85; max-width:685px; margin:16px 0 0; }.fo-everywhere .fo-link { font-size:12px; }
.fo-plans { padding-block:94px; }.fo-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid #e3dfed; border-radius:22px; overflow:hidden; }.fo-plan-grid article { padding:31px; display:flex; flex-direction:column; align-items:flex-start; }.fo-plan-grid article + article { border-left:1px solid #e3dfed; }.fo-plan-grid article:nth-child(2) { background:#f7f5fd; }.fo-plan-name { font-size:12px; color:var(--fo-purple); font-weight:700; margin-bottom:23px; }.fo-plan-grid h3 { font-size:24px; line-height:1.25; letter-spacing:-.035em; }.fo-plan-grid article > p { font-size:13px; line-height:1.85; margin:18px 0 28px; }.fo-price { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; margin-top:auto; }.fo-price strong { font-size:32px; letter-spacing:-.045em; }.fo-price > span { font-size:11px; color:#8b8396; }.fo-plan-grid article > small { font-size:9px; color:#96909f; margin:10px 0 22px; line-height:1.7; }.fo-plan-grid .fo-link { font-size:12px; }
.fo-plan-footnote { display:flex; justify-content:space-between; align-items:flex-start; gap:35px; padding-top:25px; }.fo-plan-footnote > p { max-width:750px; font-size:11px; line-height:1.8; margin:0; }.fo-plan-footnote > .fo-link { font-size:12px; flex-shrink:0; }
.fo-start { display:grid; grid-template-columns:1fr .8fr; gap:95px; padding:52px; background:#faf9f5; border-radius:26px; }.fo-start h2 { font-size:clamp(30px,3vw,43px); }.fo-start > div > p:not(.fo-eyebrow) { font-size:14px; line-height:1.85; margin:23px 0; }.fo-start .fo-eyebrow { color:#9a865f; }.fo-start ol { list-style:none; margin:0; padding:0; display:grid; align-content:center; gap:27px; }.fo-start li { display:flex; align-items:flex-start; gap:17px; }.fo-start li > span { display:grid; place-items:center; width:29px; height:29px; border:1px solid #e7e1d4; background:#fffdfa; color:#9e8a69; border-radius:50%; font-size:11px; flex-shrink:0; }.fo-start h3 { font-size:17px; line-height:1.5; letter-spacing:-.02em; }.fo-start li p { font-size:12px; line-height:1.8; margin:8px 0 0; }
.fo-final { margin-top:90px!important; padding:68px 35px; border-radius:28px; text-align:center; background:#5147e5; color:#fff; }.fo-final .fo-eyebrow { justify-content:center; color:#d8d3ff; }.fo-final h2 { color:#fff; font-size:clamp(36px,4vw,58px); }.fo-final > p:not(.fo-eyebrow) { color:#e1ddff; max-width:520px; margin:25px auto 30px; font-size:15px; line-height:1.8; }.fo-final .sv-button { background:#fff; color:#5147e5; border-color:#fff; }.fo-final .fo-link { color:#fff; }.fo-final .fo-actions { gap:25px; }.fo-final a:focus-visible { outline-color:#fff; }
@media (max-width:1100px) { .fo-workflow { padding:27px; }.fo-workflow-panel { gap:30px; grid-template-columns:.85fr 1.15fr; }.fo-tabs button { padding:14px 12px; gap:8px; }.fo-tabs button > .sv-icon { width:16px; height:16px; }.fo-group { grid-template-columns:.65fr 1.35fr; padding:28px; gap:28px; }.fo-feature { padding:19px; }.fo-feature h4 { font-size:18px; }.fo-feature-top { align-items:flex-start; }.fo-everywhere { grid-template-columns:60px 1fr; }.fo-everywhere-icon { width:60px; height:77px; }.fo-everywhere > .fo-link { grid-column:2; }.fo-plan-grid article { padding:25px; }.fo-start { gap:45px; padding:40px; } }
@media (max-width:850px) { .sv-page .fo-container { width:calc(100% - 40px); }.fo-hero { padding:60px 0 45px; }.fo-workflow-heading { display:block; }.fo-workflow-heading > p { max-width:450px; margin-top:15px; }.fo-workflow-panel { grid-template-columns:1fr; min-height:0; gap:24px; padding-top:30px; }.fo-story { padding:0; max-width:600px; }.fo-story h3 { font-size:32px; }.fo-product { max-width:680px; margin:auto; }.fo-tabs button { justify-content:center; padding:13px 8px; font-size:11px; }.fo-tab-arrow { display:none; }.fo-group { grid-template-columns:1fr; gap:28px; }.fo-group-heading > p:last-child { max-width:600px; }.fo-group-heading h3 { max-width:590px; font-size:32px; }.fo-group-icon { margin-bottom:22px; }.fo-feature { padding:25px; }.fo-feature h4 { font-size:21px; }.fo-feature > p { font-size:13px; }.fo-group-heading { padding:0; }.fo-feature-top { align-items:center; }.fo-feature .fo-plan-tag { font-size:9px; }.fo-directory { padding-top:75px; }.fo-category-nav { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.fo-category-nav span { margin-left:auto; }.fo-plan-grid { grid-template-columns:1fr; }.fo-plan-grid article { padding:30px; }.fo-plan-grid article + article { border-left:0; border-top:1px solid #e3dfed; }.fo-plan-grid article > p { margin-bottom:22px; }.fo-plan-footnote { display:block; }.fo-plan-footnote .fo-link { margin-top:17px; }.fo-plans { padding-block:70px; }.fo-start { grid-template-columns:1fr; }.fo-final { margin-top:65px!important; } }
@media (max-width:600px) { .features-overview { padding-bottom:60px; }.sv-page .fo-container { width:calc(100% - 32px); }.fo-hero { padding:47px 4px 35px; }.sv-page .fo-hero h1 { font-size:clamp(34px,9.7vw,51px); line-height:1.08; }.features-overview .fo-eyebrow { font-size:9px; }.features-overview .fo-lead { font-size:16px; line-height:1.75; margin-top:23px; }.fo-hero .fo-actions { gap:10px; }.fo-hero .fo-actions > * { width:100%; }.features-overview .fo-hero-note { align-items:flex-start; text-align:left; padding-inline:7px; font-size:10px; }.fo-hero-note .sv-icon { margin-top:2px; }.fo-workflow { padding:23px 17px; border-radius:22px; }.fo-workflow-heading { padding:0 0 22px; }.features-overview .fo-workflow-heading h2 { font-size:25px; }.fo-tabs { grid-template-columns:1fr 1fr; gap:5px; }.fo-tabs button { font-size:11px; justify-content:flex-start; padding:12px 8px; }.fo-tabs button > .sv-icon { width:15px; height:15px; }.fo-story h3 { font-size:29px; }.fo-story > .fo-plan-tag { margin-bottom:18px; }.fo-story > p { font-size:14px; }.fo-window-bar { gap:8px; padding:12px 10px; font-size:8px; }.fo-window-bar img { width:12px; height:15px; }.fo-window-dots { display:none; }.fo-product figcaption { font-size:8px; }.fo-heading { margin-bottom:30px; }.features-overview h2 { font-size:35px; }.fo-heading > p:last-child { font-size:15px; }.fo-category-nav { gap:7px; margin-bottom:28px; }.fo-category-nav a { padding:13px 10px; font-size:10px; gap:7px; }.fo-category-nav .sv-icon { width:14px; height:14px; flex-shrink:0; }.fo-category-nav span { display:none; }.fo-group { padding:24px 17px 17px; border-radius:22px; gap:23px; }.fo-group-heading { padding-inline:5px; }.fo-group-heading h3 { font-size:29px; }.fo-feature-list { grid-template-columns:1fr; gap:12px; }.fo-feature { padding:23px; }.fo-feature-top { margin-bottom:18px; }.fo-feature h4 { font-size:22px; }.fo-feature > p { font-size:13px; }.fo-feature .fo-plan-tag { font-size:8px; }.fo-everywhere { grid-template-columns:1fr; padding:37px 8px; gap:22px; }.fo-everywhere > .fo-link { grid-column:auto; }.fo-everywhere-icon { width:47px; height:57px; border-radius:13px; }.fo-everywhere-icon .sv-icon { width:25px; height:25px; }.fo-everywhere h2 { font-size:28px; }.fo-everywhere p:last-child { font-size:14px; }.fo-plan-grid article { padding:27px; }.fo-plan-grid h3 { font-size:25px; }.fo-plan-grid article > small { font-size:9px; }.fo-start { padding:30px 24px; gap:31px; }.fo-start h2 { font-size:32px; }.fo-start h3 { font-size:16px; }.fo-final { padding:48px 23px; border-radius:22px; }.fo-final h2 { font-size:38px; }.fo-final .fo-actions { flex-direction:column; gap:22px; } }
@media (prefers-reduced-motion:reduce) { .features-overview a, .features-overview .sv-icon { transition:none; } }