/* article/article.css — the solution and industry article pages.
   Loaded AFTER landing/landing.css and adds nothing that page already has:
   the tokens, .wrap, .btn, .nav, .mega, .fld, .demo-form and .foot are all
   inherited. This file is only the two layouts landing.css has no reason to
   know about — the split hero, and a long-form article column. */

/* The hero sits on a light stage rather than Ink, because the header is light
   type on white and inverting it per page is how a nav ends up unreadable on
   one of twenty-two pages that nobody opens for a month. */
.art-hero{background:var(--tint-lilac);border-bottom:1px solid var(--line);
  padding-block:clamp(32px,4vw,56px) clamp(40px,5vw,72px)}

/* Copy and form, side by side. The form is the wider-margin column on purpose:
   it is the conversion, and pushing it below 380px starts wrapping the paired
   name/email row into something that looks like an afterthought. */
.art-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr);
  gap:clamp(28px,4vw,64px);align-items:start}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;
  font-size:.84rem;color:var(--ink-3)}
.crumbs a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--amber-deep);border-bottom-color:currentColor}
.crumbs span[aria-hidden]{color:var(--line-3)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

.art-hero-copy h1{font-size:clamp(2rem,4.1vw,3.15rem);font-weight:500;line-height:1.08;
  letter-spacing:-.035em;color:var(--ink);margin:0 0 20px;text-wrap:balance}
.art-sub{font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.62;color:var(--ink-2);
  max-width:56ch;margin:0}

/* The form card. .demo-form already carries the shell from landing.css; these
   are the two things that differ in a hero — a heading of its own, and a
   tighter textarea so the whole card clears the fold on a laptop. */
.art-hero-form{position:relative}
.art-hero-form .demo-form{margin:0}
.df-h{font-size:1.16rem;font-weight:600;color:var(--ink);margin:0 0 4px;letter-spacing:-.015em}
.df-p{font-size:.9rem;color:var(--ink-2);margin:0 0 18px;line-height:1.5}
.art-hero-form .fld textarea{min-height:58px}
.btn-block{width:100%}
.demo-fine{font-size:.78rem;color:var(--ink-3);text-align:center;margin:12px 0 0;line-height:1.45}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.err{font-size:.86rem;color:#B3261E;margin:0;font-weight:500}
.demo-done{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:40px 28px;text-align:center;box-shadow:var(--sh-2)}
.demo-done .done-ic{width:40px;height:40px;color:var(--green);margin-bottom:12px}
.demo-done h2{font-size:1.3rem;font-weight:600;margin:0 0 6px;color:var(--ink)}
.demo-done p{color:var(--ink-2);margin:0}

/* ── the article ─────────────────────────────────────────────────────────── */
.art-wrap{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:clamp(32px,5vw,72px);
  align-items:start;padding-block:clamp(40px,5vw,72px)}
.art{max-width:none;min-width:0}

/* 68ch is the reading measure. The figures are allowed past it — a diagram
   squeezed to text width loses the labels it exists to show. */
.art>p,.art>ul,.art>h2,.art>.note,.art>.faq,.art>.art-cta{max-width:68ch}

.art>p{font-size:1.055rem;line-height:1.72;color:var(--ink-2);margin:0 0 22px}
.art>p strong{color:var(--ink);font-weight:600}
.art>h2{font-size:clamp(1.35rem,2.1vw,1.72rem);font-weight:600;line-height:1.22;
  letter-spacing:-.025em;color:var(--ink);margin:44px 0 16px;scroll-margin-top:96px}
.art>h2:first-child{margin-top:0}
.art>ul{margin:0 0 24px;padding:0;list-style:none}
.art>ul li{position:relative;padding-inline-start:26px;margin-bottom:11px;
  font-size:1.01rem;line-height:1.62;color:var(--ink-2)}
.art>ul li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--amber)}
.art>ul li strong{color:var(--ink);font-weight:600}

.art figure{margin:30px 0 34px}
.art figure img{display:block;width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--line);background:var(--paper);box-shadow:var(--sh-1)}
.art figcaption{font-size:.85rem;line-height:1.55;color:var(--ink-3);margin-top:12px;
  padding-inline-start:14px;border-inline-start:2px solid var(--line-2);max-width:64ch}

/* The aside pulls a sentence out of the flow — the mechanism, the caveat, the
   thing an engineer would ask about. Ember rule, never a coloured box. */
.note{margin:26px 0 30px;padding:16px 0 16px 20px;border-inline-start:3px solid var(--amber);
  background:linear-gradient(90deg,var(--tint-blush),transparent 70%);border-radius:0 var(--r-sm) var(--r-sm) 0}
.note p{margin:0;font-size:.99rem;line-height:1.62;color:var(--ink)}

.faq{margin:0 0 8px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 30px 16px 0;position:relative;
  font-size:1.01rem;font-weight:500;color:var(--ink);line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;inset-inline-end:6px;top:24px;width:9px;height:9px;
  border-inline-end:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .18s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);top:28px}
.faq summary:hover{color:var(--amber-deep)}
.faq details p{margin:0 0 18px;font-size:.99rem;line-height:1.65;color:var(--ink-2);max-width:62ch}

.art-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:40px 0 0;
  padding-top:28px;border-top:1px solid var(--line)}
.art-cta span{font-size:.92rem;color:var(--ink-3)}

/* ── the rail ────────────────────────────────────────────────────────────── */
.art-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:2px}
.art-side>b{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
.art-side a{display:block;padding:13px 14px;border-radius:var(--r-sm);text-decoration:none;
  border:1px solid transparent;transition:background .16s,border-color .16s}
.art-side a:hover{background:var(--paper-3);border-color:var(--line)}
.art-side a b{display:block;font-size:.94rem;font-weight:600;color:var(--ink);margin-bottom:3px}
.art-side a span{display:block;font-size:.82rem;line-height:1.45;color:var(--ink-3)}
.art-side-kb{margin-top:12px;border-top:1px solid var(--line) !important;border-radius:0 !important;
  padding-top:18px !important}

/* ── the hubs ────────────────────────────────────────────────────────────── */
.hub{padding-block:clamp(36px,4.5vw,64px) clamp(48px,6vw,88px)}
.hub h1{font-size:clamp(1.9rem,3.6vw,2.75rem);font-weight:500;line-height:1.1;
  letter-spacing:-.035em;color:var(--ink);margin:0 0 18px;max-width:20ch;text-wrap:balance}
.hub-lede{font-size:1.08rem;line-height:1.6;color:var(--ink-2);max-width:62ch;margin:0 0 44px}
.hub-sec{margin-bottom:44px}
.hub-sec h2{font-size:1.28rem;font-weight:600;color:var(--ink);margin:0 0 4px;letter-spacing:-.02em}
.hub-blurb{font-size:.92rem;color:var(--ink-3);margin:0 0 20px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.hub-card{display:block;padding:20px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);text-decoration:none;transition:border-color .16s,box-shadow .16s,transform .16s}
.hub-card:hover{border-color:var(--violet-lift);box-shadow:var(--sh-2);transform:translateY(-2px)}
.hub-card b{display:block;font-size:1.02rem;font-weight:600;color:var(--ink);margin-bottom:7px}
.hub-card span{display:block;font-size:.88rem;line-height:1.55;color:var(--ink-2)}

/* ── narrow ──────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .art-hero-grid{grid-template-columns:1fr}
  /* The form goes under the copy on a phone, but it must not go under 700
     words of article — a visitor who reads two paragraphs and decides is not
     scrolling back up to find it. */
  .art-wrap{grid-template-columns:1fr}
  .art-side{position:static;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
  .art-side{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
  .art-side>b{grid-column:1/-1}
}
@media (max-width:560px){
  .demo-form .row{grid-template-columns:1fr}
  .art figcaption{padding-inline-start:0;border-inline-start:0}
}

/* The other-language link under the subheading. Quiet on purpose — a reader who
   wants it is looking for it, and a loud language switcher on every article is
   twenty-two invitations to leave the page you just landed on. */
.art-lang{margin:22px 0 0}
.art-lang a{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:500;
  color:var(--ink-2);text-decoration:none;padding:7px 14px;border:1px solid var(--line-2);
  border-radius:20px;background:var(--paper);transition:border-color .16s,color .16s}
.art-lang a::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;
  border:1.5px solid currentColor;opacity:.55;
  background:linear-gradient(transparent 45%,currentColor 45%,currentColor 55%,transparent 55%)}
.art-lang a:hover{border-color:var(--violet-lift);color:var(--violet)}
.hub .art-lang{margin:-28px 0 36px}

/* RTL: everything above uses logical properties, so only three physical things
   need saying — the chevron drawn from two borders, the note's gradient, and
   the figure font stack, which wants the Arabic face first so a caption is not
   set in a fallback. */
[dir="rtl"] .faq summary::after{transform:rotate(-45deg)}
[dir="rtl"] .faq details[open] summary::after{transform:rotate(135deg)}
[dir="rtl"] .note{background:linear-gradient(270deg,var(--tint-blush),transparent 70%)}
/* Arabic sets slightly larger and needs more leading than Latin at the same
   nominal size — the ascenders and descenders are deeper and the marks sit
   above them. Without this the body copy reads cramped. */
[dir="rtl"] .art>p{font-size:1.09rem;line-height:1.85}
[dir="rtl"] .art>ul li{line-height:1.78}
[dir="rtl"] .art-sub{line-height:1.75}
[dir="rtl"] .faq details p{line-height:1.8}
[dir="rtl"] .art-hero-copy h1{letter-spacing:0;line-height:1.22}
[dir="rtl"] .hub h1{letter-spacing:0;line-height:1.32}
[dir="rtl"] .art>h2{letter-spacing:0;line-height:1.4}

@media (prefers-reduced-motion:reduce){
  .hub-card,.faq summary::after,.art-side a{transition:none}
  .hub-card:hover{transform:none}
}