/*
Theme Name: Cadence OS
Theme URI: https://cadence-os1.vercel.app
Author: Xponentiel Digital
Description: One-page landing theme for Cadence OS, the QR ordering and restaurant management system for cafés and restaurants. Includes an interactive ordering demo, live floor plan, plans and pricing, FAQ and a demo-request form that saves leads in the dashboard and emails you. Texts, prices and contact details are editable in Appearance › Customize › Cadence OS.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cadence-os
Tags: one-column, rtl-language-support, custom-logo, custom-menu, featured-images, translation-ready, theme-options
*/

/* Layout: deep-green "band" sections (hero, remote, demo) alternate with a pale mint ground; the QR finder square is the recurring motif. */
:root{
  --ground:#EFF8F2; --surface:#FBFEFC; --surface-2:#E4F2EA; --ink:#062219; --muted:#4C7064; --line:#C9DDD3;
  --accent-ink:#0C3B2E; --solid:#0C3B2E; --on-solid:#FBFEFC;
  --chip-bg:#D6F5E5; --chip-fg:#062219;
  --band:#0C3B2E; --band-deep:#072A20; --on-band:#FBFEFC; --on-band-muted:#C2E6D4; --band-line:#2E6B57;
  --mint:#8FF0C0; --on-mint:#062219; --coral:#F0684A; --amber:#F5C451; --on-amber:#3A2A00;
  --calling-bg:#0C3B2E; --calling-fg:#8FF0C0;
  --shadow:0 1px 2px rgba(6,34,25,.06), 0 12px 32px -12px rgba(6,34,25,.18);
  --display:'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --body:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-lg:28px; --r-md:18px; --r-sm:12px;
}
@media (prefers-color-scheme: dark){ :root{
  --ground:#05150F; --surface:#0B241B; --surface-2:#103024; --ink:#E6F5EC; --muted:#93B8A8; --line:#1F4638;
  --accent-ink:#8FF0C0; --solid:#8FF0C0; --on-solid:#062219;
  --chip-bg:#163F31; --chip-fg:#D6F5E5;
  --band:#0B3529; --band-deep:#062219; --band-line:#2E6B57;
  --calling-bg:#E6F5EC; --calling-fg:#062219;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6);
  color-scheme:dark } }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{background:var(--ground); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:1; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--mint); outline-offset:3px; border-radius:6px}
.wrap{max-width:1200px; margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
.skip{position:absolute; left:-999px; top:8px; background:var(--mint); color:var(--on-mint); padding:10px 14px; border-radius:10px; z-index:100}
.skip:focus{left:16px}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.band .eyebrow{color:var(--on-band-muted)}
.lede{font-size:clamp(18px,1.6vw,21px); line-height:1.5; color:var(--muted); max-width:60ch}
.band .lede{color:var(--on-band-muted)}
.section{padding-block:clamp(72px,9vw,128px)}
.section-head{display:flex; flex-direction:column; gap:18px; max-width:760px; margin-bottom:clamp(36px,5vw,60px)}
.section-head h2{font-size:clamp(38px,5.4vw,68px)}
.band{background:var(--band); color:var(--on-band)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 22px; border-radius:999px; font:600 16px/1 var(--body); text-decoration:none; border:2px solid transparent; cursor:pointer; transition:transform .18s ease, background-color .18s ease, border-color .18s ease}
.btn:active{transform:scale(.97)}
.btn-mint{background:var(--mint); color:var(--on-mint)}
.btn-mint:hover{background:#A9F5CF}
.btn-ghost-band{border-color:var(--band-line); color:var(--on-band)}
.btn-ghost-band:hover{border-color:var(--mint); color:var(--mint)}
.btn-solid{background:var(--solid); color:var(--on-solid)}
.btn-solid:hover{filter:brightness(1.12)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--accent-ink)}
.btn svg{width:18px; height:18px}

/* nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb, var(--band) 92%, transparent); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); color:var(--on-band); border-bottom:1px solid color-mix(in srgb, var(--band-line) 60%, transparent)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.03em}
.brand svg{width:34px; height:34px; color:var(--mint)}
.nav-links{display:flex; gap:4px; align-items:center}
.nav-links a{text-decoration:none; font-weight:500; font-size:15px; padding:10px 14px; border-radius:999px; color:var(--on-band-muted)}
.nav-links a:hover{color:var(--on-band); background:rgba(255,255,255,.06)}
.nav .btn{min-height:44px; padding:10px 18px; font-size:15px}
@media (max-width:860px){ .nav-links{display:none} }

/* hero */
.hero{position:relative; overflow:hidden; padding-block:clamp(48px,7vw,96px) clamp(64px,8vw,112px)}
.hero-bg{position:absolute; inset-inline-end:-160px; bottom:-200px; width:640px; height:640px; color:var(--mint); opacity:.07; pointer-events:none}
.hero-grid{position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(36px,5vw,72px); align-items:center}
@media (max-width:980px){ .hero-grid{grid-template-columns:minmax(0,1fr)} }
.hero-copy{display:flex; flex-direction:column; gap:28px}
.hero h1{font-size:clamp(48px,6.8vw,96px); line-height:.93; letter-spacing:-.05em}
.hero h1 .mint{color:var(--mint)}
.hero .lede{font-size:clamp(19px,1.8vw,23px)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px}
.pills{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0}
.pills li{padding:9px 16px; border-radius:999px; border:2px solid var(--band-line); font-size:14px; font-weight:600; color:var(--on-band-muted)}
.pills li:first-child{background:var(--mint); border-color:var(--mint); color:var(--on-mint)}

/* hero demo stage */
.stage{display:grid; grid-template-columns:minmax(0,290px) minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:560px){ .stage{grid-template-columns:minmax(0,1fr)} }
.phone{background:#FBFEFC; color:#062219; border-radius:38px; padding:12px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); border:6px solid #062219}
.phone-screen{background:#EFF8F2; border-radius:26px; overflow:hidden; display:flex; flex-direction:column}
.phone-top{background:#0C3B2E; color:#FBFEFC; padding:18px 18px 16px; display:flex; flex-direction:column; gap:4px}
.phone-top .row{display:flex; justify-content:space-between; align-items:center}
.phone-top b{font-family:var(--display); font-size:20px; letter-spacing:-.02em}
.phone-top small{font-size:12px; color:#C2E6D4}
.tag-table{background:#8FF0C0; color:#062219; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px}
.menu{list-style:none; margin:0; padding:10px; display:flex; flex-direction:column; gap:8px}
.menu li{background:#FBFEFC; border-radius:14px; padding:10px 10px 10px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid #D9EAE0}
.menu .name{font-weight:600; font-size:14px; line-height:1.25}
.menu .price{font-size:12.5px; color:#4C7064}
.qty{display:flex; align-items:center; gap:6px}
.qty button{width:32px; height:32px; border-radius:50%; border:1.5px solid #C9DDD3; background:#FBFEFC; color:#062219; font:700 16px/1 var(--body); cursor:pointer; display:grid; place-items:center}
.qty button.add{background:#0C3B2E; border-color:#0C3B2E; color:#8FF0C0}
.qty output{min-width:16px; text-align:center; font-weight:700; font-size:14px}
.phone-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 10px 10px}
.phone-actions button{min-height:44px; border-radius:12px; border:1.5px solid #C9DDD3; background:#FBFEFC; color:#062219; font:600 13px/1.1 var(--body); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px}
.phone-actions button svg{width:16px; height:16px}
.send{grid-column:1 / -1; background:#8FF0C0!important; border-color:#8FF0C0!important; font-size:15px!important}
.send:disabled{opacity:.45; cursor:not-allowed}
.demo-note{font-size:12px; color:var(--on-band-muted); margin-top:10px; text-align:center}

.side{display:flex; flex-direction:column; gap:16px; min-width:0}
.kds{background:var(--band-deep); border:1px solid var(--band-line); border-radius:var(--r-lg); padding:18px; display:flex; flex-direction:column; gap:12px}
.kds-head{display:flex; justify-content:space-between; align-items:center; gap:8px}
.kds-head b{font-family:var(--display); font-size:18px; letter-spacing:-.02em}
.live{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--mint)}
.live::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(143,240,192,.6); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(143,240,192,.55)}70%{box-shadow:0 0 0 9px rgba(143,240,192,0)}100%{box-shadow:0 0 0 0 rgba(143,240,192,0)}}
.tickets{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.ticket{background:#FBFEFC; color:#062219; border-radius:16px; padding:12px 14px; display:flex; flex-direction:column; gap:4px}
.ticket .t-top{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px}
.ticket .t-table{font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:-.02em}
.ticket .t-time{font-size:12px; color:#4C7064}
.ticket .t-items{font-size:14px; color:#2F5247}
.ticket.new{box-shadow:0 0 0 3px #8FF0C0}
.ticket.enter{animation:slideIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes slideIn{from{transform:translateY(-10px); opacity:.2}to{transform:none; opacity:1}}
.badge-new{background:#8FF0C0; color:#062219; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px}
.waiter{background:var(--surface); color:var(--ink); border-radius:var(--r-md); padding:14px 16px; display:flex; align-items:center; gap:12px; min-height:64px}
.waiter .ico{flex:none; width:40px; height:40px; border-radius:12px; background:var(--chip-bg); color:var(--chip-fg); display:grid; place-items:center}
.waiter .ico svg{width:20px; height:20px}
.waiter small{display:block; font-size:12px; color:var(--muted)}
.waiter strong{font-size:15px}

/* flow */
.flow{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr) auto minmax(0,1fr); gap:18px; align-items:center}
.flow-col{display:flex; flex-direction:column; gap:12px}
.flow-box{background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-md); padding:18px 20px; display:flex; gap:14px; align-items:center}
.flow-box svg{flex:none; width:26px; height:26px; color:var(--accent-ink)}
.flow-box b{display:block; font-size:16px}
.flow-box span{font-size:14px; color:var(--muted)}
.flow-core{background:var(--band); color:var(--on-band); border-radius:var(--r-lg); padding:32px 26px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
.flow-core svg{width:72px; height:72px; color:var(--mint)}
.flow-core b{font-family:var(--display); font-size:28px; letter-spacing:-.03em}
.flow-core span{font-size:14px; color:var(--on-band-muted)}
.flow-out .flow-box{background:var(--chip-bg); border-color:transparent; color:var(--chip-fg)}
.flow-out .flow-box span{color:var(--chip-fg); opacity:.8}
.flow-out .flow-box svg{color:var(--chip-fg)}
.arrow{color:var(--accent-ink); width:36px; height:36px}
@media (max-width:900px){ .flow{grid-template-columns:minmax(0,1fr)} .arrow{transform:rotate(90deg); justify-self:center} }
.principle{margin-top:clamp(28px,4vw,44px); font-size:clamp(18px,1.6vw,20px); max-width:62ch; color:var(--muted)}
.principle strong{color:var(--ink)}

/* features */
.tier{display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:clamp(20px,4vw,48px); padding-block:clamp(28px,4vw,44px); border-top:1.5px solid var(--line)}
.tier:first-of-type{border-top:0; padding-top:0}
@media (max-width:860px){ .tier{grid-template-columns:minmax(0,1fr)} }
.tier-label{display:flex; flex-direction:column; gap:8px}
.tier-label h3{font-size:40px; color:var(--accent-ink)}
.tier-label p{color:var(--muted); font-size:15px}
.tier-cards{display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr))}
.tier-cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1060px){ .tier-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:540px){ .tier-cards, .tier-cards.four{grid-template-columns:minmax(0,1fr)} }
.feat{background:var(--surface); border-radius:var(--r-md); padding:22px; display:flex; flex-direction:column; gap:10px; border:1px solid var(--line)}
.feat .ico{width:44px; height:44px; border-radius:13px; background:var(--chip-bg); color:var(--chip-fg); display:grid; place-items:center}
.feat .ico svg{width:22px; height:22px}
.feat h4{margin:4px 0 0; font-size:18px; font-weight:700; letter-spacing:-.01em}
.feat p{font-size:15px; color:var(--muted); line-height:1.5}

/* split showcases */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(32px,5vw,72px); align-items:center}
.split.rev{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.split.rev .split-copy{order:2}
@media (max-width:920px){ .split, .split.rev{grid-template-columns:minmax(0,1fr)} .split.rev .split-copy{order:0} }
.split-copy{display:flex; flex-direction:column; gap:20px}
.split-copy h2{font-size:clamp(36px,4.8vw,60px)}
.plan-note{display:inline-flex; align-self:flex-start; gap:8px; align-items:center; font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px; background:var(--chip-bg); color:var(--chip-fg)}
.band .plan-note{background:rgba(143,240,192,.14); color:var(--mint)}
.checks{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.checks li{display:flex; gap:12px; align-items:flex-start}
.checks svg{flex:none; width:22px; height:22px; margin-top:2px}

/* floor plan */
.floor{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(16px,2.5vw,26px); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px}
.floor-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.floor-head b{font-family:var(--display); font-size:20px; letter-spacing:-.02em}
.floor-sum{font-size:13px; color:var(--muted)}
.tables{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.tbl{aspect-ratio:1.15; max-width:100%; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:background-color .3s ease, color .3s ease}
.tbl .n{font-family:var(--display); font-weight:800; font-size:clamp(20px,2.4vw,28px); line-height:1}
.tbl .s{font-size:clamp(10.5px,1vw,12px); font-weight:600; text-align:center; line-height:1.15; padding-inline:4px}
.st-free{background:var(--surface); border:2px solid var(--line); color:var(--muted)}
.st-seated{background:var(--chip-bg); color:var(--chip-fg); border:2px solid transparent}
.st-order{background:var(--mint); color:var(--on-mint); border:2px solid transparent}
.st-calling{background:var(--calling-bg); color:var(--calling-fg); border:2px solid transparent}
.st-bill{background:var(--amber); color:var(--on-amber); border:2px solid transparent}
.legend{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:13px; color:var(--muted); list-style:none; padding:0; margin:0}
.legend li{display:flex; align-items:center; gap:7px}
.legend i{width:14px; height:14px; border-radius:5px; display:inline-block}

/* till card */
.till{background:var(--band-deep); color:var(--on-band); border-radius:var(--r-lg); padding:clamp(20px,3vw,30px); display:flex; flex-direction:column; gap:16px; border:1px solid var(--band-line)}
.till-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.till-head b{font-family:var(--display); font-size:22px; letter-spacing:-.02em}
.till-head span{font-size:13px; color:var(--on-band-muted)}
.zrows{display:flex; flex-direction:column}
.zrow{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px dashed var(--band-line); font-size:15px}
.zrow:last-child{border-bottom:0}
.zrow.total{font-weight:700; font-size:17px}
.cashcheck{display:flex; justify-content:space-between; align-items:center; gap:12px; background:rgba(143,240,192,.12); border-radius:14px; padding:12px 16px; font-size:14px}
.cashcheck strong{color:var(--mint)}

/* profit */
.dishes{display:flex; flex-direction:column; gap:14px}
.dish{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 22px; display:flex; flex-direction:column; gap:12px}
.dish-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.dish-top b{font-size:18px}
.dish-top span{font-size:14px; color:var(--muted)}
.bar{height:22px; border-radius:11px; overflow:hidden; display:flex; background:var(--surface-2)}
.bar .cost{background:var(--coral)}
.bar .profit{background:var(--accent-ink)}
.dish-bot{display:flex; justify-content:space-between; gap:12px; font-size:14px}
.dish-bot strong{font-weight:700}
.formula{background:var(--band); color:var(--on-band); border-radius:var(--r-md); padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.formula code{font-family:var(--display); font-weight:700; font-size:clamp(16px,1.6vw,19px); letter-spacing:-.01em}
.formula .pct{font-family:var(--display); font-weight:800; font-size:40px; color:var(--mint); letter-spacing:-.03em}
.fineprint{font-size:13px; color:var(--muted)}
.band .fineprint{color:var(--on-band-muted)}

/* dashboard */
.dash{background:var(--surface); color:var(--ink); border-radius:var(--r-lg); padding:clamp(16px,2.6vw,26px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; box-shadow:0 30px 60px -24px rgba(0,0,0,.45)}
@media (max-width:520px){ .dash{grid-template-columns:minmax(0,1fr)} }
.dash-head{grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.dash-head b{font-family:var(--display); font-size:20px; letter-spacing:-.02em}
.dash-head span{font-size:13px; color:var(--muted)}
.tile{background:var(--ground); border-radius:var(--r-md); padding:16px; display:flex; flex-direction:column; gap:10px; min-width:0}
.tile.wide{grid-column:1 / -1}
.tile h5{margin:0; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.big{font-family:var(--display); font-weight:800; font-size:34px; letter-spacing:-.03em; line-height:1}
.big small{font-family:var(--body); font-size:15px; font-weight:600; color:var(--muted); letter-spacing:0}
.split-bar{height:14px; border-radius:7px; overflow:hidden; display:flex; background:var(--surface-2)}
.split-bar .a{background:var(--accent-ink)} .split-bar .b{background:var(--mint)}
.kv{display:flex; justify-content:space-between; gap:10px; font-size:14px}
.kv .sw{display:inline-block; width:10px; height:10px; border-radius:3px; margin-inline-end:6px; vertical-align:middle}
.rank{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.rank li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; font-size:14px}
.rank .track{grid-column:1 / -1; height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden}
.rank .track i{display:block; height:100%; background:var(--accent-ink); border-radius:3px}
.hours{display:flex; align-items:flex-end; gap:6px; height:120px; padding-top:18px}
.hours div{flex:1; display:grid; grid-template-rows:minmax(0,1fr) auto; justify-items:center; gap:6px; height:100%; min-width:0}
.hours b{display:flex; align-items:flex-end; justify-content:center; width:100%; height:100%}
.hours i{display:block; width:100%; max-width:34px; background:var(--chip-bg); border-radius:6px 6px 3px 3px; position:relative}
.hours i.peak{background:var(--accent-ink)}
.hours i.peak::after{content:attr(data-v); position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:700; color:var(--ink); white-space:nowrap}
.hours span{font-size:11px; color:var(--muted)}

/* payment modes */
.modes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:720px){ .modes{grid-template-columns:minmax(0,1fr)} }
.mode{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,32px); display:flex; flex-direction:column; gap:12px}
.mode .ico{width:52px; height:52px; border-radius:16px; background:var(--chip-bg); color:var(--chip-fg); display:grid; place-items:center}
.mode .ico svg{width:26px; height:26px}
.mode h3{font-size:28px}
.mode p{color:var(--muted)}
.mode .who{font-size:13px; font-weight:600; color:var(--accent-ink)}

/* myth */
.myth{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center}
@media (max-width:860px){ .myth{grid-template-columns:minmax(0,1fr)} }
.tagpill{align-self:flex-start; font-size:13px; font-weight:700; padding:6px 14px; border-radius:999px}
.tag-myth{background:var(--coral); color:#fff}
.tag-fact{background:var(--mint); color:var(--on-mint)}
.myth-q{font-family:var(--display); font-weight:800; font-size:clamp(32px,4.4vw,54px); line-height:1.02; letter-spacing:-.04em; color:var(--on-band-muted); text-decoration:line-through; text-decoration-color:var(--coral); text-decoration-thickness:4px}
.myth-a{font-size:clamp(20px,2vw,26px); line-height:1.35; font-weight:600}
.myth > div{display:flex; flex-direction:column; gap:16px}

/* plans */
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch}
@media (max-width:960px){ .plans{grid-template-columns:minmax(0,1fr)} }
.plan{border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:18px}
.plan h3{font-size:clamp(48px,5vw,64px); letter-spacing:-.05em; line-height:.9}
.plan .kicker{font-size:14px; font-weight:600}
.plan .desc{font-size:16px}
.plan .price{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.02em; padding-block:14px; border-block:1.5px solid}
.plan .checks{font-size:15.5px; gap:10px}
.plan .btn{margin-top:auto; width:100%}
.plan-tempo{background:var(--band-deep); color:var(--on-band)}
.plan-tempo h3{color:var(--mint)} .plan-tempo .kicker,.plan-tempo .desc{color:var(--on-band-muted)} .plan-tempo .price{border-color:var(--band-line)}
.plan-rythme{background:var(--chip-bg); color:var(--chip-fg)}
.plan-rythme .price{border-color:color-mix(in srgb, currentColor 18%, transparent)}
.plan-maestro{background:var(--mint); color:var(--on-mint)}
.plan-maestro .price{border-color:rgba(6,34,25,.18)}
.plan-maestro .btn{background:#062219; color:#FBFEFC}
.plan-rythme .btn{background:var(--solid); color:var(--on-solid)}
.plan .plus{font-weight:700}
details.compare{margin-top:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
details.compare summary{cursor:pointer; list-style:none; padding:18px 24px; font-weight:600; display:flex; justify-content:space-between; align-items:center; min-height:56px}
details.compare summary::-webkit-details-marker{display:none}
details.compare summary svg{width:20px; height:20px; transition:transform .2s ease}
details.compare[open] summary svg{transform:rotate(180deg)}
.table-wrap{overflow-x:auto; padding:0 24px 24px}
table{width:100%; border-collapse:collapse; min-width:560px; font-size:15px}
th,td{padding:12px 10px; text-align:start; border-bottom:1px solid var(--line)}
th{font-family:var(--display); font-size:18px; letter-spacing:-.02em}
td.c,th.c{text-align:center; width:110px}
tbody tr:last-child td{border-bottom:0}
.yes{color:var(--accent-ink)} .no{color:var(--muted)}
.group-row td{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:20px}

/* faq */
.faq{display:flex; flex-direction:column; max-width:860px}
.faq details{border-bottom:1.5px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--display); font-weight:700; font-size:clamp(19px,1.8vw,23px); letter-spacing:-.02em; min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none; width:36px; height:36px; border-radius:50%; background:var(--chip-bg); color:var(--chip-fg); display:grid; place-items:center; transition:transform .2s ease}
.faq details[open] .pm{transform:rotate(45deg)}
.faq details p{padding:0 0 24px; color:var(--muted); max-width:66ch}

/* demo form */
.demo-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:start}
@media (max-width:900px){ .demo-grid{grid-template-columns:minmax(0,1fr)} }
.demo-copy{display:flex; flex-direction:column; gap:22px}
.demo-copy h2{font-size:clamp(40px,5.6vw,72px)}
form.card{background:var(--surface); color:var(--ink); border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:520px){ form.card{grid-template-columns:minmax(0,1fr)} }
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field.full{grid-column:1 / -1}
.field label{font-size:14px; font-weight:600}
.field label .req{color:var(--coral)}
.field input,.field select{font:500 16px var(--body); min-height:48px; padding:10px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--ground); color:var(--ink); width:100%}
.field input:focus,.field select:focus{outline:none; border-color:var(--accent-ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--mint) 45%, transparent)}
.field .err{font-size:13px; color:var(--coral); font-weight:600}
form .btn{grid-column:1 / -1}
.form-status{grid-column:1 / -1; font-size:14px; border-radius:12px; padding:12px 14px; background:var(--chip-bg); color:var(--chip-fg)}

/* footer */
.site-footer{background:var(--band-deep); color:var(--on-band-muted); padding-block:40px; font-size:14px}
.site-footer .wrap{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
.site-footer .brand{color:var(--on-band); font-size:20px}
.site-footer .brand svg{width:28px; height:28px}
.site-footer nav{display:flex; gap:18px; flex-wrap:wrap}
.site-footer nav a{text-decoration:none} .site-footer nav a:hover{color:var(--mint)}

/* ---------- WordPress additions ---------- */
.screen-reader-text{border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute!important; width:1px; word-wrap:normal!important}
.screen-reader-text:focus{background:var(--mint); color:var(--on-mint); clip:auto!important; clip-path:none; display:block; height:auto; left:16px; top:8px; padding:10px 14px; width:auto; z-index:100000; border-radius:10px}
.admin-bar .nav{top:32px}
@media (max-width:782px){ .admin-bar .nav{top:46px} }
@media (max-width:600px){ .admin-bar .nav{top:0} }
.section-flush-top{padding-top:0}
.section-alt{background:var(--surface-2)}
.section-myth{padding-block:clamp(56px,7vw,96px)}
.custom-logo-link{display:inline-flex}
.custom-logo{max-height:40px; width:auto}
.nav .menu-toggle{display:none}
.nav-links ul{list-style:none; margin:0; padding:0; display:flex; gap:4px}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-status.is-error{background:color-mix(in srgb, var(--coral) 18%, var(--surface)); color:var(--ink)}
.wa-link{display:inline-flex; align-items:center; gap:8px; color:var(--mint); font-weight:600; text-decoration:none}
.wa-link:hover{text-decoration:underline}
.legend-cost,.legend-profit{display:inline-flex; align-items:center; gap:6px; margin-inline-start:10px}
.legend-cost i,.legend-profit i{width:10px; height:10px; border-radius:3px; display:inline-block}
.legend-cost i{background:var(--coral)} .legend-profit i{background:var(--accent-ink)}
.check-tok{color:var(--accent-ink)}
.plan-rythme .check-tok{color:var(--solid)}
.dash-col{display:flex; flex-direction:column; gap:16px; min-width:0}

/* Blog, pages and other templates */
.page-shell{padding-block:clamp(48px,7vw,96px)}
.page-shell .wrap{max-width:820px}
.entry{display:flex; flex-direction:column; gap:20px; padding-bottom:48px; margin-bottom:48px; border-bottom:1.5px solid var(--line)}
.entry:last-child{border-bottom:0}
.entry-title{font-size:clamp(34px,5vw,56px)}
.entry-title a{text-decoration:none}
.entry-title a:hover{color:var(--accent-ink)}
.entry-meta{font-size:14px; color:var(--muted)}
.entry-content{font-size:18px; line-height:1.7}
.entry-content > * + *{margin-top:1.1em}
.entry-content h2{font-size:34px; margin-top:1.6em}
.entry-content h3{font-size:26px; margin-top:1.4em}
.entry-content a{color:var(--accent-ink)}
.entry-content img{height:auto; border-radius:var(--r-md)}
.entry-content blockquote{margin:0; padding-block:4px; padding-inline:20px 0; border-inline-start:4px solid var(--mint); color:var(--muted)}
.entry-content pre{overflow-x:auto; background:var(--surface-2); padding:16px; border-radius:var(--r-sm)}
.entry-content .wp-block-button__link{background:var(--solid); color:var(--on-solid); border-radius:999px; padding:12px 22px; text-decoration:none}
.alignwide{max-width:1100px} .aligncenter{margin-inline:auto; display:block}
.wp-caption-text,.wp-element-caption{font-size:14px; color:var(--muted)}
.pagination{display:flex; gap:12px; flex-wrap:wrap}
.pagination .page-numbers{min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; border-radius:999px; border:1.5px solid var(--line); text-decoration:none}
.pagination .current{background:var(--solid); color:var(--on-solid); border-color:transparent}
.sticky,.bypostauthor,.gallery-caption{}
.comment-list{list-style:none; padding:0; display:flex; flex-direction:column; gap:20px}
.comment-list .children{list-style:none; padding-inline-start:24px}
.comment-body{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:18px}
.comment-meta{font-size:14px; color:var(--muted)}
.comment-form{display:flex; flex-direction:column; gap:14px}
.comment-form label{display:block; font-weight:600; font-size:14px; margin-bottom:6px}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea,.search-form input[type="search"]{width:100%; font:500 16px var(--body); min-height:48px; padding:10px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink)}
.comment-form .submit,.search-form .search-submit{min-height:48px; padding:12px 22px; border-radius:999px; border:0; background:var(--solid); color:var(--on-solid); font:600 16px var(--body); cursor:pointer}
.search-form{display:flex; gap:10px; flex-wrap:wrap}

.brand{white-space:nowrap}
@media (max-width:480px){ .nav .wrap{gap:10px} .brand{font-size:19px; gap:9px} .brand svg{width:28px; height:28px} .nav .btn{padding:10px 14px; font-size:14px} }
.comment-meta{background:none; color:var(--muted); padding:0} .comment-meta a{color:var(--muted)} .comment-author .avatar{border-radius:50%; vertical-align:middle; margin-inline-end:8px}

/* ---------- Language switcher ---------- */
.nav-end{display:flex; align-items:center; gap:12px}
.lang-switch{display:flex; align-items:center; gap:2px; padding:3px; border-radius:999px; border:1.5px solid var(--band-line)}
.lang-switch a{min-width:40px; min-height:38px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; text-decoration:none; font-size:13px; font-weight:600; color:var(--on-band-muted); letter-spacing:.02em}
.lang-switch a[lang="ar"]{font-family:'IBM Plex Sans Arabic','Noto Sans Arabic',Tahoma,sans-serif; font-size:14px; letter-spacing:0}
.lang-switch a:hover{color:var(--on-band)}
.lang-switch a[aria-current="true"]{background:var(--mint); color:var(--on-mint)}
@media (max-width:600px){ .nav-cta{display:none} }

/* ---------- Arabic (right to left) ---------- */
:root:lang(ar){
  --display:'Bricolage Grotesque','Readex Pro','Noto Kufi Arabic',Tahoma,sans-serif;
  --body:'Instrument Sans','IBM Plex Sans Arabic','Noto Sans Arabic',Tahoma,sans-serif;
}
:lang(ar) body{font-size:17.5px; line-height:1.75}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(ar) h4,:lang(ar) .big,:lang(ar) .myth-q,:lang(ar) .brand,:lang(ar) .flow-core b,
:lang(ar) .kds-head b,:lang(ar) .floor-head b,:lang(ar) .till-head b,:lang(ar) .dash-head b,:lang(ar) .faq summary,:lang(ar) .ticket .t-table,
:lang(ar) .phone-top b,:lang(ar) .formula code,:lang(ar) th{letter-spacing:0}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{line-height:1.3; font-weight:700}
:lang(ar) .hero h1{line-height:1.25; font-size:clamp(44px,6.2vw,86px)}
:lang(ar) .section-head h2,:lang(ar) .split-copy h2,:lang(ar) .demo-copy h2{line-height:1.3}
:lang(ar) .plan h3,:lang(ar) .tier-label h3{line-height:1}
:lang(ar) .eyebrow,:lang(ar) .tile h5,:lang(ar) .group-row td{letter-spacing:0; text-transform:none; font-size:14px}
:lang(ar) .lede{line-height:1.8}
:lang(ar) .myth-q{line-height:1.45}
:lang(ar) .entry-content{line-height:1.9}
[dir="rtl"] .btn svg,[dir="rtl"] .arrow,[dir="rtl"] .wa-link svg{transform:scaleX(-1)}
@media (max-width:900px){ [dir="rtl"] .arrow{transform:rotate(90deg)} }
[dir="rtl"] .screen-reader-text:focus{left:auto; right:16px}
[dir="rtl"] .hp{left:auto; right:-9999px}
/* Keep phone numbers, prices and codes left to right inside Arabic text */
[dir="rtl"] input[type="tel"],[dir="rtl"] input[type="email"]{direction:ltr; text-align:right}

:lang(fr) .hero h1{font-size:clamp(44px,5.6vw,80px)}
.live{white-space:nowrap}