:root{--paper:#F2F5F7;--ink:#06204D;--muted:#53616b;--gold:#BCEBFF;--line:#D9E4EC;--card:#101d34;--card-edge:#42506a;--card-ink:#faf4e5;--accent:#b7c5f6;--cover:#283d69;--foil-filter:none;color:var(--ink);background:var(--paper);font-family:var(--body-font)}
[data-theme=dune],.dune{--card:#d8bd94;--card-edge:#f9e4be;--card-ink:#352418;--accent:#795337;--cover:#a67b54;--foil-filter:sepia(1) saturate(1.25) brightness(.67)}
[data-theme=tide],.tide{--card:#173c3d;--card-edge:#4e7770;--card-ink:#edfff5;--accent:#92d8c4;--cover:#34746e;--foil-filter:hue-rotate(315deg) saturate(1.35)}
*{box-sizing:border-box}
body,h1,h2,h3,p,fieldset{margin:0}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #0095E5;outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(1200px,calc(100% - 48px));margin:auto}
.top{background:var(--paper)}
.bar,.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px}
.identity{display:flex;gap:10px;align-items:center;font-size:24px;font-weight:700;letter-spacing:-.055em}
.card-brand small{display:block;font-size:8px;letter-spacing:.17em;margin-top:2px}
nav{display:flex;gap:30px;font-size:13px;font-weight:700}
nav a:hover,.text-link:hover,.profile-nav a:hover{text-decoration:underline}
.top-link{border:1px solid #bbb9b0;border-radius:50px;padding:10px 16px;font-size:13px;font-weight:700;white-space:nowrap}
.hero{color:#fcf7ed;background:radial-gradient(ellipse at 76% 40%,#253657 0,transparent 50%),#06204D;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:550px}
.intro{position:relative;z-index:1;padding:64px 0}
.eyebrow{font-weight:700;letter-spacing:.17em;font-size:11px;line-height:1.55}
.hero .eyebrow{color:var(--gold)}
i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:6px;vertical-align:1px}
h1,h2,.workbench h3{font-family:var(--heading-font);font-weight:600;letter-spacing:-.035em}
.hero h1{font-size:clamp(44px,6vw,90px);line-height:.99;margin:24px 0}
.hero em{color:var(--gold);font-weight:400}
.lede,.section-note,.bio,.steps p{font-size:16px;line-height:1.6}
.lede{max-width:400px;color:#d1d9e6}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:29px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:15px;min-height:47px;border:1px solid transparent;border-radius:50px;padding:11px 17px;font-size:13px;font-weight:700}
.button:hover,.top-link:hover{filter:brightness(.9)}
.primary{color:#152334;background:var(--gold)}
.outline{border-color:#8290a4;color:#fff}
.stage{position:relative;isolation:isolate;min-height:470px;display:grid;place-items:center}
.stage::before{content:"";position:absolute;inset:0 -24px;z-index:-2;background-image:linear-gradient(#b5c6ed15 1px,transparent 1px),linear-gradient(90deg,#b5c6ed15 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(ellipse,#000 0,transparent 75%)}
.orbit{position:absolute;z-index:-1;width:83%;aspect-ratio:1.35;border:1px solid #dce5f82b;border-radius:50%;transform:rotate(-25deg)}
.orbit::after{content:"";position:absolute;inset:12%;border:1px solid #dce5f821;border-radius:50%}
.physical,.swatch{color:var(--card-ink);background:linear-gradient(130deg,#ffffff12,transparent 58%,#0003),var(--card);border:1px solid var(--card-edge)}
.physical{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:85.6 / 54;border-radius:5%;box-shadow:0 18px 34px #080e2655,inset 0 0 28px #0002}
.hero-card{position:absolute;width:63%;left:0;top:28%;transform:rotate(-12deg);z-index:1}
.foil,.swatch img{width:24%;filter:var(--foil-filter)}
.card-brand{text-align:center;font-size:clamp(16px,3vw,35px);font-weight:700;letter-spacing:-.065em;margin-top:4%}
.chip-lines{position:absolute;right:8%;bottom:9%;font-size:15px;letter-spacing:.07em;color:var(--card-ink);opacity:.7}
.phone{position:absolute;z-index:2;right:7%;top:9%;width:36%;max-width:220px;aspect-ratio:1/1.82;transform:rotate(9deg);border-radius:15% / 8%;padding:7px;background:#141a24;border:2px solid #818b9b;box-shadow:0 20px 50px #0008}
.phone-screen{height:100%;border-radius:inherit;background:#F2F5F7;color:#172537;overflow:hidden;text-align:center}
.notch{position:absolute;top:12px;left:36%;width:28%;height:10px;background:#131820;border-radius:20px;z-index:1}
.phone-cover,.profile-cover{background:repeating-radial-gradient(ellipse at 88% 100%,transparent 0 13px,#ffffff28 14px,transparent 15px 24px),linear-gradient(125deg,var(--card),var(--cover));color:white}
.phone-cover{height:38%}
.avatar{border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--card-ink);border:3px solid white;font-family:var(--heading-font)}
.phone .avatar{width:28%;aspect-ratio:1;margin:-14% auto 8%;position:relative}
.phone strong,.phone small{display:block}
.phone strong{font-family:var(--heading-font);font-size:clamp(11px,2vw,24px)}
.phone small{font-size:clamp(8px,1vw,12px);margin-top:4px}
.phone a{display:block;background:var(--card);color:var(--card-ink);border-radius:20px;margin:9% 10% 0;padding:8px 4px;font-size:clamp(9px,1vw,12px)}
.stage-tag{position:absolute;bottom:3%;right:6%;font-size:10px;font-weight:700;letter-spacing:.17em;color:#e3e9f3;text-transform:uppercase}
.gallery,.how>.wrap{padding-block:68px}
h2{font-size:clamp(38px,5vw,66px);line-height:1.04;margin:10px 0 12px}
.section-note,.bio,.steps p,.fine{color:var(--muted)}
.templates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border:0;padding:0;margin:26px 0}
.tile{position:relative;display:block;border:1px solid var(--line);border-radius:15px;padding:9px;background:#FFFFFF;cursor:pointer}
.tile:has(input:checked){box-shadow:0 0 0 2px #0A3D91}
.tile:has(input:focus-visible){outline:3px solid #0095E5;outline-offset:5px}
.tile input{position:absolute;opacity:0;width:1px;height:1px}
.swatch{display:grid;place-items:center;height:clamp(70px,13vw,150px);border-radius:9px}
.swatch img{width:clamp(38px,12vw,86px)}
.tile-text{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:12px 5px 5px}
.tile-text small{display:block;color:var(--muted);margin-top:4px;font-size:12px}
.radio-dot{width:14px;height:14px;flex:none;border:1px solid #8b8479;border-radius:50%}
input:checked+.swatch+.tile-text .radio-dot{background:#0A3D91;box-shadow:inset 0 0 0 3px #fff}
.workbench{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;background:#EFF8FC;border:1px solid var(--line);border-radius:18px;padding:clamp(20px,4vw,48px)}
.workbench h3{font-size:clamp(35px,4vw,57px);margin:8px 0}
.face-toggle{display:inline-flex;background:#D9E4EC;border-radius:50px;padding:4px;margin:18px 0 10px}
.face-toggle button{border:0;border-radius:50px;background:transparent;color:var(--ink);font-size:13px;font-weight:700;padding:8px 16px}
.face-toggle button[aria-pressed=true]{background:var(--ink);color:white}
.fine{font-size:12px;line-height:1.5}
.text-link{display:inline-block;margin-top:15px;font-weight:700;font-size:13px}
.sample-card{width:min(100%,440px);margin:auto}
.card-back{flex-direction:row;justify-content:space-between;padding:10% 7%;gap:10px}
.card-back .foil{width:28%;margin-bottom:8%}
.card-back strong{font:clamp(19px,3.4vw,38px) var(--heading-font);display:block}
.card-back small{font-size:8px;letter-spacing:.1em}
.card-back a{flex:0 0 33%;border-radius:5px;overflow:hidden;background:white}
.card-back img#qr{width:100%;aspect-ratio:1}
.how{background:#eaeef0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:26px}
.steps>div{border-top:1px solid #a7b2bb;padding-top:18px}
.steps span{font-size:12px;font-weight:700;color:#674f2e}
.steps h3{font-size:20px;margin:10px 0}
footer{color:#f5f3eb;background:#06204D;font-size:12px}
.foot img{width:108px}
.profile-page{background:radial-gradient(ellipse at top,#d9e0eb,transparent 70%),var(--paper);min-height:100vh}
.profile-wrap{width:min(460px,calc(100% - 32px));margin:auto;padding:28px 0}
.profile-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:700;margin-bottom:14px}
.profile-nav span{font-size:10px;letter-spacing:.13em}
.profile{background:#FFFFFF;border:1px solid #d5d9de;border-radius:22px;overflow:hidden;box-shadow:0 14px 36px #1722391a}
.profile-cover{height:150px;display:flex;justify-content:space-between;align-items:flex-start;padding:22px}
.profile-cover img{width:42px}
.profile-cover span{font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.profile-body{padding:0 24px 24px}
.profile-body.studio{padding-top:24px}
.profile-body .avatar{width:76px;height:76px;position:relative;margin-top:-38px;font-size:27px}
.profile-body h1{font-size:46px;margin-top:10px}
.role{font-size:14px;font-weight:700;margin:4px 0 12px}
.bio{font-size:14px;margin-bottom:15px}
.save,.copy{width:100%}
.save{background:var(--card);color:var(--card-ink);margin-bottom:12px}
.contact{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.contact:hover{text-decoration:underline}
.contact small{display:block;font-size:9px;font-weight:700;letter-spacing:.13em;margin-bottom:4px}
.copy{background:none;border-color:#bcb8ad;justify-content:center;margin:10px 0}
.profile-signature{text-align:center;margin-top:18px;font-size:12px;font-weight:700}
@media(max-width:760px){
  .wrap{width:calc(100% - 36px)}
  nav{display:none}
  .bar{min-height:62px}
  .hero-grid{display:block}
  .intro{padding:43px 0 12px}
  .stage{min-height:0;height:min(82vw,460px);max-width:520px;margin:auto}
  .hero-card{width:62%;left:3%}
  .phone{right:9%}
  .gallery,.how>.wrap{padding-block:43px}
  .templates{gap:8px}
  .tile{padding:5px}
  .tile-text{padding:8px 3px 4px;align-items:flex-start}
  .tile-text small{font-size:10px}
  .radio-dot{width:11px;height:11px;margin-top:2px}
  .workbench{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:18px}
}

/* CONNECT marketing page */
:root {
  --paper: #F2F5F7;
  --ink: #06204D;
  --muted: #53616b;
  --line: #D9E4EC;
  --brand-cyan: #0095E5;
  --brand-navy: #0A3D91;
  --accent-ink: #0A3D91;
}
html[dir=rtl] { --body-font: "Noto Sans Arabic", Inter, Tahoma, sans-serif; --heading-font: var(--body-font); }
html[dir=rtl] :is(h1,h2,h3) { font-family: inherit; letter-spacing: normal; line-height: 1.2; }
.top { border-bottom: 1px solid var(--line); }
.brand-lockup { display: inline-flex; align-items: center; gap: 8px; line-height: 1.15; }
.brand-lockup img { width: clamp(26px, 4vw, 40px); flex: none; }
.brand-lockup strong { display: block; font-size: clamp(16px, 2.15vw, 25px); letter-spacing: .04em; }
.brand-lockup small { display: block; margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: normal; white-space: nowrap; }
.identity { color: var(--brand-navy); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.locale-link { display: inline-flex; border: 1px solid var(--line); border-radius: 50px; padding: 8px 13px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.top-link, .primary { color: #fff; background: var(--brand-navy); border-color: transparent; }
.hero { color: var(--ink); background: var(--paper); padding-bottom: 34px; }
.hero-grid { grid-template-columns: 1.05fr 1fr; min-height: 610px; }
.hero .eyebrow, .solutions .eyebrow { color: var(--accent-ink); }
.hero i { background: var(--accent-ink); }
.hero h1 { font-size: clamp(46px, 5.85vw, 88px); }
.hero em { color: var(--accent-ink); font-style: normal; }
.lede { max-width: 485px; color: var(--muted); font-size: 18px; }
.outline { border-color: #789BB4; color: var(--ink); }
.stage { height: 500px; }
.stage::before { background: #0095E5; inset: 4% 8% 8% 14%; border-radius: 48% 48% 24% 24%; opacity: .38; mask-image: none; }
.orbit { border-color: #0095E560; border-style: dashed; width: 72%; aspect-ratio: 1; }
.orbit::after { display: none; }
.pedestal { position: absolute; z-index: -1; inset: auto 6% 1% 8%; height: 14%; border-radius: 50%; background: linear-gradient(#fff7,#fff0),linear-gradient(90deg,#D5EDF9,#EFF8FC,#D5EDF9); box-shadow: 0 20px 30px #a18c7026; }
.hero-card { width: 44%; left: 9%; top: 43%; z-index: 3; transform: rotate(-8deg); }
.phone { right: 16%; top: 10%; transform: rotate(0); width: 42%; max-width: 235px; }
.card-wordmark { width: 58%; margin-top: 4%; }
[data-theme=dune] .card-wordmark { filter: brightness(.34); }
.stage-note { position: absolute; z-index: 4; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 11px 14px; font-size: 11px; box-shadow: 0 12px 25px #7254331b; }
.stage-note b { display: block; color: var(--accent-ink); font-size: 15px; margin-bottom: 4px; }
.tap-note { left: 4%; top: 24%; }
.qr-note { right: 0; top: 55%; }
.stage-tag { color: var(--muted); bottom: 2%; right: 6%; }
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.benefits div { display: flex; align-items: center; gap: 11px; }
.benefits span, .solution-icon { flex: none; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; color: var(--accent-ink); background: #E7F7FF; font-weight: 700; font-size: 22px; }
.benefits small { display: block; color: var(--muted); margin-top: 4px; }
.solutions { padding-block: 52px 24px; }
.solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 25px; }
.solution { display: grid; align-content: start; gap: 10px; border: 1px solid var(--line); background: #FFFFFF; border-radius: 18px; padding: 22px; }
.solution:hover { border-color: var(--accent-ink); }
.solution b { font-size: 20px; }
.solution p { color: var(--muted); line-height: 1.55; }
.solution strong { color: var(--accent-ink); font-size: 13px; }
.how { background: #E7F7FF; }
.profile-locale { display: flex; justify-content: end; margin-bottom: 12px; }
html[dir=rtl] .stage { direction: ltr; }
html[dir=rtl] :is(.phone-content,.stage-note,.stage-tag) { direction: rtl; }
@media(max-width:760px) {
  .hero { padding-bottom: 20px; }
  .hero h1 { margin-block: 16px; }
  .lede { font-size: 16px; }
  .stage { height: min(96vw,450px); }
  .hero-card { left: 5%; top: 45%; }
  .phone { right: 17%; }
  .benefits { grid-template-columns: 1fr 1fr; padding: 13px; font-size: 12px; }
  .benefits span { width: 32px; height: 32px; }
  .solution-grid { grid-template-columns: 1fr; }
  .solutions { padding-block: 34px 8px; }
}
@media(max-width:360px) {
  .bar { gap: 6px; }
  .top-link,.locale-link { padding-inline: 9px; }
  .stage-note { padding: 7px 8px; }
}

/* Marketing navigation, catalogue and project enquiry */
.site-nav { gap: clamp(12px, 2vw, 30px); }
.solutions { padding-block-end: 55px; }
.content-section { padding-block: clamp(42px, 6vw, 82px); }
.content-section > .eyebrow, .section-heading .eyebrow, .product .eyebrow { color: var(--accent-ink); }
.content-section h1 { font-size: clamp(42px, 6vw, 82px); margin-block: 10px 15px; line-height: 1.04; }
.audience-section { background: #E7F7FF; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 25px; }
.product { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #FFFFFF; }
.product-art { display: grid; place-items: center; height: 188px; background: radial-gradient(ellipse, #FFFFFF, #E7F7FF); }
.product-card { width: 70%; transform: rotate(-9deg); }
.product-art.dune .card-wordmark { filter: brightness(.34); }
.product-stand { display: grid; place-items: center; width: 90px; gap: 8px; padding: 14px; background: var(--brand-navy); border: 1px solid var(--brand-cyan); border-radius: 10px; box-shadow: 0 14px 20px #06204D44; }
.product-stand img:first-child { width: 40px; }
.product-stand img:last-child { width: 48px; border-radius: 4px; }
.product-copy { padding: 16px; }
.product-copy h3 { margin-block: 6px; }
.product-copy > p:not(.eyebrow) { color: var(--muted); font-size: 14px; line-height: 1.5; }
.product-copy a + a { margin-inline-start: 12px; }
.shop-page { min-height: 72vh; }
.shop-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.shop-filters button { border: 1px solid var(--line); border-radius: 50px; padding: 8px 14px; background: #FFFFFF; color: var(--ink); }
.shop-filters button[aria-pressed=true] { background: var(--brand-navy); color: #fff; }
.faq-list { max-width: 800px; margin-top: 22px; }
.faq-list details { border-bottom: 1px solid var(--line); padding-block: 17px; }
.faq-list summary { cursor: pointer; font-weight: 700; }
.faq-list p { margin-block-start: 12px; color: var(--muted); line-height: 1.6; }
.project-banner { background: var(--brand-navy); color: #fff; }
.project-banner .eyebrow { color: #BCEBFF; }
.project-banner .primary { background: #BCEBFF; color: var(--brand-navy); margin-top: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-links a:hover { text-decoration: underline; }
.contact-page { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(25px, 6vw, 84px); }
.contact-address { margin-top: 30px; }
.contact-address a { display: inline-block; margin-top: 8px; text-decoration: underline; }
.enquiry { display: grid; gap: 13px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 18px; padding: clamp(16px, 4vw, 34px); }
.enquiry h2 { font-size: clamp(30px, 3.6vw, 48px); margin: 0; }
.enquiry label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.enquiry :is(input, select, textarea) { width: 100%; border: 1px solid #789BB4; border-radius: 8px; padding: 10px; font: inherit; font-weight: 400; color: var(--ink); background: #fff; }
.enquiry button { justify-self: start; }
.enquiry pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: var(--muted); }
#enquiry-result { border-top: 1px solid var(--line); padding-top: 16px; }
@media (max-width: 950px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bar { display: grid; grid-template-columns: 1fr auto; padding-block: 12px; gap: 10px; }
  .site-nav { display: flex; grid-row: 2; grid-column: 1 / -1; flex-wrap: wrap; gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 12px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .contact-page { grid-template-columns: 1fr; }
  .foot { flex-wrap: wrap; padding-block: 16px; }
  .product-art { height: 145px; }
}
@media (max-width: 360px) {
  .product-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; scroll-padding-block-start: 20px; }
  .button, .top-link, .locale-link, .shop-filters button {
    transition: background-color .24s ease, border-color .24s ease, filter .24s ease;
  }
  .face-toggle button { transition: background-color .24s ease, color .24s ease; }
  .card-display .physical:not([hidden]) { animation: card-face-in .38s cubic-bezier(.22, 1, .36, 1); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .solution, .product, .tile {
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), box-shadow .32s ease, border-color .24s ease;
  }
  :is(.solution, .product, .tile):hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 26px #06204D10;
  }
}
@keyframes card-face-in {
  from { opacity: .55; transform: perspective(650px) rotateY(12deg) scale(.985); }
  to { opacity: 1; transform: perspective(650px) rotateY(0) scale(1); }
}

/* Reference-led hero and section motion */
.hero-words, .word-window, .word-track, .word-track > span { display: block; }
.word-window { overflow: hidden; height: 2.12em; }
.word-track > span { height: 2.12em; overflow: hidden; padding-block: .10em .02em; }
html[dir=rtl] .word-window { height: 1.27em; margin-bottom: 0; }
html[dir=rtl] .word-track > span { height: 1.27em; }
.phone-idle, .profile-ready, .tap-pulse { display: none; }
.phone-screen { position: relative; }
.phone-idle { position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg,#06204D,#192e47); color: #fff; place-content: center; gap: 7px; pointer-events: none; }
.phone-idle span { font-size: clamp(22px,4vw,40px); font-weight: 300; margin-bottom: 18px; }
.phone-idle small { color: #ddd5c5; }
.profile-ready { position: absolute; z-index: 4; bottom: 12%; left: 10%; border: 1px solid var(--line); border-radius: 30px; padding: 9px 13px; background: #fff; color: var(--ink); font-size: 12px; pointer-events: none; }
.tap-pulse { position: absolute; z-index: 4; top: 33%; left: 58%; width: 14%; aspect-ratio: 1; pointer-events: none; }
.tap-pulse span { position: absolute; inset: 0; border: 2px solid var(--brand-cyan); border-radius: 50%; opacity: 0; }
.category-strip { padding-block: 26px; text-align: center; border-block: 1px solid var(--line); }
.category-strip .eyebrow { color: var(--accent-ink); }
.category-window { overflow: hidden; margin-top: 14px; direction: ltr; }
.category-track { display: flex; width: max-content; margin-inline: auto; }
.category-track > div { display: flex; flex-shrink: 0; }
.category-track span { white-space: nowrap; padding-inline: clamp(14px,3.8vw,62px); color: var(--muted); font-weight: 700; }
.category-track [aria-hidden] { display: none; }
.audience-picker { display: grid; grid-template-columns: minmax(190px, .58fr) minmax(0, 1fr); gap: 22px; margin-top: 26px; }
.audience-tabs { display: grid; gap: 8px; align-content: start; }
.audience-tabs button { text-align: start; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink); border-radius: 11px; padding: 14px 18px; font-weight: 700; }
.audience-tabs button[aria-selected=true] { background: var(--brand-navy); color: white; }
.audience-panel { min-height: 220px; border-radius: 18px; border: 1px solid var(--line); background: #FFFFFF; padding: clamp(22px,4vw,42px); }
.audience-panel h3 { margin-block: 13px 7px; font-size: 26px; }
.audience-panel p { color: var(--muted); line-height: 1.55; }
.project-grid { display: grid; grid-template-columns: 1fr minmax(150px,.35fr); align-items: center; gap: 36px; }
.project-card { width: 100%; transform: rotate(-8deg); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: var(--accent-ink); background: #E7F7FF; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
@media (min-width: 1200px) {
  html[lang=en] .hero h1 { font-size: clamp(48px, 4.8vw, 75px); }
  html[lang=en] :is(.word-window, .word-track > span) { height: 1.12em; }
}
@media (max-width: 760px) {
  .audience-picker, .project-grid { grid-template-columns: 1fr; gap: 13px; }
  .project-card { width: min(70%,240px); margin-inline: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .word-track { animation: cycle-words 10s cubic-bezier(.7,0,.2,1) 2; }
  .hero-card { animation: approach-phone 7s cubic-bezier(.55,.05,.3,1) 3; }
  .tap-pulse { display: block; }
  .tap-pulse span { animation: scan-ring 7s ease-out 3; }
  .tap-pulse span + span { animation-delay: .25s; }
  .phone-idle { display: grid; animation: waiting-phone 7s ease 3; animation-fill-mode: forwards; }
  .phone-content { animation: show-phone-profile 7s ease 3; }
  .phone:focus-within .phone-idle { display: none; }
  .phone:focus-within .phone-content { animation: none; }
  .profile-ready { display: block; opacity: 0; animation: show-profile-ready 7s ease 3; }
  .orbit { animation: orbit-turn 60s linear 1; }
  .category-track { animation: category-slide 45s linear 1; }
  .category-track [aria-hidden] { display: flex; }
  .category-window:hover .category-track { animation-play-state: paused; }
  .audience-tabs button, .faq-list summary::after { transition: background-color .25s, color .25s, transform .3s; }
  .audience-panel:not([hidden]), .faq-list details[open] p { animation: panel-rise .45s cubic-bezier(.2,.7,.2,1) both; }
  .product-art > div { transition: scale .7s cubic-bezier(.2,.7,.2,1); }
  .product:is(:hover,:focus-within) .product-art > div { scale: 1.07; }
  .project-card { animation: project-float 6s ease-in-out 3; }
}
@keyframes cycle-words {
  0%,17% { translate: 0 0; }
  22%,39% { translate: 0 -20%; }
  44%,61% { translate: 0 -40%; }
  66%,88% { translate: 0 -60%; }
  96%,100% { translate: 0 -80%; }
}
@keyframes approach-phone {
  0%,10%,63%,100% { transform: rotate(-8deg); }
  30%,44% { transform: translate(43%,-34%) rotate(-3deg); }
  34% { transform: translate(40%,-31%) rotate(-3deg); }
}
@keyframes scan-ring {
  0%,30% { opacity: 0; scale: .4; }
  34% { opacity: .8; }
  51%,100% { opacity: 0; scale: 1.7; }
}
@keyframes waiting-phone {
  0%,33% { opacity: 1; }
  43%,91% { opacity: 0; }
  98% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes show-phone-profile {
  0%,36% { opacity: 0; translate: 0 14px; }
  51%,92%,100% { opacity: 1; translate: 0 0; }
}
@keyframes show-profile-ready {
  0%,51%,96%,100% { opacity: 0; translate: 0 8px; }
  59%,87% { opacity: 1; translate: 0 0; }
}
@keyframes orbit-turn { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes category-slide { to { translate: -50% 0; } }
@keyframes panel-rise { from { opacity: .35; translate: 0 13px; } to { opacity: 1; translate: 0 0; } }
@keyframes project-float { 50% { translate: 0 -9px; } }

@media (prefers-reduced-motion: reduce) {
  .category-track { width: auto; }
  .category-track > div { flex-wrap: wrap; justify-content: center; gap: 9px 0; }
}

/* Keep the QR square and scannable as soon as the back is shown. */
.card-display .card-back:not([hidden]) { animation: none; }

/* CONNECT solution demos */
.demo-page { min-height: 74vh; }
.demo-back { margin: 0 0 18px; }
.demo-heading { border-radius: 22px; padding: clamp(24px,5vw,60px); color: #fff; background: radial-gradient(ellipse at top right,#34475b,transparent 65%),var(--brand-navy); }
.demo-heading .eyebrow { color: #BCEBFF; }
.demo-heading h1 { margin-block: 12px; }
.demo-heading > p:last-child { color: #E7F7FF; max-width: 55ch; line-height: 1.6; }
.demo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 22px; }
.demo-panel { background: #FFFFFF; border: 1px solid var(--line); border-radius: 17px; padding: clamp(18px,3vw,32px); }
.demo-panel h2 { font-size: clamp(26px,3vw,42px); }
.demo-panel p { line-height: 1.6; color: var(--muted); }
.demo-panel strong { display: inline-block; margin-top: 12px; color: var(--accent-ink); }
.guide-list { max-width: none; }
.invite-details { display: grid; align-content: center; gap: 4px; }
.review-display { text-align: center; background: var(--brand-navy); color: #fff; }
.review-display p { color: #E7F7FF; }
.review-symbol { width: 54px; margin: 0 auto; }
.review-display a { display: inline-block; margin: 8px 0; }
.review-qr { width: 124px; border-radius: 9px; }
.review-copy details { margin-top: 14px; }
.review-copy summary { cursor: pointer; font-weight: 700; }
.review-copy details p { margin-top: 10px; }
@media (max-width: 650px) {
  .demo-grid { grid-template-columns: 1fr; }
}

.free-tool { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; padding: clamp(16px, 4vw, 32px); border: 1px solid var(--line); background: #E7F7FF; border-radius: 18px; }
.free-tool p { margin-top: 6px; color: var(--muted); line-height: 1.5; }
.upcoming-card img, .demo-art { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 12px; background: #e8dfcf; }
.demo-art { border-radius: 17px; }
.generated-qr { display: grid; gap: 14px; justify-items: center; align-content: center; }
.generated-qr img { width: min(100%, 300px); image-rendering: pixelated; }
@media (max-width: 650px) { .free-tool { align-items: flex-start; flex-direction: column; } }

.service-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(22px,4vw,60px); }
.service-hero h1 { font-size: clamp(43px,5.5vw,79px); }
.service-hero .eyebrow, .service-demo-section .eyebrow { color: var(--accent-ink); }
.service-photo { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: 22px; border: 1px solid var(--line); }
.service-demo-section { background: #E7F7FF; }
.service-frame { display: block; width: 100%; height: 700px; margin-top: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; }
.service-faq { background: #FFFFFF; }
[data-embedded] :is(.top, footer, .demo-back, .profile-nav, .profile-locale) { display: none; }
[data-embedded] .demo-page { min-height: 0; padding-block: 22px; }
[data-embedded] .profile-wrap { padding-block: 18px; }
@media (max-width: 760px) {
  .service-hero { grid-template-columns: 1fr; }
  .service-hero h1 { font-size: clamp(39px,8vw,56px); }
}

/* Homepage composition and contact widget */
.qr-note { display: grid; justify-items: center; gap: 5px; }
.qr-note svg { color: var(--accent-ink); }
.feature-card { display: flex; flex-direction: column; padding: 0; gap: 0; overflow: hidden; border-radius: 24px; }
.feature-art { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 225px; overflow: hidden; background: #E7F7FF; }
.feature-digital-menu .feature-art { background: #E7F7FF; }
.feature-google-reviews .feature-art { background: #E7F7FF; }
.feature-art::before { content: ''; position: absolute; height: 92%; aspect-ratio: 1; border: 1px dashed #fff; border-radius: 50%; z-index: -1; }
.feature-badge { position: absolute; z-index: 1; inset: 13px auto auto 13px; padding: 7px 9px; border-radius: 9px; background: #FFFFFF; box-shadow: 0 6px 14px #06204D1b; font-size: 10px; font-weight: 700; color: var(--accent-ink); }
[dir=rtl] .feature-badge { left: auto; right: 13px; }
.feature-image { width: min(67%, 240px); max-height: 177px; object-fit: contain; background: #fff; border: 7px solid #fff; border-radius: 15px; transform: rotate(-5deg); box-shadow: 0 17px 25px #06204D40; }
.feature-google-reviews .feature-image { width: auto; height: 185px; }
.feature-nfc { display: grid; place-items: center; aspect-ratio: 1.28; }
.feature-nfc .physical { width: 78%; }
.feature-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.feature-body h3 { font: 700 clamp(21px,2vw,28px)/1.15 var(--heading-font); }
[dir=rtl] .feature-body h3 { font-family: inherit; }
.feature-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 9px; }
.feature-foot > span { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: #D5EDF9; color: var(--accent-ink); }
[dir=rtl] :is(.feature-foot,.audience-tabs,.audience-links) span[aria-hidden=true] { scale: -1 1; }
#audiences .audience-picker { margin: 0; background: #FFFFFF; border: 1px solid var(--line); border-radius: 28px; padding: clamp(18px,4vw,44px); gap: clamp(18px,3vw,38px); }
#audiences .audience-picker h2 { font-size: clamp(34px,4vw,55px); margin-bottom: 24px; }
.audience-tabs button { display: flex; justify-content: space-between; gap: 8px; background: var(--paper); }
.audience-tabs button[aria-selected=true] { background: var(--brand-navy); }
#audiences .audience-panel { background: #E7F7FF; min-height: 100%; }
.audience-links { display: grid; gap: 10px; margin: 23px 0; padding: 0; list-style: none; }
.audience-links a { display: grid; grid-template-columns: 33px 1fr auto; align-items: center; gap: 12px; background: #FFFFFF; border-radius: 13px; padding: 11px 13px; box-shadow: 0 7px 15px #06204D10; font-weight: 700; font-size: 14px; }
.audience-links img { width: 33px; height: 33px; padding: 6px; object-fit: contain; border-radius: 8px; background: var(--brand-navy); }
.audience-links a:hover { text-decoration: underline; }
#faq > :is(h2,.eyebrow) { text-align: center; }
#faq .faq-list { margin: 28px auto 0; max-width: 900px; display: grid; gap: 11px; }
#faq details { border: 1px solid var(--line); border-radius: 19px; background: #FFFFFF; padding: 16px 20px; }
#faq details[open] { border-color: #789BB4; }
#faq details[open] summary::after { transform: none; background: var(--brand-navy); color: white; content: '−'; }
.home-project { margin-block: 25px clamp(48px,7vw,100px); border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(120deg,#D5EDF9,#EFF8FC); }
.home-project .project-grid { grid-template-columns: 1.12fr .78fr; padding: clamp(24px,5vw,58px); }
.home-project-photo { width: min(100%, 355px); aspect-ratio: 1; object-fit: cover; justify-self: center; border: 9px solid #FFFFFF; border-radius: 19px; box-shadow: 0 20px 28px #06204D30; transform: rotate(-5deg); }
.site-footer { padding-top: clamp(34px,6vw,68px); background: var(--brand-navy); color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3,1fr); gap: 26px; }
.footer-grid h2 { font: 700 15px/1.3 var(--body-font); letter-spacing: normal; margin: 0 0 14px; }
[dir=rtl] .footer-grid h2 { font-family: inherit; }
.footer-grid a { display: block; color: #E1EFF8; line-height: 1.5; margin-bottom: 9px; font-size: 13px; }
.footer-grid a:hover { text-decoration: underline; }
.footer-brand .brand-lockup { color: #fff; margin-bottom: 6px; }
.footer-brand p { color: #E1EFF8; line-height: 1.6; margin-bottom: 12px; max-width: 30ch; }
.footer-base { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #ffffff29; margin-top: 30px; padding: 17px 0; color: #E1EFF8; }
.floating-contact { position: fixed; z-index: 15; inset-inline-start: max(16px, env(safe-area-inset-left)); inset-block-end: max(16px, env(safe-area-inset-bottom)); }
.floating-contact summary { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; }
.floating-contact summary::-webkit-details-marker { display: none; }
.floating-contact svg { box-sizing: content-box; padding: 12px; border-radius: 50%; color: #fff; background: var(--brand-navy); border: 1px solid #0095E5; box-shadow: 0 6px 20px #06204D30; }
.floating-contact summary span, .floating-links { color: var(--ink); background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 6px 18px #06204D26; }
.floating-contact summary span { border-radius: 7px; padding: 5px 8px; font-size: 12px; }
.floating-links { position: absolute; inset-inline-start: 0; inset-block-end: calc(100% + 8px); display: grid; width: max-content; border-radius: 12px; padding: 8px; }
.floating-links a { border-radius: 7px; padding: 8px 10px; font-size: 14px; }
.floating-links a:hover { background: var(--paper); }
[data-embedded] .floating-contact { display: none; }
@media (max-width:760px) {
  .home-project .project-grid { grid-template-columns: 1fr; gap: 23px; }
  .home-project-photo { width: min(72%,300px); }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .floating-contact summary span { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
}
@media (prefers-reduced-motion: no-preference) {
  .qr-note { animation: scan-chip-float 5.5s ease-in-out infinite; }
  .feature-image { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .feature-card:is(:hover,:focus-visible) .feature-image { transform: rotate(0) scale(1.06); }
  .home-project-photo { animation: project-float 6s ease-in-out 3; }
}
@keyframes scan-chip-float { 50% { translate: 0 -9px; } }

.feature-menu-art { position: relative; }
.feature-menu-art > img:first-child { width: 100%; border-radius: 8px; }
.feature-menu-qr { position: absolute; width: 20%; left: calc(7px + (100% - 14px) * .18); top: calc(7px + (100% - 14px) * .32); border-radius: 2px; }

/* Service landing pages */
.service-page .service-hero { align-items: start; padding-block-start: clamp(24px,5vw,64px); }
.service-preview { border-radius: 22px; background: #FFFFFF; padding: clamp(14px,2.6vw,29px); border: 1px solid var(--line); box-shadow: 0 22px 42px #06204D20; }
.preview-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--accent-ink); font-size: 13px; }
.preview-top > span { font-size: 11px; }
.preview-top i { margin-inline-end: 5px; margin-inline-start: 0; }
.service-options { display: flex; flex-wrap: wrap; gap: 7px; margin-block: 14px; }
.service-options button { border-radius: 30px; border: 1px solid var(--line); padding: 7px 11px; background: #E7F7FF; color: var(--ink); font-size: 12px; font-weight: 700; }
.service-options button[aria-pressed=true] { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); }
.preview-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; align-items: center; }
.preview-stage .service-photo { border-radius: 13px; }
.preview-display { min-width: 0; display: grid; gap: 9px; align-content: center; }
.preview-display .button { min-height: 37px; font-size: 11px; padding: 7px 10px; }
.preview-display p { color: var(--muted); font-size: 12px; line-height: 1.45; }
.preview-nfc { width: 100%; max-width: 204px; margin-inline: auto; }
.preview-nfc[data-finish=dune] { --card:#d8bd94; --card-edge:#f9e4be; --foil-filter:sepia(1) brightness(.67); }
.preview-nfc[data-finish=dune] .card-wordmark { filter: brightness(.34); }
.preview-nfc[data-finish=tide] { --card:#173c3d; --card-edge:#4e7770; }
.mini-menu, .review-sample { background: #fff; border-radius: 13px; border: 1px solid var(--line); padding: 11px; font-size: 13px; }
.mini-menu ul { list-style: none; margin: 8px 0 0; padding: 0; }
.mini-menu li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px; padding-block: 7px; border-top: 1px solid var(--line); font-size: 11px; }
.mini-menu b { color: var(--accent-ink); }
.review-sample { display: grid; justify-items: center; gap: 6px; text-align: center; border: 2px solid #789BB4; background: var(--brand-navy); color: #fff; }
.review-sample[data-format=card] { border-radius: 8px; transform: rotate(-4deg) scale(.92); }
.review-stars { color: #BCEBFF; letter-spacing: .13em; }
.service-demo-section .content-section { padding-block: clamp(25px,5vw,65px); }
.service-demo-layout { display: grid; grid-template-columns: minmax(180px,.65fr) minmax(0,1.35fr); align-items: center; gap: clamp(14px,3vw,40px); margin-top: 19px; }
.service-demo-aside img { border: 5px solid white; border-radius: 12px; margin: 14px 0 8px; }
.service-demo-layout .service-frame { margin-top: 0; box-shadow: 0 15px 35px #06204D15; }
.service-band { background: #E7F7FF; }
.service-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.service-compare article { background: #FFFFFF; border: 1px solid var(--line); border-radius: 20px; padding: clamp(17px,3vw,36px); }
.service-compare h2 { font-size: clamp(27px,3.6vw,46px); }
.service-compare h3 { margin-bottom: 8px; }
.service-compare p, .service-team p { color: var(--muted); line-height: 1.55; }
.service-journey { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; margin-top: 20px; }
.journey-buttons { display: grid; gap: 9px; align-content: start; }
.journey-buttons button { display: flex; text-align: start; align-items: center; gap: 11px; min-height: 58px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 13px; color: var(--ink); background: #FFFFFF; font-weight: 700; }
.journey-buttons button[aria-pressed=true] { background: var(--brand-navy); color: #fff; }
.journey-buttons button span:first-child { border-radius: 50%; background: #D5EDF9; color: var(--brand-navy); padding: 6px; min-width: 31px; text-align: center; font-size: 12px; }
.journey-visual { overflow: hidden; background: #FFFFFF; border: 1px solid var(--line); border-radius: 20px; }
.journey-visual img { width: 100%; height: clamp(150px,21vw,265px); object-fit: cover; }
.journey-visual [data-journey-panel] { padding: 15px; }
.journey-visual p { color: var(--muted); margin-top: 5px; line-height: 1.5; }
.table-planner { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
.table-planner label { display: grid; gap: 4px; font-size: 13px; }
.table-planner input { width: 7ch; padding: 6px; border: 1px solid #789BB4; border-radius: 8px; }
.table-planner p { flex: 1 0 100%; }
.table-planner output { margin-inline-start: 6px; color: var(--ink); font-weight: 700; }
.service-checks { padding-inline-start: 20px; line-height: 1.85; color: var(--muted); }
[data-service=digital-business-card] .service-products [data-category=displays], .service-page:not([data-service=digital-business-card]) .service-products [data-category=cards] { display: none; }
.service-products .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.service-team { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.service-faq .wrap > :is(h2,.eyebrow) { text-align: center; }
.service-faq .faq-list { display: grid; gap: 10px; margin-inline: auto; }
.service-faq details { padding: 14px 17px; background: #fff; border: 1px solid var(--line); border-radius: 15px; }
.service-faq details[open] { border-color: #789BB4; }
.service-faq details[open] summary::after { transform: none; background: var(--brand-navy); color: #fff; content: '−'; }
@media (max-width: 760px) {
  .service-demo-layout, .service-compare, .service-journey { grid-template-columns: 1fr; }
  .service-products .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-team { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 360px) {
  .preview-stage, .service-products .product-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .preview-top i { animation: service-live-dot 2.4s ease-in-out infinite; }
  .preview-nfc, .review-sample, .journey-buttons button, .service-options button { transition: transform .35s, background-color .3s, border-color .3s; }
  .preview-display [data-preview-panel]:not([hidden]), .journey-visual [data-journey-panel]:not([hidden]), [data-service-result]:not([hidden]) { animation: panel-rise .45s cubic-bezier(.2,.7,.2,1) both; }
  @supports (animation-timeline: view()) {
    .service-page .content-section:not(.service-hero) > h2, .service-page .section-heading h2 { animation: service-mark linear both; animation-timeline: view(); animation-range: entry 5% cover 26%; }
  }
}
@keyframes service-live-dot { 50% { box-shadow: 0 0 0 5px #0095E535; } }
@keyframes service-mark { from { color: var(--accent-ink); } to { color: var(--ink); } }

.service-concept { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: center; gap: clamp(15px,4vw,35px); margin-top: 20px; border: 1px solid var(--line); border-radius: 20px; background: #FFFFFF; padding: clamp(14px,3vw,28px); }
.service-concept img { width: 100%; border-radius: 12px; aspect-ratio: 3/2; object-fit: cover; }
.service-concept h3 { margin: 8px 0; font-size: clamp(22px,3vw,34px); }
.service-concept p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.service-concept .button { margin-top: 14px; }
.concept-preview p { margin-top: 6px; }
[data-play-journey] { margin-top: 8px; }
.hotel-highlights span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #D5EDF9; color: var(--brand-navy); }
@media (max-width: 600px) {
  .service-concept { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .hotel-highlights span { animation: project-float 5s ease-in-out 3; }
  .hotel-highlights > div:nth-child(2) span { animation-delay: .25s; }
  .hotel-highlights > div:nth-child(3) span { animation-delay: .5s; }
}

@font-face { font-family: Newsreader; src: url('/fonts/newsreader.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: Inter; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Noto Sans Arabic"; src: url('/fonts/noto-sans-arabic.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
:root { --body-font: Inter, Arial, sans-serif; --heading-font: Newsreader, Georgia, serif; }
.share-section .content-section > :is(h2,.eyebrow,p) { text-align: center; }
.share-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin-top: 28px; align-items: start; }
.share-card { display: grid; overflow: hidden; border-radius: 21px; background: #FFFFFF; border: 1px solid var(--line); }
.share-art { display: grid; place-items: center; overflow: hidden; aspect-ratio: 1; background: #dce8ed; }
.share-card:nth-child(2) .share-art { background: #E7F7FF; }
.share-card:nth-child(3) .share-art { background: #d8ddd1; }
.share-card:nth-child(4) .share-art { background: #E7F7FF; }
.share-art > img { width: 100%; height: 100%; object-fit: cover; }
.share-art > .share-qr { width: 53%; height: auto; border-radius: 10px; }
.share-art-profile, .share-art-vcard { display: grid; place-items: center; gap: 6px; min-width: 62%; padding: 15px 10px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 13px 23px #06204D26; text-align: center; }
.share-art-profile span { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: var(--brand-navy); color: #fff; }
.share-art-vcard strong { font: 600 clamp(25px,4vw,42px)/1 var(--heading-font); }
.share-art-vcard span { color: var(--accent-ink); font-size: 21px; }
.share-info { padding: 16px; }
.share-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.share-label h3 { font: 600 clamp(19px,2.1vw,29px)/1.18 var(--heading-font); }
.share-label span { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #E7F7FF; }
[dir=rtl] .share-label span { scale: -1 1; }
.share-description p { padding-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) { .share-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 370px) { .share-info { padding: 10px; } }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .share-card { grid-template-rows: minmax(0,1fr) auto; aspect-ratio: .76; transition: box-shadow .25s ease; }
  .share-art { aspect-ratio: auto; min-height: 0; }
  .share-art > :not(.share-qr), .share-label span { transition: transform .28s cubic-bezier(.22,1,.36,1); }
  .share-card:is(:hover,:focus-visible) { box-shadow: 0 13px 24px #06204D19; }
  .share-card:is(:hover,:focus-visible) .share-art > :not(.share-qr) { transform: scale(1.04); }
  .share-description { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .24s ease, opacity .22s ease; }
  .share-description > div { overflow: hidden; min-height: 0; }
  .share-card:is(:hover,:focus-visible) .share-description { grid-template-rows: 1fr; opacity: 1; }
  .share-card:is(:hover,:focus-visible) .share-label span { transform: translateX(3px); }
}

/* The navigation stays in flow as its shell floats away from the top edge. */
.top {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  background: transparent;
  border: 0;
  pointer-events: none;
  isolation: isolate;
}
.top::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.top .bar { position: relative; pointer-events: auto; }
.top.is-floating::before { opacity: 0; }
.top.is-floating .bar { transform: translateY(10px); }
.top .bar::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 4px -14px;
  background: #FFFFFFf5;
  border: 1px solid #D9E4EC;
  border-radius: 22px;
  box-shadow: 0 12px 32px #06204D20;
  opacity: 0;
  pointer-events: none;
}
.top.is-floating .bar::before { opacity: 1; }
html { scroll-padding-block-start: var(--nav-clearance, 105px); }
@media (min-width: 1100px) {
  .top.is-floating .bar { width: min(1090px, calc(100% - 64px)); }
  .top .bar::before { inset-inline: -20px; border-radius: 50px; }
}
@media (max-width: 760px) {
  .top .bar::before { inset: 3px -9px; border-radius: 17px; }
}
@media (prefers-reduced-motion: no-preference) {
  .top .bar { transition: width .42s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1); }
  .top::before, .top .bar::before { transition: opacity .28s ease; }
}

.qr-hero { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); align-items: center; gap: clamp(22px,4vw,56px); }
.qr-workbench { border: 1px solid var(--line); border-radius: 24px; background: #FFFFFF; padding: clamp(15px,2.8vw,30px); box-shadow: 0 22px 42px #06204D1c; }
.qr-workbench-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 13px; align-items: center; }
.qr-fields { padding: 0; border: 0; background: transparent; }
.qr-fields fieldset { border: 0; padding: 0; min-inline-size: 0; display: grid; gap: 10px; }
.qr-fields .qr-color { grid-template-columns: auto 40px; align-items: center; justify-content: start; }
.qr-fields input[type=color] { width: 40px; height: 30px; padding: 2px; cursor: pointer; }
#qr-tool-status { font-size: 13px; color: var(--accent-ink); }
#qr-tool-status:empty { display: none; }
.qr-workbench .generated-qr { border-radius: 15px; background: #E7F7FF; padding: 12px; min-height: 130px; }
.qr-workbench .generated-qr img { height: auto; border-radius: 8px; }
.qr-workbench .generated-qr a { text-align: center; justify-content: center; font-size: 12px; }
.qr-shop-band { display: grid; grid-template-columns: 1fr minmax(0,.55fr); gap: 24px; align-items: center; }
.qr-shop-band img { border-radius: 17px; height: auto; }
.qr-shop-band .button { margin-top: 14px; }
.qr-page .home-project .content-section { padding-inline: clamp(19px,5vw,56px); }
@media (max-width: 900px) { .qr-hero { grid-template-columns: 1fr; } }
@media (max-width: 510px) {
  .qr-workbench-grid, .qr-shop-band { grid-template-columns: 1fr; }
  .qr-workbench .generated-qr img { max-width: 170px; }
}
@media (prefers-reduced-motion: no-preference) {
  .qr-fields fieldset:not([hidden]) { animation: panel-rise .32s cubic-bezier(.2,.7,.2,1) both; }
}

/* NFC storefront */
.store-strip { padding: 10px 18px; text-align: center; background: #e7d5ab; color: var(--brand-navy); font-size: 12px; font-weight: 700; }
.store-hero { display: grid; grid-template-columns: 1.02fr .98fr; overflow: hidden; margin-top: clamp(16px,3vw,36px); background: #FFFFFF; border-radius: clamp(22px,4vw,42px); border: 1px solid var(--line); }
.store-hero-copy { align-self: center; padding: clamp(24px,4.5vw,66px); }
.store-hero-copy h1 { font-size: clamp(46px,6.1vw,88px); line-height: .99; margin: 15px 0 14px; }
.store-hero-copy .eyebrow { color: var(--accent-ink); }
.store-hero-copy .button { margin-top: 22px; }
.store-benefits { display: grid; gap: 9px; list-style: none; padding: 0; margin: 24px 0 0; font-size: 14px; font-weight: 600; }
.store-benefits li { display: flex; align-items: center; gap: 8px; }
.store-benefits li::before { content: '✓'; padding: 3px 6px; border-radius: 5px; background: #D5EDF9; color: var(--ink); }
.store-hero-art { position: relative; overflow: hidden; min-height: 100%; background: var(--brand-navy); }
.store-hero-art img { width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: center 48%; }
.store-tap-badge { position: absolute; inset: auto auto 22px 22px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 22px; padding: 8px 12px; font-size: 11px; font-weight: 800; color: var(--ink); box-shadow: 0 8px 24px #0005; }
.store-tap-badge i { background: #a68447; }
.store-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 19px 0; font-size: 14px; }
.store-nav a { border-radius: 24px; padding: 7px 9px; }
.store-nav a:hover { background: #ebdfc6; }
.store-band { background: #FFFFFF; border-radius: 35px 35px 0 0; }
.nfc-store .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.nfc-store .product-art { height: clamp(145px,21vw,270px); }
.store-accessory-art img { width: 100%; height: 100%; object-fit: cover; }
.nfc-store .product-art { overflow: hidden; }
.nfc-store .product-copy { padding: 17px; }
.nfc-store .product-copy h3 { font: 600 clamp(23px,2.7vw,34px)/1.05 var(--heading-font); }
.store-steps { grid-template-columns: repeat(4,minmax(0,1fr)); }
.store-steps > div { background: #f5eddf; border-radius: 14px; padding: 18px; border: 0; }
.store-profile { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(20px,4vw,55px); }
.store-profile img { width: 100%; height: auto; border-radius: 21px; }
.store-profile .button { margin-top: 17px; }
.nfc-store #shop-teams { margin-block: 0 clamp(45px,6vw,80px); }
@media (max-width: 760px) {
  .store-hero, .store-profile { grid-template-columns: 1fr; }
  .store-hero-art { min-height: clamp(280px,84vw,510px); }
  .store-nav { gap: 4px 10px; font-size: 12px; }
  .nfc-store .product-grid, .store-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 430px) { .nfc-store .product-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .store-hero-art img { animation: store-hero-drift 9s ease-in-out 2; }
  .store-tap-badge { animation: project-float 5s ease-in-out 3; }
  .nfc-store .store-accessory-art img { transition: scale .65s cubic-bezier(.22,1,.36,1); }
  .nfc-store .product:is(:hover,:focus-within) .store-accessory-art img { scale: 1.06; }
}
@keyframes store-hero-drift { 50% { scale: 1.055; } }

.nfc-store .store-card-types { grid-template-columns: repeat(2,minmax(0,1fr)); }
.store-type-art { background: radial-gradient(ellipse,#FFFFFF,#ede1c9); }
.store-material-card { width: min(68%,230px); transform: rotate(-9deg); }
.store-type-symbol { width: 25%; }
.store-metal {
  --card: #475565;
  --card-edge: #e5e8ec;
  background: linear-gradient(123deg,#131c27,#60717f 44%,#242e3a 80%);
}
.store-wristband { display: grid; place-items: center; width: 145px; height: 84px; border-radius: 50%; border: 13px solid var(--brand-navy); transform: rotate(-12deg); box-shadow: 0 12px 22px #06204D30; }
.store-wristband span, .store-keychain span { display: grid; place-items: center; border: 1px solid #d4bb7a; background: var(--brand-navy); }
.store-wristband span { width: 54px; height: 36px; border-radius: 9px; translate: 0 30px; }
.store-keychain { display: grid; justify-items: center; transform: rotate(-14deg); filter: drop-shadow(0 10px 9px #06204D30); }
.store-keychain::before { content: ''; width: 27px; height: 27px; border: 4px solid #a38e63; border-radius: 50%; margin-bottom: -3px; }
.store-keychain span { width: 58px; height: 72px; border-radius: 15px; }
.store-sticker { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; border: 1px solid #b59a62; background: var(--brand-navy); box-shadow: 0 10px 16px #06204D30; }
.store-type-art :is(.store-wristband,.store-keychain,.store-sticker) img { width: 45%; }
@media (max-width: 430px) { .nfc-store .store-card-types { grid-template-columns: 1fr; } }

.store-catalogue .product { background: #FFFFFF; }
.store-catalogue .product-copy { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.store-catalogue .product-copy h3 { margin: 0; }
.store-catalogue .product-copy a + a { margin-inline-start: 0; }
.store-catalogue .product-copy a:last-child { margin-top: auto; width: 100%; text-align: center; border-radius: 30px; padding: 12px 15px; background: var(--brand-navy); color: white; }
.store-catalogue .product-copy > p:not(.eyebrow) { margin-bottom: 7px; }
.store-how { background: var(--brand-navy); color: white; border-radius: 35px 35px 0 0; }
.store-how .eyebrow, .store-reviews .eyebrow { color: #BCEBFF; }
.store-how .store-steps { display: grid; gap: clamp(12px,2vw,24px); margin-top: 25px; }
.store-step-art { position: relative; overflow: hidden; border-radius: 16px; background: #26394c; }
.store-step-art img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.store-step-art span { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; border: 1px solid #fff9; border-radius: 30px; padding: 5px 9px; background: #06204Ddc; font-size: 12px; }
.store-steps article h3 { font-size: clamp(16px,2vw,22px); margin: 11px 0 5px; }
.store-steps article p { color: #e9dfcf; font-size: 14px; line-height: 1.5; }
.store-reviews { overflow: hidden; border-radius: 35px 35px 0 0; padding-block: clamp(32px,6vw,72px); background: radial-gradient(ellipse at 18% 95%, #876437, transparent 59%), radial-gradient(ellipse at 72% 0, #263d58, transparent 62%), var(--brand-navy); color: #fff; }
.store-reviews-heading { text-align: center; margin-bottom: 25px; }
.store-reviews-heading > p:not(.eyebrow) { color: #E1EFF8; margin-top: 9px; font-size: 14px; }
.store-reviews-toggle { display: none; margin-top: 14px; border: 1px solid #fff9; border-radius: 20px; background: transparent; color: #fff; font-size: 13px; padding: 6px 12px; }
.store-reviews-toggle[aria-pressed=true] { background: #FFFFFF; color: var(--ink); }
.store-review-window { overflow: hidden; direction: ltr; }
.store-review-window + .store-review-window { margin-top: 14px; }
.store-review-group { margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 0 16px; }
.store-review-group[aria-hidden=true] { display: none; }
.store-review-group li { display: grid; grid-template-rows: auto 1fr auto; gap: 11px; width: clamp(205px,25vw,335px); min-height: 162px; border: 1px solid var(--line); border-radius: 18px; padding: 17px; background: #FFFFFF; color: var(--ink); }
[dir=rtl] .store-review-group li { direction: rtl; }
.store-review-stars { color: #896c3d; letter-spacing: .14em; }
.store-review-group p { line-height: 1.5; font-size: 14px; }
.store-review-group small { color: var(--muted); }
@media (max-width: 430px) { .store-how .store-steps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .store-reviews-toggle { display: inline-block; }
  .store-review-track { display: flex; width: max-content; animation: store-review-slide 35s linear infinite; }
  .store-review-window + .store-review-window .store-review-track { animation-direction: reverse; }
  .store-review-group, .store-review-group[aria-hidden=true] { display: flex; flex-wrap: nowrap; min-width: 100vw; justify-content: space-around; padding: 0 14px 0 0; }
  .store-review-group li { width: clamp(205px,calc((100vw - 42px) / 3),480px); }
  .store-reviews.reviews-paused .store-review-track, .store-review-window:hover .store-review-track { animation-play-state: paused; }
  .store-step-art img { transition: scale .55s cubic-bezier(.22,1,.36,1); }
  .store-steps article:hover img { scale: 1.05; }
}
@keyframes store-review-slide { to { translate: -50% 0; } }

/* Custom card application */
.order-page { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: clamp(24px,5vw,72px); }
.order-page h1 { font-size: clamp(40px,5vw,68px); }
.order-art { display: grid; place-items: center; aspect-ratio: 1.12; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(ellipse at 48% 38%, #FFFFFF, #e8dbc1); }
.order-card { width: 77%; max-width: 450px; overflow: hidden; background: var(--order-card-color, #06204D); border-color: #8e7750; }
.order-card > img { width: 100%; height: 100%; object-fit: contain; }
#order-card-fallback { display: grid; place-items: center; gap: 12px; padding: 8px; color: white; }
#order-card-fallback img { width: 58px; }
#order-placeholder { background: #06204D; border-radius: 20px; padding: 4px 10px; font-size: 12px; }
.order-form { display: grid; gap: 15px; margin-top: 24px; }
.order-form fieldset { min-inline-size: 0; display: grid; gap: 12px; border: 1px solid var(--line); background: #FFFFFF; border-radius: 15px; padding: 14px; }
.order-form legend { display: flex; align-items: center; gap: 8px; font-weight: 700; padding-inline: 5px; }
.order-form legend span { padding: 4px 7px; border-radius: 50%; background: #D5EDF9; color: var(--ink); font-size: 11px; }
.order-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 700; }
.order-form :is(input:not([type=checkbox],.sr-only), select, textarea) { min-width: 0; width: 100%; border: 1px solid #789BB4; border-radius: 8px; padding: 8px; font: inherit; font-weight: 400; color: var(--ink); background: #fff; }
.order-form input[type=color] { width: 52px; height: 35px; padding: 3px; }
.order-form .order-confirm { display: flex; align-items: baseline; gap: 8px; }
.order-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.order-form > button { justify-self: start; }
#order-status { overflow-wrap: anywhere; color: var(--accent-ink); font-weight: 700; font-size: 14px; }
#order-status:empty { display: none; }
@media (min-width: 761px) { .order-visual { position: sticky; top: var(--nav-clearance,105px); } }
@media (max-width: 760px) { .order-page { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 400px) { .order-details { grid-template-columns: 1fr; } }
.order-from-contact { margin-top: 18px; }

#order-proof { padding: 0; cursor: pointer; }
#order-proof:hover { box-shadow: 0 14px 34px #06204D50; }
.order-tiers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.order-tiers button { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px; padding: 8px; text-align: start; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-size: 12px; }
.order-tiers button span { background: #D5EDF9; border-radius: 15px; padding: 4px 6px; white-space: nowrap; }
.order-tiers button[aria-pressed=true] { border-color: var(--brand-navy); background: #E7F7FF; font-weight: 700; }
.order-estimate { border-radius: 12px; background: #E7F7FF; padding: 12px; }
.order-estimate dl { display: grid; gap: 7px; margin: 0; font-size: 13px; }
.order-estimate dl div { display: flex; justify-content: space-between; gap: 10px; }
.order-estimate dd { margin: 0; text-align: end; }
.order-estimate .order-total { border-top: 1px solid #D9E4EC; padding-top: 8px; font-weight: 800; }

.order-gallery {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  margin-block: 24px 0;
  padding: clamp(16px, 3vw, 38px);
  background: #E7F7FF;
  border: 1px solid var(--line);
  border-radius: 26px;
}
.order-gallery h2 { font-size: clamp(28px, 4vw, 46px); }
.order-gallery .section-note { margin-block: 10px 18px; }
.order-gallery-nav, .order-gallery-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.order-gallery-tabs { margin-top: 12px; }
.order-gallery button {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.order-gallery-nav button { font-size: 20px; line-height: 1; }
[dir=rtl] .order-gallery-nav button { scale: -1 1; }
.order-gallery button[aria-pressed=true] { background: var(--brand-navy); color: #fff; }
.order-gallery-media figure { margin: 0; }
.order-gallery-media :is(img,video) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.35;
  object-fit: cover;
  border-radius: 16px;
  background: var(--brand-navy);
}
.order-gallery-media video { object-fit: contain; }
.order-gallery-media figcaption { min-height: 2.5em; margin-top: 6px; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .order-gallery-media figure:not([hidden]) { animation: order-gallery-reveal .32s ease-out; }
  @keyframes order-gallery-reveal { from { opacity: .5; transform: translateY(4px); } }
}
.order-pdf-link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
#order-pdf-status { overflow-wrap: anywhere; }
#order-pdf-status:empty { display: none; }
@media (max-width: 680px) {
  .order-gallery { grid-template-columns: minmax(0,1fr); }
}

.order-band { border-radius: clamp(20px,4vw,48px); margin-block: 20px; }
.order-tap {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  overflow: hidden;
  background: #E7F7FF;
}
.order-tap > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.order-tap-copy { padding: clamp(22px,5vw,76px); }
.order-tap ol { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 9px; }
.order-tap li, .order-perks > div {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: #FFFFFF;
}
.order-tap li { position: relative; padding-inline-start: 44px; }
.order-tap li::before {
  content: '✓'; position: absolute; inset-inline-start: 14px; top: 14px;
  border-radius: 5px; padding: 1px 5px; color: var(--ink); background: #E7F7FF;
}
.order-tap li p, .order-perks p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.order-comparison { background: var(--brand-navy); color: #fff; }
.order-comparison .eyebrow { color: #BCEBFF; }
.order-comparison table {
  width: 100%; table-layout: fixed; margin-top: 24px; border-spacing: 0;
  border-radius: 20px; overflow: hidden; background: #FFFFFF; color: var(--ink);
}
.order-comparison th, .order-comparison td { padding: clamp(8px,2vw,19px); border-bottom: 1px solid var(--line); }
.order-comparison th:first-child { width: 48%; text-align: start; }
.order-comparison td { text-align: center; }
.order-comparison tr > :nth-child(2) { background: #E7F7FF; }
.order-comparison thead th:nth-child(2) { background: #BCEBFF; }
.order-comparison td > span[aria-hidden] { font-weight: 700; }
.order-comparison td:nth-child(2) > span[aria-hidden] { padding: 2px 7px; border-radius: 5px; background: #BCEBFF; }

.order-accessories { background: #E7F7FF; }
.order-accessory-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.order-accessory-heading button {
  width: 44px; height: 44px; border: 1px solid var(--brand-navy);
  border-radius: 50%; background: var(--brand-navy); color: white; cursor: pointer;
}
.order-accessory-heading button:disabled { background: transparent; color: var(--ink); opacity: .5; cursor: default; }
#order-products {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 3);
  gap: 18px; margin-top: 22px; padding-block: 3px 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
}
#order-products .product { min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start; }
#order-products .product-art { min-height: 210px; }
.order-quick { margin-top: 24px; }
.order-perks, .order-faq .faq-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.order-quick .faq-list { display: grid; gap: 8px; }
.order-quick .faq-list details, .order-faq .faq-list details {
  border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: #F2F5F7;
}
.order-faq { background: #FFFFFF; }
.order-faq .eyebrow, .order-faq h2 { text-align: center; }
.order-faq .faq-list { max-width: none; align-items: start; }
.order-feedback {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  margin-block: 28px; padding: clamp(16px,4vw,36px); border-radius: 22px; background: #E7F7FF;
}
.order-feedback h2 { font-size: clamp(22px,4vw,34px); margin-block: 4px 6px; }
.order-feedback span { color: var(--accent-ink); letter-spacing: .12em; }
@media (max-width: 850px) { #order-products { grid-auto-columns: calc((100% - 18px) / 2); } }
@media (max-width: 620px) {
  .order-tap, .order-faq .faq-list { grid-template-columns: minmax(0,1fr); }
  .order-tap > img { height: auto; aspect-ratio: 1.5; }
  #order-products { grid-auto-columns: 88%; }
  .order-comparison table { font-size: 13px; }
}

/* Profile plans and workspace */
.connect-plans, .builder { padding-block: clamp(32px, 5vw, 72px); }
.plan-intro { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.plan-intro .eyebrow, .builder-header .eyebrow { color: var(--brand-navy); }
.plan-intro h1, .builder-header h1 { font-size: clamp(36px, 5vw, 68px); margin-block: 10px; }
.plan-intro p:last-child, .builder-header > p:nth-of-type(2), .plan-card > p:not(.eyebrow, .plan-price) { color: var(--muted); line-height: 1.6; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan-card { display: flex; flex-direction: column; padding: clamp(18px, 2.6vw, 34px); border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.plan-card h2 { font-size: clamp(30px, 3.4vw, 48px); }
.plan-highlight { background: #e7f7ff; border-color: var(--brand-cyan); }
.plan-price { font-size: clamp(17px, 2vw, 25px); font-weight: 800; color: var(--brand-navy); margin-block-end: 12px; }
.plan-card ul, .nfc-offer ul { padding-inline-start: 20px; line-height: 1.6; }
.plan-card li + li, .nfc-offer li + li { margin-block-start: 6px; }
.plan-card .button { margin-block-start: auto; align-self: start; }
.plan-note { margin-block: 16px 42px; font-size: 14px; color: var(--muted); }
.nfc-offer { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); align-items: center; gap: clamp(22px, 5vw, 60px); padding: clamp(18px, 4vw, 48px); border-radius: 25px; background: #06204d; color: #fff; }
.nfc-offer img { width: 100%; height: auto; border-radius: 18px; }
.nfc-offer h2 { font-size: clamp(30px, 4vw, 55px); }
.nfc-offer p { line-height: 1.6; }
.nfc-offer .primary { background: #bcebff; color: #06204d; }
.builder-header { margin-block-end: 25px; }
.builder-grid { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1.35fr); align-items: start; gap: clamp(16px, 3vw, 36px); }
.builder-preview { position: sticky; top: 16px; background: #e7f7ff; border-radius: 24px; padding: clamp(16px, 3vw, 36px); }
.builder-preview > p { text-align: center; margin-block-end: 14px; color: var(--brand-navy); }
.builder-card { --profile-color: #0a3d91; max-width: 330px; min-height: 310px; margin-inline: auto; border: 6px solid #06204d; border-radius: 28px; overflow: hidden; background: white; box-shadow: 0 14px 35px #06204d26; }
.builder-cover { position: relative; height: 98px; background: linear-gradient(145deg, var(--profile-color), #06204d); }
#preview-cover { width: 100%; height: 100%; object-fit: cover; }
#preview-logo { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; width: 64px; height: 42px; padding: 4px; border-radius: 6px; object-fit: contain; background: #fff; }
.builder-card-body { padding: 0 16px 20px; overflow-wrap: anywhere; }
.builder-card[data-layout=centered] .builder-card-body { text-align: center; }
.builder-avatar { position: relative; display: grid; place-items: center; width: 62px; height: 62px; margin-block-start: -28px; border-radius: 50%; border: 3px solid white; background: #06204d; color: white; overflow: hidden; font-weight: 800; }
.builder-card[data-layout=centered] .builder-avatar { margin-inline: auto; }
#preview-photo { width: 100%; height: 100%; object-fit: cover; }
.builder-card h2 { font-size: 27px; margin-block: 9px 5px; }
.builder-card p, .builder-card small { color: var(--muted); }
#preview-links { list-style: none; padding: 0; font-size: 13px; }
#preview-links li { border-block-start: 1px solid var(--line); padding-block: 7px; }
.builder-editor { border: 1px solid var(--line); border-radius: 24px; background: #fff; padding: clamp(15px, 3vw, 34px); }
.builder-editor h2 { font-size: clamp(25px, 3vw, 38px); }
.builder-editor section > p { color: var(--muted); margin-block-end: 15px; }
.builder-drafts, .builder-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; justify-content: space-between; }
.builder-drafts label, .builder-fields label { display: grid; gap: 5px; min-width: 0; font-size: 13px; font-weight: 700; }
.builder-drafts select { max-width: min(220px, 65vw); }
.builder-editor input:not([type=checkbox]), .builder-editor select { width: 100%; min-width: 0; border: 1px solid #789bb4; border-radius: 8px; padding: 8px; min-height: 39px; font: inherit; color: var(--ink); background: white; }
.builder-editor input[type=color] { padding: 3px; }
.builder-editor :disabled { opacity: .55; }
.builder-steps { display: flex; flex-wrap: wrap; gap: 5px 24px; padding-inline-start: 20px; color: var(--muted); font-size: 13px; }
.builder-steps [aria-current=step] { color: var(--brand-navy); font-weight: 800; }
.builder-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.builder-fields .builder-check { display: flex; align-items: center; }
.builder-fields + .fine { margin-block-start: 12px; }
.builder-fields button { width: fit-content; border: 0; background: transparent; color: var(--brand-navy); padding: 2px 0; text-decoration: underline; }
.builder-nfc { padding: 15px; margin-block: 16px; background: #e7f7ff; border-radius: 12px; }
.builder-nfc h3 { margin-block: 5px; }
#builder-status { color: var(--brand-navy); min-height: 1.3em; margin-block: 12px; font-size: 13px; }
.builder-actions .primary { margin-inline-start: auto; }
@media (max-width: 760px) {
  .plan-grid, .nfc-offer, .builder-grid { grid-template-columns: 1fr; }
  .builder-preview { position: static; }
  .nfc-offer img { max-width: 340px; }
}
@media (max-width: 450px) {
  .builder-fields { grid-template-columns: 1fr; }
}
.builder-draft-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.builder-social-title { margin-block: 20px 10px; }
.builder-share { border: 1px solid var(--line); padding: 16px; border-radius: 14px; }
.builder-share p { margin-block: 7px 12px; color: var(--muted); }
.builder-share p a { text-decoration: underline; }
#profile-qr-image { margin-block-start: 14px; border: 1px solid var(--line); }
.published-profile { min-height: 100vh; background: radial-gradient(ellipse at top, #d3edff, #f2f5f7 72%); }
.published-wrap { width: min(470px, calc(100% - 28px)); margin-inline: auto; padding-block: clamp(16px, 6vh, 54px); }
.published-toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 0 4px 14px; color: var(--brand-navy); font-size: 13px; font-weight: 700; }
.published-toolbar a { text-decoration: underline; }
.published-card { max-width: none; border-width: 1px; border-color: var(--line); }
.published-card .builder-cover { height: clamp(100px, 25vw, 155px); }
.published-card .builder-card-body { padding: 0 clamp(16px, 5vw, 28px) 22px; }
.published-card .builder-avatar { width: 76px; height: 76px; margin-block-start: -36px; }
.published-card h1 { margin-block: 12px 5px; font-size: clamp(29px, 7vw, 46px); }
.published-links { list-style: none; padding: 0; margin-block: 18px; }
.published-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-block-start: 1px solid var(--line); }
.published-links a:hover b { text-decoration: underline; }
.published-links small { display: block; margin-block-start: 3px; }
.published-actions { display: grid; gap: 8px; text-align: center; }
.published-actions .button { justify-content: center; }
.published-brand { display: flex; justify-content: center; align-items: center; gap: 7px; margin-block-start: 18px; color: var(--brand-navy); font-size: 13px; font-weight: 700; }
.published-brand img { width: 21px; }

.published-photo-trigger { cursor: zoom-in; padding: 0; overflow: visible; }
.published-photo-trigger img { border-radius: 50%; }
.published-photo-trigger span { position: absolute; inset-inline-end: -5px; inset-block-end: -4px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; border: 2px solid white; background: #06204d; color: white; font-size: 13px; }
.published-photo-dialog { width: fit-content; max-width: calc(100% - 28px); padding: 12px; border: 0; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 20px 80px #0006; }
.published-photo-dialog::backdrop { background: #04132bd9; }
.published-photo-dialog form { display: flex; justify-content: end; margin-block-end: 10px; }
.published-photo-dialog img { width: auto; max-width: min(72vw, 600px); max-height: 72vh; object-fit: contain; border-radius: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .published-card { animation: published-enter .56s cubic-bezier(.2,.7,.3,1) both; }
  .published-links, .published-actions { animation: published-enter .46s .12s ease-out both; }
  .published-links a, .published-photo-trigger, .published-actions a, .published-brand { transition: transform .2s ease, background-color .2s ease; }
  .published-links a:hover { transform: translateY(-2px); background-color: #f2f8fc; }
  .published-photo-trigger:hover, .published-actions a:hover, .published-brand:hover { transform: translateY(-2px); }
  .published-photo-dialog[open] { animation: published-enter .26s ease-out both; }
}
@keyframes published-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.published-links a { justify-content: start; border-radius: 10px; padding-inline: 7px; }
.published-links a:is(:hover, :focus-visible) { background-color: #f2f8fc; }
.published-link-label { flex: 1; min-width: 0; }
.published-link-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  height: 34px;
  border-radius: 8px;
  background: white url('/brand-assets/profile-icons.webp') var(--icon-x) var(--icon-y) / 800px 564px no-repeat;
  mix-blend-mode: multiply;
}
.published-link-icon[data-icon=email] { --icon-x: -197px; --icon-y: -283px; }
.published-link-icon[data-icon=phone] { --icon-x: -95px; --icon-y: -283px; }
.published-link-icon[data-icon=website] { --icon-x: -352px; --icon-y: -283px; }
.published-link-icon[data-icon=facebook] { --icon-x: -43px; --icon-y: -41px; }
.published-link-icon[data-icon=instagram] { --icon-x: -95px; --icon-y: -41px; }
.published-link-icon[data-icon=x] { --icon-x: -148px; --icon-y: -41px; }
.published-link-icon[data-icon=tiktok] { --icon-x: -252px; --icon-y: -41px; }
.published-link-icon[data-icon=youtube] { --icon-x: -304px; --icon-y: -41px; }
.published-link-icon[data-icon=telegram] { --icon-x: -462px; --icon-y: -41px; }
.published-link-icon[data-icon=whatsapp] { --icon-x: -514px; --icon-y: -41px; }
.published-link-icon[data-icon=threads] { --icon-x: -566px; --icon-y: -41px; }
.published-link-icon[data-icon=snapchat] { --icon-x: -671px; --icon-y: -41px; }
.published-link-icon[data-icon=linkedin] { --icon-x: -723px; --icon-y: -41px; }
.published-link-icon[data-icon=github] { background: none; }
.published-link-icon svg { width: 25px; height: 25px; }
.published-link-arrow { color: var(--brand-navy); }
@media (prefers-reduced-motion: no-preference) {
  .published-link-icon, .published-link-arrow { transition: transform .2s ease; }
  .published-links a:is(:hover, :focus-visible) .published-link-icon { transform: scale(1.1); }
  .published-links a:is(:hover, :focus-visible) .published-link-arrow { transform: translate(2px, -2px); }
}

.connect-account { max-width: 680px; }
.connect-account h1 { font-size: clamp(32px, 6vw, 50px); margin-block-end: 14px; }
.connect-account section > p { margin-block: 10px; }
.connect-account form { display: grid; gap: 12px; margin-block: 15px; }
.connect-account form button { justify-self: start; }
.connect-account form input { display: block; margin-block-start: 5px; }
.account-cards { display: grid; gap: 10px; padding: 0; list-style: none; }
.account-cards li { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.account-cards strong { flex-basis: 100%; }
.account-cards a { color: var(--brand-navy); text-decoration: underline; }

/* CONNECT card onboarding */
.onboarding-page { background: #f5f2eb; }
.onboarding { --editor-paper: #fcfbf8; padding: 0; }
.onboarding .builder-grid { grid-template-columns: minmax(0, 39fr) minmax(0, 61fr); gap: 0; }
.onboarding .builder-preview {
  top: 0;
  min-height: 100svh;
  padding: clamp(18px, 2.5vw, 40px);
  background: transparent;
  border-radius: 0;
}
.onboarding .brand-lockup { color: var(--brand-navy); }
.onboarding .builder-preview > p { margin-block: clamp(22px, 5vh, 56px) 12px; }
.onboarding .builder-card {
  width: min(100%, 350px);
  height: clamp(375px, 73svh, 720px);
  max-width: none;
  border: 11px solid #111827;
  border-radius: 46px;
  overflow-y: auto;
  scrollbar-width: thin;
  box-shadow: 0 0 0 2px #7c8290, 0 14px 32px #06204d20;
}
.onboarding .builder-cover {
  height: clamp(115px, 17svh, 183px);
  background:
    radial-gradient(ellipse at 95% 8%, #6dd8efb3, transparent 64%),
    radial-gradient(ellipse at 70% 120%, #66b9ffb3, transparent 65%),
    linear-gradient(145deg, var(--profile-color), #06204d);
}
.onboarding #preview-logo {
  inset-block: auto -20px;
  width: 86px;
  height: 52px;
  border: 2px solid white;
  box-shadow: 0 3px 8px #06204d22;
}
.onboarding .builder-card-body { padding-inline: 18px; }
.onboarding .builder-avatar {
  width: 78px;
  height: 78px;
  margin-block-start: -38px;
  background: var(--profile-color);
  box-shadow: 0 2px 8px #06204d20;
}
.onboarding .builder-card h2 { margin-block: 18px 6px; font-weight: 800; line-height: 1.15; font-family: inherit; font-size: clamp(20px, 2vw, 27px); }
.onboarding #preview-role { font-size: 14px; }
.onboarding #preview-links { display: grid; gap: 8px; margin-block: 20px; }
.onboarding #preview-links li { display: flex; align-items: center; gap: 10px; border: 0; padding: 0; font-weight: 700; }
.onboarding [data-layout=centered] #preview-links li { justify-content: center; }
.onboarding .builder-editor {
  min-height: 100svh;
  padding: clamp(20px, 3.8vw, 66px) clamp(22px, 4vw, 72px) 0;
  border: 0;
  border-radius: 38px 0 0 38px;
  background: var(--editor-paper);
}
.onboarding .builder-editor :is(header, .builder-drafts, .builder-steps, section) { max-width: 760px; }
.onboarding .builder-header h1 { font-size: clamp(34px, 3.7vw, 60px); }
.onboarding-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-block-end: clamp(26px, 4vw, 55px); font-size: 13px; font-weight: 700; color: var(--brand-navy); }
.onboarding-links a:is(:hover, :focus-visible) { text-decoration: underline; }
.onboarding .builder-drafts { align-items: center; }
.onboarding .builder-drafts label { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.onboarding .builder-drafts .button { min-height: 36px; padding: 6px 13px; }
.onboarding .builder-steps { margin-block: 20px 25px; }
.onboarding .builder-fields input { border-color: #c9cfd4; border-radius: 8px; min-height: 48px; padding-inline: 12px; font-size: 15px; font-weight: 500; }
.onboarding .builder-editor input.sr-only { width: 1px; min-height: 0; padding: 0; }
.onboarding section:first-of-type > h3 { margin-block: 32px 13px; font: inherit; font-size: 23px; font-weight: 750; }
.onboarding .builder-editor .onboarding-required { margin-block: 6px 12px; }
.onboarding-details { margin-block: 12px; }
.onboarding-details summary { width: fit-content; cursor: pointer; border: 1px solid #ccd2d9; border-radius: 24px; padding: 7px 12px; font-size: 13px; font-weight: 700; }
.onboarding-details .builder-fields { margin-block-start: 12px; }
.onboarding-uploads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 525px; }
.onboarding-upload {
  display: grid;
  position: relative;
  place-content: center;
  justify-items: center;
  gap: 5px;
  min-height: 91px;
  padding: 8px;
  overflow: hidden;
  background: #f2eee5;
  border: 1px solid transparent;
  border-radius: 11px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.onboarding-upload span { font-size: 22px; font-weight: 400; }
.onboarding-upload img { width: 44px; height: 36px; object-fit: contain; }
.onboarding-upload:has(img:not([hidden])) > span { display: none; }
.onboarding-upload:has(:disabled) { opacity: .65; cursor: default; }
.onboarding-upload:not(:has(:disabled)):hover { border-color: var(--brand-navy); }
.onboarding-upload:focus-within { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.onboarding-swatches, .onboarding-layouts { display: flex; flex-wrap: wrap; gap: 10px; }
.onboarding-swatch, .onboarding-custom-color {
  width: 29px;
  height: 29px;
  display: inline-grid;
  place-items: center;
  background: var(--swatch);
  border: 1px solid #11182733;
  border-radius: 6px;
}
.onboarding .onboarding-custom-color input { min-height: 0; height: 100%; padding: 2px; border: 0; background: transparent; }
.onboarding-layouts button { width: 102px; border: 1px solid #ccd2d9; border-radius: 10px; background: #fff; padding: 0 0 10px; overflow: hidden; color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; }
.onboarding-layouts button span { display: block; position: relative; height: 81px; margin-block-end: 8px; background: linear-gradient(#e1edf6 48%, #fff 48%); }
.onboarding-layouts button span::before { content: ''; position: absolute; inset-block-start: 28px; inset-inline-start: 10px; width: 19px; height: 19px; border-radius: 50%; background: #83a9c6; border: 2px solid white; }
.onboarding-layouts button span::after { content: ''; position: absolute; inset-block-start: 54px; inset-inline-start: 11px; width: 57%; height: 4px; background: #c5d4df; box-shadow: 0 9px 0 #e4ecf0; border-radius: 4px; }
.onboarding-layouts [data-layout-choice=centered] span::before { inset-inline-start: calc(50% - 10px); }
.onboarding-layouts [data-layout-choice=centered] span::after { inset-inline-start: 22%; }
.onboarding :is(.onboarding-swatch, .onboarding-layouts button)[aria-pressed=true] { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.onboarding :is(.onboarding-swatch, .onboarding-layouts button):enabled { cursor: pointer; }
.onboarding :is(.onboarding-swatch, .onboarding-layouts button):enabled:hover { box-shadow: 0 2px 8px #06204d33; }
.onboarding .builder-actions { position: sticky; bottom: 0; z-index: 1; padding-block: 12px max(12px, env(safe-area-inset-bottom)); background: var(--editor-paper); border-block-start: 1px solid #e8e5df; }
.onboarding #builder-status:not(:empty) { position: sticky; bottom: 70px; z-index: 1; padding: 8px; background: var(--editor-paper); }
@media (prefers-reduced-motion: no-preference) {
  .onboarding :is(.onboarding-upload, .onboarding-swatch, .onboarding-layouts button) { transition: border-color .18s ease, box-shadow .18s ease; }
}
@media (max-width: 800px) {
  .onboarding .builder-grid { grid-template-columns: minmax(0, 1fr); }
  .onboarding .builder-preview { min-height: 0; padding-block-end: 24px; }
  .onboarding .builder-preview > p { margin-block-start: 16px; }
  .onboarding .builder-card { height: 315px; min-height: 0; max-width: 265px; border-width: 7px; border-radius: 28px; }
  .onboarding .builder-cover { height: 92px; }
  .onboarding .builder-avatar { width: 54px; height: 54px; margin-block-start: -25px; }
  .onboarding .builder-card h2 { margin-block-start: 9px; }
  .onboarding #preview-links { margin-block: 12px; }
  .onboarding .builder-editor { border-radius: 24px 24px 0 0; }
}
@media (min-width: 801px) {
  [dir=rtl] .onboarding .builder-editor { border-radius: 0 38px 38px 0; }
}

#builder-account-save { margin-block-end: 16px; }
.builder-login-email { display: grid; gap: 5px; max-width: 380px; margin-block: 12px; font-weight: 700; }

.published-profile {
  min-height: 100vh;
  background: radial-gradient(ellipse at top, var(--profile-color), #101c30 78%) fixed;
}
.published-wrap { max-width: 600px; }
.published-wrap .published-toolbar { color: white; }
.published-wrap .published-toolbar .button { color: white; border-color: #ffffff80; }
.published-wrap .published-card { max-width: none; border: 0; border-radius: 28px; }
.published-wrap .builder-cover { height: clamp(165px, 32vw, 300px); }
.published-wrap #preview-logo { width: 88px; height: 56px; }
.published-wrap [data-layout=classic] .builder-card-body { text-align: start; }
.published-wrap .published-card h1 { margin-block: 14px 7px; }
.published-bio { margin-block: 12px; }
.published-feature { margin-block-start: 15px; }
.published-wrap .published-links a { padding: 10px 14px; border-radius: 26px; background: #edf3f8; text-align: start; }
.published-wrap .published-links a:hover { background: #dceaf6; }
.published-media { margin-block: 16px; text-align: start; }
.published-media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; background: #edf3f8; }
.published-media.instagram iframe { height: 490px; }
.published-media a { display: inline-block; margin-block-start: 5px; font-size: 13px; text-decoration: underline; }
.published-scan { display: none; }
#profile-share-url { display: block; width: min(340px, 75vw); margin-block: 6px 12px; padding: 9px; }
#profile-share-dialog form { margin-block-end: 12px; }
@media (min-width: 1024px) {
  .published-scan { position: fixed; right: 28px; bottom: 24px; display: grid; gap: 8px; color: white; text-align: center; font-weight: 700; }
  .published-scan svg { display: block; width: 110px; border-radius: 10px; }
}

#slug-status[data-state="available"] { color: #176438; }
#slug-status[data-state="taken"] { color: #a92020; }
.published-card .published-toolbar { position: absolute; z-index: 1; inset: 16px 16px auto; margin: 0; }
.published-card .published-toolbar a,
.published-card #profile-share { display: grid; place-items: center; min-height: 42px; padding: 0 10px; border: 1px solid #ffffff65; border-radius: 14px; background: #10192390; color: white; cursor: pointer; }
.published-card #profile-share { width: 42px; padding: 0; }
.published-card .published-portrait { height: clamp(280px, 95vw, 510px); }
.published-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, var(--profile-color)); pointer-events: none; }
.published-card[data-profile-type="individual"] { background: var(--profile-color); color: white; }
.published-card[data-profile-type="individual"] h1 { font-size: clamp(36px, 7vw, 65px); line-height: 1.05; text-wrap: balance; }
.published-card[data-profile-type="individual"] p { color: white; }
.published-card .published-bio { max-width: 38ch; margin-inline: auto; line-height: 1.55; text-wrap: pretty; }
.published-card[data-profile-type="individual"] .published-media a { color: white; }
.published-card[data-profile-type="individual"] .published-actions .primary { background: #fff; color: #10223d; }
.published-card[data-profile-type="individual"] .published-actions .outline { color: white; border-color: #ffffff85; }
.published-links[data-social-style="icons"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.published-links[data-social-style="icons"] li:not([data-social]) { width: 100%; }
.published-links[data-social-style="icons"] [data-social] a { padding: 6px; border-radius: 50%; }
.published-links[data-social-style="icons"] [data-social] :is(.published-link-label, .published-link-arrow),
#preview-links[data-social-style="icons"] [data-social] span:last-child { display: none; }
#preview-links[data-social-style="icons"] { display: flex; flex-wrap: wrap; }
#preview-links[data-social-style="icons"] li:not([data-social]) { width: 100%; }
.published-featured-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block: 20px; }
.published-featured-links a { color: #10223d; background: #f3f6fb; overflow: hidden; }
.published-pill-link { grid-column: 1 / -1; border-radius: 999px; }
.published-featured-links span { display: block; padding: 13px; text-align: center; overflow-wrap: anywhere; }
.published-image-link { border-radius: 16px; }
.published-image-link img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.published-gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 16px; }
.published-gallery a { flex: 0 0 100%; scroll-snap-align: start; }
.published-gallery img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.published-media:is(.tiktok, .x) iframe { height: 450px; }
.published-scan svg { background: transparent; border-radius: 0; }

.published-card[data-layout="classic"] .published-bio { margin-inline-start: 0; }

.published-card .published-toolbar a { width: 42px; padding: 0; text-decoration: none; }
.published-wrap .published-links a { color: #111c2d; }
.published-wrap .published-links .published-link-label small { color: #334155; }
.published-wrap .published-links .published-link-arrow { color: #111c2d; }
.published-wrap .published-links .published-link-icon { filter: grayscale(1) brightness(.65) contrast(5); }
@media (min-width: 1024px) {
  .published-scan { width: 110px; }
  .published-scan > span { width: 100%; font-size: 12px; line-height: 1.25; text-align: center; }
  .published-scan svg { width: 100%; }
}

.published-wrap .published-links:not([data-social-style="icons"]) { display: grid; gap: 10px; }
.published-lookbook { margin-block: 16px; }
.published-gallery > a { position: relative; }
.published-gallery > a > span { position: absolute; inset-inline-end: 12px; inset-block-end: 12px; background: #102d32ed; color: #fff; padding: 10px 13px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.published-gallery-controls { display: flex; gap: 8px; align-items: center; justify-content: center; margin-block-start: 8px; }
.published-gallery-controls button { min-height: 40px; min-width: 40px; border: 0; border-radius: 10px; padding: 0 10px; background: #edf3f8; color: #10223d; cursor: pointer; }