@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--bg:#f4f5f8;--surface:#fff;--surface2:#f8f9fc;--ink:#151923;--muted:#687080;--line:#e4e7ee;--accent:#6155f5;--accent2:#9a91ff;--accent-soft:#eeecff;--good:#a9f36b;--radius:22px;--shadow:0 18px 55px rgba(25,30,55,.08);--max:1320px}
html[data-theme="dark"]{color-scheme:dark;--bg:#0b0d13;--surface:#131620;--surface2:#191d29;--ink:#f3f4fa;--muted:#a1a7b8;--line:#282d3b;--accent:#9b91ff;--accent2:#c3bdff;--accent-soft:#25213f;--shadow:0 18px 60px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0!important;background:var(--bg)!important;color:var(--ink)!important;font-family:'DM Sans',system-ui,sans-serif!important;line-height:1.65;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 88% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 34%),radial-gradient(ellipse at 0% 75%,rgba(130,220,190,.055),transparent 30%)}::selection{background:var(--accent);color:white}a{color:inherit;text-decoration:none;transition:color .2s,background .2s,transform .25s,border-color .2s}button,input,select,textarea{font:inherit!important}button{cursor:pointer;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}img{max-width:100%}
/* Navigation: floating, compact, product-like */
.top{position:sticky!important;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 84%,transparent)!important;color:var(--ink)!important;border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent)!important;backdrop-filter:blur(22px)!important;box-shadow:none!important}.nav{max-width:var(--max)!important;min-height:78px!important;margin:auto!important;padding:0 30px!important;display:flex!important;align-items:center!important;gap:34px!important}.logo{display:flex!important;align-items:center;gap:11px;color:var(--ink)!important;font:700 16px 'Space Grotesk',sans-serif!important;letter-spacing:-.045em!important;white-space:nowrap}.logo:before{content:'S';display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:linear-gradient(145deg,var(--accent),#8b82ff);color:white;font-size:20px;font-weight:700;box-shadow:0 7px 20px color-mix(in srgb,var(--accent) 28%,transparent)}.links{display:flex!important;align-items:center;gap:5px!important;flex:1}.links>a,.links .dropbtn{display:inline-flex;align-items:center;gap:7px;color:var(--muted)!important;background:transparent!important;border:0!important;border-radius:12px!important;padding:11px 14px!important;font-size:13px!important;font-weight:700!important;white-space:nowrap}.links>a:hover,.links .dropbtn:hover,.links>a:focus-visible{color:var(--ink)!important;background:var(--surface2)!important}.dropdown{position:relative}.menu{display:none;position:absolute!important;top:calc(100% + 12px)!important;left:0!important;min-width:230px!important;padding:8px!important;background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:17px!important;box-shadow:var(--shadow)!important;z-index:120}.dropdown:hover .menu,.dropdown:focus-within .menu,.dropdown.open .menu{display:block}.menu a{display:flex!important;padding:11px 13px!important;border-radius:10px!important;color:var(--muted)!important;font-size:13px!important}.menu a:hover{background:var(--accent-soft)!important;color:var(--accent)!important}.nav-tools{display:flex;align-items:center;gap:8px;margin-left:auto}.theme-toggle,.hamburger{display:inline-grid;place-items:center;width:42px;height:42px;padding:0!important;border:1px solid var(--line)!important;border-radius:14px!important;background:var(--surface)!important;color:var(--ink)!important;font-size:18px!important}.theme-toggle:hover,.hamburger:hover{border-color:var(--accent)!important;transform:translateY(-2px);box-shadow:0 7px 20px color-mix(in srgb,var(--accent) 14%,transparent)}.hamburger{display:none}
/* Hero and page headers */
.hero{position:relative!important;isolation:isolate;overflow:hidden;background:transparent!important;color:var(--ink)!important}.hero:before{content:'';position:absolute;z-index:-1;right:-140px;top:-230px;width:600px;height:600px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);box-shadow:0 0 0 55px color-mix(in srgb,var(--accent) 3%,transparent),0 0 0 115px color-mix(in srgb,var(--accent) 2%,transparent)}.hero-inner{max-width:var(--max)!important;margin:auto!important;padding:68px 30px 48px!important}.eyebrow{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.17em!important;font:700 10px 'DM Sans',sans-serif!important;color:var(--accent)!important}.eyebrow:before{content:'';width:22px;height:2px;background:var(--accent);border-radius:2px}.hero h1,.hero-inner h1{font:700 clamp(40px,6vw,76px)/1.02 'Space Grotesk',sans-serif!important;letter-spacing:-.075em!important;margin:14px 0 18px!important;max-width:850px}.hero p{max-width:660px;color:var(--muted)!important;font-size:clamp(15px,1.4vw,19px)!important;line-height:1.8!important}.home-hero-layout{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr)!important;align-items:center;gap:54px;min-height:330px;position:relative}.home-hero-layout .home-logo{grid-column:2;grid-row:1/6;position:static!important;transform:none!important;justify-self:center;width:min(100%,430px)!important;max-height:350px!important;height:auto!important;object-fit:contain!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 24px 36px color-mix(in srgb,var(--accent) 15%,transparent));animation:logoDrift 8s ease-in-out infinite}.home-hero-layout .eyebrow{grid-column:1;grid-row:1}.home-hero-layout h1{grid-column:1;grid-row:2;font-size:clamp(55px,7.8vw,100px)!important;margin:10px 0 14px!important}.home-hero-layout h1:after{content:'.';color:var(--accent)}.home-hero-layout p{grid-column:1;grid-row:3;max-width:490px}.home-hero-layout>div[style]{grid-column:1;grid-row:4;margin-top:12px!important}.home-hero-layout>div[style] a,.primary-action{display:inline-flex!important;align-items:center;justify-content:center;gap:12px;padding:14px 20px!important;border-radius:14px!important;background:var(--accent)!important;color:white!important;border:1px solid var(--accent)!important;font-weight:700!important;font-size:13px!important;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 22%,transparent);transition:transform .2s,box-shadow .2s}.home-hero-layout>div[style] a:hover,.primary-action:hover{transform:translateY(-3px);box-shadow:0 15px 32px color-mix(in srgb,var(--accent) 30%,transparent)}
/* Content system */
.container{max-width:var(--max)!important;margin:0 auto!important;padding:24px 30px 100px!important}.container>h1,main.container h1{font:700 clamp(35px,4.6vw,58px)/1.08 'Space Grotesk',sans-serif!important;letter-spacing:-.07em!important;color:var(--ink)!important;margin:10px 0 22px!important}.section-title,main.container h2{font:700 clamp(24px,3vw,36px)/1.2 'Space Grotesk',sans-serif!important;letter-spacing:-.055em!important;color:var(--ink)!important;margin:38px 0 14px!important}.lead,.description{color:var(--muted)!important;line-height:1.85!important}.notice{background:linear-gradient(120deg,var(--accent-soft),var(--surface))!important;color:var(--muted)!important;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line))!important;border-radius:18px!important;padding:21px 24px!important;line-height:1.8}.notice strong{color:var(--accent)!important}.grid{display:grid!important;gap:18px!important}.brand-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;margin-top:24px}.card,.brand-card,.model-card,.feature,.function-row{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:20px!important;box-shadow:none!important;overflow:hidden;transition:transform .28s,border-color .28s,box-shadow .28s!important}.card:hover,.brand-card:hover,.model-card:hover{transform:translateY(-5px)!important;border-color:color-mix(in srgb,var(--accent) 42%,var(--line))!important;box-shadow:var(--shadow)!important}.brand-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:210px;padding:25px!important;background:linear-gradient(145deg,var(--surface),var(--surface2))!important}.brand-card:before{content:'';position:absolute;right:-48px;top:-55px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%);pointer-events:none}.brand-card:after{content:'↗';position:absolute;right:21px;top:17px;color:var(--accent);font-size:22px;transition:transform .25s}.brand-card:hover:after{transform:translate(3px,-3px)}.brand-card .tag,.tag{position:relative;color:var(--accent)!important;text-transform:uppercase;letter-spacing:.13em!important;font-size:10px!important;font-weight:800!important}.brand-card h3{position:relative;font:700 26px 'Space Grotesk',sans-serif!important;letter-spacing:-.05em!important;margin:12px 0 5px!important}.brand-card p{position:relative;font-size:13px!important;margin:0!important}.feature-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px!important;margin-top:26px}.feature{padding:23px!important;display:flex;flex-direction:column;gap:7px}.feature strong{font:700 27px 'Space Grotesk',sans-serif!important;letter-spacing:-.055em;color:var(--accent)!important}.feature .lead{font-size:13px!important}.crumbs{font-size:12px!important;color:var(--muted)!important;margin:0 0 20px!important}.crumbs a{color:var(--accent)!important}.toolbar{display:flex!important;align-items:center;gap:12px!important;flex-wrap:wrap;margin:20px 0 26px!important;padding:14px!important;background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:18px!important}.toolbar input,.toolbar select,main.container input,main.container select,main.container textarea,input,select,textarea{min-height:46px;background:var(--surface2)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:12px!important;padding:11px 14px!important;outline:none!important;box-shadow:none!important;max-width:100%}.toolbar input{flex:1;min-width:210px}.toolbar input:focus,main.container input:focus,main.container select:focus,main.container textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 11%,transparent)!important}.model-card{display:flex;flex-direction:column;min-width:0}.model-card>a{display:flex;flex-direction:column;height:100%}.model-photo{width:100%!important;height:200px!important;object-fit:contain!important;object-position:center!important;padding:14px!important;background:var(--surface2)!important;border-radius:15px!important}.model-card h3,.model-card h2{font:700 19px 'Space Grotesk',sans-serif!important;letter-spacing:-.04em!important;margin:15px 17px 5px!important}.model-card p,.model-card small{color:var(--muted)!important;margin:0 17px 17px!important;font-size:12px!important}.model-badge,.pill,.pill-title{display:inline-flex!important;align-items:center;gap:6px;padding:7px 11px!important;border-radius:999px!important;background:var(--accent-soft)!important;color:var(--accent)!important;border:1px solid color-mix(in srgb,var(--accent) 13%,var(--line))!important;font-size:11px!important;font-weight:700!important}.model-head{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:28px}.model-detail-photo{float:right;width:min(45%,500px)!important;max-width:500px!important;max-height:380px!important;height:auto!important;object-fit:contain!important;background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:20px!important;padding:12px!important;margin:0 0 24px 28px!important;box-shadow:var(--shadow)!important}.function-list{display:grid;gap:12px;margin-top:20px}.function-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px!important}.function-row:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))!important}.function-row h3,.function-row strong{font-size:15px!important;margin:0!important}.function-row p{font-size:13px!important;color:var(--muted)!important}.add-function,button:not(.dropbtn):not(.theme-toggle):not(.hamburger):not(.close){border-radius:12px!important}.add-function{background:var(--accent)!important;color:white!important;border:1px solid var(--accent)!important;padding:11px 15px!important;font-size:12px!important;font-weight:700!important}.add-function:hover{transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 20%,transparent)}
/* Contact, modal and tutorial UI */
main.container .card{padding:22px!important}.category-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.category-section{margin:25px 0}.category-heading{font:700 22px 'Space Grotesk',sans-serif!important}.tutorial-content,.tutorial-text,.tutorial-status{color:var(--muted)!important;line-height:1.8}.modal,.overlay{z-index:200}.overlay{background:rgba(8,10,20,.62)!important;backdrop-filter:blur(8px)}.modal{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:24px!important;box-shadow:0 28px 90px #0004!important}.modal input,.modal select,.modal textarea{width:100%}.close{background:var(--surface2)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:12px!important}.empty-tutorial{border:1px dashed var(--line)!important;background:var(--surface)!important;border-radius:18px!important;padding:35px!important;color:var(--muted)!important}.count,.meta{color:var(--muted)!important;font-size:12px!important}.pay,.paypal{border-radius:16px!important}.primary-action{cursor:pointer}
footer{max-width:none!important;margin:0!important;padding:27px max(30px,calc((100vw - var(--max))/2 + 30px))!important;background:var(--surface)!important;color:var(--muted)!important;border-top:1px solid var(--line)!important;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px!important}footer strong{color:var(--ink)!important;font:700 15px 'Space Grotesk',sans-serif!important}footer .footer-links{display:flex!important;gap:7px!important;flex-wrap:wrap}footer .footer-links a{display:inline-flex!important;padding:8px 11px!important;border-radius:10px!important;color:var(--muted)!important;font-size:12px!important}footer .footer-links a:hover{background:var(--accent-soft)!important;color:var(--accent)!important}
/* Entrance and scroll motion */
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes logoDrift{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}.hero-inner{animation:riseIn .65s both}.container>*{animation:riseIn .55s both}.container>*:nth-child(2){animation-delay:.04s}.container>*:nth-child(3){animation-delay:.08s}.container>*:nth-child(4){animation-delay:.12s}.reveal-ready .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s,transform .55s}.reveal-ready .reveal.is-visible{opacity:1;transform:none}
@media(max-width:900px){.nav{padding:0 22px!important;gap:16px!important}.home-hero-layout{grid-template-columns:1fr!important;gap:20px!important}.home-hero-layout .home-logo{grid-column:1;grid-row:1/2;width:min(300px,75%)!important;max-height:200px!important;justify-self:end;margin:0 0 -5px!important}.home-hero-layout .eyebrow{grid-row:2}.home-hero-layout h1{grid-row:3}.home-hero-layout p{grid-row:4}.home-hero-layout>div[style]{grid-row:5}.hero-inner{padding:48px 24px 35px!important}.container{padding:20px 24px 75px!important}.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.feature-row{grid-template-columns:1fr!important}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.model-detail-photo{width:min(45%,400px)!important}}
@media(max-width:780px){.nav{flex-wrap:wrap!important;min-height:70px!important;padding-top:10px!important;padding-bottom:10px!important}.hamburger{display:inline-grid!important}.links{display:none!important;order:5;flex:0 0 100%;width:100%;flex-direction:column;align-items:stretch;gap:3px;padding:8px 0 12px}.links.mobile-open{display:flex!important}.links>a,.links .dropbtn{display:flex!important;width:100%;text-align:left;padding:13px 14px!important}.dropdown{width:100%}.dropdown .menu{display:none;position:static!important;width:100%;box-shadow:none!important;margin:4px 0 8px!important}.dropdown.open .menu{display:block!important}.nav-tools{margin-left:auto}.model-detail-photo{float:none;width:100%!important;max-width:620px!important;max-height:380px!important;display:block;margin:0 auto 22px!important}.function-row{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.nav{padding-left:16px!important;padding-right:16px!important}.logo{font-size:14px!important}.logo:before{width:34px;height:34px}.hero-inner{padding:37px 18px 28px!important}.home-hero-layout h1{font-size:clamp(48px,15vw,70px)!important}.home-hero-layout .home-logo{width:min(220px,70%)!important;max-height:150px!important}.container{padding:15px 18px 58px!important}.container>h1,main.container h1{font-size:clamp(35px,11vw,48px)!important}.brand-grid{grid-template-columns:1fr!important;gap:12px!important}.brand-card{min-height:155px!important;padding:21px!important}.toolbar{padding:10px!important}.toolbar input{min-width:100%;width:100%}.toolbar select{width:100%}.category-grid{grid-template-columns:1fr}.model-photo{height:180px!important}.section-title,main.container h2{margin-top:29px!important}.notice{padding:17px!important;font-size:13px}footer{padding:24px 18px!important;align-items:flex-start;flex-direction:column}footer .footer-links{gap:3px}.function-row{padding:15px!important}.feature{padding:19px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal-ready .reveal{opacity:1;transform:none}}

/* Dedicated coming-soon route for Tutoriale */
body:has(.construction-page) main.wrap{min-height:calc(100vh - 165px);display:grid;place-items:center;padding-top:45px!important;padding-bottom:75px!important}body:has(.construction-page) main.wrap>*:not(.construction-page){display:none!important}.construction-page{position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:450px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(30px,7vw,90px);border:1px solid var(--line);border-radius:30px;background:linear-gradient(135deg,var(--surface),var(--surface2));box-shadow:var(--shadow)}.construction-page:after{content:'COMING\A SOON';white-space:pre;position:absolute;z-index:-1;right:-.04em;bottom:-.18em;font:700 clamp(70px,14vw,190px)/.9 'Space Grotesk',sans-serif;letter-spacing:-.09em;color:color-mix(in srgb,var(--accent) 7%,transparent);text-align:right}.construction-orbit{position:absolute;right:clamp(25px,9vw,120px);top:50%;transform:translateY(-50%);width:clamp(125px,22vw,270px);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 22px color-mix(in srgb,var(--accent) 4%,transparent),0 0 0 48px color-mix(in srgb,var(--accent) 3%,transparent)}.construction-orbit:before,.construction-orbit:after{content:'';position:absolute;inset:18%;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:50%;transform:rotate(45deg) scaleX(.45)}.construction-orbit:after{transform:rotate(-45deg) scaleX(.45)}.construction-orbit span{font:700 clamp(25px,4vw,46px) 'Space Grotesk',sans-serif;letter-spacing:-.09em;color:var(--accent)}.construction-page h1{max-width:700px!important;font-size:clamp(40px,7vw,82px)!important;margin:24px 0 8px!important}.construction-page h1 span{color:var(--accent)}.construction-copy{margin:0 0 25px;color:var(--muted);font-size:clamp(18px,2vw,25px)}.construction-home{display:inline-flex;align-items:center;gap:22px;padding:14px 18px;border-radius:13px;background:var(--accent);color:white;font-weight:700;font-size:13px}.construction-home:hover{transform:translateY(-3px);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 25%,transparent)}@media(max-width:600px){.construction-page{min-height:480px;padding:28px}.construction-orbit{right:25px;top:40px;transform:none;width:100px;opacity:.8}.construction-page h1{margin-top:70px!important}}


/* STF Coding — refined purple theme and layout fixes */
:root{--accent:#5b168a;--accent2:#8c45bd;--accent-soft:#f0e5f8;--good:#b7f36b}
html[data-theme="dark"]{--accent:#b879e8;--accent2:#d2a7f4;--accent-soft:#321448}
/* Keep the home logo readable on both themes; purple replaces the old blue accent. */
.home-hero-layout .home-logo{filter:drop-shadow(0 24px 36px color-mix(in srgb,var(--accent) 22%,transparent))}
html:not([data-theme="dark"]) .home-hero-layout .home-logo{filter:brightness(0) saturate(100%) invert(11%) sepia(40%) saturate(4522%) hue-rotate(259deg) brightness(76%) contrast(112%) drop-shadow(0 10px 20px rgba(38,0,71,.12))}
/* Model catalog: four compact cards per row on desktop. */
#grid.grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch;gap:15px!important}
#grid.grid .model-card{min-width:0;width:100%;padding:16px!important;min-height:128px;justify-content:flex-start}
#grid.grid .model-card>a{min-width:0;overflow-wrap:anywhere}
#grid.grid .model-card h3{font-size:17px!important;line-height:1.3!important;margin:10px 0 7px!important;overflow-wrap:anywhere}
#grid.grid .model-card small{margin:0!important;font-size:11px!important;line-height:1.45!important}
/* More prominent feature titles on each model detail page. */
.function-row h3,.function-row strong{font-size:18px!important;line-height:1.35!important;letter-spacing:-.015em}
.function-row p{line-height:1.6!important}
/* Contact cards are one single row on desktop, including the OBDeleven banner. */
main.container>.grid:has(> .grid){grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:stretch;gap:14px!important}
main.container>.grid:has(> .grid)>.grid{display:contents!important}
main.container>.grid:has(> .grid)>.card{min-width:0;padding:18px!important;overflow-wrap:anywhere}
main.container>.grid:has(> .grid)>.card h3{font-size:17px!important;line-height:1.35!important;overflow-wrap:anywhere}
main.container>.grid:has(> .grid)>.card p{font-size:12px!important;line-height:1.6!important}
main.container>.grid:has(> .grid)>.card a{max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:12px!important;padding:10px 12px!important}
/* Tutorials page spacing, aligned cards, no text escaping card edges. */
main.wrap{width:min(100%,var(--max));margin:0 auto!important;padding:24px 30px 100px!important;box-sizing:border-box}
main.wrap .toolbar{width:100%;margin:0 0 18px!important}
main.wrap .toolbar input{min-width:0;flex:1 1 280px}
main.wrap #count{margin:0 0 14px;padding:0 2px}
main.wrap #grid.grid{display:block!important;width:100%}
main.wrap .category-section{margin:24px 0 30px!important;min-width:0}
main.wrap .category-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 13px!important;padding:0 2px}
main.wrap .category-heading h2{font-size:23px!important;line-height:1.3!important;margin:0!important;overflow-wrap:anywhere}
main.wrap .category-heading span{flex:0 0 auto;color:var(--muted);font-size:12px}
main.wrap .category-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch;gap:16px!important}
main.wrap .category-grid>.card{display:flex;flex-direction:column;min-width:0;padding:20px!important;overflow:hidden;overflow-wrap:anywhere;word-break:normal}
main.wrap .category-grid>.card h3{font-size:20px!important;line-height:1.35!important;margin:9px 0 10px!important;overflow-wrap:anywhere}
main.wrap .category-grid>.card p{font-size:13px!important;line-height:1.65!important;margin:0 0 13px!important;overflow-wrap:anywhere}
main.wrap .category-grid .model-list,main.wrap .category-grid .price-line,main.wrap .category-grid .meta{font-size:12px!important;line-height:1.65!important;overflow-wrap:anywhere;word-break:normal;white-space:normal;max-width:100%}
main.wrap .category-grid .model-list{margin:0 0 10px!important}
main.wrap .category-grid .price-line{margin-top:auto;padding-top:10px}
main.wrap .category-grid .meta{margin:9px 0 12px}
main.wrap .category-grid button,main.wrap .category-grid .add-function{align-self:flex-start;max-width:100%;white-space:normal;line-height:1.4!important}
/* Payment dialog must be a viewport overlay, not content appended below the page. */
#overlay.overlay{position:fixed!important;inset:0!important;display:none;align-items:center!important;justify-content:center!important;padding:22px!important;overflow-y:auto!important;box-sizing:border-box!important;background:rgba(8,5,15,.68)!important;backdrop-filter:blur(9px)!important;z-index:9999!important}
#overlay .modal{position:relative!important;display:block!important;width:min(720px,100%)!important;max-width:100%!important;max-height:min(88vh,900px)!important;overflow-y:auto!important;overscroll-behavior:contain;margin:auto!important;padding:24px!important;box-sizing:border-box!important}
#overlay .mh{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
#overlay #modalTitle{overflow-wrap:anywhere;line-height:1.25!important}
#overlay .mb{min-width:0;overflow-wrap:anywhere;line-height:1.7}
#overlay .mb .pay{max-width:100%;overflow-wrap:anywhere}
@media(max-width:1100px){#grid.grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}main.container>.grid:has(> .grid){grid-template-columns:repeat(3,minmax(0,1fr))!important}main.wrap .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:760px){#grid.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}main.container>.grid:has(> .grid){grid-template-columns:repeat(2,minmax(0,1fr))!important}main.wrap{padding:18px 20px 70px!important}main.wrap .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#overlay.overlay{padding:12px!important}#overlay .modal{padding:18px!important;max-height:92vh!important}}
@media(max-width:480px){#grid.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}#grid.grid .model-card{padding:12px!important}#grid.grid .model-card h3{font-size:15px!important}main.container>.grid:has(> .grid){grid-template-columns:1fr!important}main.wrap{padding:14px 15px 55px!important}main.wrap .category-grid{grid-template-columns:1fr!important}main.wrap .category-heading h2{font-size:20px!important}main.wrap .category-grid>.card{padding:17px!important}}


/* STF Coding — follow-up layout and brand consistency fixes */
:root{--accent:#260047;--accent2:#642b91;--accent-soft:#eee5f5}
html[data-theme="dark"]{--accent:#a96bdd;--accent2:#d0a1f0;--accent-soft:#321448}
/* Brand-specific model catalogs use the same four-column layout as the all-model catalog. */
main.container>.grid:has(> .model-card){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;align-items:stretch}
main.container>.grid>.model-card{min-width:0!important;width:100%!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;overflow:hidden!important}
.model-photo{display:block;width:100%;height:150px;object-fit:contain;object-position:center;margin:8px auto 10px;border-radius:12px;background:var(--surface2)}
#grid.grid .model-photo{height:135px;order:2}
#grid.grid .model-card h3{order:3}
#grid.grid .model-card small{order:4}
/* Function title remains in its existing framed pill but reads clearly as the heading. */
.function-row .pill-title{font-size:18px!important;font-weight:800!important;line-height:1.35!important;letter-spacing:-.01em;padding:8px 12px!important}
/* Use the site accent on order buttons and payment/order overlay. */
.add-function,.order-button,button.add-function,button[onclick*="STFOrder.open"]{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
.add-function:hover,.order-button:hover,button[onclick*="STFOrder.open"]:hover{background:var(--accent2)!important;border-color:var(--accent2)!important}
#orderOverlay,.order-overlay{background:rgba(10,3,18,.72)!important;backdrop-filter:blur(8px)!important}
#orderOverlay .modal,#orderOverlay .order-modal,#orderOverlay [class*="modal"],.order-overlay .modal{border-color:var(--line)!important}
#orderOverlay h1,#orderOverlay h2,#orderOverlay h3,#orderOverlay .title{color:var(--accent)!important}
html[data-theme="dark"] #orderOverlay h1,html[data-theme="dark"] #orderOverlay h2,html[data-theme="dark"] #orderOverlay h3{color:var(--accent2)!important}
/* Prevent the sticky order CTA from covering the footer/content. */
body{padding-bottom:0!important}
footer{position:relative!important;z-index:1!important;clear:both}
.sticky-order,.floating-order,.order-float,.order-bar{bottom:18px!important;z-index:30!important}
main.container{padding-bottom:70px!important}
/* Contacts: keep all contact banners in one row on wide screens, compact text safely. */
main.container>.grid:has(> .card):not(:has(> .model-card)){grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important;align-items:stretch}
main.container>.grid:has(> .card):not(:has(> .model-card))>.card{min-width:0!important;padding:14px!important;overflow:hidden!important;overflow-wrap:anywhere}
main.container>.grid:has(> .card):not(:has(> .model-card))>.card h3{font-size:15px!important;line-height:1.3!important}
main.container>.grid:has(> .card):not(:has(> .model-card))>.card p{font-size:11px!important;line-height:1.5!important}
main.container>.grid:has(> .card):not(:has(> .model-card))>.card a{font-size:11px!important;padding:8px 9px!important;white-space:normal!important;max-width:100%!important}
/* Tutorial purchase CTA matches the model-page add-to-order button. */
main.wrap .tutorial-buy{align-self:stretch!important;margin-top:auto!important;background:var(--accent)!important;color:#fff!important;border:1px solid var(--accent)!important;border-radius:12px!important;padding:12px 14px!important;font-weight:800!important;cursor:pointer!important}
main.wrap .tutorial-buy:hover{background:var(--accent2)!important;border-color:var(--accent2)!important}
@media(max-width:1100px){main.container>.grid:has(> .model-card){grid-template-columns:repeat(3,minmax(0,1fr))!important}main.container>.grid:has(> .card):not(:has(> .model-card)){grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:760px){main.container>.grid:has(> .model-card){grid-template-columns:repeat(2,minmax(0,1fr))!important}main.container>.grid:has(> .card):not(:has(> .model-card)){grid-template-columns:repeat(2,minmax(0,1fr))!important}.model-photo{height:120px}}
@media(max-width:480px){main.container>.grid:has(> .model-card){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}main.container>.grid:has(> .card):not(:has(> .model-card)){grid-template-columns:1fr!important}}

/* Follow-up fixes: supplied logo in navbar and consistent purple controls. */
.logo:before{content:''!important;width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:10px!important;background:transparent url("assets/published/Acasa/logo.png") center/contain no-repeat!important;box-shadow:none!important;font-size:0!important}
.logo{gap:9px!important}
:root{--accent:#260047;--accent2:#6e36a0;--accent-soft:#eee5f5}
html[data-theme="dark"]{--accent:#b58bdb;--accent2:#d0b0ed;--accent-soft:#30213d}
/* Model listing cards all use a compact four-column layout and their matching photos. */
#grid.grid:has(> .model-card){grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch}
#grid.grid .model-card{min-width:0!important}
#grid.grid .model-photo{width:100%!important;height:150px!important;object-fit:contain!important;order:2}
/* Match function title chip corners to the Add to order button. */
.function-row .pill-title{border-radius:12px!important}
/* All five contact cards: one row on wide screens with consistent gap. */
main.container>.grid:has(> .card):not(:has(> .model-card)){display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important;align-items:stretch}
main.container>.grid:has(> .card):not(:has(> .model-card))>.grid{display:contents!important}
main.container>.grid:has(> .card):not(:has(> .model-card))>.card{min-width:0!important;margin:0!important}
main.container>.grid:has(> .card):not(:has(> .model-card))>.card a{background:var(--accent)!important;color:#fff!important;border:1px solid var(--accent)!important;border-radius:12px!important}
main.container>.grid:has(> .card):not(:has(> .model-card))>.card a:hover{background:var(--accent2)!important;border-color:var(--accent2)!important}
#orderOverlay .order-modal{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:20px!important}
#orderOverlay .order-send,#orderOverlay .order-clear{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
#orderOverlay h2{color:var(--accent)!important}
@media(max-width:1100px){#grid.grid:has(> .model-card){grid-template-columns:repeat(3,minmax(0,1fr))!important}main.container>.grid:has(> .card):not(:has(> .model-card)){grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:760px){#grid.grid:has(> .model-card){grid-template-columns:repeat(2,minmax(0,1fr))!important}main.container>.grid:has(> .card):not(:has(> .model-card)){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:480px){main.container>.grid:has(> .card):not(:has(> .model-card)){grid-template-columns:1fr!important}}

/* Latest polish: theme-aware navbar logo, compact centered brand tiles, model images, and five contact columns. */
.logo:before{background-image:url("assets/published/Acasa/logo.png")!important;filter:brightness(0) saturate(100%) invert(11%) sepia(40%) saturate(4522%) hue-rotate(259deg) brightness(76%) contrast(112%)!important}
html[data-theme="dark"] .logo:before{filter:brightness(0) invert(1)!important}
.home-hero-layout .brand-grid,.brand-grid{justify-content:center!important;justify-items:center!important;gap:16px!important}
.brand-grid{grid-template-columns:repeat(4,minmax(0,220px))!important}
.brand-card{min-height:145px!important;height:145px!important;padding:18px 20px!important;justify-content:center!important}
.brand-card h3{margin:7px 0 3px!important}
#grid.grid:has(> .model-card) .model-card{display:flex!important}
#grid.grid:has(> .model-card) .model-photo{display:block!important;visibility:visible!important;opacity:1!important}
@media(max-width:1100px){.brand-grid{grid-template-columns:repeat(2,minmax(0,220px))!important}}
@media(max-width:560px){.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.brand-card{height:130px!important;min-height:130px!important}}
@media(min-width:1101px){main.container:has(> .card .tag) {}}


/* STF Coding — latest requested polish */
@media(min-width:1101px){
  .home-hero-layout .brand-grid,.brand-grid{
    display:grid!important;grid-template-columns:repeat(4,minmax(220px,260px))!important;
    justify-content:center!important;justify-items:stretch!important;align-items:stretch!important;
    gap:22px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important;
  }
  .brand-card{width:100%!important;max-width:260px!important;min-width:0!important;box-sizing:border-box!important}
}
@media(max-width:1100px){.brand-grid{grid-template-columns:repeat(2,minmax(200px,260px))!important;justify-content:center!important;gap:18px!important}}
@media(max-width:560px){.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}}
/* Force order and cart controls to use the site's purple tokens, including older inline styles. */
button[onclick*="STFOrder.open"],a[onclick*="STFOrder.open"],.order-button,.order-btn,.sticky-order button,.floating-order button,
#orderOverlay button,#orderOverlay .order-send,#orderOverlay .order-clear,
button.add-function,.add-function,.add-to-order,.btn-order{
  background-color:var(--accent,#260047)!important;background-image:none!important;color:#fff!important;
  border-color:var(--accent,#260047)!important;box-shadow:none!important
}
button[onclick*="STFOrder.open"]:hover,a[onclick*="STFOrder.open"]:hover,.order-button:hover,.order-btn:hover,
button.add-function:hover,.add-function:hover,.add-to-order:hover,.btn-order:hover,#orderOverlay button:hover{
  background-color:var(--accent2,#6e36a0)!important;border-color:var(--accent2,#6e36a0)!important;color:#fff!important
}
#orderOverlay .order-modal,#orderOverlay .modal,#orderOverlay [class*="modal"]{background:var(--surface,#fff)!important}
#orderOverlay h2,#orderOverlay .title{color:var(--accent,#260047)!important}
html[data-theme="dark"] #orderOverlay h2,html[data-theme="dark"] #orderOverlay .title{color:var(--accent2,#d0b0ed)!important}
/* Make tutorial prices prominent and easy to scan. */
main.wrap .price-line{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;
  font-size:17px!important;font-weight:800!important;color:var(--accent,#260047)!important;line-height:1.4!important}
main.wrap .price-line strong,main.wrap .price-line b,main.wrap .price-line .price,main.wrap .price-line span{
  font-size:19px!important;font-weight:900!important;color:var(--accent,#260047)!important}
html[data-theme="dark"] main.wrap .price-line,html[data-theme="dark"] main.wrap .price-line strong,
html[data-theme="dark"] main.wrap .price-line b,html[data-theme="dark"] main.wrap .price-line .price,html[data-theme="dark"] main.wrap .price-line span{color:var(--accent2,#d0b0ed)!important}
main.wrap .price-line{padding:10px 12px!important;background:var(--accent-soft,#eee5f5)!important;border-radius:10px!important}
/* Contact cards: five balanced, square-ish tiles in a single row on desktop. */
@media(min-width:1101px){
  main.container>.grid:has(> .card):not(:has(> .model-card)){
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:18px!important;
    justify-content:stretch!important;align-items:stretch!important
  }
  main.container>.grid:has(> .card):not(:has(> .model-card))>.card{
    aspect-ratio:1/1!important;min-width:0!important;width:100%!important;height:auto!important;
    box-sizing:border-box!important;display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:center!important;text-align:center!important;padding:16px 12px!important;gap:8px!important
  }
  main.container>.grid:has(> .card):not(:has(> .model-card))>.card h3{margin:5px 0!important}
  main.container>.grid:has(> .card):not(:has(> .model-card))>.card p{margin:0 0 6px!important}
  main.container>.grid:has(> .card):not(:has(> .model-card))>.card a{margin-top:auto!important}
}


/* STF refinements — centered layouts, purple order UI, and clearer spacing */
:root{--stf-purple:#6e36a0;--stf-purple-hover:#8650b7;--stf-purple-soft:#eee5f5}
html[data-theme="dark"]{--stf-purple:#b58bdb;--stf-purple-hover:#d0b0ed;--stf-purple-soft:#30213d}
/* Center the four homepage brand cards as one balanced group with equal outer margins. */
.home-hero-layout .brand-grid,.brand-grid:not(.category-grid){display:grid!important;grid-template-columns:repeat(4,minmax(0,260px))!important;justify-content:center!important;justify-items:stretch!important;gap:18px!important;width:100%!important;max-width:1132px!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important}
.brand-grid:not(.category-grid)>.brand-card{width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important}
/* Contacts reuse the homepage brand-card look while retaining a balanced gap. */
main.container>.contact-grid{grid-template-columns:repeat(3,minmax(0,260px))!important;justify-content:center!important;justify-items:stretch!important;gap:20px!important;margin:8px auto 35px!important;max-width:840px!important}
.contact-grid .contact-card{aspect-ratio:unset!important;min-height:255px!important;height:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:9px!important;padding:24px 20px!important;text-decoration:none!important}
.contact-grid .contact-card h3{font-size:21px!important;line-height:1.3!important;margin:8px 0 2px!important;overflow-wrap:anywhere!important}
.contact-grid .contact-card p{font-size:13px!important;line-height:1.65!important;margin:0!important}
.contact-link{display:inline-flex;align-items:center;justify-content:center;margin-top:8px;padding:10px 14px;border-radius:12px;background:var(--stf-purple)!important;color:#fff!important;border:1px solid var(--stf-purple)!important;font-size:12px;font-weight:800;line-height:1.4}
.contact-card:hover .contact-link{background:var(--stf-purple-hover)!important;border-color:var(--stf-purple-hover)!important}
/* Floating order button sits higher than the footer and uses the site's purple accent. */
.order-fab{background:var(--stf-purple)!important;color:#fff!important;bottom:84px!important;right:22px!important;z-index:80!important;box-shadow:0 10px 28px color-mix(in srgb,var(--stf-purple) 28%,transparent)!important}
.order-fab:hover{background:var(--stf-purple-hover)!important;transform:translateY(-2px)}
.orderBadge{background:var(--stf-purple-hover)!important;color:#fff!important}
.order-overlay{background:rgba(10,3,18,.76)!important;z-index:9998!important}
.order-modal{border:1px solid var(--line)!important;background:var(--surface)!important;color:var(--ink)!important}
.order-modal h2,.order-modal label,.order-item b{color:var(--ink)!important}
.order-sub,.order-item small{color:var(--muted)!important}
.order-send,.order-actions .order-send,.order-actions button.order-send{background:var(--stf-purple)!important;color:#fff!important;border:1px solid var(--stf-purple)!important}
.order-send:hover,.order-actions .order-send:hover{background:var(--stf-purple-hover)!important;border-color:var(--stf-purple-hover)!important}
.order-clear,.order-close,.order-item button{background:var(--stf-purple-soft)!important;color:var(--stf-purple)!important;border:1px solid color-mix(in srgb,var(--stf-purple) 18%,var(--line))!important}
.order-empty{background:var(--surface2)!important;color:var(--muted)!important}
.order-form label{color:var(--ink)!important}
.order-form input,.order-form textarea{background:var(--surface2)!important;color:var(--ink)!important;border-color:var(--line)!important}
.add-function.added{background:var(--stf-purple-soft)!important;color:var(--stf-purple)!important}
/* Payment request button has comfortable separation from the transaction ID field. */
#modalBody .verify-submit{display:block!important;margin-top:22px!important;width:100%!important;min-height:46px!important}
#modalBody #txn{display:block!important;width:100%!important;box-sizing:border-box!important;margin-bottom:8px!important}
@media(max-width:1100px){.home-hero-layout .brand-grid,.brand-grid:not(.category-grid){grid-template-columns:repeat(2,minmax(0,260px))!important;max-width:560px!important}.brand-grid:not(.category-grid)>.brand-card{max-width:none!important}main.container>.contact-grid{grid-template-columns:repeat(2,minmax(0,260px))!important;max-width:560px!important}}
@media(max-width:560px){.home-hero-layout .brand-grid,.brand-grid:not(.category-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;max-width:100%!important}.brand-grid:not(.category-grid)>.brand-card{min-height:145px!important;height:auto!important;padding:18px 12px!important}main.container>.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;max-width:100%!important}.contact-grid .contact-card{min-height:220px!important;padding:17px 12px!important}.contact-grid .contact-card h3{font-size:16px!important}.order-fab{right:14px!important;bottom:76px!important;padding:12px 14px!important}}
@media(max-width:380px){main.container>.contact-grid{grid-template-columns:1fr!important}.contact-grid .contact-card{min-height:180px!important}}

/* Final requested refinements: wider homepage brand and contact cards, readable lavender buttons, purple function tiles. */
@media(min-width:1101px){
  .home-hero-layout .brand-grid,.brand-grid:not(.category-grid){grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:none!important;width:100%!important;gap:20px!important}
  main.container>.contact-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;max-width:none!important;width:100%!important;gap:18px!important}
}
.brand-grid:not(.category-grid){max-width:none!important;width:100%!important}
.brand-grid:not(.category-grid)>.brand-card{max-width:none!important;width:100%!important}
main.container>.contact-grid{max-width:none!important;width:100%!important}
.contact-grid .contact-card{width:100%!important;min-width:0!important}
/* #d0b0ed is a light lavender: use dark plum text for contrast wherever it is used as a button background. */
button[style*="#d0b0ed"],a[style*="#d0b0ed"],button[style*="rgb(208, 176, 237)"],a[style*="rgb(208, 176, 237)"],
html[data-theme="dark"] .add-function:hover,html[data-theme="dark"] .order-button:hover,html[data-theme="dark"] button[onclick*="STFOrder.open"]:hover,
html[data-theme="dark"] .contact-link:hover{color:#260047!important}
/* Function title cards/pills use the site's purple palette instead of blue. */
.function-row{background:color-mix(in srgb,var(--accent-soft) 48%,var(--surface))!important}
.function-row .pill-title{background:var(--accent-soft)!important;color:var(--accent)!important;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))!important}
@media(max-width:1100px){
 .home-hero-layout .brand-grid,.brand-grid:not(.category-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:none!important}
 main.container>.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:none!important}
}