/* ============================================================
   websites.html only — the service page
   ============================================================
   ⚠️ Loaded AFTER page.css and by this page alone. Everything here was in
   page.css at first and was moved out on 2026-08-22: page.css is the shared
   shell for privacy, terms, about and status, and a 44rem prose document should
   not be carrying a service box it never renders. Anything added here must stay
   page-specific; if two sub-pages ever need it, promote it back.

   ⚠️ These pages have a DOCTYPE and render in standards mode (page.css header).
   The <dialog> below relies on the UA's own centring, which is exactly what
   HANDOFF §19 could not do on index.html because index.html is in quirks mode.
   Do not copy this dialog back there and expect it to sit in the middle.

   ⭐ Written in LOGICAL properties throughout (padding-inline-start,
   inset-inline-start, margin-block-start), so the Arabic mirror needs no rules
   of its own beyond the letter-spacing resets a joined script always wants.
   ============================================================ */

/* ---------- the wide canvas ----------
   ⚠️ `.ldoc` is 44rem in page.css and MUST STAY 44rem there — that is the
   measure the legal documents are set to. This page opts into a wide canvas with
   an extra class, and then puts the measure back on the prose only, so the cards
   and the grids get the width and the running text does not become a 130-column
   line nobody can track. */
.ldoc-wide{max-width:88rem}
.ldoc-wide > p,
.ldoc-wide .lsec > p,
.ldoc-wide .lsec > ul{max-width:62rem}
/* A pair of paragraphs that belong together reads better side by side than as
   one long column with 30rem of empty page beside it. `.lpair` is the only place
   running text is allowed past the measure, and only because each COLUMN is
   still inside it. */
@media (min-width:60rem){
  .ldoc-wide .lpair{display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem;max-width:none}
  .ldoc-wide .lpair p{max-width:none}
}

/* ---------- the two products ----------
   ⚠️ There are TWO products on this page and they are unrelated. The ACG read as
   a footnote while it was one thin band at the bottom, so each product now gets
   a numbered head, a display-size title, a lead line, and a rule with 5rem of
   air above it. Do not collapse that spacing to "tighten the page" — the gap IS
   the statement that these are separate things.

   ⭐ Heading outline on this page: h1 Services → h2 product → h3.lsub topic →
   h4 card / step. page.css's h2 styling (the small bold rule) is what `.lsub`
   reproduces, because that rule is now one level down. */
.lsec{margin:0}
.lsec-major + .lsec-major{
  margin-top:5rem;padding-top:3.5rem;
  border-top:1px solid rgb(255 255 255 / .16);
}
.lsec-num{
  margin:0 0 .875rem;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:rgb(var(--accent-rgb) / .9);
}
html[lang="ar"] .lsec-num{letter-spacing:normal;font-size:.8125rem}
.ldoc-wide .lsec-title{
  margin:0 0 .75rem;padding:0;border:none;
  font-family:"Italiana",Georgia,serif;font-weight:400;text-transform:uppercase;
  font-size:2.75rem;line-height:1.05;letter-spacing:.01em;color:var(--particle);
}
/* Italiana has no Arabic glyphs — the same substitution page.css makes for h1. */
html[lang="ar"] .ldoc-wide .lsec-title{
  font-family:"Abdo Master","Noto Sans Arabic",ui-sans-serif,system-ui,sans-serif;
  font-weight:700;text-transform:none;letter-spacing:normal;
  font-size:2.125rem;line-height:1.4;
}
.lsec-lead{font-size:1.125rem;line-height:1.6;color:rgb(255 255 255 / .78);margin:0 0 2.25rem;max-width:52rem}
html[lang="ar"] .lsec-lead{line-height:1.9}

/* topic headings inside a product — what page.css's h2 draws, one level down */
.ldoc-wide .lsub{
  font-size:1.25rem;line-height:1.35;font-weight:600;color:rgb(255 255 255 / .95);
  margin:2.75rem 0 .875rem;padding-top:1.75rem;
  border-top:1px solid rgb(255 255 255 / .12);
}
html[lang="ar"] .ldoc-wide .lsub{line-height:1.6}
.ldoc-wide h4{
  font-size:1rem;line-height:1.4;font-weight:600;color:rgb(255 255 255 / .92);
  margin:1.75rem 0 .5rem;
}
/* the step titles keep page.css's `.lsteps h3` treatment, one level down */
.ldoc-wide .lsteps h4{margin:0 0 .375rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.625rem}
.ldoc-wide .lsteps h4 i{
  font-style:normal;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgb(255 255 255 / .42);
}
html[lang="ar"] .ldoc-wide .lsteps h4 i{letter-spacing:normal}

/* ---------- what we build, and how it is priced ----------
   ⛔ THE PRICING CARDS ARE GONE. `.lpacks` / `.lpack` / `.lprice` / `.lamt` /
   `.lcur` / `.lterm` / `.ltag` / `.lfeat` / `.lonly` / `.lpack-foot` were the
   1,000 and 3,000 SAR packages and were deleted with them on the user's
   instruction (HANDOFF §36). Nothing on this page states a price any more, and
   nothing should: the figure comes out of the conversation. If a price ever
   returns, write a fresh block — do not resurrect these names, because the
   markup that fitted them no longer exists.

   ⭐ One box. Two columns above 60rem — what we build on one side, how it is
   priced plus the CTA on the other — stacking below it. Modelled on `.lacg` but
   with its own class names on purpose: the two boxes sell different products
   and neither should inherit the other's spacing by accident. */
.lquote{
  display:grid;gap:1.5rem;
  margin:0 0 1.25rem;
  padding:2rem 1.75rem;
  border:1px solid rgb(255 255 255 / .14);
  background:rgb(255 255 255 / .02);
}
@media (min-width:60rem){
  .lquote{grid-template-columns:1.35fr 1fr;gap:3rem;padding:2.75rem 2.5rem;align-items:start}
}
.lquote-label{
  margin:0 0 .875rem;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:rgb(var(--accent-rgb) / .9);
}
html[lang="ar"] .lquote-label{letter-spacing:normal;text-transform:none;font-size:.8125rem}

/* The kinds of site we build. Same dotted-bullet treatment the feature lists
   used, kept in logical properties so the Arabic mirror needs no rules.
   ⚠️ Deliberately NOT multi-column: each item is a name plus a clause, and two
   columns of those read as a table of contents rather than as a list. */
.lquote-kinds{list-style:none;margin:0 0 1.5rem;padding:0;max-width:44rem}
.lquote-kinds li{
  position:relative;padding-inline-start:1.375rem;margin:0 0 .75rem;
  font-size:.9375rem;line-height:1.6;
}
html[lang="ar"] .lquote-kinds li{line-height:1.9}
.lquote-kinds li::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:.4375rem;height:.4375rem;border-radius:50%;
  background:rgb(var(--accent-rgb) / .8);
}
.lquote-kinds strong{color:rgb(255 255 255 / .95)}
.lquote-note{
  margin:0;padding-top:1.25rem;max-width:44rem;
  border-top:1px solid rgb(255 255 255 / .1);
  font-size:.875rem;line-height:1.7;color:rgb(255 255 255 / .6);
}
html[lang="ar"] .lquote-note{line-height:1.95}

/* The price side. It carries the accent border and wash the hosted package card
   used to, because it is now the only thing on this page a visitor is meant to
   act on. Below 60rem the box has already stacked, so a full second border
   inside the outer one would read as a box in a box — it gets a rule instead. */
.lquote-side{
  padding-top:1.5rem;border-top:1px solid rgb(255 255 255 / .14);
}
@media (min-width:60rem){
  .lquote-side{
    padding:1.75rem;border-top:none;
    border:1px solid rgb(var(--accent-rgb) / .5);
    background:rgb(var(--accent-rgb) / .05);
  }
}
/* Italiana at display size — this line inherits the weight the price used to
   carry, which is the point: it is the answer to "how much". */
.lquote-head{
  margin:0 0 .75rem;
  font-family:"Italiana",Georgia,serif;font-weight:400;text-transform:uppercase;
  font-size:2rem;line-height:1.1;letter-spacing:.01em;color:var(--particle);
}
/* Italiana has no Arabic glyphs — the same substitution page.css makes for h1. */
html[lang="ar"] .lquote-head{
  font-family:"Abdo Master","Noto Sans Arabic",ui-sans-serif,system-ui,sans-serif;
  font-weight:700;text-transform:none;letter-spacing:normal;
  font-size:1.5rem;line-height:1.5;
}
.lquote-body{margin:0 0 1.5rem;font-size:.9375rem;line-height:1.7;color:rgb(255 255 255 / .82)}
html[lang="ar"] .lquote-body{line-height:1.95}
.lquote-cta{width:100%}

.lfine{font-size:.8125rem;color:rgb(255 255 255 / .45);margin:0 0 1rem}

/* ---------- "what is not included" as columns ---------- */
@media (min-width:60rem){
  .ldoc-wide .lcols{
    max-width:none;display:grid;grid-template-columns:repeat(3,1fr);
    gap:1.5rem;list-style:none;padding:0;
  }
  .ldoc-wide .lcols li{
    margin:0;padding-top:1rem;border-top:1px solid rgb(255 255 255 / .12);
  }
}

/* ---------- the method steps, across instead of down ----------
   ⚠️ FIXED COLUMN COUNTS, not `auto-fit`. There are FIVE steps since the Quote
   step was added (§36), and `auto-fit` with a 14rem floor lands on four at
   1280px — leaving one orphan step alone on a second row, which reads like the
   grid broke. 3 + 2 in the middle band and 5 across at the top band are both
   deliberate splits. If a step is ever added or removed, revisit both numbers. */
@media (min-width:60rem){
  .ldoc-wide .lsteps{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:2rem 2.25rem;
  }
  .ldoc-wide .lsteps li{margin:0}
}
@media (min-width:78rem){
  .ldoc-wide .lsteps{grid-template-columns:repeat(5,1fr);gap:2rem 1.75rem}
}

/* ---------- the ACG panel ----------
   Two columns at wide: the copy on one side, what-comes-out plus the CTA in a
   panel on the other. It stacks below 60rem. This used to be a one-line band
   with a button on the end, which is what made a whole product look like a
   side note. */
.lacg{
  display:grid;gap:1.5rem;
  padding:2rem 1.75rem;
  border:1px solid rgb(255 255 255 / .14);
  background:rgb(var(--green-deep-rgb) / .3);
}
@media (min-width:60rem){
  .lacg{grid-template-columns:1.25fr 1fr;gap:3rem;padding:2.75rem 2.5rem;align-items:start}
}
.lacg-copy p{margin:0 0 1rem;max-width:44rem}
.lacg-copy p:last-child{margin-bottom:0}
.lacg-side{
  padding-top:1.5rem;border-top:1px solid rgb(255 255 255 / .14);
}
@media (min-width:60rem){
  .lacg-side{
    padding-top:0;border-top:none;
    padding-inline-start:2.5rem;border-inline-start:1px solid rgb(255 255 255 / .14);
  }
}
.lacg-outlabel{
  margin:0 0 .875rem;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:rgb(var(--accent-rgb) / .9);
}
html[lang="ar"] .lacg-outlabel{letter-spacing:normal;text-transform:none;font-size:.8125rem}
.lacg-out{margin:0 0 1.75rem;padding:0;list-style:none}
.lacg-out li{
  margin:0;padding:.5rem 0;font-size:.9375rem;color:rgb(255 255 255 / .85);
  border-bottom:1px solid rgb(255 255 255 / .1);
}
.lacg-out li:first-child{border-top:1px solid rgb(255 255 255 / .1)}
.lacg-cta{width:100%}

/* ---------- the email-only ask ----------
   ⭐ One field. The main site's form (§19) asks for name, company, email and
   message because it is a general enquiry; this one is attached to a specific
   service, so the service IS the message and the only thing missing is who to
   reply to. Everything the API requires is composed in websites.js. */
.lask{
  border:1px solid rgb(255 255 255 / .18);border-radius:0;
  background:#07100c;color:var(--particle);
  padding:0;width:min(30rem,calc(100vw - 2.5rem));
  margin:auto;                       /* standards mode centres it; this is belt-and-braces */
}
.lask::backdrop{background:rgb(0 0 0 / .72)}
.lask-in{padding:1.75rem 1.5rem}
@media (min-width:40rem){.lask-in{padding:2rem 2rem}}
.lask-x{
  position:absolute;inset-block-start:.625rem;inset-inline-end:.625rem;
  width:2rem;height:2rem;line-height:1;font-size:1.25rem;
  background:transparent;border:none;color:rgb(255 255 255 / .5);cursor:pointer;
  font-family:inherit;
}
.lask-x:hover{color:var(--particle)}
.lask h2{margin:0 0 .375rem;padding:0;border:none;font-size:1.125rem}
.lask-ctx{font-size:.8125rem;color:rgb(var(--accent-rgb) / .9);margin:0 0 1.25rem}
html[lang="ar"] .lask-ctx{letter-spacing:normal}
.lask-f label{display:block;font-size:.8125rem;color:rgb(255 255 255 / .6);margin:0 0 .375rem}
.lask-f input,
.lask-f textarea{
  width:100%;font-family:inherit;font-size:1rem;line-height:1.4;
  padding:.75rem .875rem;border-radius:0;
  background:rgb(255 255 255 / .04);color:var(--particle);
  border:1px solid rgb(255 255 255 / .2);
}
.lask-f textarea{resize:vertical;min-height:5.5rem;line-height:1.5}
html[lang="ar"] .lask-f textarea{line-height:1.8}
.lask-f + .lask-f{margin-top:1rem}
.lask-f input:focus,
.lask-f textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.lask-f.bad input{border-color:#c2564a}
.lask-err{display:none;font-size:.8125rem;color:#e08a80;margin:.375rem 0 0}
.lask-f.bad .lask-err{display:block}
/* ⚠️ The honeypot is a REAL input, hidden from people and left empty by them.
   Never remove aria-hidden or tabindex, and never display:none it — some bots
   skip fields that are display:none. */
.lask-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lask-send{width:100%;margin-top:1.25rem}
.lask-send[disabled]{opacity:.6;cursor:default}
.lask-status{font-size:.875rem;margin:.875rem 0 0;min-height:1.2em;color:rgb(255 255 255 / .7)}
.lask-status.ok{color:var(--green)}
.lask-status.bad{color:#e08a80}
.lask-fine{font-size:.75rem;color:rgb(255 255 255 / .45);margin:1rem 0 0}

/* ---------- arriving from the landing page ----------
   ⭐ The outgoing half lives in index.html (it fades to the scene's own black
   before navigating); this is the incoming half. They are deliberately the same
   colour and roughly the same duration, so the two pages read as one move rather
   than as a jump cut.
   ⚠️ The curtain is a SIBLING of .wrap and pointer-events:none — an overlay that
   swallows the first click is worse than no transition at all. It is also
   `animation-fill-mode:forwards` so it ends at opacity 0 and stays there. */
.lcurtain{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  background:var(--backdrop);opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  .lcurtain{animation:lcurtain .42s var(--ease-entrance) forwards}
  @keyframes lcurtain{from{opacity:1}to{opacity:0}}
  .ldoc-wide > .leyebrow,
  .ldoc-wide > h1,
  .ldoc-wide > .lintro,
  .ldoc-wide > .lsec{animation:lrise .55s var(--ease-entrance) both}
  .ldoc-wide > h1{animation-delay:.05s}
  .ldoc-wide > .lintro{animation-delay:.1s}
  .ldoc-wide > .lsec{animation-delay:.16s}
  .ldoc-wide > .lsec + .lsec{animation-delay:.24s}
  @keyframes lrise{from{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}
}

/* ============================================================
   PHONES — the compaction pass
   ============================================================
   ⚠️ Scoped to `max-width:639px`, which is the exact complement of page.css's
   `min-width:640px` block. Two rules must never overlap or the phone gets the
   desktop's padding back.

   ⭐ The root font-size clamp is the lever that does most of the work: every
   size on this page is in rem, so one declaration scales headings, gaps and
   padding together. `index.html` does the same thing (§26). It is set HERE and
   not in page.css on purpose — the legal documents are long-form prose and
   should stay at 16px.
   ⚠️ Media-query `rem` resolves against the INITIAL font size (16px), not the
   root's computed one, so `min-width:60rem` is still 960px and none of the
   breakpoints above shift under this.

   ⭐ The floor is 14px, not lower. Below that the lists stop being scannable,
   and a services page nobody can read is not a compact services page.
   ============================================================ */
@media (max-width:639px){
  html{font-size:clamp(14px,4vw,16px)}

  .lhead{padding:.875rem 1rem}
  .lbrand img{height:1.875rem}
  .lbrand span{font-size:1.375rem}
  .llang{padding:.4375rem .75rem;font-size:.75rem}

  .ldoc-wide{padding:2rem 1rem 3.5rem}
  h1{font-size:2.125rem;margin-bottom:.75rem}
  html[lang="ar"] h1{font-size:1.75rem}
  .lintro{font-size:1rem;line-height:1.55;margin-bottom:2rem}
  html[lang="ar"] .lintro{line-height:1.8}

  /* Products stay clearly separated — less air than desktop, but still a rule
     and still more than any gap inside a section. */
  .lsec-major + .lsec-major{margin-top:3rem;padding-top:2.25rem}
  .lsec-num{margin-bottom:.625rem}
  .ldoc-wide .lsec-title{font-size:2rem;margin-bottom:.5rem}
  html[lang="ar"] .ldoc-wide .lsec-title{font-size:1.625rem}
  .lsec-lead{font-size:1rem;margin-bottom:1.5rem}
  .ldoc-wide .lsub{font-size:1.0625rem;margin:1.75rem 0 .625rem;padding-top:1.25rem}
  .ldoc-wide p{margin-bottom:.875rem}
  .ldoc-wide .lsec > ul li{margin-bottom:.5rem}

  /* ⚠️ `.ldoc-wide p` above sets a bottom margin on every paragraph and beats a
     single class on specificity, so the two paragraphs that must not carry one
     restate `margin-bottom` here rather than relying on their own rule. */
  .lquote{padding:1.375rem 1.125rem;gap:1.25rem}
  .lquote-label{margin-bottom:.625rem}
  .lquote-kinds{margin-bottom:1.25rem}
  .lquote-kinds li{margin-bottom:.5rem;padding-inline-start:1.125rem}
  .lquote-kinds li::before{width:.375rem;height:.375rem}
  .lquote-note{padding-top:1rem;margin-bottom:0;font-size:.8125rem}
  .lquote-side{padding-top:1.25rem}
  .lquote-head{font-size:1.625rem;margin-bottom:.5rem}
  html[lang="ar"] .lquote-head{font-size:1.375rem}
  .lquote-body{font-size:.9375rem;margin-bottom:1.25rem}
  .lbtn{padding:.6875rem 1.125rem;font-size:.9375rem}

  .ldoc-wide .lsteps li{padding-inline-start:2.25rem;margin-bottom:1.125rem}
  .ldoc-wide .lsteps p{margin-bottom:0}

  .lacg{padding:1.375rem 1.125rem;gap:1.25rem}
  .lacg-copy p{margin-bottom:.75rem}
  .lacg-side{padding-top:1.25rem}
  .lacg-outlabel{margin-bottom:.625rem}
  .lacg-out{margin-bottom:1.25rem}
  .lacg-out li{padding:.4375rem 0;font-size:.875rem}

  .lfine{font-size:.75rem;margin-bottom:.75rem}
  .lfoot{padding:1.5rem 1rem 2.5rem;gap:.375rem 1rem;font-size:.75rem}

  /* ⚠️ The dialog sizes off the VIEWPORT, not the document — `width:min(30rem,…)`
     with a shrunken root would leave it needlessly narrow on a phone. */
  .lask{width:calc(100vw - 1.5rem)}
  .lask-in{padding:1.375rem 1.125rem}
  .lask h2{font-size:1.0625rem}
  .lask-ctx{margin-bottom:1rem}
  .lask-f input,
  .lask-f textarea{padding:.6875rem .75rem}
  .lask-f textarea{min-height:4.5rem}

}