/* Page-level rules that sit around landing.css, which is ported from the design export
   unchanged. Only things the export's runtime provided or the production page needs:
   the document background, hidden content, the skip link and the caption groups. */

body{margin:0;background:#050505}

/* Inactive views, tab scenes and captions are in the markup and carry the hidden attribute.
   Some of them have their own display rule in landing.css, so this has to win. */
[hidden]{display:none!important}

/* Each panel caption group holds the heading block and the fact list of one tab.
   display:contents keeps the two-column grid of .d-pcap intact. */
.d-pcap-g{display:contents}

/* Skip link: off screen until it is focused. */
.d-skip{position:absolute;top:8px;inset-inline-start:8px;z-index:100;padding:12px 18px;border-radius:999px;background:#00C58A;color:#050505;font:600 15px/1 "Inter",system-ui,sans-serif;text-decoration:none;transform:translateY(-200%);transition:transform .2s}
.d-skip:focus-visible{transform:none;outline:2px solid #FFFFFF;outline-offset:3px}
main:focus{outline:none}

/* The in-page language switch is a link to the other locale's URL. */
a.d-navlink[hreflang]{text-decoration:none}

/* The card titles inside the panel rendering are h3 (the section is an h2 and the caption
   beside the panel an h3), where landing.css styles them as h4. Same values, one level up. */
.d-ov-chart h3,.d-ov-back h3,.d-ready-card h3{font-size:16px;font-weight:600;color:#050505}
.d-hr-paste h3{font-size:15px;font-weight:600;color:#050505}
.d-dt-key h3,.d-dt-prev h3{font-size:15px;font-weight:600;color:#050505}

/* ---------- "Talk to sales" dialog ----------
   Opens from the hero button. Built on the design's tokens: white card, hairlines,
   Dish Green controls, 44px targets. Lives outside landing.css because the export has no form. */
.d-sales{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#111111;overflow:auto}
.d-sales::backdrop{background:rgba(5,5,5,.64);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.d-sales[open]{display:grid;place-items:center;padding:24px}
.d-sales-in{position:relative;width:100%;max-width:520px;padding:32px;border-radius:20px;background:#FFFFFF;border:1px solid rgba(5,5,5,.10);box-shadow:0 60px 110px -50px rgba(0,0,0,.9);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.ar .d-sales-in{font-family:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif}
.d-sales-x{position:absolute;top:14px;inset-inline-end:14px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;color:#111111;transition:background-color .25s}
.d-sales-x:hover{background:rgba(5,5,5,.06)}
.d-sales-form,.d-sales-done{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.d-sales .d-h3{padding-inline-end:44px}
.d-sales-lead{font-size:15px;color:rgba(17,17,17,.68);max-width:36em}
.d-sf{display:flex;flex-direction:column;gap:6px}
.d-sf label{font-size:13px;font-weight:600;color:#050505}
.d-sf-opt{font-weight:400;color:rgba(17,17,17,.5)}
.d-sf input,.d-sf textarea{width:100%;min-height:48px;padding:10px 14px;border:1px solid rgba(5,5,5,.18);border-radius:12px;background:#FFFFFF;font:inherit;color:#111111;transition:border-color .3s cubic-bezier(.2,.7,.2,1)}
.d-sf input:hover,.d-sf textarea:hover{border-color:#084631}
.d-sf input:focus-visible,.d-sf textarea:focus-visible{outline:2px solid #084631;outline-offset:2px;border-color:#084631;border-radius:12px}
.d-sf textarea{resize:vertical;min-height:112px}
.d-sf.err input,.d-sf.err textarea{border-color:#B42318}
.d-sf-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.d-sales-msg{min-height:1.5em;margin:0;font-size:14px;font-weight:500;color:#B42318}
.d-sales-msg:empty{display:none}
.d-sales-form .d-btn{width:100%}
.d-sales-form .d-btn[disabled]{opacity:.6;cursor:wait}
.d-sales-foot{font-size:13px;color:rgba(17,17,17,.68)}
.d-sales-foot a{font-weight:600;color:#084631;text-decoration:underline;text-underline-offset:4px}
.d-sales-done{align-items:flex-start}
.d-sales-done .d-check{width:40px;height:40px}
.d-sales-done .d-check .d-ico{width:20px;height:20px}
.d-sales-done .d-btn{align-self:flex-start;margin-top:6px}
@media (max-width:720px){
  .d-sales[open]{padding:0;align-items:end}
  .d-sales-in{max-width:none;padding:24px 20px calc(24px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;border-bottom:0}
}
@media (prefers-reduced-motion:no-preference){
  .d-sales[open] .d-sales-in{animation:dSalesIn .35s cubic-bezier(.2,.7,.2,1) both}
  @keyframes dSalesIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ---------- mobile review fixes (Nov 2026) ----------
   Overrides for phone and tablet only; the desktop rendering is unchanged. */

/* 1 Keep the main call to action in the header on tablets, where the sticky bar does not exist. */
@container dp (min-width:721px) and (max-width:1000px){
  .d-nav .d-btn{display:inline-flex}
}

/* 3 Panel tabs: a fade at the trailing edge shows there is more to scroll; it goes once the end is reached.
     Between 721 and 1000px the strip wraps instead. */
@container dp (max-width:1000px){
  .d-pn-rail{position:relative}
  .d-pn-rail::after{content:"";position:absolute;top:0;bottom:0;inset-inline-end:0;width:56px;background:linear-gradient(to right,rgba(8,70,49,0),#084631 70%);pointer-events:none;transition:opacity .3s}
  [dir="rtl"] .d-pn-rail::after{background:linear-gradient(to left,rgba(8,70,49,0),#084631 70%)}
  .d-pn-rail.at-end::after{opacity:0}
}
@container dp (min-width:721px) and (max-width:1000px){
  .d-pn-tabs{flex-wrap:wrap;overflow:visible}
  .d-pn-rail::after{display:none}
}

/* 4 Small labels and status chips: 12px on phones. The Arabic sizes in landing.css are already larger. */
@container dp (max-width:720px){
  .d-st,.d-ask-l,.d-bill-top,.d-match,.d-mark,.d-lab,.d-fix-k{font-size:12px}
  .d-slot .cv{font-size:11px}
}

/* 5 and 6 Tap targets: the wordmark link and the footer links get a 44px hit area without moving anything. */
.d-wm{padding-block:10px;margin-block:-10px}
.d-foot-links a{padding-inline:4px;margin-inline:-4px}

/* 7 FAQ answers at about 75 characters per line. */
.d-q-a p{max-width:38em}

/* 8 Anchor targets stay clear of the sticky bar on phones. */
@media (max-width:720px){
  html{scroll-padding-bottom:88px}
}