/* Premiere regle volontairement sacrifiee : un editeur qui reenregistre ce fichier en
   UTF-8 AVEC BOM colle les trois octets au premier selecteur. Sans ce leurre, c'est
   `:root` qui devient `:root`, ne correspond plus a rien, et le site perd d'un coup
   la palette claire, les rayons (--r-lg/md/sm) et --ease. Ici le BOM tombe sur une regle
   qui ne sert a rien, reste syntaxiquement valide, et tout ce qui suit est analyse propre.
   NE PAS poser `@charset` a la place : avec un BOM devant, c'est une erreur de syntaxe et
   Turbopack jette la feuille ENTIERE (mesure le 2026-10-06). */
.bom-guard{--bom-guard:1}
.plan-price del{color:var(--muted);font-size:16px;font-weight:600;margin-inline-start:9px;text-decoration-thickness:1.5px}
.pricing-directory{padding-bottom:130px;padding-top:130px}.pricing-rate-section{margin-top:48px}.pricing-rate-section>h2{font-size:32px;letter-spacing:-.05em;margin-bottom:22px}.pricing-rate-table{border-top:1px solid var(--line)}.pricing-rate-row{align-items:start;border-bottom:1px solid var(--line);display:grid;gap:22px;grid-template-columns:1.1fr .8fr 1.4fr;padding:18px 0}.pricing-rate-row strong{font-size:14px}.pricing-rate-row b{color:var(--accent-strong);font-size:14px}.pricing-rate-row>span{color:var(--muted);font-size:13px;line-height:1.65}.pricing-rate-head{color:var(--faint);font:10px var(--font-mono),monospace;letter-spacing:.08em;text-transform:uppercase}.pricing-rate-head>span{color:inherit;font-size:inherit}@media(max-width:700px){.pricing-directory{padding-bottom:90px;padding-top:90px}.pricing-rate-row{gap:7px;grid-template-columns:1fr}.pricing-rate-head{display:none}.pricing-rate-row b{margin-top:3px}}
.pricing-explainer{background:var(--surface);border:1px solid var(--line);border-radius:22px;margin-top:44px;padding:28px}.pricing-explainer h2{font-size:23px!important;margin:0 0 12px!important}.pricing-explainer p{margin:0!important}.pricing-explainer ul{color:var(--text-2);display:grid;gap:10px;list-style:none;margin:22px 0 0!important;padding:0}.pricing-explainer li{font-size:14px;line-height:1.65;padding-left:20px;position:relative}.pricing-explainer li::before{color:var(--accent);content:"✓";left:0;position:absolute}
.pricing-included .pricing-section-head{align-items:flex-start;display:flex;flex-direction:column;gap:0}.pricing-included .pricing-section-head>p{align-self:auto;margin-top:20px;max-width:760px}
:root{color-scheme:light;--bg:#f7fbff;--surface:#fff;--surface-2:#eef5fc;--line:#e1ecf6;--line-strong:#d3e3f2;--text:#0f1f33;--text-2:#3a4d63;--muted:#62758b;--faint:#97a8ba;--accent:#2b8fe0;--accent-strong:#1673c4;--accent-tint:#e2f0fd;--glow:#dcedfd;--shadow:0 20px 70px rgba(43,112,164,.13);--grid:rgba(43,143,224,.07);--ease:cubic-bezier(.16,1,.3,1);--r-lg:20px;--r-md:14px;--r-sm:11px}
:root[data-theme="dark"]{color-scheme:dark;--bg:#05070e;--surface:#0a0e1b;--surface-2:#070a14;--line:#141a2d;--line-strong:#1d253c;--text:#e7ecf8;--text-2:#bac3d9;--muted:#8891ab;--faint:#606a86;--accent:#6d9cfc;--accent-strong:#a0bdfd;--accent-tint:#101c3e;--glow:#0e1838;--shadow:0 28px 90px rgba(0,0,0,.42);--grid:rgba(109,156,252,.055)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden;transition:background .35s,color .35s}body::before{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:80px 80px;content:"";inset:0;mask-image:linear-gradient(to bottom,#000,transparent 55%);pointer-events:none;position:absolute;z-index:-2}.noise{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");inset:0;opacity:.022;pointer-events:none;position:fixed;z-index:99}.shell{margin:0 auto;max-width:1240px;padding-left:24px;padding-right:24px;}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit}::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.nav-wrap{backdrop-filter:blur(20px) saturate(145%);background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line);position:fixed;top:0;width:100%;z-index:50}.nav{align-items:center;display:flex;height:76px;justify-content:space-between}.brand{align-items:center;display:flex;font-size:19px;font-weight:700;gap:10px;letter-spacing:-.04em}.brand img{height:30px;object-fit:contain;width:30px}.nav-links{display:flex;gap:34px}.nav-links a,.text-link{color:var(--muted);font-size:14px;font-weight:500;transition:color .2s}.nav-links a:hover,.text-link:hover{color:var(--text)}.nav-actions{align-items:center;display:flex;gap:21px}.theme-toggle{align-items:center;background:transparent;border:0;cursor:pointer;display:flex;height:36px;justify-content:center;width:36px}.theme-toggle svg{fill:none;height:18px;stroke:var(--muted);stroke-linecap:round;stroke-width:1.7;width:18px}.theme-toggle .sun,[data-theme="light"] .theme-toggle .moon{display:none}[data-theme="light"] .theme-toggle .sun{display:block}.button{align-items:center;background:linear-gradient(180deg,var(--accent-strong),var(--accent));border:1px solid color-mix(in srgb,var(--accent) 70%,#fff);border-radius:var(--r-lg);box-shadow:0 9px 30px color-mix(in srgb,var(--accent) 24%,transparent),inset 0 1px rgba(255,255,255,.25);color:#fff;display:inline-flex;font-size:15px;font-weight:600;gap:8px;height:60px;justify-content:center;padding:0 32px;transition:transform .3s var(--ease),box-shadow .3s}.button:hover{box-shadow:0 14px 42px color-mix(in srgb,var(--accent) 36%,transparent);transform:translateY(-3px)}.button-small{border-radius:var(--r-md);height:44px}.menu-toggle{background:none;border:0;display:none;height:40px;position:relative;width:40px}.menu-toggle span{background:var(--text);height:1px;left:8px;position:absolute;transition:.25s;width:24px}.menu-toggle span:first-child{top:15px}.menu-toggle span:last-child{top:24px}.menu-toggle.open span:first-child{top:20px;transform:rotate(45deg)}.menu-toggle.open span:last-child{top:20px;transform:rotate(-45deg)}.mobile-menu{display:none}
.hero{align-items:center;display:grid;gap:70px;grid-template-columns:1.08fr .92fr;min-height:930px;padding-top:150px;position:relative}.hero::before{background:radial-gradient(circle,var(--glow),transparent 66%);content:"";filter:blur(15px);height:850px;left:-320px;position:absolute;top:30px;width:850px;z-index:-1}.eyebrow{align-items:center;color:var(--accent-strong);display:flex;font-family:"DM Mono",monospace;font-size:13px;gap:11px;letter-spacing:.02em;margin-bottom:28px}.pulse{background:var(--accent);border-radius:50%;box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent);height:7px;width:7px;animation:pulse 2s infinite}.hero h1{font-size:clamp(58px,6.3vw,92px);font-weight:600;letter-spacing:-.068em;line-height:.98;max-width:780px}.hero h1 span,.section-heading h2 em,.section-heading h2 span,.workflow-copy h2 em,.workflow-copy h2 span,.security-copy h2 em,.security-copy h2 span,.home-service-copy h2 em,.home-service-copy h2 span{background:linear-gradient(120deg,var(--accent-strong),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}.hero-lede{color:var(--muted);font-size:19px;line-height:1.7;margin:31px 0 37px;max-width:665px}.hero-actions{display:flex;gap:14px}.button-ghost{background:color-mix(in srgb,var(--surface) 70%,transparent);border-color:var(--line-strong);box-shadow:none;color:var(--text)}.button-ghost:hover{box-shadow:var(--shadow)}.hero-meta{border-top:1px solid var(--line);display:flex;gap:42px;margin-top:58px;padding-top:25px}.hero-meta div{display:flex;flex-direction:column}.hero-meta strong{font-size:14px}.hero-meta span{color:var(--muted);font-size:12px;margin-top:2px}.hero-visual{align-items:center;aspect-ratio:1;display:flex;justify-content:center;position:relative}.hero-visual::before{background:radial-gradient(circle,color-mix(in srgb,var(--accent) 25%,transparent),transparent 65%);content:"";filter:blur(20px);inset:-20%;position:absolute}.robot-shell{border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-radius:50%;box-shadow:0 0 0 12px color-mix(in srgb,var(--surface) 48%,transparent),0 28px 90px color-mix(in srgb,var(--accent) 22%,transparent);height:min(30vw,385px);overflow:hidden;position:relative;width:min(30vw,385px);z-index:2}.robot-shell video{height:110%;left:50%;object-fit:cover;position:absolute;top:50%;transform:translate(-50%,-50%);width:110%}.orbit{border:1px solid var(--line-strong);border-radius:50%;position:absolute}.orbit-one{height:88%;width:88%;animation:spin 28s linear infinite}.orbit-two{border-style:dashed;height:112%;width:112%;animation:spin 38s linear infinite reverse}.orbit::before,.orbit::after{background:var(--accent);border:4px solid var(--bg);border-radius:50%;box-shadow:0 0 18px var(--accent);content:"";height:10px;left:50%;position:absolute;top:-5px;width:10px}.orbit::after{bottom:-5px;left:auto;right:50%;top:auto}.signal{align-items:center;backdrop-filter:blur(15px);background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line-strong);border-radius:11px;box-shadow:var(--shadow);color:var(--text-2);display:flex;font-size:12px;font-weight:600;gap:8px;padding:10px 13px;position:absolute;z-index:4;animation:float 5s ease-in-out infinite}.signal span{background:#4cc38a;border-radius:50%;box-shadow:0 0 10px #4cc38a;height:6px;width:6px}.signal-a{left:-3%;top:21%}.signal-b{animation-delay:-1.6s;bottom:19%;right:-4%}.signal-c{animation-delay:-3s;right:-8%;top:34%}
.trust{align-items:center;border-bottom:1px solid var(--line);border-top:1px solid var(--line);display:flex;justify-content:space-between;min-height:114px}.trust>span{color:var(--muted);font-size:13px;max-width:180px}.trust-row{align-items:center;display:flex;gap:25px}.trust-row b{color:var(--text-2);font-size:13px;font-weight:600}.trust-row i{background:var(--line-strong);height:3px;width:3px;border-radius:50%}.section{padding-top:155px}.section-heading{display:flex;flex-direction:column;gap:22px;margin-bottom:68px;max-width:880px}.kicker{color:var(--accent);display:block;font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.1em;margin-bottom:22px;text-transform:uppercase}.section-heading h2,.workflow-copy h2,.security-copy h2{font-size:clamp(42px,5vw,67px);font-weight:600;letter-spacing:-.058em;line-height:1.06}.section-heading p,.workflow-copy>p,.security-copy>p{color:var(--muted);font-size:17px;line-height:1.75;padding-bottom:7px}.section-heading p{max-width:720px;padding-bottom:0}
.bento{display:grid;gap:18px;grid-template-columns:1.12fr .88fr}
.card{background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 97%,var(--accent-tint)),var(--surface));border:1px solid var(--line);border-radius:26px;display:flex;flex-direction:column;gap:24px;overflow:hidden;padding:34px;position:relative;transition:border-color .3s,transform .4s var(--ease),box-shadow .4s}
.card:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:var(--shadow);transform:translateY(-5px)}
.card::after{background:radial-gradient(circle,color-mix(in srgb,var(--accent) 10%,transparent),transparent 68%);content:"";height:500px;position:absolute;right:-230px;top:-230px;width:500px}
.card-copy{max-width:520px;position:relative;z-index:2}
.card-number{color:var(--accent);font-family:var(--font-mono),monospace;font-size:11px}
.card h3{font-size:27px;letter-spacing:-.04em;margin:13px 0 11px}
.card p{color:var(--muted);font-size:15px;line-height:1.7}
.code-result div{display:flex;flex:1;flex-direction:column}
.code-result small{color:var(--muted);font-size:11px}
/* Every mock grows into what the copy leaves, so no card is hollow in the middle. */
.mock{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:18px;box-shadow:var(--shadow);display:flex;flex:1;flex-direction:column;padding:16px;position:relative;z-index:2}
/* 01 � a run: what it used, what it cost, and the moment it asks. */
.run-head{align-items:center;border-bottom:1px solid var(--line);display:flex;gap:10px;padding-bottom:13px}
.run-avatar{align-items:center;background:linear-gradient(145deg,var(--accent),var(--accent-strong));border-radius:9px;color:#fff;display:flex;font-weight:700;height:30px;justify-content:center;width:30px}
.run-head b{flex:1;font-size:13px}
.run-head em{color:var(--faint);font-family:var(--font-mono),monospace;font-size:10px;font-style:normal}
.run-steps{display:flex;flex-direction:column;list-style:none}
.run-steps li{align-items:center;border-bottom:1px solid var(--line);display:flex;gap:10px;padding:11px 0}
.run-steps i{align-items:center;background:var(--tone-tint);border-radius:8px;color:var(--tone);display:flex;flex-shrink:0;font-size:13px;font-style:normal;height:26px;justify-content:center;width:26px}
.run-steps code{color:var(--text);font-family:var(--font-mono),monospace;font-size:11px}
.run-steps span{color:var(--muted);flex:1;font-size:11px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-steps em{color:var(--faint);font-family:var(--font-mono),monospace;font-size:10px;font-style:normal}
.run-ask{align-items:center;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line-strong));border-radius:12px;display:flex;gap:9px;margin-top:14px;padding:11px 12px}
.run-ask>div{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
.run-ask small{color:var(--faint);font-family:var(--font-mono),monospace;font-size:9px;letter-spacing:.06em}
.run-ask code{font-family:var(--font-mono),monospace;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-allow{background:var(--accent);border-radius:8px;color:#fff;font-size:10px;font-weight:600;padding:6px 10px;white-space:nowrap}
.run-allow.ghost{background:transparent;border:1px solid var(--line-strong);color:var(--muted)}
.run-foot{color:var(--faint);font-family:var(--font-mono),monospace;font-size:10px;margin-top:auto;padding-top:14px}
/* 02 � the 28 tools, by family. */
.tool-grid{gap:13px;justify-content:space-between}
.tool-family{display:flex;flex-direction:column;gap:7px}
.tool-family small{color:var(--tone);font-family:var(--font-mono),monospace;font-size:8px;letter-spacing:.11em}
.tool-family>div{display:flex;flex-wrap:wrap;gap:5px}
.tool-family code{background:var(--tone-tint);border-radius:6px;color:var(--tone);font-family:var(--font-mono),monospace;font-size:10px;padding:4px 7px}
/* 03 � what each mode allows: yes, asked, refused. */
.mode-grid{gap:0;justify-content:center}
.mode-row{align-items:center;display:grid;gap:7px;grid-template-columns:minmax(0,1fr) repeat(4,minmax(40px,58px));padding:10px 0}
.mode-row+.mode-row{border-top:1px solid var(--line)}
.mode-head b{color:var(--faint);font-family:var(--font-mono),monospace;font-size:9px;font-weight:500;text-align:center}
.mode-row>span{color:var(--text-2);font-size:12px}
.mode-row em{border-radius:7px;font-size:11px;font-style:normal;padding:5px 0;text-align:center}
.r-yes{background:color-mix(in srgb,#4cc38a 16%,transparent);color:#4cc38a}
.r-ask{background:var(--accent-tint);color:var(--accent)}
.r-no{background:color-mix(in srgb,var(--faint) 16%,transparent);color:var(--faint)}
/* 04 � the machine on one side, the connected storages on the other. */
.reach{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.reach-side{display:flex;flex-direction:column;gap:7px;min-width:0}
.reach-side>small{color:var(--faint);font-family:var(--font-mono),monospace;font-size:8px;letter-spacing:.09em;margin-bottom:2px}
.reach-side>code{color:var(--text-2);font-family:var(--font-mono),monospace;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reach-terminal,.reach-store{align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:9px;display:flex;gap:7px;min-width:0;padding:8px 9px}
.reach-terminal{margin-top:auto}
.reach-terminal i,.reach-store i{background:var(--tone,#4cc38a);border-radius:50%;box-shadow:0 0 8px var(--tone,#4cc38a);flex-shrink:0;height:6px;width:6px}
.reach-terminal code,.reach-store code{flex:1;font-family:var(--font-mono),monospace;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reach-terminal em,.reach-store em{color:var(--faint);font-family:var(--font-mono),monospace;font-size:9px;font-style:normal}

.workflow-section{background:var(--surface-2);border-bottom:1px solid var(--line);border-top:1px solid var(--line);margin-top:155px;padding:135px 0}.workflow-grid{align-items:center;display:grid;gap:80px;grid-template-columns:.75fr 1.25fr}.workflow-copy>p{margin:25px 0 35px}.workflow-copy ul{list-style:none}.workflow-copy li{border-top:1px solid var(--line);color:var(--text-2);font-size:14px;padding:13px 0}.workflow-copy li span{color:var(--accent);font-family:"DM Mono",monospace;font-size:10px;margin-right:16px}.workflow-canvas{aspect-ratio:1024/560;background-color:var(--surface);border:1px solid var(--line-strong);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;position:relative}.workflow-canvas::after{border:1px solid color-mix(in srgb,#fff 42%,transparent);border-radius:23px;content:"";inset:1px;pointer-events:none;position:absolute}.workflow-canvas img{display:block;height:100%;object-fit:cover;width:100%}
/* The graph reads left to right in every language, like the canvas in the product. */
.site[dir="rtl"] .workflow-canvas{direction:ltr}
/* One hue per step type, the same values the product canvas uses. */
.t-trigger{--tone:#2b8fe0;--tone-tint:#e2f0fd}.t-search{--tone:#0e9f8e;--tone-tint:#dcf4f0}.t-storage{--tone:#0a7fbf;--tone-tint:#dff0fa}.t-file{--tone:#d4467a;--tone-tint:#fbe4ed}.t-agent{--tone:#4f5bd5;--tone-tint:#e7e9fb}.t-model{--tone:#7c4dff;--tone-tint:#efe9ff}.t-human{--tone:#c98a04;--tone-tint:#fcf1d3}
[data-theme="dark"] .t-trigger{--tone:#6d9cfc;--tone-tint:#101c3e}[data-theme="dark"] .t-search{--tone:#3fcfb9;--tone-tint:#0a2925}[data-theme="dark"] .t-storage{--tone:#52b6ee;--tone-tint:#0b2231}[data-theme="dark"] .t-file{--tone:#f27aa5;--tone-tint:#301420}[data-theme="dark"] .t-agent{--tone:#8b93f5;--tone-tint:#181c3c}[data-theme="dark"] .t-model{--tone:#a98bff;--tone-tint:#1f183f}[data-theme="dark"] .t-human{--tone:#f2c14e;--tone-tint:#2c2209}
/* Edges: one static layer, plus two dashes travelling the straight route to show a live run. */
.tree-edges{height:100%;left:0;position:absolute;top:0;width:100%}
.tree-edge{fill:none;stroke:var(--line-strong);stroke-linecap:round;stroke-width:1.6}
.tree-edge-live{stroke:var(--accent);stroke-dasharray:3 13;stroke-width:2.4;animation:tree-dash 1.05s linear infinite}
.tree-node{align-items:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow);display:flex;gap:11px;left:calc(var(--x) / 640 * 100%);min-height:calc(var(--h) / 560 * 100%);padding:9px 13px;position:absolute;top:calc(var(--cy) / 560 * 100%);translate:0 -50%;transition:border-color .3s,transform .4s var(--ease);width:calc(var(--w) / 640 * 100%);z-index:2}
.tree-node:hover{border-color:color-mix(in srgb,var(--tone) 45%,var(--line-strong));transform:translateY(-2px)}
/* The type's colour bar on the leading edge, and the outgoing port � the product's vocabulary. */
.tree-node::before{background:var(--tone);border-radius:0 3px 3px 0;content:"";inset-block:13px;left:0;position:absolute;width:3px}
.tree-node::after{background:var(--surface);border:2px solid var(--line-strong);border-radius:50%;content:"";height:9px;position:absolute;right:-5px;top:50%;translate:0 -50%;width:9px}
.tree-icon{align-items:center;background:var(--tone-tint);border-radius:10px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 18%,transparent);color:var(--tone);display:flex;flex-shrink:0;font-size:16px;height:32px;justify-content:center;width:32px}
.tree-node>div{display:flex;flex-direction:column;min-width:0}
.tree-node small{color:var(--faint);font-size:8px;letter-spacing:.09em}
.tree-node b{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;font-size:12px;line-height:1.3;overflow:hidden;unicode-bidi:plaintext}
/* What happens after the agent: the two steps a person still owns. */
.tree-outcome{align-items:center;background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--line);border-radius:12px;bottom:18px;display:flex;gap:10px;left:calc(8 / 640 * 100%);padding:9px 12px;position:absolute;z-index:2}
.tree-outcome span{align-items:center;color:var(--text-2);display:flex;font-size:11px;gap:7px;unicode-bidi:plaintext;white-space:nowrap}
.tree-outcome i{background:var(--tone);border-radius:50%;box-shadow:0 0 9px color-mix(in srgb,var(--tone) 55%,transparent);flex-shrink:0;height:7px;width:7px}
.tree-outcome em{color:var(--faint);font-size:12px;font-style:normal}
.canvas-badge{align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:99px;color:var(--muted);display:flex;font-size:10px;gap:8px;left:50%;padding:7px 12px;position:absolute;top:18px;transform:translateX(-50%)}.canvas-badge span{background:#4cc38a;border-radius:50%;height:6px;width:6px}
.developer-section{padding-bottom:155px}.code-stage{background:var(--surface);border:1px solid var(--line-strong);border-radius:25px;box-shadow:var(--shadow);color:var(--text);overflow:hidden;transition:background .35s,border-color .35s,color .35s}.code-tabs{align-items:center;background:var(--surface-2);border-bottom:1px solid var(--line-strong);display:flex;height:59px;padding:0 18px}.code-tabs button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:12px;height:100%;padding:0 16px;position:relative;transition:color .2s}.code-tabs button:hover{color:var(--text)}.code-tabs button.active{color:var(--text);font-weight:600}.code-tabs button.active::after{background:var(--accent);bottom:0;content:"";height:2px;left:12px;position:absolute;right:12px}.code-tabs>span{color:var(--faint);font-family:"DM Mono",monospace;font-size:10px;margin-left:auto}.code-stage pre{background:transparent;color:var(--text);font-family:"DM Mono",monospace;font-size:14px;line-height:2;min-height:350px;overflow:auto;padding:38px}.kw{color:#7c3aed;font-weight:500}.str{color:#059669}.fn{color:#2563eb}.num{color:#d97706}:root[data-theme="dark"] .kw{color:#b79aff}:root[data-theme="dark"] .str{color:#8bd5ca}:root[data-theme="dark"] .fn{color:#6d9cfc}:root[data-theme="dark"] .num{color:#f2c14e}.code-result{align-items:center;background:var(--surface-2);border-top:1px solid var(--line-strong);display:flex;gap:12px;padding:15px 21px}.code-result>span{align-items:center;background:color-mix(in srgb,#32b77a 16%,var(--surface));border:1px solid color-mix(in srgb,#32b77a 28%,var(--line));border-radius:50%;color:#279767;display:flex;font-size:11px;font-weight:700;height:29px;justify-content:center;width:29px}:root[data-theme="dark"] .code-result>span{background:#0b2a21;border-color:rgba(76,195,138,.3);color:#4cc38a}.code-result b{color:var(--text);font-size:12px}.copy-code{background:var(--accent-tint);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line-strong));border-radius:var(--r-sm);color:var(--accent-strong);cursor:pointer;font-size:11px;font-weight:600;padding:9px 15px;transition:background .2s,border-color .2s,color .2s,transform .2s}.copy-code:hover{background:color-mix(in srgb,var(--accent) 22%,var(--surface));border-color:var(--accent);transform:translateY(-1px)}.possibilities{border-top:1px solid var(--line);padding-bottom:155px}.possibility-grid{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}.possibility{border:1px solid var(--line);border-radius:20px;min-height:335px;padding:26px;transition:.35s var(--ease)}.possibility:hover{background:var(--surface);border-color:color-mix(in srgb,var(--accent) 36%,var(--line));box-shadow:var(--shadow);transform:translateY(-6px)}.possibility>span{color:var(--faint);font-family:"DM Mono",monospace;font-size:10px}.p-icon{align-items:center;background:var(--accent-tint);border-radius:13px;color:var(--accent);display:flex;font-size:22px;height:49px;justify-content:center;margin:44px 0 23px;width:49px}.possibility h3{font-size:20px;letter-spacing:-.03em}.possibility p{color:var(--muted);font-size:13px;line-height:1.65;margin:9px 0 24px}.possibility a{color:var(--accent);font-size:12px;font-weight:600}
.security{padding-bottom:155px;padding-top:150px}.security-card{align-items:center;background:linear-gradient(140deg,var(--surface),color-mix(in srgb,var(--accent-tint) 70%,var(--surface)));border:1px solid var(--line);border-radius:30px;display:grid;gap:70px;grid-template-columns:1.1fr .9fr;min-height:590px;overflow:hidden;padding:68px;position:relative}.security-copy>p{margin:27px 0 33px;max-width:580px}.security-pills{display:flex;flex-wrap:wrap;gap:8px}.security-pills span{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:99px;color:var(--text-2);font-family:"DM Mono",monospace;font-size:9px;padding:8px 12px}.shield{align-items:center;aspect-ratio:1;display:flex;justify-content:center;position:relative}.shield::before{background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 67%);content:"";inset:0;position:absolute}.shield-ring{border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:50%;position:absolute}.shield-ring.r1{inset:14%;animation:spin 24s linear infinite}.shield-ring.r2{border-style:dashed;inset:2%;animation:spin 36s linear infinite reverse}.shield-core{align-items:center;background:linear-gradient(145deg,var(--accent),var(--accent-strong));border-radius:27%;box-shadow:0 15px 60px color-mix(in srgb,var(--accent) 45%,transparent);display:flex;height:130px;justify-content:center;transform:rotate(45deg);width:130px}.shield-core svg{fill:none;height:58px;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;transform:rotate(-45deg);width:58px}.safe{backdrop-filter:blur(10px);background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line-strong);border-radius:9px;box-shadow:var(--shadow);color:var(--text-2);font-size:10px;padding:8px 11px;position:absolute}.safe.s1{left:-2%;top:21%}.safe.s2{bottom:17%;right:-2%}.safe.s3{right:-9%;top:40%}.final-cta{align-items:center;border-bottom:1px solid var(--line);border-top:1px solid var(--line);display:flex;flex-direction:column;min-height:680px;overflow:hidden;padding-bottom:100px;padding-top:110px;position:relative;text-align:center}.final-glow{background:radial-gradient(circle,var(--glow),transparent 65%);height:750px;left:50%;position:absolute;top:-220px;transform:translateX(-50%);width:900px;z-index:-1}.final-cta>img{height:88px;margin-bottom:31px;object-fit:contain;width:88px}.final-cta h2{font-size:clamp(54px,7vw,92px);font-weight:600;letter-spacing:-.065em;line-height:1}.final-cta p{color:var(--muted);font-size:18px;margin:25px 0 35px}.final-cta>div:last-child{display:flex;gap:12px}.footer{align-items:center;display:grid;gap:25px;grid-template-columns:1fr 1.2fr 1fr auto;min-height:160px}.footer p{color:var(--muted);font-size:12px}.footer>div{display:flex;gap:20px}.footer>div a{color:var(--muted);font-size:12px}.footer small{color:var(--faint);font-size:10px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease) var(--delay,0s),transform .8s var(--ease) var(--delay,0s)}.reveal.visible{opacity:1;transform:none}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{70%{box-shadow:0 0 0 9px transparent}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes blink{50%{opacity:0}}@keyframes travel{0%{left:0}100%{left:100%}}@keyframes tree-dash{to{stroke-dashoffset:-32}}
@media(max-width:1000px){.nav-links{display:none}.hero{gap:30px;grid-template-columns:1fr;min-height:auto;padding-bottom:100px;padding-top:170px}.hero-copy{text-align:center}.hero h1,.hero-lede{margin-left:auto;margin-right:auto}.hero-actions,.hero-meta{justify-content:center}.hero-visual{margin:40px auto 0;max-width:570px;width:100%}.robot-shell{height:min(50vw,350px);width:min(50vw,350px)}.trust{align-items:flex-start;flex-direction:column;gap:20px;padding-bottom:28px;padding-top:28px}.trust-row{flex-wrap:wrap}.section-heading{align-items:start;gap:25px;grid-template-columns:1fr}.bento{grid-template-columns:1fr 1fr}.workflow-grid{grid-template-columns:1fr}.workflow-copy{max-width:680px}.possibility-grid{grid-template-columns:1fr 1fr}.security-card{grid-template-columns:1fr;padding:50px}.shield{margin:auto;max-width:420px;width:100%}.footer{grid-template-columns:1fr 1fr}.footer>div{justify-self:end}}
@media(max-width:720px){.shell{padding-left:18px;padding-right:18px}.nav{height:68px}.nav-actions .text-link,.nav-actions .button{display:none}.menu-toggle{display:block}.mobile-menu{background:var(--bg);border-bottom:1px solid var(--line);display:flex;flex-direction:column;max-height:0;overflow:hidden;padding:0 24px;transition:max-height .35s var(--ease),padding .35s}.mobile-menu.open{max-height:400px;padding-bottom:18px}.mobile-menu a{border-top:1px solid var(--line);font-size:15px;padding:14px 0}.hero{padding-top:125px}.hero h1{font-size:clamp(46px,14vw,68px)}.hero-lede{font-size:17px}.hero-actions{align-items:stretch;flex-direction:column}.hero-meta{gap:15px;justify-content:space-between;margin-top:40px}.hero-meta div{align-items:center;flex:1}.hero-visual{margin-top:30px}.robot-shell{height:min(66vw,310px);width:min(66vw,310px)}.orbit-one{height:92%;width:92%}.signal{font-size:10px}.signal-a{left:-2%}.signal-b{right:-2%}.signal-c{display:none}.trust{margin-top:30px}.trust-row{gap:13px}.section{padding-top:100px}.section-heading{margin-bottom:42px}.section-heading h2,.workflow-copy h2,.security-copy h2{font-size:40px}.bento{grid-template-columns:1fr}.card{padding:27px}.workflow-section{margin-top:100px;padding:90px 0}.workflow-grid{gap:50px}.tree-edges{display:none}.developer-section,.possibilities{padding-bottom:100px}.security{padding-bottom:100px;padding-top:92px}.code-stage pre{font-size:11px;min-height:330px;padding:25px}.possibility-grid{grid-template-columns:1fr}.possibility{min-height:280px}.p-icon{margin-top:30px}.security-card{gap:20px;min-height:auto;padding:34px 25px}.shield{height:340px}.safe.s3{right:-3%}.final-cta{min-height:600px}.final-cta>div:last-child{align-items:stretch;flex-direction:column;width:100%}.footer{align-items:start;grid-template-columns:1fr;padding-bottom:35px;padding-top:35px}.footer>div{justify-self:start}}
@media(max-width:420px){.hero-meta span{display:none}.robot-shell{height:230px;width:230px}.signal-b{bottom:8%}.signal-a{top:15%}.code-tabs button{padding:0 9px}.code-stage pre{font-size:10px;padding:20px}}

/* Premium global actions and scalable navigation/footer */
.button{isolation:isolate;overflow:hidden;position:relative}.button::before{background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.28) 48%,transparent 76%);content:"";inset:0;position:absolute;transform:translateX(-130%);transition:transform .65s var(--ease);z-index:-1}.button>span{align-items:center;background:rgba(255,255,255,.14);border-radius:50%;display:inline-flex;height:25px;justify-content:center;transition:transform .3s var(--ease);width:25px}.button:hover::before{transform:translateX(130%)}.button:hover>span{transform:rotate(45deg)}.button-small{padding-left:16px;padding-right:8px}.button-small>span{height:24px;width:24px}.mega-footer{background:var(--surface-2);border-top:1px solid var(--line);padding:100px 0 35px}.footer-lead{align-items:start;display:grid;gap:25px;grid-template-columns:1fr 2fr auto;padding-bottom:75px}.footer-lead h2{font-size:34px;letter-spacing:-.05em;line-height:1.1}.footer-columns{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding:55px 0}.footer-columns>div{display:flex;flex-direction:column;gap:9px}.footer-columns b{font-size:12px;margin-bottom:8px}.footer-columns a{color:var(--muted);font-size:12px;transition:color .2s,transform .2s}.footer-columns a:hover{color:var(--accent);transform:translateX(3px)}.footer-bottom{border-top:1px solid var(--line);color:var(--faint);display:flex;font-size:10px;gap:30px;padding-top:28px}.footer-bottom span:nth-child(2){margin-left:auto}
@media(max-width:1000px){.footer-lead{grid-template-columns:1fr}.footer-columns{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.footer-columns{gap:38px;grid-template-columns:1fr}.footer-bottom{align-items:start;flex-direction:column}.footer-bottom span:nth-child(2){margin-left:0}}

/* Single-page brand and footer */
html{overflow-x:hidden}
.brand{align-items:center;display:inline-flex;gap:8px}.brand img{border-radius:9px;height:30px;object-fit:contain;width:30px}.beta-tag{background:var(--accent-tint);border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:9px;color:var(--accent-strong);font-family:var(--font-cairo),system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:.06em;line-height:1;padding:8px 9px 7px 10px;white-space:nowrap}
.site-footer{background:var(--surface-2);border-top:1px solid var(--line);padding-bottom:32px}.footer-grid{display:grid;gap:30px;grid-template-columns:repeat(4,1fr);padding:64px 0 56px}.footer-grid>div{display:flex;flex-direction:column;gap:11px}.footer-grid b{font-size:12px;letter-spacing:-.01em;margin-bottom:9px}.footer-grid a{color:var(--muted);font-size:13px;transition:color .2s}.footer-grid a:hover{color:var(--accent)}.site-footer .footer-bottom{align-items:center;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;padding-top:30px}.site-footer .footer-bottom>span{color:var(--faint);font-size:12px;margin-left:0}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.footer-grid{grid-template-columns:1fr}.site-footer .footer-bottom{align-items:flex-start;flex-direction:column;gap:14px}}
body{font-family:var(--font-inter),system-ui,sans-serif}.eyebrow,.kicker,.card-number,.tree-node small,.run-head em,.run-foot,.code-stage pre,.code-tabs>span,.possibility>span,.security-pills span{font-family:var(--font-mono),monospace}
.button{border-radius:var(--r-lg)}.button-small{border-radius:var(--r-md)}
.button:not(.button-ghost){background:var(--accent);box-shadow:0 9px 24px color-mix(in srgb,var(--accent) 24%,transparent)}
.button:not(.button-ghost)::before{display:none}
.language-switcher{display:block;position:relative}.language-switcher select{appearance:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;color:var(--text-2);cursor:pointer;font:500 12px var(--font-inter),system-ui,sans-serif;height:36px;padding:0 29px 0 13px}.language-switcher::after{border:solid var(--muted);border-width:0 1px 1px 0;content:"";height:5px;pointer-events:none;position:absolute;right:13px;top:13px;transform:rotate(45deg);width:5px}.sr-only{height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px;clip:rect(0,0,0,0)}
.site[dir="rtl"]{text-align:right}.site[dir="rtl"] .nav-links,.site[dir="rtl"] .nav-actions,.site[dir="rtl"] .hero-meta,.site[dir="rtl"] .trust,.site[dir="rtl"] .trust-row,.site[dir="rtl"] .footer-bottom{flex-direction:row-reverse}.site[dir="rtl"] .hero-actions{direction:ltr;justify-content:flex-start}.site[dir="rtl"] .hero-meta strong,.site[dir="rtl"] .hero-meta span{direction:rtl}.site[dir="rtl"] .workflow-copy li span{margin-left:16px;margin-right:0}.site[dir="rtl"] .language-switcher select{padding:0 13px 0 29px}.site[dir="rtl"] .language-switcher::after{left:13px;right:auto}.site[dir="rtl"] .signal-a{left:auto;right:-3%}.site[dir="rtl"] .signal-b{left:-4%;right:auto}.site[dir="rtl"] .signal-c{left:-8%;right:auto}.site[dir="rtl"] .safe.s1{left:auto;right:-2%}.site[dir="rtl"] .safe.s2{left:-2%;right:auto}.site[dir="rtl"] .safe.s3{left:-9%;right:auto}.site[dir="rtl"] .code-tabs{direction:rtl}.site[dir="rtl"] .code-tabs>span{margin-left:0;margin-right:auto}.site[dir="rtl"] .code-stage pre{direction:ltr;text-align:left}.site[dir="rtl"] .tree-node{direction:ltr}.site[dir="rtl"] .footer-grid>div{align-items:flex-start}
.site[dir="rtl"],.site[dir="rtl"] .eyebrow,.site[dir="rtl"] .kicker,.site[dir="rtl"] .card-number,.site[dir="rtl"] .security-pills span,.site[dir="rtl"] .beta-tag{font-family:var(--font-cairo),system-ui,sans-serif}
@media(max-width:720px){.language-switcher{margin:10px 0}.language-switcher.compact select{width:100%}.site[dir="rtl"] .mobile-menu{direction:rtl}.site[dir="rtl"] .site-footer .footer-bottom{flex-direction:column}}
.site-footer{background:radial-gradient(circle at 8% 0,color-mix(in srgb,var(--accent) 12%,transparent),transparent 30%),var(--surface-2);overflow:hidden;position:relative}.site-footer::before{background:linear-gradient(90deg,transparent,var(--line-strong),transparent);content:"";height:1px;left:0;position:absolute;right:0;top:0}.site-footer .footer-lead{align-items:center;border-bottom:1px solid var(--line);display:grid;gap:42px;grid-template-columns:.8fr 1.4fr auto;padding:74px 0 64px;position:relative}.footer-brand{display:flex;flex-direction:column;gap:14px}.footer-brand>span{color:var(--accent);font-family:var(--font-mono),monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase}.site-footer .footer-lead h2{font-size:clamp(30px,3vw,44px);letter-spacing:-.055em;line-height:1.05}.site-footer .footer-lead p{color:var(--muted);font-size:14px;line-height:1.7;margin-top:12px;max-width:490px}.site-footer .footer-grid{align-items:start;border-bottom:1px solid var(--line);gap:36px 22px;grid-template-columns:repeat(6,minmax(0,1fr));padding:54px 0}.footer-languages{display:grid!important;gap:6px!important;grid-template-columns:minmax(0,1fr)}.footer-languages b{grid-column:1/-1}.footer-languages a{border-radius:7px;padding:3px 6px}.footer-languages a:hover,.footer-languages a.active{background:var(--accent-tint);color:var(--accent-strong)}.site[dir="rtl"] .footer-lead{direction:rtl}.site[dir="rtl"] .footer-languages{direction:ltr}.site[dir="rtl"] .footer-languages a{direction:auto;text-align:left}
@media(max-width:1000px){.site-footer .footer-lead{grid-template-columns:1fr 1fr}.site-footer .footer-lead>.button{justify-self:start}.site-footer .footer-grid{gap:34px 20px;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.site-footer .footer-lead{gap:28px;grid-template-columns:1fr;padding:54px 0 46px}.site-footer .footer-grid{gap:30px 18px;grid-template-columns:repeat(2,minmax(0,1fr));padding:42px 0}.site-footer .footer-lead>.button{width:max-content}.site[dir="rtl"] .footer-lead>.button{justify-self:end}}
@media(max-width:460px){.site-footer .footer-grid{grid-template-columns:1fr}.footer-languages{max-width:240px}}
.site-footer{background:var(--surface-2)}.site-footer::before{background:var(--line)}.site-footer .footer-heading{align-items:center;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:30px 0}.site-footer .footer-heading>span{background:var(--accent);border-radius:50%;box-shadow:0 0 24px color-mix(in srgb,var(--accent) 55%,transparent);height:8px;width:8px}.site-footer .footer-grid{padding:48px 0}.site-footer .footer-bottom{border-top:0;padding:24px 0 0}.site-footer .footer-bottom>a{color:var(--muted);font-size:12px;transition:color .2s}.site-footer .footer-bottom>a:hover{color:var(--accent)}.site[dir="rtl"] .footer-heading{flex-direction:row-reverse}.site[dir="rtl"] .footer-bottom>a{direction:rtl}
.site[dir="rtl"] .footer-languages{direction:rtl}.site[dir="rtl"] .footer-languages a{text-align:right}
.footer-cta{background:var(--bg)}.footer-cta .final-cta{background:transparent;isolation:isolate}.footer-cta .final-glow{z-index:-1}
.site[dir="rtl"] .nav{direction:rtl;flex-direction:row-reverse}.site[dir="rtl"] .nav-links,.site[dir="rtl"] .nav-actions{direction:rtl;flex-direction:row-reverse}.site[dir="rtl"] .hero-actions{direction:rtl;justify-content:flex-start}.site[dir="rtl"] .button>span{direction:ltr}

/* RTL layout: direction already mirrors flex/grid flow, so avoid reversing twice. */
.site[dir="rtl"] .nav,
.site[dir="rtl"] .nav-links,
.site[dir="rtl"] .nav-actions,
.site[dir="rtl"] .hero-meta{direction:rtl;flex-direction:row}
.site[dir="rtl"] .hero{direction:rtl}
.site[dir="rtl"] .hero h1{letter-spacing:-.035em;line-height:1.1}
.site[dir="rtl"] .hero::before{left:auto;right:-320px}
.site[dir="rtl"] .button{direction:rtl}

/* Keep action icons on the leading physical side: left in LTR, right in RTL. */
.button{flex-direction:row-reverse}
.button-small{padding-inline:16px 20px}

/* Tablet hero: message first, visual below (phones flip this at 720px). */
@media(max-width:1000px){
  .nav-actions .text-link,.nav-actions .button{display:none}
  .menu-toggle{display:block}
  .mobile-menu{background:var(--bg);border-bottom:1px solid var(--line);display:flex;flex-direction:column;max-height:0;overflow:hidden;padding:0 24px;transition:max-height .35s var(--ease),padding .35s}
  .mobile-menu.open{max-height:400px;padding-bottom:18px}
  .mobile-menu a{border-top:1px solid var(--line);font-size:15px;padding:14px 0}
  .hero{gap:34px;padding-bottom:90px;padding-top:130px}
  .hero-visual{margin:34px auto 0;max-width:500px;order:1}
  .hero-copy{margin:0 auto;max-width:780px;width:100%}
  .hero-meta{margin-left:auto;margin-right:auto;max-width:650px}
  .section{padding-top:120px}
}

@media(max-width:900px){
  .bento{grid-template-columns:1fr}
  
  .workflow-section{margin-top:120px;padding:105px 0}
}

@media(max-width:720px){
  .nav{gap:8px;justify-content:flex-start}
  .brand{gap:7px;margin-inline-end:auto}
  .hero{gap:34px;padding-bottom:72px;padding-top:108px}
  .hero-visual{margin:0 auto;max-width:350px;order:-1}
  .robot-shell{height:min(61vw,250px);width:min(61vw,250px)}
  .hero-copy{max-width:560px}
  .eyebrow{justify-content:center;margin-bottom:20px}
  .hero-lede{margin-bottom:28px;margin-top:24px}
  .hero-actions{gap:10px}
  .hero-meta{display:grid;gap:0;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:36px;padding-top:20px;width:100%}
  .hero-meta div{min-width:0;padding:0 8px}
  .hero-meta div+div{border-inline-start:1px solid var(--line)}
  .hero-meta strong{font-size:13px;line-height:1.45}
  .hero-meta span{font-size:10px;line-height:1.45}
  .signal{padding:8px 10px}
  .signal-a{top:12%}
  .signal-b{bottom:10%}
  .trust{margin-top:0}
  .trust-row{display:grid;gap:10px 16px;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .trust-row b{line-height:1.35;text-align:center}
  .trust-row i{display:none}
  .section{padding-top:86px}
  .section-heading{gap:18px;margin-bottom:34px}
  .section-heading h2,.workflow-copy h2,.security-copy h2{font-size:clamp(34px,10vw,40px)}
  .card{border-radius:20px;padding:24px}
  .card h3{font-size:25px}
  .reach{grid-template-columns:1fr}
  .workflow-section{margin-top:86px;padding:82px 0}
  .workflow-grid{gap:38px}
  .workflow-canvas{aspect-ratio:1024/560;padding:0}
  .tree-node{inset:auto;min-height:56px;padding:11px 13px;position:relative;translate:none;width:100%}
  .tree-node::after{display:none}
  .tree-outcome{bottom:auto;flex-wrap:wrap;inset:auto;position:relative}
  .canvas-badge{top:14px;white-space:nowrap}
  .code-tabs{overflow-x:auto;padding:0 10px}
  .code-tabs button{flex:0 0 auto;padding:0 11px}
  .code-tabs>span{flex:0 0 auto}
  .code-stage pre{min-height:0;max-width:100%;padding:24px}
  .possibility{min-height:0}
  .security-card{padding:30px 22px}
  .final-cta{min-height:0;padding-bottom:82px;padding-top:82px}
  .final-cta h2{font-size:clamp(46px,13vw,64px)}
  .security-card{overflow:hidden}
  .security-copy,.shield{min-width:0;width:100%}
  .security-copy h2{font-size:32px;letter-spacing:-.025em;line-height:1.16}
  .security-copy>p{font-size:15px;line-height:1.75;margin:22px 0 27px}
  .shield{aspect-ratio:1;height:auto;max-width:320px}
  .safe.s1{left:0;top:18%}
  .safe.s2{bottom:14%;right:0}
  .safe.s3{right:0;top:42%}
  .site[dir="rtl"] .safe.s1{left:auto;right:0}
  .site[dir="rtl"] .safe.s2{left:0;right:auto}
  .site[dir="rtl"] .safe.s3{left:0;right:auto}
}

@media(max-width:420px){
  .hero{padding-top:88px}
  .hero-visual{max-width:330px}
  .robot-shell{height:min(61vw,245px);width:min(61vw,245px)}
  .hero h1{font-size:clamp(42px,13vw,56px)}
  .site[dir="rtl"] .hero h1{line-height:1.13}
  .hero-meta strong{font-size:12px}
}

@media(max-width:460px){
  .site-footer .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}
  .footer-languages{grid-column:1/-1;max-width:none}
}

/* Pricing */
.pricing-site{overflow:hidden}.pricing-nav{gap:27px}.pricing-hero{align-items:center;display:flex;flex-direction:column;isolation:isolate;padding-bottom:96px;padding-top:178px;position:relative;text-align:center}.pricing-hero::before{background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 67%);content:"";height:760px;left:50%;position:absolute;top:-180px;transform:translateX(-50%);width:min(1050px,100vw);z-index:-2}.pricing-hero>.kicker{margin-bottom:24px}.pricing-hero h1{font-size:clamp(58px,7.3vw,104px);font-weight:600;letter-spacing:-.072em;line-height:.95;max-width:1040px}.pricing-hero h1 em,.pricing-section-head h2 em,.section-head h2 em,.usage-copy h2 em,.cloud-card h2 em{background:linear-gradient(120deg,var(--accent-strong),var(--accent));background-clip:text;color:transparent;font-style:normal}.pricing-hero>p{color:var(--muted);font-size:18px;line-height:1.75;margin:29px auto 34px;max-width:760px}.pricing-orb{height:430px;left:50%;pointer-events:none;position:absolute;top:30px;transform:translateX(-50%);width:860px;z-index:-1}.pricing-orb i{border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);border-radius:50%;inset:0;position:absolute}.pricing-orb i:nth-child(2){inset:16%}.pricing-orb i:nth-child(3){background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%);border:0;inset:30%}.billing-toggle{align-items:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--shadow);display:flex;padding:6px}.billing-toggle button{background:transparent;border:0;border-radius:var(--r-md);color:var(--muted);cursor:pointer;font-size:13px;font-weight:600;height:46px;padding:0 24px;transition:.25s}.billing-toggle button.active{background:var(--accent-tint);color:var(--accent-strong)}.billing-toggle button span{background:color-mix(in srgb,#4cc38a 17%,transparent);border-radius:99px;color:#4cc38a;font-size:9px;margin-inline-start:8px;padding:4px 7px}.pricing-plans{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}.price-card{background:linear-gradient(150deg,color-mix(in srgb,var(--surface) 98%,var(--accent-tint)),var(--surface));border:1px solid var(--line);border-radius:25px;display:flex;flex-direction:column;min-height:630px;padding:29px;position:relative;transition:border-color .3s,transform .35s var(--ease),box-shadow .35s}.price-card:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:var(--shadow);transform:translateY(-6px)}.price-card.featured{background:linear-gradient(160deg,color-mix(in srgb,var(--accent-tint) 75%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:0 25px 80px color-mix(in srgb,var(--accent) 18%,transparent)}.popular-badge{background:var(--accent);border-radius:999px;color:#fff;font-size:9px;font-weight:700;letter-spacing:.07em;padding:7px 11px;position:absolute;right:22px;text-transform:uppercase;top:22px}.plan-index{color:var(--accent);font-family:var(--font-mono),monospace;font-size:10px}.price-card h2{font-size:28px;letter-spacing:-.045em;margin:12px 0 9px}.price-card-head p{color:var(--muted);font-size:13px;line-height:1.65;min-height:65px}.plan-price{align-items:baseline;display:flex;margin-top:30px;white-space:nowrap}.plan-price sup{color:var(--muted);font-size:18px;font-weight:600;margin-inline-end:3px}.plan-price strong{font-size:52px;font-weight:600;letter-spacing:-.06em;line-height:1}.plan-price small{color:var(--muted);font-size:11px;margin-inline-start:7px}.plan-price.custom strong{font-size:35px;letter-spacing:-.045em}.annual-note{color:var(--faint);font-size:10px;margin-top:5px}.credit-line{align-items:center;color:var(--text-2);display:flex;font-size:12px;gap:8px;margin:20px 0}.credit-line>span{color:var(--accent)}.plan-button{height:52px;width:100%}.price-card ul{border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;list-style:none;margin-top:25px;padding-top:24px}.price-card li{align-items:flex-start;color:var(--text-2);display:flex;font-size:12px;gap:9px}.price-card li span{color:#4cc38a}.pricing-included{background:var(--surface-2);border-bottom:1px solid var(--line);border-top:1px solid var(--line);padding:130px 0}.pricing-section-head,.section-head{display:grid;gap:30px 80px;grid-template-columns:1.25fr .75fr}.pricing-section-head .kicker,.section-head .kicker{grid-column:1/-1;margin-bottom:-3px}.pricing-section-head h2,.section-head h2,.usage-copy h2,.cloud-card h2{font-size:clamp(42px,5vw,68px);font-weight:600;letter-spacing:-.06em;line-height:1.05}.pricing-section-head>p,.section-head>p{align-self:end;color:var(--muted);font-size:16px;line-height:1.75}.included-grid{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);margin-top:65px}.included-item{border-inline-end:1px solid var(--line);min-height:210px;padding:31px}.included-item:last-child{border:0}.included-item>span{color:var(--accent);font-family:var(--font-mono),monospace;font-size:10px}.included-item h3{font-size:18px;margin:45px 0 8px}.included-item p{color:var(--muted);font-size:12px;line-height:1.65}.usage-section{align-items:center;display:grid;gap:90px;grid-template-columns:.85fr 1.15fr;padding-bottom:150px;padding-top:150px}.usage-copy>p{color:var(--muted);font-size:16px;line-height:1.8;margin:28px 0 35px}.usage-stats{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding-top:25px}.usage-stats div{display:flex;flex-direction:column}.usage-stats strong{font-size:19px}.usage-stats span{color:var(--muted);font-size:10px;line-height:1.4;margin-top:2px}.meter-stack{display:flex;flex-direction:column;gap:11px}.meter-card{align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:17px;display:grid;gap:15px;grid-template-columns:auto 1fr auto;padding:18px;transition:.3s var(--ease)}.meter-card:hover{border-color:var(--accent);transform:translateX(5px)}.meter-icon{align-items:center;background:var(--accent-tint);border-radius:11px;color:var(--accent);display:flex;font-family:var(--font-mono),monospace;font-size:13px;height:43px;justify-content:center;width:43px}.meter-card h3{font-size:14px}.meter-card p{color:var(--muted);font-size:11px}.meter-card small{color:var(--faint);font-size:9px;max-width:125px;text-align:right}.cloud-section{padding:0 0 150px}.cloud-card{align-items:center;background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent-tint) 72%,var(--surface)));border:1px solid var(--line);border-radius:30px;display:grid;gap:75px;grid-template-columns:1fr 1fr;overflow:hidden;padding:65px;position:relative}.cloud-card::before{background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 68%);content:"";height:600px;position:absolute;right:-250px;top:-250px;width:600px}.cloud-card>div{position:relative}.cloud-card>div>p{color:var(--muted);font-size:15px;line-height:1.75;margin-top:25px}.addon-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}.addon-grid article{background:color-mix(in srgb,var(--surface) 78%,transparent);border:1px solid var(--line-strong);border-radius:18px;display:flex;flex-direction:column;min-height:215px;padding:22px}.addon-grid article>span{align-items:center;background:var(--accent-tint);border-radius:50%;color:var(--accent);display:flex;height:31px;justify-content:center;width:31px}.addon-grid h3{font-size:13px;margin:35px 0 12px}.addon-grid strong{font-size:23px}.addon-grid small{color:var(--muted);font-size:10px}.pricing-cta{align-items:center;border-top:1px solid var(--line);display:flex;flex-direction:column;padding-bottom:120px;padding-top:120px;text-align:center}.pricing-cta img{border-radius:20px;height:72px;margin-bottom:26px;width:72px}.pricing-cta h2{font-size:clamp(48px,6vw,82px);letter-spacing:-.065em;line-height:1;max-width:900px}.pricing-cta p{color:var(--muted);font-size:17px;margin:22px 0 31px}.pricing-footer{background:var(--surface-2);border-top:1px solid var(--line);padding:50px 0 28px}.pricing-footer>.shell>div:first-child{align-items:center;display:flex;justify-content:space-between}.pricing-footer p{color:var(--muted);font-size:11px}.pricing-footer-langs{border-bottom:1px solid var(--line);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 25px;margin-top:37px;padding:26px 0}.pricing-footer-langs a{color:var(--muted);font-size:11px}.pricing-footer-langs a.active,.pricing-footer-langs a:hover{color:var(--accent)}.pricing-footer-bottom{color:var(--faint);display:flex;font-size:10px;justify-content:space-between;padding-top:25px}.pricing-site[dir="rtl"] .popular-badge{left:22px;right:auto}.pricing-site[dir="rtl"] .meter-card:hover{transform:translateX(-5px)}.pricing-site[dir="rtl"] .meter-card small{text-align:left}.pricing-site[dir="rtl"] .cloud-card::before{left:-250px;right:auto}.pricing-site[dir="rtl"] .pricing-footer-bottom{flex-direction:row}.pricing-site[dir="rtl"] .pricing-footer-langs{direction:rtl}

@media(max-width:1050px){.pricing-plans{grid-template-columns:repeat(2,minmax(0,1fr))}.price-card{min-height:590px}.pricing-nav{display:none}.usage-section{gap:55px}.cloud-card{gap:45px;padding:50px}}
@media(max-width:760px){.pricing-hero{min-height:auto;padding-bottom:85px;padding-top:130px}.pricing-hero h1{font-size:clamp(48px,13vw,70px)}.pricing-hero>p{font-size:16px}.pricing-orb{height:340px;width:680px}.billing-toggle button{padding:0 16px}.billing-toggle button span{display:none}.pricing-plans{grid-template-columns:1fr}.price-card{min-height:0;padding:26px}.price-card-head p{min-height:0}.pricing-included{padding:85px 0}.pricing-section-head,.section-head{gap:20px;grid-template-columns:1fr}.pricing-section-head h2,.usage-copy h2,.cloud-card h2{font-size:clamp(38px,11vw,48px)}.included-grid{grid-template-columns:1fr 1fr;margin-top:42px}.included-item{border-bottom:1px solid var(--line);min-height:190px;padding:24px}.included-item:nth-child(2){border-inline-end:0}.included-item:nth-child(3),.included-item:nth-child(4){border-bottom:0}.included-item h3{margin-top:32px}.usage-section{gap:48px;grid-template-columns:1fr;padding-bottom:90px;padding-top:90px}.usage-stats{gap:12px}.meter-card{grid-template-columns:auto 1fr}.meter-card small{grid-column:2;text-align:left}.pricing-site[dir="rtl"] .meter-card small{text-align:right}.cloud-section{padding-bottom:90px}.cloud-card{gap:38px;grid-template-columns:1fr;padding:32px 24px}.pricing-cta{padding-bottom:90px;padding-top:90px}.pricing-footer>.shell>div:first-child{align-items:flex-start;flex-direction:column;gap:18px}.pricing-footer-langs{gap:13px 20px}.pricing-footer-bottom{gap:18px}.pricing-site[dir="rtl"] .pricing-footer-bottom{flex-direction:row}}
@media(max-width:430px){.pricing-hero{padding-top:112px}.pricing-hero h1{font-size:46px}.pricing-hero>p{font-size:14px}.billing-toggle{width:100%}.billing-toggle button{flex:1}.included-grid{grid-template-columns:1fr}.included-item{border-bottom:1px solid var(--line)!important;border-inline-end:0}.included-item:last-child{border-bottom:0!important}.usage-stats strong{font-size:16px}.usage-stats span{font-size:9px}.meter-card{padding:15px}.addon-grid{grid-template-columns:1fr}.addon-grid article{min-height:175px}.pricing-footer-bottom{align-items:flex-start;flex-direction:column!important}}

@media(min-width:1051px){.pricing-plans{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Section placeholder: the branch roots exist and resolve; their content is still to come. */
.section-stub{align-items:center;display:flex;flex-direction:column;padding-bottom:120px;padding-top:190px;text-align:center}
.section-stub .kicker{font-size:11px;letter-spacing:.12em;text-transform:none}
.section-stub h1{font-size:clamp(44px,6vw,76px);font-weight:600;letter-spacing:-.055em;line-height:1.02}
.section-stub>p{color:var(--muted);font-size:17px;margin:22px 0 34px;max-width:540px}
.section-stub-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media(max-width:720px){.section-stub{padding-bottom:84px;padding-top:132px}.section-stub-actions{align-items:stretch;flex-direction:column;width:100%;max-width:320px}}

/* The seven policies ride in the bottom bar; a column of them dwarfed every other column. */
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:flex-end}
.footer-legal a{color:var(--faint);font-size:11.5px;transition:color .2s}
.footer-legal a:hover{color:var(--accent)}
.site[dir="rtl"] .footer-legal{direction:rtl}
@media(max-width:720px){.footer-legal{justify-content:flex-start}.site-footer .footer-bottom{align-items:flex-start;flex-direction:column;gap:16px}}

/* Monthly / annual sits under the packs: you pick a plan, then pick how you pay for it. */
.billing-switch{display:flex;justify-content:center;padding-block:38px 150px}
@media(max-width:760px){.billing-switch{padding-block:26px 88px}}
@media(max-width:430px){.billing-switch{padding-block:22px 80px}}

/* Footer column headings lead to their branch root; the language column keeps a plain label. */
.footer-col-title{color:var(--text);font-size:12px;font-weight:700;letter-spacing:-.01em;margin-bottom:9px;transition:color .2s}
.footer-col-title:hover{color:var(--accent)}

/* Breadcrumb above a section title: the way back up, and how /trust and /legal get linked at all. */
.crumbs{align-items:center;color:var(--faint);display:flex;flex-wrap:wrap;font-family:var(--font-mono),monospace;font-size:11px;gap:8px;justify-content:center;letter-spacing:.06em;margin-bottom:22px;text-transform:uppercase}
.crumbs a{color:var(--muted);transition:color .2s}
.crumbs a:hover{color:var(--accent)}
.crumbs a+a::before{color:var(--faint);content:"/";margin-inline-end:8px}

/* ==========================================================================
   Credits, bought outright � on the pricing page
   ==========================================================================

   The plans above answer "what do I subscribe to". This answers "I just need
   more, now". So it is deliberately one decision wide: pick an amount, read one
   price, click once. No cards to compare.

   Prices arrive from pay's catalog at runtime, so nothing here is written in
   stone and nothing can disagree with what the checkout charges.
   ========================================================================== */

.credits-band { border-top: 1px solid var(--line); background: var(--surface-2); padding: 130px 0 }
.credits-band .pricing-section-head { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; text-align: center; gap: 0 }
.credits-band .pricing-section-head .kicker { margin-bottom: 20px }
.credits-band .pricing-section-head > p { margin-top: 18px; align-self: auto }

/* Deux colonnes de largeur fixe, centrees ensemble sous le titre centre : la
   figure a gauche, le choix a droite, et un vrai vide entre les deux pour que
   les etiquettes flottantes du robot ne viennent pas mordre sur le prix.
   Les classes .robot-shell, .orbit et .signal viennent du heros de l'accueil �
   on ne les redefinit pas, on leur donne juste un cadre a cette echelle. */
.credits-stage { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 440px); justify-content: center; column-gap: clamp(96px, 11vw, 168px); align-items: center; margin-top: 84px }
.credits-figure { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; width: 100% }
.credits-figure::before {
  content: ""; position: absolute; inset: -14%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 64%);
  filter: blur(18px);
}
.credits-figure .robot-shell { width: min(24vw, 290px); height: min(24vw, 290px); z-index: 2 }
.credits-figure .orbit-one { width: 84%; height: 84% }
.credits-figure .orbit-two { width: 106%; height: 106% }
.credits-figure .signal-a { top: 18%; left: -6%; right: auto }
.credits-figure .signal-b { bottom: 16%; right: -7%; left: auto }
.credits-figure .signal-c { top: 40%; right: -12%; left: auto }

/* Le choix se lit au centre de sa colonne, dans l'axe du titre au-dessus. */
.credits-pick { display: flex; flex-direction: column; align-items: center; text-align: center }

.credits-tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow) }
.credits-tabs button { min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-md); color: var(--muted); background: transparent; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: .25s }
.credits-tabs button[aria-pressed="true"] { color: var(--accent-strong); background: var(--accent-tint) }
.credits-tabs button:hover[aria-pressed="false"] { color: var(--text) }

.credits-amount { display: flex; align-items: baseline; gap: 12px; margin-top: 34px }
.credits-amount sup { color: var(--muted); font-size: 22px; font-weight: 600 }
.credits-amount strong { font-size: clamp(56px, 7vw, 82px); font-weight: 600; letter-spacing: -.065em; line-height: .95; background: linear-gradient(120deg, var(--accent-strong), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent }
.credits-amount span { color: var(--muted); font-size: 13px }
.credits-line { margin-top: 10px; color: var(--text-2); font-size: 14px }
.credits-line b { color: var(--text); font-weight: 600 }

/* The slider only exists for the free amount: the packs price themselves. */
.credits-slider { width: min(360px, 100%); margin-top: 26px }
.credits-slider label { display: block; margin-bottom: 10px; color: var(--text); font-size: 13px; font-weight: 500 }
.credits-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer }
.credits-slider input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--accent-strong), var(--accent)) no-repeat, var(--line-strong); background-size: var(--fill, 50%) 100% }
.credits-slider input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--line-strong) }
.credits-slider input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--accent-strong), var(--accent)) }
.credits-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent); transition: transform .18s }
.credits-slider input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent) }
.credits-slider input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12) }
.credits-scale { display: flex; justify-content: space-between; color: var(--faint); font-size: 11px }
.credits-hint { margin-top: 9px; color: var(--faint); font-size: 11.5px; line-height: 1.55 }

.credits-go { margin-top: 32px; min-width: 260px }

.credits-points { border-top: 1px solid var(--line); display: grid; gap: 11px; list-style: none; margin-top: 34px; padding-top: 26px; text-align: start; width: min(360px, 100%) }
.credits-points li { align-items: flex-start; color: var(--text-2); display: flex; font-size: 13px; gap: 10px; line-height: 1.5 }
.credits-points li span { color: #4cc38a }

@media (max-width: 1000px) {
  /* La figure passe au-dessus : gardee a cote, elle volerait au choix la
     moitie d'un ecran qui n'en a plus. */
  .credits-stage { grid-template-columns: minmax(0, 440px); row-gap: 64px; justify-items: center; margin-top: 64px }
  .credits-figure { width: min(62vw, 300px) }
  .credits-figure .robot-shell { width: min(46vw, 220px); height: min(46vw, 220px) }
  .credits-pick { width: 100% }
}

@media (max-width: 720px) {
  .credits-band { padding: 90px 0 }
  .credits-figure .signal-c { display: none }
  .credits-tabs { width: 100% }
  .credits-tabs button { flex: 1 1 auto; padding: 0 12px }
  .credits-go { width: 100%; min-width: 0 }
}

/* Right-to-left: the figure is a measure, not prose � "$88" must not read
   "88$". The rest of the block already uses logical properties. */
.pricing-site[dir="rtl"] .credits-amount { direction: ltr }
.pricing-site[dir="rtl"] .credits-points { text-align: start }

/* ==========================================================================
   FAQ � on the pricing page
   ==========================================================================

   One centred column, in the axis of the credits block above it: a heading,
   then one card per question. The old two-column layout had no top padding
   (it sat glued to the credits band), a heavier title than every other
   section, a full-width "�9" glyph that never centred, and no hover, focus or
   open state. Every value below comes from the same scale as the rest of the
   page: --r-lg for the cards, --r-sm for the icon chip.
   ========================================================================== */

.faq-section { padding-block: 150px }
.faq-heading { margin: 0 auto 56px; max-width: 640px; text-align: center }
.faq-heading .kicker { margin-bottom: 20px }
.faq-heading h2 { font-size: clamp(38px, 4.6vw, 60px); font-weight: 600; letter-spacing: -.058em; line-height: 1.05 }

.faq-list { display: grid; gap: 12px; margin-inline: auto; max-width: 820px }
.faq-list details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .25s, box-shadow .3s, background .25s, opacity .8s var(--ease) var(--delay, 0s), transform .8s var(--ease) var(--delay, 0s);
}
.faq-list details:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)) }
.faq-list details[open] { background: linear-gradient(160deg, color-mix(in srgb, var(--accent-tint) 55%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); box-shadow: var(--shadow) }

.faq-list summary { align-items: center; border-radius: var(--r-lg); cursor: pointer; display: flex; gap: 24px; justify-content: space-between; list-style: none; padding-block: 22px; padding-inline: 28px 22px }
.faq-list summary::-webkit-details-marker { display: none }
.faq-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }
.faq-q { color: var(--text); font-size: 16px; font-weight: 600; letter-spacing: -.012em; line-height: 1.45 }

/* A drawn plus, not a glyph: two bars that always sit dead centre, and the
   vertical one folds away into a minus when the answer opens. */
.faq-icon { background: var(--accent-tint); border-radius: var(--r-sm); flex: 0 0 auto; height: 34px; position: relative; transition: background .25s; width: 34px }
.faq-icon::before, .faq-icon::after { background: var(--accent-strong); border-radius: 2px; content: ""; height: 2px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: transform .3s var(--ease); width: 12px }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg) }
.faq-list details[open] .faq-icon { background: var(--accent) }
.faq-list details[open] .faq-icon::before, .faq-list details[open] .faq-icon::after { background: #fff }
.faq-list details[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg) }

.faq-list details > p { color: var(--muted); font-size: 15px; line-height: 1.75; max-width: 680px; padding-block: 0 24px; padding-inline: 28px 80px }

/* Where the browser can animate to `auto`, the answer slides open instead of
   jumping. Elsewhere this block is ignored and it simply appears. */
@supports (interpolate-size: allow-keywords) {
  .faq-list { interpolate-size: allow-keywords }
  .faq-list details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete }
  .faq-list details[open]::details-content { block-size: auto }
}

@media (max-width: 760px) {
  .faq-section { padding-block: 90px }
  .faq-heading { margin-bottom: 38px }
  .faq-heading h2 { font-size: clamp(34px, 10vw, 44px) }
  .faq-list summary { gap: 16px; padding-block: 18px; padding-inline: 20px 16px }
  .faq-q { font-size: 15px }
  .faq-icon { height: 30px; width: 30px }
  .faq-list details > p { font-size: 14px; padding-block: 0 20px; padding-inline: 20px }
}

/* Home � the platform as one connected system (2026-10-02). */
.possibilities { border-top: 0; padding-bottom: 150px }
.possibilities + .workflow-section { margin-top: 0 }
.platform-stage { background: #070a14; border: 1px solid #1d253c; border-radius: 28px; box-shadow: 0 36px 110px rgba(2, 9, 24, .28); color: #e7ecf8; margin-bottom: 18px; overflow: hidden; position: relative }
.platform-stage::before { background: radial-gradient(circle, rgba(66, 142, 255, .27), transparent 67%); content: ""; height: 520px; pointer-events: none; position: absolute; right: -170px; top: -250px; width: 520px }
.stage-bar { align-items: center; background: rgba(255, 255, 255, .025); border-bottom: 1px solid #1d253c; display: flex; font-size: 12px; justify-content: space-between; min-height: 54px; padding: 0 22px; position: relative }
.stage-bar span { align-items: center; display: flex; font-weight: 600; gap: 10px }
.stage-bar i { background: #4cc38a; border-radius: 50%; box-shadow: 0 0 12px rgba(76, 195, 138, .8); height: 7px; width: 7px }
.stage-bar>div { align-items: center; display: flex; gap: 8px }
.stage-bar b { color: #79839d; font-family: "DM Mono", monospace; font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase }
.stage-bar strong { background: #101c3e; border: 1px solid #26375f; border-radius: 99px; color: #91b2fa; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .08em; padding: 5px 8px }
.stage-command { border-bottom: 1px solid #1d253c; padding: 42px 44px 38px; position: relative }
.stage-command small { color: #6d9cfc; display: block; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .12em; margin-bottom: 14px; text-transform: uppercase }
.stage-command p { font-size: clamp(22px, 3vw, 36px); font-weight: 500; letter-spacing: -.04em; line-height: 1.25; max-width: 900px }
.stage-command>span { border: 1px solid #28334f; border-radius: 99px; color: #8e98b2; display: inline-flex; font-family: "DM Mono", monospace; font-size: 9px; margin-top: 24px; padding: 7px 11px }
.stage-route { align-items: stretch; display: grid; grid-template-columns: 1fr 52px 1fr 52px 1fr; padding: 25px; position: relative }
.stage-route>div { background: #0a0e1b; border: 1px solid #1d253c; border-radius: 15px; display: grid; gap: 3px; grid-template-columns: auto 1fr; min-height: 90px; padding: 18px }
.stage-route>div>span { align-items: center; background: #101c3e; border-radius: 9px; color: #6d9cfc; display: flex; font-family: "DM Mono", monospace; font-size: 10px; grid-row: 1 / 3; height: 31px; justify-content: center; margin-right: 12px; width: 31px }
.stage-route b { align-self: end; font-size: 13px }
.stage-route small { color: #7f89a4; font-size: 11px }
.stage-route>i { align-self: center; background: #26314d; height: 1px; position: relative }
.stage-route>i::after { border-right: 1px solid #5f79ad; border-top: 1px solid #5f79ad; content: ""; height: 5px; position: absolute; right: 0; top: -2px; transform: rotate(45deg); width: 5px }
.possibility-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)) }
.possibility { background: color-mix(in srgb, var(--surface) 54%, transparent); border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; min-height: 360px; padding: 28px; transition: .35s var(--ease) }
.possibility-top { align-items: center; display: flex; justify-content: space-between }
.possibility-top>span { color: var(--faint); font-family: "DM Mono", monospace; font-size: 10px }
.possibility-top small { color: var(--accent-strong); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase }
.possibility .p-icon { margin: 45px 0 24px }
.possibility h3 { font-size: 23px; line-height: 1.2 }
.possibility p { font-size: 14px; line-height: 1.7; margin-bottom: 30px }
.possibility>a { align-items: center; display: flex; gap: 7px; margin-top: auto }
.possibility>a span { transition: transform .25s var(--ease) }
.possibility>a:hover span { transform: translate(3px, -3px) }
.possibility:hover { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 36%, var(--line)); box-shadow: var(--shadow); transform: translateY(-6px) }

.infra-section { background: #070a14; border-bottom: 1px solid #1d253c; border-top: 1px solid #1d253c; color: #e7ecf8; padding: 140px 0 150px; position: relative }
.infra-section::before { background-image: linear-gradient(rgba(109, 156, 252, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 156, 252, .045) 1px, transparent 1px); background-size: 72px 72px; content: ""; inset: 0; mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); pointer-events: none; position: absolute }
.infra-heading { align-items: end; display: grid; gap: 60px; grid-template-columns: 1.25fr .75fr; margin-bottom: 66px; position: relative }
.infra-heading h2 { font-size: clamp(42px, 5vw, 67px); font-weight: 600; letter-spacing: -.058em; line-height: 1.06 }
.infra-heading h2 em { background: linear-gradient(120deg, #a0bdfd, #6d9cfc); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal }
.infra-heading>p { color: #98a3bc; font-size: 17px; line-height: 1.75; padding-bottom: 7px }
.infra-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative }
.infra-card { background: linear-gradient(155deg, #0d1222, #080b15); border: 1px solid #202943; border-radius: 24px; display: flex; flex-direction: column; min-height: 540px; overflow: hidden; padding: 28px; position: relative; transition: border-color .3s var(--ease), transform .3s var(--ease) }
.infra-card::before { background: radial-gradient(circle, rgba(109, 156, 252, .2), transparent 68%); content: ""; height: 300px; position: absolute; right: -150px; top: -150px; width: 300px }
.infra-card:hover { border-color: #3b4b73; transform: translateY(-6px) }
.infra-card-head { align-items: center; display: flex; justify-content: space-between; position: relative }
.infra-card-head>span { background: #111d3c; border: 1px solid #24345c; border-radius: 9px; color: #8fb3ff; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .08em; padding: 7px 8px }
.infra-card-head small { color: #7c87a2; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase }
.infra-card h3 { font-size: 28px; letter-spacing: -.04em; line-height: 1.14; margin: 62px 0 15px; max-width: 300px; position: relative }
.infra-card>p { color: #96a0b8; font-size: 14px; line-height: 1.7; min-height: 96px; position: relative }
.infra-ui { background: #070a14; border: 1px solid #1c2540; border-radius: 14px; margin: 26px 0 25px; overflow: hidden; position: relative }
.infra-ui>div { align-items: center; border-bottom: 1px solid #171f35; display: flex; gap: 9px; min-height: 43px; padding: 0 13px }
.infra-ui>div:last-child { border-bottom: 0 }
.infra-ui i { background: #4a5570; border-radius: 50%; height: 6px; width: 6px }
.infra-ui i.active { background: #4cc38a; box-shadow: 0 0 10px rgba(76, 195, 138, .75) }
.infra-ui span { color: #8c97b1; font-size: 11px }
.infra-ui b { color: #4cc38a; font-size: 11px; margin-left: auto }
.infra-card>a { align-items: center; color: #8fb3ff; display: flex; font-size: 12px; font-weight: 600; gap: 8px; margin-top: auto; position: relative }
.infra-card>a span { transition: transform .25s var(--ease) }
.infra-card>a:hover span { transform: translate(3px, -3px) }
.developer-section { padding-top: 150px }

.site[dir="rtl"] .stage-route>div>span { margin-left: 12px; margin-right: 0 }
.site[dir="rtl"] .infra-ui b { margin-left: 0; margin-right: auto }
.site[dir="rtl"] .stage-route>i::after { left: 0; right: auto; transform: rotate(225deg) }
.site[dir="rtl"] .platform-stage::before, .site[dir="rtl"] .infra-card::before { left: -170px; right: auto }

@media(max-width:1000px) {
  .possibility-grid, .infra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .infra-card:last-child { grid-column: 1 / -1; min-height: 460px }
  .infra-heading { align-items: start; gap: 28px; grid-template-columns: 1fr }
  .infra-heading>p { max-width: 720px }
}

@media(max-width:720px) {
  .possibilities { padding-bottom: 86px }
  .platform-stage { border-radius: 20px }
  .stage-command { padding: 30px 22px 28px }
  .stage-command p { font-size: 22px }
  .stage-route { gap: 9px; grid-template-columns: 1fr; padding: 14px }
  .stage-route>i { height: 18px; justify-self: center; width: 1px }
  .stage-route>i::after { bottom: 0; left: -2px; right: auto; top: auto; transform: rotate(135deg) }
  .site[dir="rtl"] .stage-route>i::after { left: -2px; transform: rotate(135deg) }
  .possibility-grid, .infra-grid { grid-template-columns: 1fr }
  .possibility { min-height: 330px }
  .infra-section { padding: 88px 0 94px }
  .infra-heading { gap: 20px; margin-bottom: 38px }
  .infra-heading h2 { font-size: clamp(34px, 10vw, 42px) }
  .infra-heading>p { font-size: 15px }
  .infra-card, .infra-card:last-child { grid-column: auto; min-height: 500px; padding: 24px }
  .developer-section { padding-top: 88px }
}

/* Homepage service chapters: Cloud, Hosting, Domains and professional Mail. */
.home-service { padding: 150px 0; position: relative }
.home-service-grid { align-items: center; display: grid; gap: 60px; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr) }
.home-service-copy { max-width: 480px }
.home-service-copy h2 { font-size: clamp(42px, 5vw, 67px); font-weight: 600; letter-spacing: -.058em; line-height: 1.06 }
.home-service-copy p { color: var(--muted); font-size: 17px; line-height: 1.75; margin-top: 26px }
.home-service-copy>a { align-items: center; color: var(--accent-strong); display: inline-flex; font-size: 13px; font-weight: 650; gap: 9px; margin-top: 30px }
.home-service-copy>a span { transition: transform .25s var(--ease) }
.home-service-copy>a:hover span { transform: translate(3px,-3px) }
.service-window-bar { align-items: center; background: color-mix(in srgb,var(--surface) 88%,transparent); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 52px; padding: 0 18px }
.service-window-bar>span { align-items: center; display: flex; font-size: 11px; font-weight: 650; gap: 9px }
.service-window-bar>span i { background: #32b77a; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb,#32b77a 14%,transparent); height: 7px; width: 7px }
.service-window-bar>b { color: var(--faint); font-family: "DM Mono",monospace; font-size: 8px; letter-spacing: .08em }

.cloud-home { border-top: 0 }
.cloud-home::before { background: radial-gradient(circle,color-mix(in srgb,var(--accent) 14%,transparent),transparent 67%); content: ""; height: 650px; pointer-events: none; position: absolute; right: -220px; top: 30px; width: 650px }
.cloud-visual { background-color: var(--surface); background-image: radial-gradient(circle,var(--line-strong) 1px,transparent 1.4px); background-size: 18px 18px; border: 1px solid var(--line-strong); border-radius: 25px; box-shadow: var(--shadow); min-height: 550px; overflow: hidden; position: relative }
.cloud-agent { align-items: center; background: var(--surface); border: 1px solid color-mix(in srgb,var(--accent) 32%,var(--line)); border-radius: 15px; box-shadow: 0 18px 45px color-mix(in srgb,var(--accent) 11%,transparent); display: flex; gap: 12px; left: 50%; padding: 13px; position: absolute; top: 95px; transform: translateX(-50%); width: 220px; z-index: 2 }
.cloud-agent>span { align-items: center; background: var(--accent); border-radius: 10px; color: #fff; display: flex; height: 36px; justify-content: center; width: 36px }
.cloud-agent>div { display: flex; flex-direction: column }
.cloud-agent small { color: var(--faint); font-family: "DM Mono",monospace; font-size: 8px; letter-spacing: .1em }
.cloud-agent b { font-size: 12px; margin-top: 2px }
.cloud-lines { height: 130px; left: 18%; position: absolute; right: 18%; top: 154px }
.cloud-lines::before { border-left: 1px solid color-mix(in srgb,var(--accent) 42%,var(--line)); border-right: 1px solid color-mix(in srgb,var(--accent) 42%,var(--line)); border-top: 1px solid color-mix(in srgb,var(--accent) 42%,var(--line)); content: ""; inset: 48px 0 0; position: absolute }
.cloud-lines::after { background: color-mix(in srgb,var(--accent) 42%,var(--line)); content: ""; height: 48px; left: 50%; position: absolute; top: 0; width: 1px }
.cloud-lines i { background: var(--accent); border: 3px solid var(--surface); border-radius: 50%; bottom: -4px; box-shadow: 0 0 0 1px color-mix(in srgb,var(--accent) 25%,var(--line)); height: 9px; position: absolute; width: 9px }
.cloud-lines i:nth-child(1){left:-4px}.cloud-lines i:nth-child(2){left:calc(50% - 4px)}.cloud-lines i:nth-child(3){right:-4px}
.cloud-resources { bottom: 28px; display: grid; gap: 12px; grid-template-columns: repeat(3,minmax(0,1fr)); left: 28px; position: absolute; right: 28px }
.cloud-resource { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 15px; box-shadow: 0 12px 32px color-mix(in srgb,var(--text) 6%,transparent); display: flex; flex-direction: column; min-height: 170px; padding: 16px }
.cloud-resource>span { align-items: center; background: var(--accent-tint); border-radius: 8px; color: var(--accent-strong); display: flex; font-family: "DM Mono",monospace; font-size: 8px; height: 30px; justify-content: center; width: 38px }
.cloud-resource>div { display: flex; flex-direction: column; margin-top: 24px }
.cloud-resource b { font-size: 12px; line-height: 1.35 }
.cloud-resource small { color: var(--muted); font-size: 10px; line-height: 1.45; margin-top: 5px }
.cloud-resource>i { color: #32b77a; font-size: 10px; font-style: normal; margin-top: auto }

.hosting-home { background: var(--surface-2); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line) }
.hosting-home .home-service-copy { margin-bottom: 60px; max-width: 760px }
.deploy-visual { align-items: stretch; display: grid; gap: 18px; grid-template-columns: .72fr .8fr 1.25fr; min-height: 480px }
.deploy-files,.deploy-preview { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 21px; box-shadow: var(--shadow); overflow: hidden }
.deploy-files>div:not(.service-window-bar) { align-items: center; border-bottom: 1px solid var(--line); color: var(--text-2); display: flex; font-family: "DM Mono",monospace; font-size: 11px; gap: 9px; min-height: 54px; padding: 0 17px }
.deploy-files>div.muted { color: var(--faint) }
.deploy-files>div small { color: var(--faint); font-size: 8px; margin-inline-start: auto }
.deploy-track { display: flex; flex-direction: column; justify-content: center }
.deploy-step { align-items: center; display: grid; gap: 12px; grid-template-columns: 31px minmax(0,1fr); min-height: 102px; position: relative }
.deploy-step>span { align-items: center; background: color-mix(in srgb,#32b77a 13%,var(--surface)); border: 1px solid color-mix(in srgb,#32b77a 26%,var(--line)); border-radius: 50%; color: #279767; display: flex; font-size: 10px; height: 31px; justify-content: center; width: 31px; z-index: 1 }
.deploy-step:last-child>span { animation: pulse 2s infinite; background: var(--accent-tint); border-color: color-mix(in srgb,var(--accent) 30%,var(--line)); color: var(--accent) }
.deploy-step>div { display: flex; flex-direction: column }
.deploy-step b { font-size: 12px }.deploy-step small{color:var(--muted);font-size:10px;margin-top:3px}
.deploy-step>i { background: var(--line-strong); bottom: -36px; height: 72px; left: 15px; position: absolute; width: 1px }
.preview-bar { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 6px; min-height: 52px; padding: 0 14px }
.preview-bar>i { background: var(--line-strong); border-radius: 50%; height: 7px; width: 7px }
.preview-bar>span { background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-family: "DM Mono",monospace; font-size: 8px; margin-inline-start: 8px; overflow: hidden; padding: 7px 9px; text-overflow: ellipsis; white-space: nowrap }
.preview-page { align-items: center; background: linear-gradient(145deg,var(--accent-tint),var(--surface)); display: flex; flex-direction: column; height: 345px; justify-content: center; position: relative }
.preview-page::before { border: 1px solid color-mix(in srgb,var(--accent) 16%,var(--line)); border-radius: 50%; content:""; height:190px; position:absolute; width:190px }
.preview-page>span { color: #279767; font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.12em;z-index:1 }
.preview-page>b { font-size: 29px; letter-spacing: -.05em; margin-top: 10px; z-index: 1 }
.preview-page>small { color: var(--muted); font-size: 10px; margin-top: 5px; z-index: 1 }
.rollback-pill { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 99px; bottom: 17px; box-shadow: var(--shadow); color: var(--text-2); font-size: 10px; padding: 8px 12px; position: absolute; right: 17px }
.deploy-preview { position: relative }

.domains-home { overflow: hidden }
.domains-home::before { background: radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),transparent 68%); content:""; height:700px; left:-300px; pointer-events:none; position:absolute; top:40px; width:700px }
.domain-visual { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 25px; box-shadow: var(--shadow); padding: 22px }
.domain-search { align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 12px; grid-template-columns: 34px 1fr auto; min-height: 62px; padding: 0 14px }
.domain-search>span { align-items:center;background:var(--accent-tint);border-radius:9px;color:var(--accent-strong);display:flex;height:34px;justify-content:center;width:34px }
.domain-search>b { font-size: 14px }.domain-search>small{color:#279767;font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.08em}
.domain-zone { border: 1px solid var(--line); border-radius: 16px; margin-top: 14px; overflow: hidden }
.zone-head { align-items:center;background:color-mix(in srgb,var(--accent-tint) 45%,var(--surface));border-bottom:1px solid var(--line);display:flex;justify-content:space-between;min-height:46px;padding:0 15px }
.zone-head span,.zone-head b { font-family:"DM Mono",monospace;font-size:8px;letter-spacing:.08em;text-transform:uppercase }.zone-head b{color:var(--accent-strong)}
.zone-row { align-items:center;border-bottom:1px solid var(--line);display:grid;gap:12px;grid-template-columns:32px 1fr auto;min-height:72px;padding:10px 14px }.zone-row:last-child{border-bottom:0}
.zone-row>span { color:var(--faint);font-family:"DM Mono",monospace;font-size:8px }.zone-row>div{display:flex;flex-direction:column}.zone-row b{font-size:11px}.zone-row small{color:var(--muted);font-size:10px;margin-top:3px}.zone-row>i{align-items:center;background:color-mix(in srgb,#32b77a 13%,var(--surface));border-radius:50%;color:#279767;display:flex;font-size:9px;font-style:normal;height:25px;justify-content:center;width:25px}
.domain-route { align-items:center;color:var(--muted);display:grid;font-size:9px;gap:8px;grid-template-columns:auto 1fr auto 1fr auto;margin-top:18px;padding:0 5px }.domain-route i{background:var(--line-strong);height:1px;position:relative}.domain-route i::after{border-right:1px solid var(--faint);border-top:1px solid var(--faint);content:"";height:4px;position:absolute;right:0;top:-2px;transform:rotate(45deg);width:4px}.domain-route b{color:var(--accent-strong)}

.mail-home { background: var(--surface-2); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line) }
.mail-grid { grid-template-columns: minmax(0,.92fr) minmax(300px,1.08fr) }
.mail-visual { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 25px; box-shadow: var(--shadow); display: grid; grid-template-columns: 62px minmax(0,1fr); min-height: 520px; overflow: hidden; position: relative }
.mail-sidebar { align-items:center;background:var(--accent-tint);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;gap:17px;padding:17px 0 }.mail-sidebar>b{align-items:center;background:var(--accent);border-radius:11px;color:#fff;display:flex;font-size:18px;height:38px;justify-content:center;width:38px}.mail-sidebar>i{background:color-mix(in srgb,var(--accent) 22%,transparent);border-radius:8px;height:27px;width:27px}.mail-sidebar>span{align-items:center;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:50%;color:var(--accent-strong);display:flex;height:28px;justify-content:center;margin-top:auto;width:28px}
.mail-inbox { min-width:0 }.mail-message{align-items:center;border-bottom:1px solid var(--line);display:grid;gap:12px;grid-template-columns:36px 1fr auto;min-height:83px;padding:12px 17px}.mail-message.active{background:color-mix(in srgb,var(--accent-tint) 48%,var(--surface))}.mail-message>span{align-items:center;background:var(--accent-tint);border-radius:10px;color:var(--accent-strong);display:flex;font-size:11px;height:36px;justify-content:center;width:36px}.mail-message>div{display:flex;flex-direction:column;min-width:0}.mail-message b{font-size:12px}.mail-message small{color:var(--muted);font-size:10px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-message>i{color:var(--faint);font-size:8px;font-style:normal}.mail-compose{align-items:center;background:var(--accent);border-radius:12px;bottom:22px;box-shadow:0 13px 30px color-mix(in srgb,var(--accent) 24%,transparent);color:#fff;display:flex;font-size:11px;gap:8px;padding:11px 14px;position:absolute;right:20px}
.mail-proof { background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;bottom:20px;box-shadow:var(--shadow);display:grid;left:82px;position:absolute;right:190px }.mail-proof>div{align-items:center;border-bottom:1px solid var(--line);display:flex;gap:10px;min-height:53px;padding:8px 12px}.mail-proof>div:last-child{border-bottom:0}.mail-proof>div>span{align-items:center;background:color-mix(in srgb,#32b77a 13%,var(--surface));border-radius:50%;color:#279767;display:flex;font-size:8px;height:24px;justify-content:center;width:24px}.mail-proof p{display:flex;flex-direction:column}.mail-proof b{font-size:10px}.mail-proof small{color:var(--muted);font-size:8px;margin-top:2px}
.developer-section { padding-top: 150px }

.site[dir="rtl"] .domain-route i::after { left:0;right:auto;transform:rotate(225deg) }
.site[dir="rtl"] .rollback-pill,.site[dir="rtl"] .mail-compose { left:17px;right:auto }

@media(max-width:1000px){
  .home-service-grid,.mail-grid{gap:60px;grid-template-columns:1fr}.home-service-copy{max-width:720px}.mail-grid .home-service-copy{grid-row:1}.deploy-visual{grid-template-columns:1fr 1fr}.deploy-preview{grid-column:1/-1}.preview-page{height:300px}
}
@media(max-width:720px){
  .home-service{padding:92px 0}.home-service-grid{gap:42px}.home-service-copy h2{font-size:40px}.home-service-copy p{font-size:15px}.cloud-visual{min-height:710px}.cloud-agent{top:86px}.cloud-lines{display:none}.cloud-resources{grid-template-columns:1fr;top:176px}.cloud-resource{min-height:145px}.cloud-resource>div{margin-top:18px}.hosting-home .home-service-copy{margin-bottom:40px}.deploy-visual{grid-template-columns:1fr}.deploy-preview{grid-column:auto}.deploy-files{min-height:280px}.deploy-track{padding:0 18px}.domain-visual{padding:12px}.domain-route{grid-template-columns:1fr;justify-items:center}.domain-route i{height:17px;width:1px}.domain-route i::after{bottom:0;left:-2px;right:auto;top:auto;transform:rotate(135deg)}.mail-visual{grid-template-columns:48px minmax(0,1fr);min-height:610px}.mail-sidebar>b{height:32px;width:32px}.mail-sidebar>i{height:24px;width:24px}.mail-proof{bottom:18px;left:61px;right:12px}.mail-compose{bottom:190px}.developer-section{padding-top:92px}
}

/* Interactive product explorer. Every color comes from the shared theme; unlike the retired
   dark showcase above, this surface is genuinely light in the light theme. */
.product-explorer { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 28px; box-shadow: var(--shadow); display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 650px; overflow: hidden }
.product-tabs { background: var(--surface-2); border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px }
.product-tabs button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 15px; color: var(--muted); cursor: pointer; display: grid; gap: 12px; grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 91px; padding: 13px; text-align: start; transition: background .25s, border-color .25s, color .25s, transform .25s var(--ease) }
.product-tabs button:hover { background: color-mix(in srgb, var(--surface) 68%, transparent); color: var(--text); transform: translateX(3px) }
.product-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.product-tabs button.active { background: var(--surface); border-color: var(--line-strong); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text) }
.product-tabs button>span { align-items: center; background: var(--accent-tint); border-radius: 11px; color: var(--accent-strong); display: flex; font-size: 18px; height: 40px; justify-content: center; width: 40px }
.product-tabs button>div { display: flex; flex-direction: column; min-width: 0 }
.product-tabs button small { color: var(--faint); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .09em; text-transform: uppercase }
.product-tabs button b { font-size: 13px; line-height: 1.35; margin-top: 3px }
.product-tabs button>i { color: var(--faint); font-family: "DM Mono", monospace; font-size: 9px; font-style: normal }
.product-tabs button.active>i { color: var(--accent) }
.product-panel { animation: productIn .45s var(--ease) both; display: grid; gap: 42px; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); padding: 44px }
.product-visual { align-self: center; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 22px; box-shadow: 0 22px 60px color-mix(in srgb, var(--text) 7%, transparent); min-width: 0; overflow: hidden }
.product-window-bar { align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 54px; padding: 0 18px }
.product-window-bar>span { align-items: center; display: flex; font-size: 12px; font-weight: 600; gap: 9px }
.product-window-bar>span i { background: #32b77a; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, #32b77a 15%, transparent); height: 7px; width: 7px }
.product-window-bar>b { background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 99px; color: var(--accent-strong); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .08em; padding: 6px 9px }
.product-window-body { padding: 26px }
.product-window-title { align-items: center; display: flex; gap: 14px; margin-bottom: 28px }
.product-window-title>span { align-items: center; background: var(--accent); border-radius: 13px; box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 24%, transparent); color: #fff; display: flex; font-size: 20px; height: 48px; justify-content: center; width: 48px }
.product-window-title>div { display: flex; flex-direction: column }
.product-window-title small { color: var(--faint); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .09em; text-transform: uppercase }
.product-window-title strong { font-size: 17px; letter-spacing: -.02em; margin-top: 2px }
.product-rows { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; overflow: hidden }
.product-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 78px; padding: 12px 15px }
.product-row:last-child { border-bottom: 0 }
.product-row>span { align-items: center; background: var(--surface-2); border-radius: 8px; color: var(--faint); display: flex; font-family: "DM Mono", monospace; font-size: 9px; height: 30px; justify-content: center; width: 30px }
.product-row>div { display: flex; flex-direction: column; min-width: 0 }
.product-row b { font-size: 13px; line-height: 1.35 }
.product-row small { color: var(--muted); font-size: 11px; line-height: 1.4; margin-top: 3px }
.product-row>i { align-items: center; background: color-mix(in srgb, #32b77a 13%, var(--surface)); border-radius: 50%; color: #279767; display: flex; font-size: 10px; font-style: normal; height: 26px; justify-content: center; width: 26px }
.product-row.state-live { background: color-mix(in srgb, var(--accent-tint) 42%, var(--surface)) }
.product-row.state-live>i { animation: pulse 2s infinite; background: var(--accent-tint); color: var(--accent) }
.product-explanation { align-self: center; display: flex; flex-direction: column }
.product-explanation>span { color: var(--accent-strong); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase }
.product-explanation h3 { font-size: clamp(30px, 3vw, 44px); letter-spacing: -.05em; line-height: 1.08; margin: 18px 0 }
.product-explanation p { color: var(--muted); font-size: 15px; line-height: 1.75 }
.product-explanation>a { align-items: center; align-self: flex-start; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-strong); display: flex; font-size: 13px; font-weight: 600; gap: 9px; margin-top: 30px; padding-bottom: 5px }
.product-explanation>a span { transition: transform .25s var(--ease) }
.product-explanation>a:hover span { transform: translate(3px, -3px) }
.site[dir="rtl"] .product-tabs button:hover { transform: translateX(-3px) }
@keyframes productIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }

@media(max-width:1050px) {
  .product-explorer { grid-template-columns: 1fr }
  .product-tabs { border-bottom: 1px solid var(--line); border-inline-end: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .product-tabs button { min-height: 80px }
  .product-panel { grid-template-columns: 1.1fr .9fr }
}

@media(max-width:720px) {
  .product-explorer { border-radius: 20px; min-height: 0 }
  .product-tabs { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; padding: 10px; scrollbar-width: none }
  .product-tabs::-webkit-scrollbar { display: none }
  .product-tabs button { flex: 0 0 auto; gap: 8px; grid-template-columns: 36px auto; min-height: 62px; padding: 9px 12px }
  .product-tabs button>span { height: 36px; width: 36px }
  .product-tabs button>div { max-width: 145px }
  .product-tabs button>i { display: none }
  .product-panel { gap: 30px; grid-template-columns: 1fr; padding: 18px }
  .product-window-body { padding: 18px }
  .product-explanation { padding: 0 4px 8px }
  .product-explanation h3 { font-size: 32px }
}

@media(max-width:420px) {
  .product-tabs button b { font-size: 12px }
  .product-window-bar { padding: 0 14px }
  .product-window-body { padding: 15px }
  .product-row { gap: 9px; grid-template-columns: 28px minmax(0, 1fr) auto; min-height: 73px; padding: 10px }
  .product-row>span { height: 28px; width: 28px }
}

/* The Cloud artwork is user-supplied. Keep its own color field intact and frame it with the
   theme's border/shadow so it belongs in both light and dark modes. */
.cloud-image-visual { aspect-ratio: 3 / 2; background: var(--surface); min-height: 0 }
.cloud-image-visual::after { border: 1px solid color-mix(in srgb, #fff 42%, transparent); border-radius: 23px; content: ""; inset: 1px; pointer-events: none; position: absolute }
.cloud-image-visual img, .cloud-image-visual video { display: block; height: 100%; object-fit: cover; width: 100% }
.cloud-service-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 480px) }
.cloud-service-grid .home-service-copy { justify-self: end }
.domains-service-grid { grid-template-columns: minmax(300px, 480px) minmax(0, 1fr) }
.domains-service-grid .home-service-copy { justify-self: start }
.hosting-video-visual { aspect-ratio: 67 / 45; background: #56adf4; border: 1px solid var(--line-strong); border-radius: 25px; box-shadow: var(--shadow); overflow: hidden; position: relative }
.hosting-video-visual::after { border: 1px solid color-mix(in srgb, #fff 42%, transparent); border-radius: 23px; content: ""; inset: 1px; pointer-events: none; position: absolute }
.hosting-video-visual video { display: block; height: 100%; object-fit: cover; width: 100% }
/* La capture pleine largeur d une page de branche (`Showcase` dans `branch-page.jsx`).
   Reprise telle quelle de l ancienne page `/workflows`, renommee le 2026-10-05 : le cadre
   etait bon, c est la page autour qui ne l etait pas. `contain` et non `cover` — un
   enregistrement d ecran se recadre pas, il se lit en entier ou il ment. */
.br-wide { aspect-ratio: 1588 / 860; margin: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 25px; box-shadow: 0 0 0 1px var(--line-strong), var(--shadow); overflow: hidden; position: relative }
.br-wide::after { border: 1px solid color-mix(in srgb, #fff 42%, transparent); border-radius: 23px; content: ""; inset: 1px; pointer-events: none; position: absolute }
.br-wide video { display: block; height: 100%; object-fit: contain; width: 100% }
@media(max-width:1000px) { .cloud-service-grid, .domains-service-grid { grid-template-columns: 1fr } .cloud-service-grid .home-service-copy, .domains-service-grid .home-service-copy { justify-self: start } }
@media(max-width:720px) { .cloud-image-visual { min-height: 0 } .hosting-video-visual,.br-wide { border-radius: 20px } .hosting-video-visual::after,.br-wide::after { border-radius: 18px } }

/* Home platform map � one theme-native surface, six connected services. */
.possibilities { border-top: 0; padding-bottom: 150px }
.platform-map { background: linear-gradient(145deg, color-mix(in srgb, var(--accent-tint) 34%, var(--surface)), var(--surface) 38%); border: 1px solid var(--line-strong); border-radius: 28px; box-shadow: var(--shadow); overflow: hidden; position: relative }
.platform-map::before { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; content: ""; inset: 0; mask-image: linear-gradient(to bottom, #000, transparent 72%); opacity: .7; pointer-events: none; position: absolute }
.map-toolbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 58px; padding: 0 24px; position: relative }
.map-toolbar>span { align-items: center; display: flex; font-size: 12px; font-weight: 650; gap: 10px }
.map-toolbar>span i { background: #32b77a; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, #32b77a 14%, transparent); height: 7px; width: 7px }
.map-toolbar>div { align-items: center; display: flex; gap: 7px }
.map-toolbar b { background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); border-radius: 99px; color: var(--accent-strong); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .08em; padding: 5px 8px }
.map-toolbar small { color: var(--faint); font-family: "DM Mono", monospace; font-size: 9px; margin-inline-start: 5px }
.map-prompt { align-items: flex-start; display: grid; gap: 16px; grid-template-columns: 42px minmax(0, 1fr); padding: 34px 34px 28px; position: relative }
.map-prompt>span { align-items: center; background: var(--accent); border-radius: 13px; box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 22%, transparent); color: #fff; display: flex; font-size: 18px; height: 42px; justify-content: center; width: 42px }
.map-prompt small { color: var(--accent-strong); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase }
.map-prompt p { font-size: clamp(19px, 2.2vw, 27px); font-weight: 560; letter-spacing: -.03em; line-height: 1.35; margin-top: 7px; max-width: 900px }
.map-lanes { display: grid; gap: 10px; padding: 0 14px 14px; position: relative }
.map-lane { align-items: stretch; border: 1px solid var(--line); border-radius: 20px; display: grid; gap: 12px; grid-template-columns: 190px minmax(0, 1fr); padding: 12px }
.map-lane.lane-1 { background: color-mix(in srgb, var(--surface) 72%, transparent) }
.map-lane.lane-2 { background: color-mix(in srgb, var(--accent-tint) 48%, var(--surface)) }
.map-lane-label { align-items: flex-start; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 14px }
.map-lane-label>span { color: var(--faint); font-family: "DM Mono", monospace; font-size: 10px }
.map-lane-label>div { display: flex; flex-direction: column }
.map-lane-label b { font-size: 18px; letter-spacing: -.02em }
.map-lane-label small { color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 5px }
.map-services { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)) }
.map-service { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; color: var(--text); min-height: 220px; padding: 18px; transition: border-color .25s, box-shadow .3s, transform .3s var(--ease) }
.map-service:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); box-shadow: 0 16px 42px color-mix(in srgb, var(--accent) 11%, transparent); transform: translateY(-3px) }
.map-service-top { align-items: center; display: flex; margin-bottom: 30px }
.map-service-top>span { align-items: center; background: var(--accent-tint); border-radius: 9px; color: var(--accent-strong); display: flex; font-size: 15px; height: 32px; justify-content: center; width: 32px }
.map-service-top small { color: var(--faint); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .09em; margin-inline-start: 9px; text-transform: uppercase }
.map-service-top i { color: var(--faint); font-size: 12px; font-style: normal; margin-inline-start: auto; transition: transform .25s var(--ease) }
.map-service:hover .map-service-top i { color: var(--accent); transform: translate(2px, -2px) }
.map-service h3 { font-size: 18px; letter-spacing: -.035em; line-height: 1.25 }
.map-service p { color: var(--muted); display: -webkit-box; font-size: 12px; line-height: 1.6; margin-top: 9px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3 }

@media(max-width:900px) {
  .map-lane { grid-template-columns: 1fr }
  .map-lane-label { align-items: center; flex-direction: row; gap: 16px; justify-content: flex-start; padding: 8px 10px 4px }
  .map-lane-label>div { flex-direction: row; gap: 9px; align-items: baseline }
}
@media(max-width:720px) {
  .possibilities { padding-bottom: 90px }
  .platform-map { border-radius: 20px }
  .map-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; padding: 14px 16px }
  .map-toolbar small { display: none }
  .map-prompt { gap: 12px; grid-template-columns: 36px minmax(0, 1fr); padding: 24px 18px 22px }
  .map-prompt>span { border-radius: 10px; height: 36px; width: 36px }
  .map-prompt p { font-size: 18px }
  .map-lanes { padding: 0 8px 8px }
  .map-lane { border-radius: 16px; padding: 8px }
  .map-lane-label>div { align-items: flex-start; flex-direction: column; gap: 0 }
  .map-services { grid-template-columns: 1fr }
  .map-service { min-height: 0; padding: 17px }
  .map-service-top { margin-bottom: 18px }
  .map-service p { -webkit-line-clamp: 2 }
}

/* Les icones prennent leur taille du cadre qui les porte, jamais d'un attribut. */
.p-icon svg, .product-tabs button > span svg, .product-window-title > span svg,
.spec-card > span svg, .flow-step > span svg { display: block; height: 1em; width: 1em }
.product-window-title > span svg { height: 22px; width: 22px }

/* �"��"��"� MOSAIQUES (2026-10-03) �"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"�
   Six colonnes, une tuile maitresse, le reste pose autour. Tout vient des jetons
   du theme : une mosaique peinte en dur ne survit pas au theme clair. */
.bento-section { padding-top: 150px }
.bento-section .section-head { margin-bottom: 46px }
.bento { display: grid; gap: 14px; grid-auto-rows: minmax(206px, auto); grid-template-columns: repeat(12, minmax(0, 1fr)) }

.bento-tile {
  background: linear-gradient(158deg, color-mix(in srgb, var(--surface) 96%, var(--accent-tint)), var(--surface));
  border: 1px solid var(--line); border-radius: 24px; color: inherit; display: flex; flex-direction: column;
  overflow: hidden; padding: 24px; position: relative; text-decoration: none;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
/* La lueur d'angle : discrete, et elle se renforce au survol plutot que d'apparaitre. */
.bento-tile::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
  content: ""; height: 420px; opacity: .55; pointer-events: none; position: absolute;
  right: -180px; top: -200px; transition: opacity .45s var(--ease); width: 420px;
}
.bento-tile:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); box-shadow: var(--shadow); transform: translateY(-4px) }
.bento-tile:hover::after { opacity: 1 }
a.bento-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }

.tile-copy { margin-top: auto; padding-top: 24px; position: relative; z-index: 1 }
.tile-copy h3 { font-size: 19px; letter-spacing: -.03em; line-height: 1.25 }
.tile-copy h3 em { background: linear-gradient(120deg, var(--accent-strong), var(--accent)); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 30px; font-style: normal; font-weight: 600; letter-spacing: -.05em; margin-inline-end: 3px }
.tile-copy p { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin-top: 8px }
.tile-link { align-items: center; color: var(--accent-strong); display: inline-flex; font-size: 12px; font-weight: 650; gap: 7px; margin-top: 16px }
.tile-link span { transition: transform .25s var(--ease) }
.bento-tile:hover .tile-link span { transform: translate(3px, -3px) }

/* ���� Mosaique 1 : l'agent �������������������������������������������������������������������������������������������������������� */
.t-run { grid-column: span 7; grid-row: span 2 }
.t-tools, .t-media, .t-perm { grid-column: span 5 }
.t-modes { grid-column: span 3 }
.t-budget { grid-column: span 4 }
.t-run .tile-copy h3 { font-size: 26px }
.t-run .tile-copy p { font-size: 15px; max-width: 460px }

.run-trace { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; display: flex; flex: 1; flex-direction: column; overflow: hidden; position: relative; z-index: 1 }
.run-trace-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 10px; min-height: 46px; padding: 0 16px }
.run-trace-head i { background: #32b77a; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, #32b77a 14%, transparent); height: 7px; width: 7px }
.run-trace-head b { font-family: "DM Mono", monospace; font-size: 12px }
.run-trace-head em { color: var(--faint); font-family: "DM Mono", monospace; font-size: 10px; font-style: normal; margin-inline-start: auto }
.run-trace ul { display: flex; flex: 1; flex-direction: column; list-style: none }
.run-trace li { align-items: center; border-bottom: 1px solid var(--line); display: grid; flex: 1; gap: 12px; grid-template-columns: 112px minmax(0, 1fr) auto auto; padding: 0 16px }
.run-trace li.live { background: color-mix(in srgb, var(--accent-tint) 46%, transparent) }
.run-trace code { color: var(--accent-strong); font-family: "DM Mono", monospace; font-size: 11px }
.run-trace li > span { color: var(--text-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.run-trace small { color: var(--faint); font-size: 11px; white-space: nowrap }
.run-trace li > em { color: var(--text); font-family: "DM Mono", monospace; font-size: 11px; font-style: normal; min-width: 42px; text-align: end }
.run-trace-foot { align-items: center; background: var(--surface-2); color: var(--muted); display: flex; font-family: "DM Mono", monospace; font-size: 11px; gap: 9px; min-height: 44px; padding: 0 16px }
.run-trace-foot span { align-items: center; background: color-mix(in srgb, #32b77a 16%, var(--surface)); border-radius: 50%; color: #279767; display: flex; font-size: 10px; height: 22px; justify-content: center; width: 22px }

/* Les 34 noms : la densite est le visuel, et le bas s'efface sous le texte. */
.tool-cloud { display: flex; flex: 1; flex-wrap: wrap; gap: 6px; -webkit-mask-image: linear-gradient(#000 52%, transparent); mask-image: linear-gradient(#000 52%, transparent); overflow: hidden; position: relative; z-index: 1 }
.tool-cloud span { background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; color: var(--text-2); font-family: "DM Mono", monospace; font-size: 10px; padding: 5px 8px }

.media-strip { display: grid; flex: 1; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); position: relative; z-index: 1 }
.media-strip span { align-items: flex-end; background: var(--tone-tint, var(--surface-2)); border-radius: 11px; color: var(--tone, var(--text-2)); display: flex; font-size: 11px; font-weight: 600; padding: 9px }
.media-strip .m-0 { --tone: #2b8fe0; --tone-tint: #e2f0fd } .media-strip .m-1 { --tone: #d4467a; --tone-tint: #fbe4ed }
.media-strip .m-2 { --tone: #7c4dff; --tone-tint: #efe9ff } .media-strip .m-3 { --tone: #0e9f8e; --tone-tint: #dcf4f0 }
.media-strip .m-4 { --tone: #c98a04; --tone-tint: #fcf1d3 } .media-strip .m-5 { --tone: #4f5bd5; --tone-tint: #e7e9fb }
[data-theme="dark"] .media-strip .m-0 { --tone: #6d9cfc; --tone-tint: #101c3e } [data-theme="dark"] .media-strip .m-1 { --tone: #f27aa5; --tone-tint: #301420 }
[data-theme="dark"] .media-strip .m-2 { --tone: #a98bff; --tone-tint: #1f183f } [data-theme="dark"] .media-strip .m-3 { --tone: #3fcfb9; --tone-tint: #0a2925 }
[data-theme="dark"] .media-strip .m-4 { --tone: #f2c14e; --tone-tint: #2c2209 } [data-theme="dark"] .media-strip .m-5 { --tone: #8b93f5; --tone-tint: #181c3c }

.perm-card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line-strong)); border-radius: 14px; display: flex; flex-direction: column; gap: 10px; padding: 14px; position: relative; z-index: 1 }
.perm-head code { background: var(--accent-tint); border-radius: 6px; color: var(--accent-strong); font-family: "DM Mono", monospace; font-size: 10px; padding: 4px 8px }
.perm-cmd { color: var(--text); font-family: "DM Mono", monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.perm-actions { display: flex; gap: 6px }
.perm-actions span { border: 1px solid var(--line-strong); border-radius: 8px; color: var(--muted); font-size: 10px; font-weight: 600; padding: 6px 10px }
.perm-actions .primary { background: var(--accent); border-color: var(--accent); color: #fff }

.mode-pills { align-content: center; display: grid; flex: 1; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; z-index: 1 }
.mode-pills span { align-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); display: flex; font-size: 12px; font-weight: 600; justify-content: center; min-height: 44px }
.mode-pills .active { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent-strong) }

.budget-meter { align-content: center; display: grid; flex: 1; gap: 14px; position: relative; z-index: 1 }
.budget-figure { align-items: baseline; display: flex; gap: 8px }
.budget-figure b { font-size: 42px; font-weight: 600; letter-spacing: -.05em; line-height: 1 }
.budget-figure small { color: var(--faint); font-family: "DM Mono", monospace; font-size: 12px }
.budget-bar { background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; height: 9px; overflow: hidden }
.budget-bar i { background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius: 99px; display: block; height: 100% }

/* ���� Mosaique 2 : la production �������������������������������������������������������������������������������������������� */
.t-cloud { grid-column: span 7; grid-row: span 2 }
.t-domains, .t-mail { grid-column: span 5 }
.t-hosting { align-items: center; flex-direction: row; gap: 36px; grid-column: span 12; grid-row: span 1; min-height: 0 }
.t-cloud .tile-copy h3, .t-hosting .tile-copy h3 { font-size: 24px }
.t-hosting .host-bar { flex: 1 }
.t-hosting .tile-copy { margin: 0; max-width: 380px; padding-top: 0 }

.cloud-gauges { align-content: space-between; display: grid; flex: 1; gap: 18px; position: relative; z-index: 1 }
.t-cloud .gauge-label b { font-size: 14px }
.gauge-label { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 7px }
.gauge-label b { font-size: 13px }
.gauge-label small { color: var(--faint); font-family: "DM Mono", monospace; font-size: 11px }
.gauge-bar { background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; height: 8px; overflow: hidden }
.gauge-bar i { background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius: 99px; display: block; height: 100% }
.cloud-connect { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px }
.cloud-connect span { background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; color: var(--text-2); font-family: "DM Mono", monospace; font-size: 10px; padding: 5px 9px }

.dns-rows { align-content: center; display: grid; flex: 1; gap: 7px; position: relative; z-index: 1 }
.dns-rows > div { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 10px; grid-template-columns: 38px minmax(0, 1fr); min-height: 40px; padding: 0 11px }
.dns-rows code { color: var(--accent-strong); font-family: "DM Mono", monospace; font-size: 10px }
.dns-rows span { color: var(--text-2); font-family: "DM Mono", monospace; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dns-rows > small { color: var(--faint); font-family: "DM Mono", monospace; font-size: 10px; margin-top: 3px }

.mail-card { align-content: center; display: grid; flex: 1; gap: 12px; position: relative; z-index: 1 }
.mail-row { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; display: flex; gap: 12px; padding: 13px }
.mail-avatar { align-items: center; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); border-radius: 10px; color: #fff; display: flex; font-size: 13px; font-weight: 700; height: 36px; justify-content: center; width: 36px }
.mail-row div { display: flex; flex-direction: column; min-width: 0 }
.mail-row b { font-size: 12.5px }
.mail-row small { color: var(--muted); font-size: 11px; margin-top: 2px }
.mail-checks { display: flex; gap: 6px }
.mail-checks span { background: color-mix(in srgb, #32b77a 13%, var(--surface)); border: 1px solid color-mix(in srgb, #32b77a 26%, var(--line)); border-radius: 7px; color: #279767; font-family: "DM Mono", monospace; font-size: 10px; padding: 5px 9px }
[data-theme="dark"] .mail-checks span { background: #0b2a21; border-color: rgba(76, 195, 138, .3); color: #4cc38a }

.host-bar { align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 13px; display: flex; gap: 12px; min-height: 56px; padding: 0 16px; position: relative; z-index: 1 }
.host-lock { align-items: center; color: var(--muted); display: flex }
.host-lock svg { height: 15px; width: 15px }
.host-bar code { color: var(--text); flex: 1; font-family: "DM Mono", monospace; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.host-bar b { background: var(--accent-tint); border-radius: 7px; color: var(--accent-strong); font-family: "DM Mono", monospace; font-size: 10px; padding: 5px 9px; white-space: nowrap }
.host-bar i { color: #279767; font-size: 11px; font-style: normal; white-space: nowrap }
[data-theme="dark"] .host-bar i { color: #4cc38a }

@media (max-width: 1050px) {
  .bento { grid-auto-rows: minmax(190px, auto) }
  .t-run { grid-column: span 12; grid-row: span 1; min-height: 430px }
  .t-tools, .t-media { grid-column: span 6 }
  .t-perm { grid-column: span 5 }
  .t-modes { grid-column: span 3 }
  .t-budget { grid-column: span 4 }
  .t-cloud { grid-column: span 12; grid-row: span 1 }
  .t-domains, .t-mail { grid-column: span 6 }
  .t-hosting { gap: 24px }
}

@media (max-width: 760px) {
  .bento-section { padding-top: 92px }
  .bento { gap: 10px; grid-auto-rows: auto; grid-template-columns: 1fr }
  .bento-tile { border-radius: 20px; min-height: 230px; padding: 20px }
  .t-run, .t-tools, .t-media, .t-perm, .t-modes, .t-budget,
  .t-cloud, .t-domains, .t-mail, .t-hosting { grid-column: span 1 }
  .t-run { min-height: 400px }
  .t-run .tile-copy h3 { font-size: 21px }
  .t-run .tile-copy p { font-size: 14px }
  .run-trace li { grid-template-columns: 92px minmax(0, 1fr) auto; padding: 0 12px }
  .run-trace small { display: none }
  .t-hosting { align-items: stretch; flex-direction: column }
  .t-hosting .tile-copy { margin-top: auto; max-width: none; padding-top: 20px }
  .host-bar { flex-wrap: wrap; gap: 8px; padding: 12px 14px }
  .host-bar code { flex: 1 0 100% }
}

/* �"��"��"� PAGES DE BRANCHE � Cloud, Domaines, Courriel (2026-10-04) �"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"�
   La charpente de `components/branch-page.jsx`. Le vocabulaire reste celui de
   l'accueil (`.hero`, `.home-service`, `.product-visual`, `.faq-*`, `.p-icon`) :
   on ne repeint rien ici, on pose seulement les pieces propres a une branche.
   Tout vient des jetons du theme � une page peinte en dur meurt en theme clair. */

/* ���� Le hero : le texte d'un cote, la fenetre de produit de l'autre �������������������� */
.br-hero { align-items: center; display: grid; gap: 64px; grid-template-columns: 1.04fr .96fr; padding-bottom: 20px; padding-top: 150px; position: relative }
.br-hero::before { background: radial-gradient(circle, var(--glow), transparent 66%); content: ""; filter: blur(15px); height: 760px; inset-inline-start: -300px; position: absolute; top: 20px; width: 760px; z-index: -1 }
.br-hero-copy h1 { font-size: clamp(46px, 5.1vw, 74px); font-weight: 600; letter-spacing: -.062em; line-height: 1.02; max-width: 620px }
.br-hero-copy h1 span { background: linear-gradient(120deg, var(--accent-strong), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal }
.br-lede { color: var(--muted); font-size: 18px; line-height: 1.72; margin: 28px 0 36px; max-width: 580px }

/* Les trois chiffres sous les boutons, sur le modele de `.hero-meta`. */
/* Des colonnes egales, et non un `flex` qui passe a la ligne : la colonne est ici
   deux fois plus etroite que celle de `.hero-meta`, et les libelles changent de
   longueur a chaque langue. En courriel, les trois chiffres demandaient 587px
   dans 587px � ils tombaient sur deux rangs pour un pixel. Une colonne par
   chiffre, et c'est le libelle qui se replie a l'interieur, jamais la rangee.
   `grid-auto-flow` plutot que `repeat(3, ⬦)` : le nombre vient du texte. */
.br-stats { border-top: 1px solid var(--line); display: grid; gap: 24px; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin-top: 54px; padding-top: 25px }
.br-stats div { display: flex; flex-direction: column }
.br-stats strong { font-size: 21px; font-weight: 600; letter-spacing: -.04em }
.br-stats span { color: var(--muted); font-size: 12px; margin-top: 3px }

/* ���� La video d'un bloc ��������������������������������������������������������������������������������������������������������������
   `width: 100%` est le fond du sujet : sans taille imposee, une video prend la
   taille intrinseque de son poster (1536 px de large ici) et sort du cadre. */
.br-figure { background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 22px; box-shadow: 0 22px 60px color-mix(in srgb, var(--text) 7%, transparent); margin: 0; min-width: 0; overflow: hidden }
.br-figure video { display: block; height: auto; max-width: 100%; width: 100% }
/* Une video 16:9 dont l image utile est au centre, entre deux bandes noires.
   Le cadre impose le rapport de l image utile et la video passe en `cover` : la
   decoupe tombe pile sur les bandes. 3/2 vient de `cropdetect` sur storage.mp4
   (1080x720 utiles sur 1280x720) — un rapport devine recouperait l image. */
.br-figure-crop { aspect-ratio: 3 / 2 }
.br-figure-crop video { height: 100%; object-fit: cover }

/* ���� Les blocs alternes : le visuel passe de l'autre cote un bloc sur deux ����
   `order` plutot qu'une colonne nommee : il suit deja le sens de lecture, donc
   l'alternance tient aussi en RTL sans etre inversee deux fois. */
.br-detail { padding-block: 110px }
.br-detail-grid { grid-template-columns: minmax(290px, .8fr) minmax(0, 1.2fr) }
.br-detail.reversed .home-service-copy { order: 2 }
.br-detail.reversed .product-visual, .br-detail.reversed .br-figure { order: 1 }
/* `order` deplace les enfants, pas les colonnes : sans inverser aussi les
   largeurs, le visuel passe devant et herite de la colonne etroite. */
.br-detail.reversed .br-detail-grid { grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr) }

/* ���� Ce que la branche apporte : quatre cartes �������������������������������������������������������������� */
/* Un visuel rond dans un bloc alterne (`round` sur la video du bloc).
   `.hero-visual` porte deja le cercle, sa lueur et ses paliers responsives : on ne
   repeint rien ici. On corrige seulement les deux choses que la grille d un bloc de
   detail fait de travers avec un cercle — la colonne large, taillee pour une fenetre
   de produit, et l ordre en mode inverse, ecrit pour `.br-figure` seul. */
.br-detail-round .br-detail-grid,
.br-detail-round.reversed .br-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
.br-detail .hero-visual { margin-inline: auto; max-width: 460px; width: 100% }
.br-detail.reversed .hero-visual { order: 1 }

.spec-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.spec-card {
  background: linear-gradient(158deg, color-mix(in srgb, var(--surface) 96%, var(--accent-tint)), var(--surface));
  border: 1px solid var(--line); border-radius: 24px; display: flex; flex-direction: column; padding: 26px;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.spec-card:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); box-shadow: var(--shadow); transform: translateY(-4px) }
.spec-card .p-icon { margin: 0 0 20px }
.spec-card h3 { font-size: 17px; letter-spacing: -.03em; line-height: 1.3 }
.spec-card p { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin-top: 10px }

/* ���� Comment ca se met en place : quatre etapes numerotees �������������������������������������� */
.flow-section { padding-top: 130px }
.flow-steps { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none }
.flow-step { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; display: flex; flex-direction: column; padding: 26px; position: relative }
.flow-step > span { align-items: center; background: var(--accent-tint); border-radius: 13px; color: var(--accent); display: flex; font-size: 21px; height: 47px; justify-content: center; width: 47px }
.flow-step > small { color: var(--faint); font-family: "DM Mono", monospace; font-size: 10px; inset-inline-end: 26px; letter-spacing: .09em; position: absolute; top: 30px }
.flow-step > b { display: block; font-size: 16px; letter-spacing: -.03em; margin-top: 22px }
.flow-step > p { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin-top: 9px }

/* ���� Ce que chaque forfait donne ����������������������������������������������������������������������������������������������
   Une rangee est un flex et non une grille a colonnes comptees : le nombre de
   forfaits vient du texte, et une grille figee a trois mentirait le jour ou il
   y en aura quatre. */
.plan-section { padding-top: 130px }
.plan-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden }
.plan-row { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 16px; min-height: 62px; padding: 14px 24px }
.plan-row:last-child { border-bottom: 0 }
.plan-row > span { color: var(--text-2); flex: 1.6 1 0; font-size: 13.5px; min-width: 0 }
.plan-row > b { color: var(--text); flex: 1 1 0; font-size: 13px; font-weight: 600; min-width: 0 }
.plan-head { background: var(--surface-2); min-height: 52px }
.plan-head > b { color: var(--faint); font-family: "DM Mono", monospace; font-size: 10px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase }
.plan-foot { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-top: 20px }
.plan-foot small { color: var(--faint); font-size: 12px }
.plan-foot a { align-items: center; color: var(--accent-strong); display: inline-flex; font-size: 13px; font-weight: 650; gap: 8px }
.plan-foot a span { transition: transform .25s var(--ease) }
.plan-foot a:hover span { transform: translate(3px, -3px) }

@media (max-width: 1000px) {
  /* Le message d'abord, la fenetre dessous � comme le hero de l'accueil. */
  .br-hero { gap: 34px; grid-template-columns: 1fr; padding-top: 128px }
  .br-hero-copy h1, .br-lede { max-width: none }
  .br-detail { padding-block: 80px }
  .br-detail-grid, .br-detail.reversed .br-detail-grid,
  /* Deux classes du cote du selecteur rond : sans le repeter ici, il gagne sur
     la regle empilee et le cercle finit en ellipse ecrasee dans une demi-colonne. */
  .br-detail-round .br-detail-grid, .br-detail-round.reversed .br-detail-grid { grid-template-columns: 1fr }
  /* Empilee, l'alternance n'a plus de sens : le texte reste au-dessus partout. */
  .br-detail.reversed .home-service-copy,
  .br-detail.reversed .product-visual,
  .br-detail.reversed .br-figure,
  /* `.hero-visual` passe en `order: -1` a 720px — ecrit pour le hero de
     l accueil, ou l image vient avant le texte. Dans un bloc de detail la regle de
     la branche est l inverse, et c est elle qui vaut : le texte reste au-dessus. */
  .br-detail .hero-visual,
  .br-detail.reversed .hero-visual { order: 0 }
  .spec-grid, .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .flow-section, .plan-section { padding-top: 100px }
}

@media (max-width: 720px) {
  .br-hero { padding-top: 112px }
  /* Le bandeau du hero de l'accueil, aux memes valeurs (`.hero-meta`) : trois
     colonnes egales separees d'un filet, jamais empilees. Mesure sur l'accueil
     a 700px � gap 0, 36/20px, colonnes a 8px, 13px et 10px. */
  .br-stats { gap: 0; grid-auto-flow: column; margin-top: 36px; padding-top: 20px; width: 100% }
  .br-stats div { align-items: center; min-width: 0; padding: 0 8px; text-align: center }
  .br-stats div + div { border-inline-start: 1px solid var(--line) }
  .br-stats strong { font-size: 13px; line-height: 1.45 }
  .br-stats span { font-size: 10px; line-height: 1.45 }
  .br-figure { border-radius: 18px }
  /* Sur un telephone, le visuel du hero passe AU-DESSUS du texte, comme a
     l'accueil (`.hero-visual { order: -1 }` au meme palier). Le courriel le
     faisait deja : son cadre rond est ce `.hero-visual`-la. Le selecteur est
     porte par `.br-hero`, sinon il toucherait les blocs de service alternes. */
  .br-hero .br-figure { order: -1 }
  .spec-grid, .flow-steps { gap: 12px; grid-template-columns: 1fr }
  .spec-card, .flow-step { border-radius: 20px; padding: 22px }
  /* La rangee devient une fiche : chaque valeur reprend le nom de son forfait. */
  .plan-row { align-items: stretch; flex-direction: column; gap: 0; padding: 16px 20px }
  .plan-row > span { font-weight: 600; margin-bottom: 10px }
  .plan-row > b { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; padding: 6px 0 }
  .plan-row > b::before { color: var(--faint); content: attr(data-plan); font-family: "DM Mono", monospace; font-size: 10px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase }
  .plan-head { display: none }
}

/* �"��"��"� UN TITRE DE SECTION S'EMPILE (2026-10-04) �"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"�
   Accroche, titre, puis le paragraphe DESSOUS. `.section-head` portait encore la
   grille a deux colonnes (1.25fr .75fr) qui pose le paragraphe a cote du titre �
   exactement la disposition que `.section-heading` avait abandonnee le
   2026-09-27, et que l'utilisateur avait deja refusee. Elle revenait sur les
   trois pages de branche et sur les mosaiques de l'accueil, qui partagent le
   composant `SectionHeading`.

   `.pricing-section-head` garde la sienne : la page des tarifs n'est pas encore
   passee en revue, et les deux classes ne sont liees que par un selecteur commun. */
/* Le `margin-bottom` manquait : `.section-head` etait a 0, donc le paragraphe
   touchait la grille posee dessous. Son cousin `.section-heading` porte 68px, et
   les mosaiques se donnaient les leurs (`.bento-section .section-head`, 46px) �
   d'ou un defaut visible seulement sur les pages de branche. */
.section-head { gap: 22px; grid-template-columns: 1fr; margin-bottom: 48px }
.section-head > p { align-self: start; max-width: 720px }

@media (max-width: 760px) { .section-head { margin-bottom: 34px } }

/* Le dernier palier du bandeau de chiffres, celui de l'accueil : sous 420px il
   ne reste que les valeurs. Trois libelles de dix caracteres dans 113px se
   cassent en quatre lignes et le bandeau devient illisible. */
@media (max-width: 420px) {
  .br-stats strong { font-size: 12px }
  .br-stats span { display: none }
}

/* �"��"��"� CONTENU DES MOSAIQUES, REFAIT (2026-10-04) �"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"��"�
   La grille (`.bento`, `.bento-tile`, les `.t-*` et leurs paliers) n'a pas bouge :
   elle etait juste. Ce qui changeait de langage, c'etait l'interieur des tuiles �
   une table de trace d'execution, un mur de noms d'outils en chasse fixe, des
   jauges, une table DNS : l'ecran de la beta dans un site de presentation.

   Une tuile porte maintenant une affirmation, un chiffre ou un visuel. Les
   anciennes regles (`.run-trace`, `.tool-cloud`, `.media-strip`, `.perm-card`,
   `.mode-pills`, `.budget-meter`, `.cloud-gauges`, `.dns-rows`, `.mail-card`,
   `.host-bar`) restent plus haut, inutilisees, si l'envie revient de les poser
   ailleurs � comme la mosaique « Platform » de 2026-09-27 avant elles. */

/* La zone au-dessus du texte : c'est elle qui prend la place restante. */
.tile-figure { align-content: center; display: grid; flex: 1; gap: 16px; position: relative; z-index: 1 }

/* ���� Le visuel d'une tuile maitresse ������������������������������������������������������������������������������������
   `aspect-ratio` n'est pas pose : la tuile donne sa hauteur, la video la remplit.
   C'est ce qui evite qu'un poster absent decide de la taille, comme sur les
   pages de branche avant correction. */
.tile-media { border-radius: 18px; flex: 1; overflow: hidden; position: relative; z-index: 1 }
.tile-media video { display: block; height: 115%; object-fit: cover; object-position: center; width: 100% }
.tile-media::after {
  border: 1px solid color-mix(in srgb, #fff 20%, transparent); border-radius: 18px;
  content: ""; inset: 0; pointer-events: none; position: absolute;
}

/* ���� Un chiffre qu'on lit de loin �������������������������������������������������������������������������������������� */
.tile-stat { align-items: baseline; display: flex; gap: 10px }
.tile-stat strong {
  background: linear-gradient(120deg, var(--accent-strong), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 72px; font-weight: 600; letter-spacing: -.06em; line-height: .9;
}
.tile-stat span { color: var(--muted); font-size: 14px; font-weight: 600 }
.tile-note { color: var(--faint); font-size: 11px }

/* ���� Des familles, pas des identifiants ������������������������������������������������������������������������������
   En chasse fixe et en minuscules, « query_storage » est un nom d'API : c'est au
   produit de le montrer. Ici ce sont des mots. */
.tile-tags { display: flex; flex-wrap: wrap; gap: 7px }
.tile-tags span {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px;
  color: var(--text-2); font-size: 12px; font-weight: 600; padding: 7px 13px;
}
.tile-tags-lg span { font-size: 13px; padding: 9px 15px }

/* ���� L'icone d'en-tete d'une tuile ������������������������������������������������������������������������������������ */
.tile-badge {
  align-items: center; background: var(--accent-tint); border-radius: 14px; color: var(--accent);
  display: flex; font-size: 22px; height: 50px; justify-content: center; width: 50px;
}
.tile-badge svg { display: block; height: 1em; width: 1em }

/* ���� Trois affirmations, chacune cochee �������������������������������������������������������������������������� */
.tile-points { display: grid; gap: 11px; list-style: none }
.tile-points li { align-items: flex-start; color: var(--text-2); display: flex; font-size: 13px; gap: 10px; line-height: 1.5 }
.tile-points li::before {
  background: color-mix(in srgb, #32b77a 14%, var(--surface)); border-radius: 50%; color: #279767;
  content: "�S"; flex: 0 0 auto; font-size: 10px; height: 20px; line-height: 20px; text-align: center; width: 20px;
}
[data-theme="dark"] .tile-points li::before { background: #0b2a21; color: #4cc38a }

/* ���� Les quatre modes �������������������������������������������������������������������������������������������������������������� */
.tile-modes { display: grid; gap: 7px; list-style: none }
.tile-modes li {
  align-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--muted);
  display: flex; font-size: 13px; font-weight: 600; gap: 10px; min-height: 42px; padding: 0 13px;
}
.tile-modes i { background: var(--line-strong); border-radius: 50%; height: 7px; width: 7px }
.tile-modes .active {
  background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--accent-strong);
}
.tile-modes .active i { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent) }

/* ���� La mosaique de production ������������������������������������������������������������������������������������������������
   `.t-hosting` reste la tuile large couchee ; ses deux colonnes sont maintenant
   l'icone et le texte, puisque la barre d'URL du produit est partie. */
.t-hosting .tile-figure { align-content: center; flex: 0 0 auto }

/* ���� Une tuile qui n'est qu'un visuel ����������������������������������������������������������������������������������
   Pas de titre, pas de texte, pas de retrait : la video touche les quatre bords.
   Le coin arrondi vient de `.bento-tile` (`overflow: hidden`), donc le cadre
   interieur ne reprend aucun rayon, et la lueur d'angle est inutile derriere une
   image pleine. */
.tile-full { min-height: 320px; padding: 0 }
.tile-full::after { display: none }
.tile-full .tile-media { border-radius: 0; height: 100% }
.tile-full .tile-media::after { border-radius: 0 }

/* Le survol d'une tuile-lien se voit aussi sur son visuel. */
a.bento-tile .tile-media video { transition: transform .5s var(--ease) }
a.bento-tile:hover .tile-media video { transform: scale(1.03) }

/* ���� La FAQ de l'accueil ������������������������������������������������������������������������������������������������������������
   Meme composant que les pages de branche. Elle suit une mosaique, pas un hero :
   le `padding-block` de 150px creuserait un trou avant « Control ». */
.site main > .faq-section { padding-top: 130px; padding-bottom: 0 }

@media (max-width: 1050px) {
  /* Couchees sur une seule rangee, les deux tuiles pleines perdraient leur hauteur :
     il n'y a aucun texte a l'interieur pour la leur donner. */
  .tile-full { min-height: 380px }
  .t-hosting .tile-figure { flex: 0 0 auto }
}

@media (max-width: 760px) {
  .tile-stat strong { font-size: 56px }
  .tile-media { border-radius: 15px }
  .tile-media::after { border-radius: 15px }
  .tile-full { min-height: 240px }
  .tile-full .tile-media, .tile-full .tile-media::after { border-radius: 0 }
  .site main > .faq-section { padding-top: 90px }
}

.faq-section { padding-bottom: 6rem; }
@media (max-width: 800px) { .faq-section { padding-bottom: 4rem; } }

.site main > .faq-section:last-child { padding-bottom: 150px; }
@media (max-width: 760px) { .site main > .faq-section:last-child { padding-bottom: 90px; } }

.plan-row > b, .plan-row > span { text-align: start; }

.plan-row > b, .plan-row > span { text-align: start !important; }
[dir='rtl'] .plan-row > b, [dir='rtl'] .plan-row > span { text-align: right !important; }
[dir='ltr'] .plan-row > b, [dir='ltr'] .plan-row > span { text-align: left !important; }

.plan-head > b, .plan-row > b { text-align: left !important; justify-content: flex-start !important; }
[dir='rtl'] .plan-head > b, [dir='rtl'] .plan-row > b { text-align: right !important; justify-content: flex-end !important; }


.plan-row > b, .plan-row > span { text-align: left !important; }
.site[dir='rtl'] .plan-row > b, .site[dir='rtl'] .plan-row > span { text-align: right !important; }

/* =========================================================================================
 * ENTREPRISE · CONTACT · SECURITE (2026-10-05)
 *
 * DEUX REGLES, toutes deux posees par l'utilisateur :
 *
 *  1. Le langage visuel de la BETA n'entre pas dans www. Une fenetre de reglages, un
 *     brouillon de courriel avec ses champs et son bouton « Envoyer » : ce sont des
 *     captures d'application, et sur un site de presentation elles se voient comme une
 *     greffe. Deux maquettes de ce genre ont ete retirees d'ici.
 *
 *  2. Entreprise et Contact suivent `www.zaydzarrouk.com`. On en reprend la STRUCTURE —
 *     retour en haut de page, hero centre avec la tuile du logo, grandes cartes ouvertes
 *     par une pastille pleine, grille de faits, bande d'appel a l'action, et pour le
 *     contact deux colonnes avec le formulaire a droite. Les couleurs et la typographie
 *     restent celles de www : tout ci-dessous est ecrit en tokens (`--surface`, `--accent`,
 *     `--line`…), donc le theme sombre suit sans une seule regle en plus.
 *
 * Securite garde la charpente des pages de branche : elle a une video a montrer.
 * ========================================================================================= */

/* La page entiere respire plus large qu'une page de branche : des cartes posees sur le
   fond, et non des sections pleine largeur qui se touchent. */
.ip-main { padding-top: 110px }
.ip-stack { display: flex; flex-direction: column; gap: 20px; padding-bottom: 150px }
@media (max-width: 760px) { .ip-main { padding-top: 88px } .ip-stack { gap: 16px; padding-bottom: 90px } }

/* Le retour en haut de page. Un seul endroit ou aller, donc pas de fil d'Ariane. */
.ip-back { align-items: center; color: var(--muted); display: inline-flex; font-size: 13.5px; font-weight: 500; gap: 9px; padding: 14px 0; transition: color .2s, gap .2s }
.ip-back:hover { color: var(--accent); gap: 13px }
.ip-back span { font-size: 15px }
.site[dir="rtl"] .ip-back span { transform: scaleX(-1) }

/* LA PASTILLE — l'eyebrow plein qui ouvre chaque carte. Le reste du site pose un `.kicker`
   en chasse fixe ; ici c'est une puce, et les deux ne se melangent pas sur une meme page. */
.pill { background: var(--accent-tint); border-radius: 999px; color: var(--accent); display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 7px 14px; text-transform: uppercase }

/* LE HERO CENTRE — tuile du logo, nom, paragraphe, boutons. Aucune maquette. */
.ip-hero { align-items: center; display: flex; flex-direction: column; padding-bottom: 54px; padding-top: 40px; position: relative; text-align: center }
.ip-hero::before { background: radial-gradient(circle, var(--glow), transparent 68%); content: ""; filter: blur(16px); height: 720px; inset-inline-start: 50%; margin-inline-start: -360px; position: absolute; top: -60px; width: 720px; z-index: -1 }
.ip-logo { align-items: center; border-radius: 41px; box-shadow: var(--shadow); display: flex; height: 96px; justify-content: center; width: 96px }
.ip-logo img { height: 96px; object-fit: contain; width: 96px }
.ip-hero h1 { font-size: clamp(42px, 5.2vw, 70px); font-weight: 600; letter-spacing: -.06em; line-height: 1.04; margin-top: 32px; max-width: 20ch; text-wrap: balance }
.ip-lede { color: var(--muted); font-size: 17.5px; line-height: 1.75; margin: 24px auto 0; max-width: 680px }
.ip-hero .hero-actions { justify-content: center; margin-top: 36px }
@media (max-width: 760px) {
  .ip-hero { padding-bottom: 38px }
  .ip-hero .hero-actions { align-items: stretch; flex-direction: column; width: 100%; max-width: 320px }
}

/* LA GRANDE CARTE — le conteneur de toute la page : une idee, une carte. */
.ip-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 30px; padding: 48px 46px }
.ip-panel h2 { font-size: clamp(26px, 2.9vw, 36px); font-weight: 600; letter-spacing: -.045em; line-height: 1.12; margin-top: 20px; max-width: 22ch }
.ip-panel-text { color: var(--muted); font-size: 15.5px; line-height: 1.75; margin-top: 16px; max-width: 760px }
.ip-panel > .tile-tags, .ip-panel > .info-ledger { margin-top: 32px }
.ip-panel .hero-actions { margin-top: 30px }
@media (max-width: 760px) { .ip-panel { border-radius: 24px; padding: 32px 24px } }

/* News: editorial rhythm, deliberately separate from product cards. */
.news{min-height:760px;padding-bottom:150px;padding-top:155px}.news>h1,.article header h1{font-size:clamp(48px,6.2vw,82px);font-weight:600;letter-spacing:-.065em;line-height:.98;max-width:10ch}.news-lede{color:var(--muted);font-size:18px;line-height:1.7;margin-top:28px;max-width:620px}.news-card{align-items:center;background:linear-gradient(130deg,var(--surface),color-mix(in srgb,var(--accent-tint) 58%,var(--surface)));border:1px solid var(--line-strong);border-radius:30px;display:grid;gap:42px;grid-template-columns:180px 1fr;margin-top:72px;max-width:960px;overflow:hidden;padding:42px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}.news-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-5px)}.news-orb{align-items:center;background:radial-gradient(circle at 32% 28%,var(--accent-strong),var(--accent) 58%,#263a87);border-radius:50%;box-shadow:0 0 70px color-mix(in srgb,var(--accent) 45%,transparent);color:#fff;display:flex;font-size:56px;height:180px;justify-content:center}.news-card span{color:var(--accent);font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.news-card h2{font-size:clamp(25px,3vw,39px);font-weight:600;letter-spacing:-.05em;line-height:1.08;margin-top:16px;max-width:18ch}.news-card p{color:var(--muted);line-height:1.7;margin-top:16px;max-width:650px}.news-card b{color:var(--accent-strong);display:block;font-size:13px;margin-top:24px}.news-card i{font-style:normal;margin-left:7px}.article{padding-bottom:150px;padding-top:110px}.article header{border-bottom:1px solid var(--line);padding:48px 0 60px}.article header>p{color:var(--muted);font-size:20px;line-height:1.65;margin-top:28px;max-width:720px}.article-byline{align-items:center;color:var(--text-2);display:flex;font-size:13px;gap:11px;margin-top:36px}.article-byline img{border-radius:10px}.article-body{font-size:17px;line-height:1.85;margin:65px auto 0;max-width:720px}.article-body p{color:var(--text-2);margin:0 0 28px}.article-body h2{font-size:31px;letter-spacing:-.045em;line-height:1.13;margin:58px 0 18px}.article-body pre{background:#091020;border:1px solid var(--line-strong);border-radius:18px;color:#d9e4ff;font:13px/1.8 "DM Mono",monospace;margin:32px 0;padding:26px;overflow:auto}.article-body blockquote{border-left:2px solid var(--accent);color:var(--text);font-size:21px;font-weight:500;letter-spacing:-.025em;line-height:1.5;margin:42px 0;padding:7px 0 7px 26px}.article-back{color:var(--accent);display:inline-block;font-size:14px;font-weight:600;margin-top:25px}@media(max-width:720px){.news{padding-bottom:95px;padding-top:118px}.news-card{gap:28px;grid-template-columns:1fr;margin-top:48px;padding:28px}.news-orb{font-size:40px;height:98px;width:98px}.article{padding-bottom:90px;padding-top:88px}.article header{padding:35px 0 45px}.article-body{font-size:16px;margin-top:45px}.article-body h2{font-size:27px}.article-body pre{font-size:11px;padding:19px}}

/* La carte de l'entite : une declaration, pas une fiche de reglages. */
.ip-panel-legal { background: linear-gradient(140deg, var(--surface), color-mix(in srgb, var(--accent-tint) 55%, var(--surface))) }
.ip-statement { color: var(--text-2); font-size: 17px; line-height: 1.75; margin-top: 22px; max-width: 760px }
.ip-statement strong { color: var(--text) }
.ip-statement a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px }

/* ======================= CONTACT : deux colonnes ======================= */

.ct-split { align-items: start; display: grid; gap: 30px; grid-template-columns: 1fr 1fr; padding-bottom: 20px; padding-top: 44px }
.ct-intro h1 { font-size: clamp(40px, 4.8vw, 64px); font-weight: 600; letter-spacing: -.062em; line-height: 1.04 }
.ct-intro h1 span { background: linear-gradient(120deg, var(--accent-strong), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent }
.ct-intro .ip-lede { margin-inline: 0; max-width: 520px }
.ct-info { display: flex; flex-direction: column; gap: 12px; margin-top: 38px }
.ct-info-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; display: flex; gap: 16px; padding: 22px 24px }
.ct-info-card > div { min-width: 0 }
.ct-info-card small { color: var(--faint); display: block; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .1em; margin-bottom: 6px; text-transform: uppercase }
.ct-info-card b, .ct-info-card > div > a { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.025em; overflow-wrap: anywhere }
.ct-info-card > div > a { color: var(--accent); transition: color .2s }
.ct-info-card > div > a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px }
.ct-info-card p { color: var(--muted); font-size: 13px; line-height: 1.65; margin-top: 7px }
/* L adresse est purement latine dans un bloc arabe. `isolate` la tient en un seul sens de
   lecture sans toucher a l alignement du bloc : sans cela, un caractere neutre en bordure
   (le point final, une parenthese) peut sauter de l autre cote de la chaine. */
.ct-info-card > div > a { unicode-bidi: isolate }
@media (max-width: 940px) { .ct-split { gap: 22px; grid-template-columns: 1fr } }

/* LE FORMULAIRE — un vrai formulaire, pas une image de formulaire. */
.ct-form { background: var(--surface); border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 20px; padding: 40px 38px }
.ct-field { display: flex; flex-direction: column; gap: 9px }
.ct-field > span { color: var(--text-2); font-size: 13px; font-weight: 600 }
.ct-field input, .ct-field select, .ct-field textarea {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; color: var(--text);
  font-family: inherit; font-size: 14.5px; padding: 15px 16px; transition: border-color .2s, background .2s; width: 100%;
}
.ct-field textarea { line-height: 1.65; min-height: 150px; resize: vertical }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--faint) }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); outline: none }
.ct-field select { appearance: none; cursor: pointer }
/* La fleche du menu deroulant : dessinee ici parce que `appearance: none` retire celle du
   navigateur, et parce qu'elle doit suivre le theme comme le reste. */
.ct-field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-repeat: no-repeat; background-size: 6px 6px, 6px 6px; padding-inline-end: 42px }
.site[dir="rtl"] .ct-field select { background-position: 20px calc(50% + 2px), 14px calc(50% + 2px) }
.ct-form .button { margin-top: 4px; width: 100% }
.ct-form .button[disabled] { cursor: progress; opacity: .6; transform: none }
.ct-privacy { color: var(--faint); font-size: 12px; line-height: 1.6; text-align: center }
.ct-error { background: color-mix(in srgb, #e5484d 10%, transparent); border: 1px solid color-mix(in srgb, #e5484d 32%, transparent); border-radius: 14px; color: #e5484d; font-size: 13px; line-height: 1.6; padding: 13px 15px }
/* Le piege a robots : invisible a l'oeil, hors du parcours clavier, et jamais annonce. */
.ct-trap { height: 0; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; width: 0 }
.ct-form-done { align-items: center; min-height: 420px; justify-content: center; text-align: center }
.ct-form-done b { font-size: 20px; letter-spacing: -.035em }
.ct-form-done p { color: var(--muted); font-size: 14.5px; line-height: 1.7; max-width: 380px }
@media (max-width: 760px) { .ct-form { border-radius: 24px; padding: 30px 24px } }

/* ======================= SECURITE ======================= */

/* LA RANGEE DE CHIFFRES DU HERO — le trait qui ferme la page de titre.
   Meme role que `.br-stats` sur une page de branche, centre parce que ce hero l'est. */
.ip-stats { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px 64px; justify-content: center; margin-top: 54px; padding-top: 30px; width: 100% }
.ip-stats div { display: flex; flex-direction: column; gap: 5px; text-align: center }
.ip-stats strong { font-size: 23px; font-weight: 600; letter-spacing: -.04em }
.ip-stats span { color: var(--muted); font-size: 11.5px; line-height: 1.5 }


/* La bande de faits garde l'espacement des sections de cette page, pas celui des tarifs. */
.ip-band { margin-top: 30px }
@media (max-width: 760px) { .ip-stats { gap: 18px 30px; margin-top: 40px } }

/* LE REGISTRE — un terme, puis le detail. La colonne de gauche est fixe pour que les
   termes s'alignent : neuf mecanismes lus en diagonale veulent une table, pas des cartes. */
.info-ledger { border-top: 1px solid var(--line) }
.info-row { align-items: start; display: grid; gap: 28px; grid-template-columns: 290px minmax(0, 1fr); padding: 26px 0 }
.info-row + .info-row { border-top: 1px solid var(--line) }
.info-row dt { align-items: baseline; display: flex; gap: 12px }
.info-row dt > span { font-size: 16px; font-weight: 600; letter-spacing: -.025em }
.info-row dt > i { color: var(--accent); flex-shrink: 0; font-family: "DM Mono", monospace; font-size: 11px; font-style: normal; letter-spacing: .08em; padding-top: 2px }
.info-row dd { color: var(--muted); font-size: 14.5px; line-height: 1.75; max-width: 760px }
/* Dans une grande carte le registre n'a pas besoin de son filet du haut : la carte le porte. */
.ip-panel > .info-ledger { border-top: 0 }
.ip-panel > .info-ledger .info-row:first-child { padding-top: 0 }
@media (max-width: 860px) {
  .info-row { gap: 10px; grid-template-columns: 1fr; padding: 22px 0 }
  .info-row dd { font-size: 14px }
}

/* LE SIGNALEMENT — trois engagements, dont un qui dit ce que nous n'offrons pas. */
.sec-report-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)) }
.sec-promise { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px }
.sec-promise b { display: block; font-size: 15.5px; letter-spacing: -.03em }
.sec-promise p { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin-top: 10px }
@media (max-width: 860px) { .sec-report-grid { grid-template-columns: 1fr } }

/* ======================= ACTUALITES ======================= */
.nw { min-height: 760px; padding-bottom: 150px; padding-top: 154px }
.nw-head { max-width: 760px }.nw-head h1 { font-size: clamp(50px,6vw,78px); font-weight: 600; letter-spacing: -.065em; line-height: .98; margin-top: 2px }.nw-head h1 em { color: var(--accent-strong); font-style: normal }.nw-lede { color: var(--muted); font-size: 18px; line-height: 1.7; margin-top: 27px; max-width: 620px }
.nw-grid { display: grid; gap: 24px; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 66px }.nw-card { background: linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent-tint) 56%,var(--surface))); border: 1px solid var(--line-strong); border-radius: 28px; color: inherit; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 36px; position: relative; transition: border-color .25s,box-shadow .25s,transform .25s }.nw-card::after { background: radial-gradient(circle,var(--accent-tint),transparent 68%); content: ""; height: 360px; pointer-events: none; position: absolute; right: -135px; top: -160px; width: 360px }.nw-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-4px) }
.nw-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1 }.nw-meta span { font-family: "DM Mono",monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase }.nw-type { border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text-2); padding: 5px 10px }.nw-topic { background: var(--accent-tint); border-radius: 999px; color: var(--accent-strong); padding: 5px 10px }.nw-read { color: var(--faint) }
.nw-card h2 { font-size: clamp(27px,2.7vw,40px); font-weight: 600; letter-spacing: -.055em; line-height: 1.07; margin-top: 23px; position: relative; z-index: 1 }.nw-card p { color: var(--muted); font-size: 16px; line-height: 1.72; margin-top: 17px; position: relative; z-index: 1 }.nw-card-foot { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin-top: auto; padding-top: 18px; position: relative; z-index: 1 }.nw-card time { color: var(--text-2); font-size: 13px }.nw-go { color: var(--accent-strong); font-size: 24px; transition: transform .2s }.nw-card:hover .nw-go { transform: translateX(5px) }
.nw-article { padding-bottom: 150px; padding-top: 110px }.nw-article-head { border-bottom: 1px solid var(--line); margin-top: 31px; max-width: 900px; padding: 38px 0 54px }.nw-article-head h1 { font-size: clamp(42px,5.4vw,70px); font-weight: 600; letter-spacing: -.065em; line-height: 1.02; margin-top: 22px; max-width: 850px }.nw-article-lede { color: var(--muted); font-size: 19px; line-height: 1.7; margin-top: 25px; max-width: 720px }.nw-byline { align-items: center; display: flex; justify-content: flex-start; margin-top: 34px }.nw-byline time { color: var(--text-2); font-size: 13px }.nw-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px }.nw-tags span { border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 11px "DM Mono",monospace; padding: 5px 9px }
.nw-body { font-size: 17px; line-height: 1.86; margin: 62px auto 0; max-width: 900px }.nw-body p { color: var(--text-2); margin: 0 0 28px }.nw-body h2 { font-size: 32px; font-weight: 600; letter-spacing: -.05em; line-height: 1.12; margin: 58px 0 20px }.nw-body pre { background: #080d19; border: 1px solid var(--line-strong); border-radius: 18px; color: #dbe7ff; font: 13px/1.8 "DM Mono",monospace; margin: 32px 0; overflow: auto; padding: 26px }.nw-body blockquote { border-left: 2px solid var(--accent); color: var(--text); font-size: 21px; font-weight: 500; letter-spacing: -.025em; line-height: 1.5; margin: 44px 0; padding: 8px 0 8px 25px }.nw-takeaways { background: var(--surface); border: 1px solid var(--line); border-radius: 21px; margin: 0 0 44px; padding: 26px 28px }.nw-takeaways h2 { font-size: 15px; margin: 0 }.nw-takeaways ul { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 14px 0 0; padding-left: 20px }.nw-takeaways li+li { margin-top: 8px }.nw-back-foot { color: var(--accent); display: inline-flex; font-size: 14px; font-weight: 600; gap: 9px; margin-top: 24px }
.nw-faq{border-top:1px solid var(--line);margin-top:70px;padding-top:45px}.nw-faq>h2{margin:0 0 20px}.nw-faq details{border-bottom:1px solid var(--line);padding:18px 0}.nw-faq summary{color:var(--text);cursor:pointer;font-size:16px;font-weight:600;letter-spacing:-.02em}.nw-faq details p{font-size:15px;margin:13px 0 0}
@media(max-width:720px){.nw{padding-bottom:92px;padding-top:120px}.nw-head h1{font-size:49px}.nw-grid{grid-template-columns:1fr;margin-top:46px}.nw-card{border-radius:23px;padding:27px}.nw-card h2{font-size:30px}.nw-article{padding-bottom:92px;padding-top:88px}.nw-article-head{padding:31px 0 42px}.nw-article-head h1{font-size:43px}.nw-article-lede{font-size:17px}.nw-byline{align-items:flex-start;flex-direction:column;gap:13px}.nw-body{font-size:16px;margin-top:44px}.nw-body h2{font-size:28px}.nw-body pre{font-size:11px;padding:18px}.nw-body blockquote{font-size:19px}}

/* Solutions reprend volontairement le même système éditorial que News. */
.solution-filter{display:flex;flex-wrap:wrap;gap:9px;margin-top:42px}.solution-filter a{border:1px solid var(--line);border-radius:999px;color:var(--muted);font:11px "DM Mono",monospace;padding:8px 13px;transition:.2s}.solution-filter a:hover,.solution-filter a.active{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-strong)}.nw-byline>span{color:var(--text-2);font-size:13px}.solution-related-row{align-items:center;border-bottom:1px solid var(--line);color:var(--text);display:flex;font-size:15px;font-weight:600;gap:20px;justify-content:space-between;padding:18px 0}.solution-related-row b{color:var(--accent);font-size:20px;transition:transform .2s}.solution-related-row:hover b{transform:translateX(4px)}
.solution-steps{counter-reset:none;list-style:none;margin:26px 0 45px;padding:0}.solution-steps li{align-items:start;border-top:1px solid var(--line);display:grid;gap:20px;grid-template-columns:42px 1fr;padding:18px 0}.solution-steps li:last-child{border-bottom:1px solid var(--line)}.solution-steps b{color:var(--accent);font:11px "DM Mono",monospace;padding-top:4px}.solution-steps span{color:var(--text-2);font-size:15px;line-height:1.7}.solution-capabilities{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 42px}.solution-capabilities span{background:var(--accent-tint);border:1px solid var(--line);border-radius:999px;color:var(--accent-strong);font:11px "DM Mono",monospace;padding:8px 12px}.solution-outcomes{display:grid;gap:12px;grid-template-columns:1fr 1fr;list-style:none;margin:22px 0 45px;padding:0}.solution-outcomes li{background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--text-2);font-size:14px;line-height:1.65;padding:18px}.solution-outcomes li:before{color:var(--accent);content:"✓";font-weight:700;margin-inline-end:10px}@media(max-width:650px){.solution-outcomes{grid-template-columns:1fr}}

/* ======================= SOLUTIONS ======================= */
.sol{padding-bottom:150px;padding-top:154px}.sol-hero{max-width:850px}.sol-hero h1{font-size:clamp(52px,7vw,88px);font-weight:600;letter-spacing:-.07em;line-height:.95;margin-top:5px}.sol-hero h1 em{color:var(--accent-strong);font-style:normal}.sol-hero>p{color:var(--muted);font-size:18px;line-height:1.72;margin-top:28px;max-width:680px}.sol-tabs{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin-top:60px}.sol-tabs a{align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;color:var(--text-2);display:flex;font-size:14px;font-weight:600;justify-content:space-between;padding:19px 21px;transition:.22s}.sol-tabs a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.sol-group{margin-top:100px}.sol-group-head{align-items:end;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;margin-bottom:28px;padding-bottom:26px}.sol-group-head>div>span{color:var(--accent);font:11px "DM Mono",monospace;letter-spacing:.12em}.sol-group-head h2{font-size:clamp(32px,4vw,48px);font-weight:600;letter-spacing:-.055em;margin-top:7px}.sol-group-head p{color:var(--muted);font-size:14px;line-height:1.65;margin-top:9px;max-width:620px}.sol-group-head>a{color:var(--accent);font-size:13px;font-weight:600;margin-bottom:5px}.sol-grid{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}.sol-card{background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--accent-tint) 42%,var(--surface)));border:1px solid var(--line);border-radius:25px;color:inherit;display:flex;flex-direction:column;min-height:390px;overflow:hidden;padding:29px;position:relative;transition:border-color .25s,box-shadow .25s,transform .25s}.sol-card:after{background:radial-gradient(circle,var(--accent-tint),transparent 70%);content:"";height:250px;position:absolute;right:-110px;top:-120px;width:250px}.sol-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-4px)}.sol-card-top{align-items:center;display:flex;justify-content:space-between;position:relative;z-index:1}.sol-card-top span{color:var(--accent-strong);font:10px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase}.sol-card-top b{color:var(--faint);font:11px "DM Mono",monospace}.sol-card h3{font-size:27px;font-weight:600;letter-spacing:-.05em;line-height:1.09;margin-top:45px;position:relative;z-index:1}.sol-card p{color:var(--muted);font-size:14px;line-height:1.72;margin-top:17px;position:relative;z-index:1}.sol-card-link{align-items:center;border-top:1px solid var(--line);color:var(--text-2);display:flex;font-size:12px;font-weight:600;justify-content:space-between;margin-top:auto;padding-top:18px;position:relative;z-index:1}.sol-card-link span{color:var(--accent);font-size:20px;transition:transform .2s}.sol-card:hover .sol-card-link span{transform:translateX(4px)}
.sol-article{padding-bottom:150px;padding-top:110px}.sol-article-head{border-bottom:1px solid var(--line);margin-top:38px;max-width:1000px;padding:32px 0 48px}.sol-article-head h1{font-size:clamp(44px,6vw,76px);font-weight:600;letter-spacing:-.066em;line-height:1.01;margin-top:18px;max-width:930px}.sol-article-head>p{color:var(--muted);font-size:19px;line-height:1.7;margin-top:25px;max-width:760px}.sol-proof{display:flex;gap:24px;margin-top:31px}.sol-proof span{color:var(--faint);font:11px "DM Mono",monospace;letter-spacing:.07em;text-transform:uppercase}.sol-body{margin:60px auto 0;max-width:900px}.sol-body>section{border-top:1px solid var(--line);display:grid;gap:35px;grid-template-columns:55px 1fr;padding:42px 0}.sol-body>section>span{color:var(--accent);font:11px "DM Mono",monospace;letter-spacing:.1em;padding-top:8px}.sol-body h2{font-size:32px;font-weight:600;letter-spacing:-.05em}.sol-body section p{color:var(--text-2);font-size:16px;line-height:1.82;margin-top:16px}.sol-cta{align-items:center;background:linear-gradient(135deg,var(--surface),var(--accent-tint));border:1px solid var(--line-strong);border-radius:27px;display:flex;gap:30px;justify-content:space-between;margin-top:38px;padding:38px}.sol-cta h2{font-size:29px;margin-top:10px}.sol-cta p{color:var(--muted);font-size:14px;line-height:1.65;margin-top:10px;max-width:530px}.sol-cta .button{flex-shrink:0}.sol-related{border-top:1px solid var(--line);margin-top:110px;padding-top:45px}.sol-related>h2{font-size:30px;letter-spacing:-.045em;margin-bottom:25px}.sol-related .sol-card{min-height:340px}
@media(max-width:900px){.sol-grid{grid-template-columns:1fr 1fr}.sol-card{min-height:350px}.sol-tabs{grid-template-columns:1fr}}
@media(max-width:650px){.sol{padding-bottom:95px;padding-top:120px}.sol-hero h1{font-size:50px}.sol-group{margin-top:72px}.sol-group-head{align-items:start;flex-direction:column;gap:16px}.sol-grid{grid-template-columns:1fr}.sol-card{min-height:330px;padding:25px}.sol-article{padding-bottom:95px;padding-top:88px}.sol-article-head h1{font-size:43px}.sol-article-head>p{font-size:17px}.sol-body{margin-top:42px}.sol-body>section{gap:8px;grid-template-columns:1fr;padding:32px 0}.sol-body h2{font-size:28px}.sol-cta{align-items:flex-start;flex-direction:column;padding:28px}.sol-related{margin-top:75px}}