/* Sabban&Co · Jewelry & business intelligence */
.project-dialog:is([data-current-project=jewelry],[data-current-project=customer],[data-current-project=professional],[data-current-project=email],[data-current-project=invoices]) .project-window { width:min(1450px,calc(100vw - 80px)); height:calc(100dvh - 80px); }
.project-dialog:is([data-current-project=jewelry],[data-current-project=customer],[data-current-project=professional]) { --project-ink:#531f2b; --project-muted:#806068; --project-line:#531f2b24; }
.project-dialog:is([data-current-project=jewelry],[data-current-project=customer],[data-current-project=professional]) :is(.project-window,.project-window-foot) { background:#fff; color:#531f2b; }
.project-dialog[data-current-project=email] { --project-ink:#183e38; --project-muted:#637f78; --project-line:#183e3829; }
.project-dialog[data-current-project=email] :is(.project-window,.project-window-foot) { background:#edf3ef; color:#183e38; }
.project-dialog[data-current-project=invoices] { --project-ink:#ecf5ef; --project-muted:#adc6bc; --project-line:#ffffff29; }
.project-dialog[data-current-project=invoices] :is(.project-window,.project-window-foot) { background:#0c1f21; color:#ecf5ef; }
:is(html,[data-theme=dark]) .showcase-content.ai-experience { padding:0; margin:0; background:#fff; color:#531f2b; font-size:16px; line-height:1.7; font-weight:300; text-transform:none; text-align:left; text-align-last:auto; overflow:clip; }
.ai-experience :is(h2,h3,h4,p,figure) { margin:0; color:inherit; }
.ai-experience :is(h2,h3,h4) { font-weight:300; }
.ai-experience p { font-size:16px; line-height:1.7; }
.ai-experience em,.ai-solutions-intro em { font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:400; letter-spacing:-.04em; }
.showcase-content.ai-experience h2 { font-size:clamp(43px,5.8vw,80px); line-height:1.05; letter-spacing:-.055em; margin:0; }
.showcase-content.ai-experience h3 { font-size:clamp(36px,4.6vw,63px); line-height:1.08; letter-spacing:-.045em; margin:0; }
.showcase-content.ai-experience h4 { font-size:25px; line-height:1.2; letter-spacing:-.025em; margin:0; }
.ai-experience .ai-kicker,.ai-solutions-intro .ai-kicker { font-size:12px; line-height:1.5; letter-spacing:.11em; text-transform:uppercase; margin:0 0 28px; }
.ai-experience .motion-toggle { color:inherit; font-size:12px; margin:0; padding:9px 13px; border:1px solid currentColor; border-radius:4px; background:transparent; opacity:.8; }
.ai-section { padding:clamp(50px,6.5vw,95px) clamp(25px,6vw,90px); }
.ai-experience [hidden] { display:none!important; }
.ai-experience :is(a,button,summary):focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.aj-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:35px; padding:50px clamp(25px,5vw,76px); }
.aj-heading .motion-toggle { flex-shrink:0; }
.aj-switch { position:sticky; top:0; z-index:6; display:grid; grid-template-columns:1fr 1fr; background:#fff; border-block:1px solid #531f2b29; }
.aj-switch button { display:flex; align-items:center; justify-content:center; gap:20px; background:#fff; color:#531f2b; padding:22px 24px; border:0; font:inherit; font-size:15px; cursor:pointer; transition:background .35s,color .35s; }
.aj-switch button:first-child { border-right:1px solid #531f2b29; }
.aj-switch button > span { font-size:12px; opacity:.65; }
.aj-switch button[aria-pressed=true] { background:#531f2b; color:#fff; }
.aj-switch button:focus-visible { outline-offset:-5px; }
.aj-split { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,1fr); transition:grid-template-columns .9s cubic-bezier(.22,.7,.2,1); }
.ai-jewelry[data-jewelry-mode=professional] .aj-split { grid-template-columns:minmax(0,1fr) minmax(0,4fr); }
.aj-pane { position:relative; min-width:0; overflow:hidden; padding:40px clamp(18px,3.4vw,50px); }
.aj-customer { background:#fff; color:#531f2b; }
.aj-professional { background:#531f2b; color:#fff; }
.aj-pane-heading { position:relative; z-index:1; }
.aj-pane-heading > span { font-size:12px; letter-spacing:.055em; line-height:1.5; display:block; margin-bottom:22px; opacity:.75; }
.showcase-content.ai-experience .aj-pane-heading h3 { font-size:clamp(35px,4.5vw,62px); line-height:1.03; margin:0; color:inherit; }
.showcase-content.ai-experience .aj-pane:not(.is-active) .aj-pane-heading h3 { font-size:clamp(21px,2vw,28px); line-height:1.2; }
.aj-pane:not(.is-active) { padding-inline:clamp(16px,2.2vw,32px); }
.aj-pane:not(.is-active) .aj-pane-heading > span { font-size:11px; }
.aj-expanded { animation:aj-content-in .55s ease both; }
.ai-experience .aj-intro { max-width:620px; margin:28px 0 30px; color:inherit; opacity:.8; }
.aj-film { background:#fff; border:1px solid #531f2b19; border-radius:6px; padding:5px; margin:0 0 32px!important; overflow:hidden; }
.aj-film video { display:block; width:100%; height:clamp(300px,37vw,530px); object-fit:contain; background:#fff; pointer-events:none; }
.aj-film figcaption { font-size:12px; color:#80656d; text-align:center; padding:15px 15px 17px; }
.aj-feature-list { display:grid; gap:0; }
.aj-feature-list > div { display:grid; grid-template-columns:25px 1fr; gap:22px; border-top:1px solid #531f2b25; padding:23px 0; }
.aj-feature-list > div > span { font-size:12px; padding-top:5px; opacity:.65; }
.aj-feature-list strong { font-size:21px; font-weight:300; display:block; margin-bottom:8px; letter-spacing:-.025em; }
.aj-feature-list p { font-size:15px; }
.aj-professional .aj-feature-list > div { border-color:#ffffff30; }
.ai-experience .aj-detail-note { font-size:12px; line-height:1.65; opacity:.65; margin-top:18px; }
.aj-collapsed { margin-top:40px; }
.aj-collapsed > button { position:relative; z-index:2; color:inherit; font:inherit; font-size:14px; line-height:1.6; background:none; border:0; padding:0 0 16px; border-bottom:1px solid currentColor; text-align:left; cursor:pointer; }
.aj-collapsed > button > span { display:block; margin-top:20px; font-size:27px; }
.aj-panel-mark { position:absolute; width:200%; max-width:none; left:-50%; top:47%; opacity:.08; pointer-events:none; filter:brightness(0); }
.aj-professional .aj-panel-mark { filter:brightness(0) invert(1); }
.aj-connection { background:#f4eee8; }
.aj-connection > p:not(.ai-kicker) { max-width:760px; color:#7c6268; margin-top:30px; }
.aj-connection .sw-contact { color:#531f2b; }
@keyframes aj-content-in { from { opacity:0; translate:0 10px; } to { opacity:1; translate:0 0; } }
/* A familiar conversation connects the owner to the business workflow. */
.showcase-content.ai-experience.ai-office { background:#edf3ef; color:#183e38; }
.showcase-content.ai-experience.ai-invoices { background:#0c1f21; color:#ecf5ef; }
.ai-office-top { display:flex; justify-content:space-between; align-items:center; gap:25px; margin-bottom:55px; }
.ai-office-top .ai-kicker { margin:0; }
.ai-office-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:65px; }
.showcase-content.ai-experience .ai-office-copy h2 { font-size:clamp(44px,5vw,70px); }
.ai-office-copy h2 em { color:#668c7e; }
.ai-invoices .ai-office-copy h2 em { color:#a1d0b9; }
.ai-office-copy > p { max-width:430px; color:#607d73; margin-top:32px; }
.ai-invoices .ai-office-copy > p { color:#a6beb5; }
.ai-office-signature { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:35px; padding-top:24px; border-top:1px solid #183e3830; font-size:12px; color:#608474; }
.ai-invoices .ai-office-signature { color:#a1c2b1; border-color:#ffffff29; }
.ai-chat-shell { width:100%; background:#0d1e24; color:#e5efe9; border:1px solid #51796c66; border-radius:18px; box-shadow:0 30px 75px #14372c26; overflow:hidden; }
.ai-chat-top { display:flex; gap:15px; align-items:center; padding:22px; background:#172d32; border-bottom:1px solid #ffffff0e; }
.ai-whatsapp-mark { width:32px; height:32px; background:#a4d3b9; mask:url('/assets/social/whatsapp.svg') center/contain no-repeat; -webkit-mask:url('/assets/social/whatsapp.svg') center/contain no-repeat; flex-shrink:0; }
.ai-chat-top strong { display:block; font-size:16px; font-weight:350; }
.ai-chat-top > div > span { display:block; font-size:11px; color:#88a49b; margin-top:5px; }
.ai-chat-scroll { height:540px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#57756a #0d1e24; padding:24px 20px; }
.ai-experience .ai-chat-date { font-size:11px; text-align:center; color:#86a299; margin-bottom:23px; }
.ai-chat-message { width:92%; padding:15px 18px; border-radius:4px 13px 13px 13px; background:#203338; margin-bottom:15px; animation:ai-message-in .35s ease both; }
.ai-chat-message > small { display:block; color:#9ebeb0; font-size:11px; margin-bottom:7px; }
.ai-chat-message p { color:#e2ebe6; font-size:14px; line-height:1.6; margin:0; }
.ai-chat-owner { margin-left:auto; background:#245449; border-radius:13px 4px 13px 13px; }
.ai-chat-owner > small { color:#a0ccb9; }
.ai-chat-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 22px; background:#172d32; font-size:11px; color:#8ba79b; }
.ai-chat-bottom button { font:inherit; color:#cee7d8; font-size:12px; background:none; border:0; cursor:pointer; padding:5px; }
.ai-typing { display:flex; width:60px; height:31px; align-items:center; justify-content:center; gap:5px; border-radius:6px; background:#203338; }
.ai-typing i { width:4px; height:4px; background:#9cb6a9; border-radius:50%; animation:ai-typing 1.6s ease-in-out infinite; }
.ai-typing i:nth-child(2) { animation-delay:.2s; }.ai-typing i:nth-child(3) { animation-delay:.4s; }
.ai-experience .ai-example-label { font-size:12px; color:#72887d; margin-top:35px; max-width:960px; }
.ai-invoices .ai-example-label { color:#7f9f91; }
.ai-briefing-section { display:grid; grid-template-columns:1fr 1fr; gap:65px; align-items:center; background:#d9e5dd; }
.ai-section-copy > p:not(.ai-kicker) { color:#5e7b6f; margin-top:28px; max-width:520px; }
.ai-briefing-card { border:1px solid #789c8840; padding:30px; background:#fcfffb; box-shadow:0 23px 55px #183e381a; transform:rotate(2deg); }
.ai-briefing-card > header,.ai-briefing-card > footer { display:flex; justify-content:space-between; align-items:center; gap:20px; color:#5e7b6f; font-size:13px; }
.ai-briefing-card > header > small { font-size:11px; }
.ai-mail-counts { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:35px 0; }
.ai-mail-counts strong { display:block; font-size:56px; font-weight:250; line-height:1; letter-spacing:-.055em; }
.ai-mail-counts span { display:block; font-size:12px; color:#73897b; margin-top:12px; }
.ai-priority { padding:19px 0; border-top:1px solid #183e3826; }
.ai-priority > span { font-size:11px; color:#769887; }
.ai-priority > p { font-size:14px; margin-top:10px; }
.ai-priority strong { display:block; font-size:25px; font-weight:300; margin-top:8px; }
.ai-briefing-card > footer { border-top:1px solid #183e3826; padding-top:20px; margin-top:6px; align-items:flex-start; }
.ai-briefing-card > footer > b { font-weight:350; font-size:13px; text-align:right; }
.ai-office-details { background:#f8fbf7; }
.ai-office-features { display:grid; grid-template-columns:1fr 1fr; gap:40px 65px; margin-top:55px; }
.ai-office-features > div { border-top:1px solid #183e3829; padding-top:25px; }
.ai-office-features > div > span { display:block; font-size:12px; color:#80a08f; margin-bottom:23px; }
.ai-office-features p { color:#688274; margin-top:18px; }
.ai-office-closing { background:#153c36; color:#ecf5ef; }
.ai-office-closing .sw-contact { color:#d1e4d8; }
.ai-invoices .ai-office-details { background:#11292b; }
.ai-invoices .ai-office-features > div { border-color:#ffffff29; }
.ai-invoices .ai-office-features p { color:#a5c0b5; }
.ai-invoice-section { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; background:#dce8de; color:#21493e; }
.ai-invoice-document { background:#fcfffc; color:#21493e; padding:35px; box-shadow:0 30px 65px #183e3829; transform:rotate(-3deg); }
.ai-invoice-top { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:40px; }
.ai-invoice-top > span { font-size:30px; letter-spacing:-.03em; }.ai-invoice-top > small { font-size:11px; color:#819887; }
.ai-invoice-client { font-size:21px; }
.ai-invoice-document > p { font-size:13px; color:#759582; margin-top:10px; }
.ai-invoice-total { display:block; font-size:clamp(53px,6vw,82px); line-height:1.2; letter-spacing:-.06em; font-weight:250; margin:27px 0; }
.ai-invoice-detail { display:flex; justify-content:space-between; gap:25px; padding:16px 0; border-top:1px solid #21493e20; font-size:12px; }
.ai-invoice-detail strong { font-weight:300; text-align:right; }.ai-invoice-detail > span { color:#799889; }
.ai-invoice-status { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:35px; }
.ai-invoice-status > span { padding-top:15px; border-top:2px solid #a7c7b2; font-size:11px; color:#759a84; animation:ai-stage 12s linear infinite; }
.ai-invoice-status > span:nth-child(2) { animation-delay:3s; }.ai-invoice-status > span:nth-child(3) { animation-delay:6s; }.ai-invoice-status > span:nth-child(4) { animation-delay:9s; }
.service-page.ai-solution-page #content { width:100%; max-width:none; margin:0; padding:0; display:block; }
.service-page .ai-experience { margin:0; }
.service-page .ai-experience h2 { color:inherit; }
.ai-solutions-intro { padding:65px clamp(25px,6vw,90px); background:#f4eee8; color:#531f2b; }
.service-page .ai-solutions-intro h1 { font-size:clamp(48px,7vw,90px); letter-spacing:-.055em; line-height:1.05; color:#531f2b; margin:0; }
.ai-solutions-intro > p:not(.ai-kicker) { margin:30px 0; max-width:700px; color:#85696f; font-size:18px; line-height:1.7; }
.ai-solutions-intro nav { display:flex; flex-wrap:wrap; gap:20px 35px; margin-top:35px; font-size:14px; }
.ai-solutions-intro nav a { color:#531f2b; text-decoration:none; padding-bottom:10px; border-bottom:1px solid #531f2b35; }
.service-page.ai-solution-page .related { padding:45px clamp(25px,6vw,90px); margin:0; background:#fff; }
@keyframes ai-message-in { from { opacity:0; translate:0 7px; } to { opacity:1; translate:0 0; } }
@keyframes ai-typing { 0%,60%,100% { opacity:.4; translate:0 0; } 30% { opacity:1; translate:0 -3px; } }
@keyframes ai-stage { 0%,24% { color:#21493e; border-color:#21493e; } 25%,100% { color:#759a84; border-color:#a7c7b2; } }
@media(max-width:1000px) {
  .ai-office-layout,.ai-briefing-section { gap:35px; }.ai-office-hero { padding-inline:35px; }.ai-chat-scroll { height:510px; padding:22px 16px; }.ai-chat-message { width:94%; padding:14px 16px; }.ai-briefing-card { padding:25px; }.ai-mail-counts { gap:15px; }.ai-mail-counts strong { font-size:47px; }.ai-invoice-section { gap:45px; }.ai-invoice-document { padding:28px; }.aj-heading { padding-block:40px; }
  .showcase-content.ai-experience .aj-pane-heading h3 { font-size:44px; }.aj-pane { padding:33px 30px; }.aj-pane:not(.is-active) { padding-inline:18px; }.aj-pane:not(.is-active) .aj-pane-heading > span { font-size:10px; }.aj-collapsed > button { font-size:12px; }
}
@media(max-width:760px) {
  .project-dialog:is([data-current-project=jewelry],[data-current-project=customer],[data-current-project=professional],[data-current-project=email],[data-current-project=invoices]) .project-window { width:calc(100vw - 22px); height:calc(100dvh - 76px); }
  .aj-heading { padding:30px 25px; gap:20px; }.showcase-content.ai-experience .aj-heading h2 { font-size:42px; }.aj-heading .motion-toggle { max-width:100px; white-space:normal; font-size:11px; padding:8px; }.aj-switch button { gap:13px; font-size:13px; padding:18px 16px; }.aj-switch button > span { font-size:11px; }
  .aj-pane { padding:30px 22px; }.showcase-content.ai-experience .aj-pane-heading h3 { font-size:38px; }.aj-pane:not(.is-active) { padding:30px 14px; }.showcase-content.ai-experience .aj-pane:not(.is-active) .aj-pane-heading h3 { font-size:20px; }.aj-pane-heading > span { font-size:11px; }.aj-film video { height:330px; }.aj-feature-list > div { grid-template-columns:20px 1fr; gap:15px; }.aj-feature-list strong { font-size:21px; }.aj-feature-list p { font-size:15px; }
  .ai-office-layout,.ai-briefing-section,.ai-invoice-section { grid-template-columns:1fr; gap:40px; }.ai-office-top { align-items:flex-start; margin-bottom:40px; }.ai-office-top .ai-kicker { max-width:260px; }.ai-office-top .motion-toggle { max-width:115px; white-space:normal; }.ai-office-hero { padding-inline:25px; }.showcase-content.ai-experience .ai-office-copy h2 { font-size:clamp(44px,8vw,60px); }.ai-office-copy > p { max-width:600px; }.ai-chat-shell { max-width:570px; margin:auto; }.ai-chat-scroll { height:510px; }.ai-chat-message p { font-size:15px; }.ai-briefing-card { width:95%; max-width:520px; margin:10px auto; }.ai-office-features { gap:35px; }.ai-invoice-document { width:90%; max-width:480px; margin:15px auto; }.ai-invoice-section .ai-section-copy { grid-row:1; }
}
@media(max-width:480px) {
  .aj-heading { display:block; }.aj-heading .motion-toggle { max-width:none; margin-top:25px; }.showcase-content.ai-experience .aj-heading h2 { font-size:39px; }.aj-switch button { font-size:12px; gap:10px; padding:17px 10px; text-align:left; justify-content:flex-start; }.aj-switch button > span { font-size:10px; }.aj-pane { padding:27px 17px; }.showcase-content.ai-experience .aj-pane-heading h3 { font-size:30px; }.aj-pane-heading > span { font-size:10px; margin-bottom:18px; }.aj-pane:not(.is-active) { padding:28px 10px; }.aj-pane:not(.is-active) .aj-pane-heading { writing-mode:vertical-rl; }.showcase-content.ai-experience .aj-pane:not(.is-active) .aj-pane-heading h3 { font-size:18px; line-height:1.5; }.aj-pane:not(.is-active) .aj-pane-heading > span { font-size:9px; margin:0 0 0 12px; }.aj-collapsed { margin-top:32px; }.aj-collapsed > button { writing-mode:vertical-rl; font-size:11px; border-bottom:0; padding:0; line-height:1.4; }.aj-collapsed > button > span { margin:20px 0 0; font-size:24px; }.aj-panel-mark { top:65%; }
  .ai-experience .aj-intro { font-size:14px; margin-top:25px; }.aj-film { margin-inline:-5px!important; }.aj-film video { height:260px; }.aj-film figcaption { font-size:10px; padding:12px 6px; }.aj-feature-list > div { grid-template-columns:1fr; gap:10px; padding:20px 0; }.aj-feature-list p { font-size:14px; }.aj-feature-list strong { font-size:20px; }.ai-experience .aj-detail-note { font-size:11px; }
  .showcase-content.ai-experience h3 { font-size:36px; }.showcase-content.ai-experience h4 { font-size:25px; }.ai-office-top { gap:15px; }.ai-office-top .ai-kicker { max-width:170px; font-size:11px; }.ai-office-top .motion-toggle { padding:7px 9px; font-size:11px; max-width:105px; }.showcase-content.ai-experience .ai-office-copy h2 { font-size:42px; }.ai-chat-top { padding:20px 18px; gap:12px; }.ai-chat-top strong { font-size:15px; }.ai-chat-top > div > span { font-size:10px; }.ai-chat-scroll { padding:20px 14px; height:505px; }.ai-chat-message { padding:14px; }.ai-chat-message p { font-size:14px; }.ai-chat-bottom { padding:14px 17px; }
  .ai-office-features { grid-template-columns:1fr; gap:32px; }.ai-briefing-card { width:100%; padding:24px 20px; }.ai-mail-counts { gap:12px; }.ai-mail-counts strong { font-size:44px; }.ai-mail-counts span { font-size:11px; }.ai-invoice-document { width:100%; padding:28px 22px; }.ai-invoice-detail { gap:18px; }.ai-invoice-status { gap:10px; }.ai-invoice-status > span { font-size:10px; }.ai-experience .sw-contact { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .ai-jewelry .motion-toggle { display:inline-block; } .ai-experience * { animation:none!important; transition:none!important; }.ai-typing { display:none; } }