@charset "utf-8";
/* ═══ Manara Studio · the pricing page ("Build your order") ═══════════════
   Loaded after styles.css, on /pricing/ (and /id/, /ar/ twins) only, so the
   homepage carries none of it. Same world, same rules: cream, forest,
   marigold, ink, tomato; 2px ink edges and hard ink shadows; Jost display,
   Instrument Sans body, JetBrains Mono labels and figures; logical box
   properties so Arabic mirrors. Measured pairs used here:
     ink on cream 15.68 · ink on marigold 9.72 · marigold on ink 9.72
     --soft-on-cream 7.48 · --soft-on-marigold 6.76 · --muted-on-cream 5.16
     cream on ink 15.68 · --soft-on-ink 8.44                                  */

:root{--muted-on-cream:#62656a;}    /* 5.16:1 — the tier features a package lacks */

/* ─── the deck ───────────────────────────────────────────────────────── */
.card--order{justify-content:flex-start;}
.card--know{--bg:var(--ink);--fg:var(--cream);--soft:var(--soft-on-ink);--accent:var(--marigold);--focus:var(--marigold);}
/* the two cards a skyline climbs over keep room for its towers (see the
   coastline in styles.css) */
.js .card--order,.js .card--know{padding-block-end:calc(clamp(4.5rem,10vh,6rem) + var(--crest-lead) * .8);}

/* ─── 1 · the order ──────────────────────────────────────────────────── */
.order{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.75rem,4vw,4.5rem);align-items:start;}
@media (min-width:62rem){.order{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);}}
/* One column (under 62rem): the choices and the slip are a single flow, so the
   sticky "Start with" / "Prices in" bar below rides all the way down, past the
   slip too (a sticky bar only travels inside its parent: inside .order__main it
   stopped where the choices stopped). .order__main steps out of the way, and its
   ::after keeps the grid's old gap between the choices and the slip. Nothing
   moves: compared pixel for pixel before and after at 390, 600 and 900. */
@media (max-width:61.99rem){
  .order{display:block;}
  .order__main{display:contents;}
  .order__main::after{content:"";display:block;height:clamp(2.75rem,4vw,4.5rem);}
}
/* On a wide screen the room kept for the next skyline sits INSIDE the order
   grid (at the foot of the choices column), not in the card's padding. The
   slip's sticky range is its grid area, so it now rides all the way to the
   card's bottom and "Good to know" climbs over it, instead of the slip sliding
   up under the header when the choices run out. */
@media (min-width:62rem){
  .js .card--order{padding-block-end:clamp(4.5rem,10vh,6rem);}
  .js .order__main{padding-block-end:calc(var(--crest-lead) * .8);}
}
.order .display{font-size:clamp(2.4rem,5.4vw,5.1rem);}
.order .lead{max-width:44ch;margin-block-end:1.6rem;}

/* the first viewport arrives without JavaScript, like the homepage hero */
.order .lead,.order__opts,.first{animation:rise .8s var(--ease) both;}
.order .lead{animation-delay:.16s;}
.order__opts{animation-delay:.22s;}
.first{animation-delay:.28s;}

/* ─── the path and the currency ──────────────────────────────────────────
   What the visitor came for (2026-09-27): Website, Brand or Search, each its
   own path through the one builder. The currency pill's twin. */
/* Sticky (2026-10-09, his call): "Start with" and "Prices in" ride under the
   header all the way down the choices, so either can be changed whenever. The
   fade behind them is the card's own ground, so at rest it is invisible and
   while stuck the choices slide under it; it lets presses through, only the two
   pills take them. */
.order__opts{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;
  position:sticky;top:calc(var(--header-h) + .2rem);z-index:20;
  padding-block:.3rem .5rem;margin-block-start:-.3rem;
  pointer-events:none;
}
.order__opts > *{pointer-events:auto;}

.paths{
  display:inline-flex;align-items:center;gap:.15rem;padding:.22rem;
  background:var(--cream);color:var(--ink);
  border:var(--edge);border-radius:var(--pill);box-shadow:3px 3px 0 var(--ink);
}
.paths__label{padding-inline:.7rem .35rem;font:600 .7rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft-on-cream);}
.paths button{
  appearance:none;border:0;background:none;cursor:pointer;
  padding:.55rem .85rem;border-radius:var(--pill);
  color:var(--ink);font:600 .82rem/1 var(--font-sans);
  transition:background .2s,color .2s;
}
.paths button:hover{background:rgba(22,24,26,.09);}
.paths button[aria-pressed="true"]{background:var(--marigold);box-shadow:inset 0 0 0 2px var(--ink);}
.paths button:focus-visible{outline-offset:1px;}
[lang="ar"] .paths__label{font-family:var(--font-ar);font-size:.8rem;letter-spacing:0;text-transform:none;}
[lang="ar"] .paths button{font-family:var(--font-ar);}
/* On a phone the bar must stay one slim row (two rows made it 115px of a 800px
   screen): the two captions step aside for sighted eyes — "Website, Brand,
   Search" and a currency code say what they are — and stay for screen readers. */
@media (max-width:39.99rem){
  .order__opts{flex-wrap:nowrap;justify-content:space-between;gap:.45rem;padding-block:.3rem .45rem;margin-block-start:-.3rem;}
  .paths__label,.order__opts .cur__label{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  .paths{padding:.2rem;}
  .paths button{padding:.5rem .64rem;font-size:.78rem;}
  .order__opts .cur__btn{padding-inline-end:.6rem;}
}
@media (max-width:22.49rem){
  .paths button{padding:.5rem .5rem;font-size:.74rem;}
  .order__opts .cur__now{padding-inline:.6rem;}
}

/* a numbered step: 1 pick a website, 2 add what you need (the number is
   the order the visitor works in, so it earns its place) */
.step{margin:clamp(2.75rem,6vh,3.75rem) 0 0;padding:0;border:0;min-width:0;}
.step__t{
  display:flex;align-items:center;gap:.75rem;padding:0;margin-block-end:1.35rem;
  font:600 clamp(1.25rem,1.8vw,1.55rem)/1.1 var(--font-display);text-transform:uppercase;letter-spacing:-.01em;
}
.step__no{
  flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;
  background:var(--marigold);color:var(--ink);border:var(--edge);box-shadow:2px 2px 0 var(--ink);
  font:600 .85rem/1 var(--font-mono);
}

/* ─── step 1 and step 2 (2026-09-27) ─────────────────────────────────────
   Step 1 holds the path's own service; step 2 ("Add what you need") the
   rest, as blocks with small headings. A block's heading has a wording for
   each step, and only step 1 shows its number. Step 2 stays hidden until
   the first choice, then comes in once, block by block (pricing.js adds
   .is-open, and .is-arriving for the entrance). Without JS all of it shows. */
.first .as-more,.more .as-first{display:none;}
.more .step .step__no{display:none;}
.more{margin-block-start:clamp(2.75rem,6vh,3.75rem);}
.more__t{margin:0 0 .4rem;}
.more .step{margin-block-start:1.6rem;}
.more .step > .step__t{
  margin-block-end:.9rem;font:600 .78rem/1 var(--font-mono);letter-spacing:.14em;
  color:var(--soft-on-cream);
}
.js .more:not(.is-open){display:none;}
@keyframes more-in{from{opacity:0;transform:translateY(22px);}}
.more.is-arriving > *{animation:more-in .6s var(--ease) both;}
.more.is-arriving > :nth-child(2){animation-delay:.08s;}
.more.is-arriving > :nth-child(3){animation-delay:.16s;}
.more.is-arriving > :nth-child(4){animation-delay:.24s;}
.more.is-arriving > :nth-child(n+5){animation-delay:.32s;}
/* a line under a block heading, and a note under its cards */
.step__lead{margin:-.35rem 0 .95rem;font-size:.92rem;line-height:1.45;color:var(--soft-on-cream);}
.step__note{margin:1rem 0 0;max-width:64ch;font-size:.9rem;line-height:1.5;color:var(--soft-on-cream);}
/* on the brand and search paths the website is an extra, so it can go */
.step__drop{
  display:none;margin-block-start:1rem;padding:.2rem 0;border:0;background:none;cursor:pointer;
  color:var(--ink);font:600 .85rem/1.2 var(--font-sans);
}
.js .more .step--tiers .step__drop{visibility:hidden;display:inline-block;}
.js .order[data-tier] .more .step--tiers .step__drop{visibility:visible;}
.terms{margin:1.5rem 0 0;max-width:56ch;font-size:.88rem;line-height:1.5;color:var(--soft-on-cream);}
.terms::before{content:"";display:inline-block;width:.5rem;height:.5rem;margin-inline-end:.55rem;border-radius:50%;background:var(--forest);vertical-align:.08em;}

/* ─── the three websites: radio cards ──────────────────────────────────
   The whole card is the radio: a transparent input covers it, so a tap
   anywhere picks it and the keyboard gets a real radio group. The chosen
   one turns marigold, lifts, and gets an ink tick. "Our pick" is an opinion,
   never "most popular" (there is no data to be popular with). */
/* stacked on a phone, the gap leaves room for the "Our pick" chip that
   hangs above the Business card */
.tiers{display:grid;gap:1.75rem;grid-template-columns:1fr;padding-block-start:.5rem;}
@media (min-width:40rem){.tiers{gap:1.1rem;grid-template-columns:repeat(3,minmax(0,1fr));}}
.tier{
  --t-soft:var(--soft-on-cream);--lift:0px;
  position:relative;display:flex;flex-direction:column;gap:.6rem;
  padding:1.3rem 1.2rem 1.35rem;cursor:pointer;
  background:var(--cream);color:var(--ink);
  border:var(--edge);border-radius:var(--r-sm);box-shadow:var(--pop);
  transform:translateY(var(--lift));
  transition:transform .3s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease);
  transition:transform .5s var(--spring),box-shadow .25s var(--ease),background-color .25s var(--ease);
}
@media (min-width:40rem){.tier--pick{--lift:-8px;}}
.tier__in{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;appearance:none;}
@media (hover:hover){.tier:hover{transform:translate(-2px,calc(var(--lift) - 3px));box-shadow:6px 6px 0 var(--ink);}}
.tier:has(.tier__in:checked),.tier.is-on{--t-soft:var(--soft-on-marigold);background:var(--marigold);box-shadow:6px 6px 0 var(--ink);}
.tier:has(.tier__in:focus-visible){outline:3px solid var(--ink);outline-offset:4px;}
.tier__t{padding-inline-end:2.2rem;font:600 1.45rem/1.1 var(--font-display);text-transform:uppercase;letter-spacing:-.01em;}
.tier__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .45rem;}
.tier__from,.tier__per{font:600 .7rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t-soft);}
/* the membership's minimum, under the blurb (2026-10-10) */
.tier__min{font:600 .7rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-soft);}
.tier__n{font:600 clamp(1.35rem,1.9vw,1.7rem)/1.05 var(--font-mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;unicode-bidi:isolate;}
.tier__b{font-size:.93rem;line-height:1.45;color:var(--t-soft);}
.tier__pick{
  position:absolute;inset-block-start:-.9rem;inset-inline-start:1rem;z-index:2;
  padding:.42rem .72rem;background:var(--ink);color:var(--marigold);border-radius:var(--pill);   /* 9.72 */
  font:600 .7rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.tier__check{
  position:absolute;inset-block-start:1.15rem;inset-inline-end:1rem;
  width:1.75rem;height:1.75rem;padding:.32rem;border-radius:50%;
  background:var(--ink);color:var(--cream);
  opacity:0;transform:scale(.4);
  transition:opacity .2s,transform .35s var(--ease);
  transition:opacity .2s,transform .45s var(--spring);
}
.tier:has(.tier__in:checked) .tier__check,.tier.is-on .tier__check{opacity:1;transform:none;}

/* ─── the package details (reworked 2026-10-10, his call) ───────────────
   A box that is always there, "How long?" at its top. Until a package is
   picked it is greyed out (the edge pale, the options faded and disabled,
   a hint saying why); a pick lights it up: the edge darkens and its dashes
   run round once (.is-lit, set by pricing.js; the edge is an SVG outline it
   sizes, because a CSS dashed border can't move), and the details open
   under it (rows from 0fr to 1fr). Driven by data-tier (set by pricing.js
   on every pick); the opening also follows the checked radio through :has,
   so it works with the script blocked, where the box only shows once a
   package is picked and keeps a plain dashed border.
   Features the tier lacks stay listed, crossed and muted, so the visitor
   sees what the next tier adds; a hidden prefix says it to screen readers. */
.tierinfo{position:relative;margin-block-start:1.35rem;padding:1.2rem 1.3rem 1.25rem;border-radius:var(--r-sm);}
:root:not(.js) .tierinfo{display:none;border:2px dashed color-mix(in srgb,var(--ink) 35%,transparent);}
:root:not(.js) .order:has(.tier__in:checked) .tierinfo{display:block;}
/* on the brand and search paths the website is an extra: the box waits for a package */
.order[data-path="brand"]:not([data-tier]) .tierinfo,.order[data-path="search"]:not([data-tier]) .tierinfo{display:none;}
.tierinfo__edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.tierinfo__edge rect{
  fill:none;stroke:color-mix(in srgb,var(--ink) 18%,transparent);stroke-width:2;
  stroke-dasharray:9 6;transition:stroke .45s var(--ease);
}
.order[data-tier] .tierinfo__edge rect{stroke:color-mix(in srgb,var(--ink) 55%,transparent);}
.tierinfo.is-lit .tierinfo__edge rect{animation:edge-run 1.1s cubic-bezier(.3,0,.2,1) both;}
@keyframes edge-run{from{stroke-dashoffset:150;}to{stroke-dashoffset:0;}}
/* the details: closed until a package is picked */
.tierinfo__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease);}
.tierinfo__in{
  min-height:0;overflow:hidden;visibility:hidden;padding-block-start:0;
  transition:visibility 0s linear .55s,padding .55s var(--ease);
}
.order:has(.tier__in:checked) .tierinfo__more,.order[data-tier] .tierinfo__more{grid-template-rows:1fr;}
.order:has(.tier__in:checked) .tierinfo__in,.order[data-tier] .tierinfo__in{visibility:visible;padding-block-start:1.6rem;transition-delay:0s;}
:root:not(.js) .tierinfo__in{padding-block-start:0;}
.tierinfo__in > *:first-child{margin-block-start:0;}
.tierinfo__t{margin:0 0 .6rem;font:600 1.15rem/1.2 var(--font-display);text-transform:uppercase;letter-spacing:-.01em;}
[lang="ar"] .tierinfo__t{font-family:var(--font-ar-display);text-transform:none;letter-spacing:0;}
.tierinfo__deal{
  display:none;margin:1.1rem 0 0;padding:.75rem .95rem;border-radius:.6rem;
  background:color-mix(in srgb,var(--marigold) 32%,var(--cream));border:1.5px solid var(--ink);
  font-size:.92rem;line-height:1.45;
}
.order:has(.tier__in[value="business"]:checked) .tierinfo__deal,.order[data-tier="business"] .tierinfo__deal,
.order:has(.tier__in[value="booking"]:checked) .tierinfo__deal,.order[data-tier="booking"] .tierinfo__deal{display:block;}
@media (prefers-reduced-motion:reduce){.tierinfo__more,.tierinfo__in,.tierinfo__edge rect{transition:none;animation:none;}}
.tierinfo__facts{display:none;margin:0 0 1rem;font:600 .8rem/1.5 var(--font-mono);letter-spacing:.02em;}
.feats{list-style:none;margin:0;padding:0;display:grid;gap:.6rem 1.6rem;grid-template-columns:1fr;}
@media (min-width:36rem){.feats{grid-template-columns:repeat(2,minmax(0,1fr));}}
.feat{display:flex;align-items:flex-start;gap:.6rem;font-size:.97rem;line-height:1.4;color:var(--muted-on-cream);transition:color .25s;}
.feat svg{flex:none;width:1.35rem;height:1.35rem;padding:.2rem;border-radius:50%;}
svg.feat__yes{background:var(--ink);color:var(--cream);}
svg.feat__no{border:1.5px solid color-mix(in srgb,var(--ink) 40%,transparent);color:var(--muted-on-cream);}
.feat .feat__yes{display:none;}
.order:has(.tier__in[value="starter"]:checked) .tierinfo__facts[data-for="starter"],
.order:has(.tier__in[value="business"]:checked) .tierinfo__facts[data-for="business"],
.order:has(.tier__in[value="booking"]:checked) .tierinfo__facts[data-for="booking"],
.order[data-tier="starter"] .tierinfo__facts[data-for="starter"],
.order[data-tier="business"] .tierinfo__facts[data-for="business"],
.order[data-tier="booking"] .tierinfo__facts[data-for="booking"]{display:block;}
.order:has(.tier__in[value="starter"]:checked) .feat[data-in~="starter"],
.order:has(.tier__in[value="business"]:checked) .feat[data-in~="business"],
.order:has(.tier__in[value="booking"]:checked) .feat[data-in~="booking"],
.order[data-tier="starter"] .feat[data-in~="starter"],
.order[data-tier="business"] .feat[data-in~="business"],
.order[data-tier="booking"] .feat[data-in~="booking"]{color:var(--ink);}
.order:has(.tier__in[value="starter"]:checked) .feat[data-in~="starter"] .feat__yes,
.order:has(.tier__in[value="business"]:checked) .feat[data-in~="business"] .feat__yes,
.order:has(.tier__in[value="booking"]:checked) .feat[data-in~="booking"] .feat__yes,
.order[data-tier="starter"] .feat[data-in~="starter"] .feat__yes,
.order[data-tier="business"] .feat[data-in~="business"] .feat__yes,
.order[data-tier="booking"] .feat[data-in~="booking"] .feat__yes{display:block;}
.order:has(.tier__in[value="starter"]:checked) .feat[data-in~="starter"] .feat__no,
.order:has(.tier__in[value="business"]:checked) .feat[data-in~="business"] .feat__no,
.order:has(.tier__in[value="booking"]:checked) .feat[data-in~="booking"] .feat__no,
.order[data-tier="starter"] .feat[data-in~="starter"] .feat__no,
.order[data-tier="business"] .feat[data-in~="business"] .feat__no,
.order[data-tier="booking"] .feat[data-in~="booking"] .feat__no{display:none;}
/* a row whose wording changes by tier (SEO, Google Ads): only the chosen
   tier's words show; with no tier matched (Starter on the Ads row) the
   data-v="starter" words show */
.feat__v{display:none;}
.order:has(.tier__in[value="starter"]:checked) .feat__v[data-v~="starter"],
.order[data-tier="starter"] .feat__v[data-v~="starter"],
.order:has(.tier__in[value="business"]:checked) .feat__v[data-v~="business"],
.order[data-tier="business"] .feat__v[data-v~="business"],
.order:has(.tier__in[value="booking"]:checked) .feat__v[data-v~="booking"],
.order[data-tier="booking"] .feat__v[data-v~="booking"]{display:inline;}
/* included from Starter up: a marigold tick (his call), ink-edged on cream */
.order .feat--base svg.feat__yes{background:var(--marigold);color:var(--ink);box-shadow:0 0 0 1.5px var(--ink);}
/* animate: a tier change stamps its features in (pricing.js adds the
   classes). The tick lands like the slip's seal: from a third of its size,
   turned, on the house spring, row by row in reading order (--i × 35 ms, so
   even Starter → Booking settles in under a second); the row's words darken
   with it. Dropped rows fade quickly to their cross; reworded rows roll like
   the prices. Transform and opacity on small icons, only on a click. */
@keyframes feat-stamp{from{opacity:0;transform:scale(.3) rotate(-40deg);}}
@keyframes feat-cross{from{opacity:0;transform:scale(.6);}}
@keyframes feat-ink{from{color:var(--muted-on-cream);}}
@keyframes feat-mute{from{color:var(--ink);}}
@keyframes feat-fade{from{opacity:0;}}
.feat.is-gain svg.feat__yes{
  animation:feat-stamp .5s var(--ease) calc(var(--i,0) * 35ms) both;
  animation:feat-stamp .6s var(--spring) calc(var(--i,0) * 35ms) both;
}
.feat.is-gain{animation:feat-ink .35s var(--ease) calc(var(--i,0) * 35ms + 120ms) both;}
.feat.is-loss{animation:feat-mute .2s var(--ease) both;}
.feat.is-loss svg.feat__no{animation:feat-cross .2s var(--ease) both;}
.feat.is-swap .feat__v{animation:price-roll .45s var(--ease) calc(var(--i,0) * 35ms) both;}
@media (prefers-reduced-motion:reduce){
  /* no turn, no stagger: the new tick simply fades in, so the change still reads */
  .feat.is-gain svg.feat__yes{animation:feat-fade .2s linear both;}
  .feat.is-gain,.feat.is-loss,.feat.is-loss svg.feat__no,.feat.is-swap .feat__v{animation:none;}
}
/* the hidden prefixes are spans; .vh keeps them off screen when shown */
span.feat__yes,span.feat__no{position:absolute;}

/* ─── every site comes with ───────────────────────────────────────────── */
.incl{margin-block-start:1.5rem;padding-block-start:1.2rem;border-block-start:2px dashed color-mix(in srgb,var(--ink) 20%,transparent);}
.incl__t{margin:0 0 1rem;font:600 .74rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;}
.incl__list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem 1.6rem;grid-template-columns:1fr;}
@media (min-width:36rem){.incl__list{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:80rem){.incl__list{grid-template-columns:repeat(3,minmax(0,1fr));}}
.incl__list li{position:relative;padding-inline-start:1.4rem;font-size:.95rem;line-height:1.4;}
.incl__list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.36em;
  width:.68rem;height:.68rem;border-radius:50%;background:var(--marigold);border:1.5px solid var(--ink);
}

/* ─── how the membership works (2026-10-10) ─────────────────────────────
   Where "After the first year" was, in its frame: the three things a buyer
   asks about a monthly website, right under the packages. Information, not
   a choice: the tier details' dashed edge, not a card's shadow, so nobody
   tries to press it. Columns from 52rem (stacked on a tablet held upright,
   where three ran to 28 characters a line); each step hangs off a forest
   rule at its inline start (so Arabic mirrors). */
.how{
  margin-block-start:1.35rem;padding:1.15rem 1.3rem 1.25rem;
  border:2px dashed color-mix(in srgb,var(--ink) 35%,transparent);border-radius:var(--r-sm);
}
.how__t{margin:0;font:600 1.15rem/1.2 var(--font-display);text-transform:uppercase;letter-spacing:-.01em;}
.how__steps{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:1.1rem 1.5rem;grid-template-columns:1fr;}
@media (min-width:52rem){.how__steps{grid-template-columns:repeat(3,minmax(0,1fr));}}
.how__step{padding-inline-start:.9rem;border-inline-start:3px solid var(--forest);}
.how__h{margin:0;font:600 1rem/1.25 var(--font-sans);}
.how__p{margin:.35rem 0 0;font-size:.9rem;line-height:1.45;color:var(--soft-on-cream);}
[lang="ar"] .how__t{font-family:var(--font-ar-display);text-transform:none;letter-spacing:0;}
[lang="ar"] .how__h{font-family:var(--font-ar);}

/* ─── how long: the first commitment (2026-10-10) ──────────────────────
   The top of the package details: two radio cards in the add-on cards'
   grammar (the input covers the card; the chosen one turns marigold), with
   a round dot for a radio where those have a box. 6 months for 5 is picked
   by default. The figures are written by pricing.js for the chosen package,
   so without the script the block has nothing to say and stays hidden. */
.term{margin:0;padding:0;border:0;min-width:0;}
/* greyed out until a package is picked (pricing.js also disables the radios) */
.term__opts,.term__t{transition:opacity .45s var(--ease),filter .45s var(--ease);}
.order:not([data-tier]) .term__opts{opacity:.45;filter:grayscale(1);pointer-events:none;}
.order:not([data-tier]) .term__t{opacity:.6;}
.term__hint{clear:both;margin:-.25rem 0 .8rem;font-size:.9rem;line-height:1.4;color:var(--soft-on-cream);}
.order[data-tier] .term__hint{display:none;}
:root:not(.js) .term{display:none;}
.term__t{float:left;width:100%;padding:0;margin:0 0 .8rem;font:600 .74rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;}
[dir="rtl"] .term__t{float:right;}
.term__opts{clear:both;display:grid;gap:.95rem;grid-template-columns:1fr;}
@media (min-width:36rem){.term__opts{grid-template-columns:repeat(2,minmax(0,1fr));}}
.term__opt{
  --t-soft:var(--soft-on-cream);
  position:relative;display:grid;align-items:start;
  grid-template-columns:auto minmax(0,1fr);grid-template-areas:"dot h" "dot price" "dot b";
  column-gap:.85rem;row-gap:.3rem;
  padding:1rem 1.1rem 1.05rem;cursor:pointer;
  background:var(--cream);color:var(--ink);
  border:var(--edge);border-radius:var(--r-sm);box-shadow:3px 3px 0 var(--ink);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease);
  transition:transform .45s var(--spring),box-shadow .25s var(--ease),background-color .25s var(--ease);
}
.term__in{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;appearance:none;}
@media (hover:hover){.term__opt:hover{transform:translate(-1px,-2px);box-shadow:5px 5px 0 var(--ink);}}
.term__opt:has(.term__in:checked),.term__opt.is-on{--t-soft:var(--soft-on-marigold);background:var(--marigold);box-shadow:5px 5px 0 var(--ink);}
.term__opt:has(.term__in:focus-visible){outline:3px solid var(--ink);outline-offset:4px;}
.term__dot{
  grid-area:dot;position:relative;width:1.45rem;height:1.45rem;margin-block-start:.02rem;
  background:var(--cream);border:var(--edge);border-radius:50%;
}
.term__dot::after{
  content:"";position:absolute;inset:.22rem;border-radius:50%;background:var(--ink);
  transform:scale(0);transition:transform .3s var(--ease);transition:transform .4s var(--spring);
}
.term__opt:has(.term__in:checked) .term__dot::after,.term__opt.is-on .term__dot::after{transform:none;}
.term__h{grid-area:h;font:600 1.05rem/1.25 var(--font-display);}
.term__price{grid-area:price;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .45rem;}
/* the free months (2026-10-10, his call: here, not on the package cards): tomato
   with ink text (5.00), edged in ink like every chip; at the price row's end */
.term__free{
  margin-inline-start:auto;padding:.36rem .62rem;background:var(--tomato);color:var(--ink);
  border:1.5px solid var(--ink);border-radius:var(--pill);
  font:600 .66rem/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.term__n{font:600 1.15rem/1.1 var(--font-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;unicode-bidi:isolate;white-space:nowrap;}
.term__was{font:500 .82rem/1 var(--font-mono);color:var(--t-soft);text-decoration-thickness:1.5px;unicode-bidi:isolate;white-space:nowrap;}
.term__was[hidden]{display:none;}
.term__b{grid-area:b;font-size:.88rem;line-height:1.45;color:var(--t-soft);}

/* a price inside a sentence (the FAQ): it never breaks */
bdi[data-price]{white-space:nowrap;font-weight:600;}

/* ─── the services: tick cards ─────────────────────────────────────────
   Same trick as the tiers (the input covers the card), a square ink-edged
   box that fills with a tick. The two brand options are one choice
   (pricing.js clears one when the other is ticked). */
.addons{display:grid;gap:.95rem;grid-template-columns:1fr;container-type:inline-size;}
@media (min-width:40rem){.addons{grid-template-columns:repeat(2,minmax(0,1fr));}}
.addon{
  --t-soft:var(--soft-on-cream);
  position:relative;display:grid;align-items:start;
  grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"box t price" "box b b";
  column-gap:.85rem;row-gap:.35rem;
  padding:1.05rem 1.15rem 1.1rem;cursor:pointer;
  background:var(--cream);color:var(--ink);
  border:var(--edge);border-radius:var(--r-sm);box-shadow:3px 3px 0 var(--ink);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease);
  transition:transform .45s var(--spring),box-shadow .25s var(--ease),background-color .25s var(--ease);
}
.addon__in{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;appearance:none;}
@media (hover:hover){.addon:hover{transform:translate(-1px,-2px);box-shadow:5px 5px 0 var(--ink);}}
.addon:has(.addon__in:checked),.addon.is-on{--t-soft:var(--soft-on-marigold);background:var(--marigold);box-shadow:5px 5px 0 var(--ink);}
.addon:has(.addon__in:focus-visible){outline:3px solid var(--ink);outline-offset:4px;}
.addon__box{
  grid-area:box;display:grid;place-items:center;width:1.55rem;height:1.55rem;margin-block-start:.05rem;
  background:var(--cream);border:var(--edge);border-radius:.45rem;
  transition:background-color .2s;
}
.addon__box svg{width:1.1rem;height:1.1rem;color:var(--marigold);opacity:0;transform:scale(.4);transition:opacity .15s,transform .3s var(--ease);}
.addon:has(.addon__in:checked) .addon__box,.addon.is-on .addon__box{background:var(--ink);}
.addon:has(.addon__in:checked) .addon__box svg,.addon.is-on .addon__box svg{opacity:1;transform:none;}
.addon__t{grid-area:t;font:600 1.12rem/1.2 var(--font-display);}
.addon__price{grid-area:price;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:.1rem .35rem;text-align:end;max-width:9.5rem;}
.addon__from,.addon__per{font:600 .7rem/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t-soft);}
.addon__n{font:600 1.02rem/1 var(--font-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;unicode-bidi:isolate;white-space:nowrap;}
.addon__free{
  padding:.34rem .6rem;border:1.5px solid var(--ink);border-radius:var(--pill);
  font:600 .7rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.addon__b{grid-area:b;font-size:.9rem;line-height:1.45;color:var(--t-soft);}
/* a bundle price (2026-09-27): the normal price struck through beside it,
   and a small note saying which package makes it cheaper */
.addon__was{font:500 .82rem/1 var(--font-mono);color:var(--t-soft);text-decoration-thickness:1.5px;unicode-bidi:isolate;white-space:nowrap;}
.addon__deal{
  flex-basis:100%;display:block;margin-block-start:.3rem;text-align:inherit;
  font:600 .68rem/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--forest);
}
.addon:has(.addon__in:checked) .addon__deal,.addon.is-on .addon__deal{color:var(--ink);}
.addon__deal[hidden],.addon__was[hidden]{display:none;}
/* included with the chosen package (Data and tracking with Business or
   Booking, 2026-10-09): ticked in ink, no price, nothing to press, and the
   note under it says which package includes it */
.addon.is-incl,.addon.is-incl .addon__in{cursor:default;}
.addon.is-incl .addon__box{background:var(--ink);}
.addon.is-incl .addon__box svg{opacity:1;transform:none;}
.addon.is-incl .addon__from,.addon.is-incl .addon__n,.addon.is-incl .addon__per,.addon.is-incl .addon__was{display:none;}
@media (hover:hover){.addon.is-incl:hover{transform:none;box-shadow:3px 3px 0 var(--ink);}}
[lang="ar"] .addon__deal{font-family:var(--font-ar);font-size:.8rem;letter-spacing:0;text-transform:none;}
/* narrow cards (the grid under 46rem: phones, tablets, small laptops): the
   price goes under the title, so long titles ("Brand kit lengkap") never
   break beside a mono figure */
@container (max-width:46rem){
  .addon{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"box t" "box price" "box b";}
  .addon__price{justify-content:flex-start;text-align:start;max-width:none;}
}

/* ─── the order slip ───────────────────────────────────────────────────
   A receipt: paper a shade lighter than the card, an ink edge and the big
   hard shadow, a slight tilt the other way from the hero frame's, the seal
   stamped on its corner. Lines are name · dotted leader · price (the
   archived menu board's leaders, kept here). A perforated tear line, punched
   through at both ends, sits above the total. */
.slip{
  position:relative;
  padding:clamp(1.9rem,2.6vw,2.3rem) clamp(1.45rem,2.2vw,1.95rem) clamp(1.5rem,2.2vw,1.9rem);
  background:color-mix(in srgb,var(--cream) 55%,#fff);color:var(--ink);
  border:var(--edge);border-radius:var(--r-sm);box-shadow:var(--pop-lg);
  transform:rotate(1.1deg);transform-origin:50% 0;
  animation:frame-in 1s var(--ease) .2s both;
}
[dir="rtl"] .slip{transform:rotate(-1.1deg);}
/* beside the choices on a wide screen, the slip rides along with them
   (after the base rule, which would otherwise put position back to relative) */
@media (min-width:62rem){.slip{position:sticky;top:calc(var(--header-h) + 3.1rem);}}
.slip:focus-visible{outline:3px solid var(--ink);outline-offset:6px;}
.slip__stamp{
  position:absolute;inset-block-start:-2.7rem;inset-inline-end:-1.8rem;z-index:2;
  width:clamp(6rem,8vw,7.5rem);height:auto;rotate:14deg;pointer-events:none;
  filter:drop-shadow(0 8px 10px rgb(0 0 0/.25));
  animation:stamp-in .6s var(--ease) .95s backwards;
  animation:stamp-in .75s var(--spring) .95s backwards;
}
[dir="rtl"] .slip__stamp{rotate:-14deg;}
@keyframes stamp-in{from{opacity:0;scale:1.6;}}
.slip__t{margin:0 0 1.15rem;font:600 .78rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;}
.slip__lines{list-style:none;margin:0;padding:0;display:grid;gap:.65rem;}
.slip__line{display:flex;align-items:baseline;gap:.5rem;font-size:.97rem;line-height:1.35;}
.slip__name{min-width:0;}
.slip__dots{flex:1 1 1.25rem;min-width:1.25rem;border-block-end:2px dotted color-mix(in srgb,var(--ink) 40%,transparent);transform:translateY(-.28em);}
/* a value may wrap inside its own column (the Measurement line is words, not
   a figure), so it never squeezes the leader out and runs into the name */
.slip__val{flex:0 1 auto;min-width:0;max-width:60%;font:600 .88rem/1.25 var(--font-mono);font-variant-numeric:tabular-nums;unicode-bidi:isolate;text-align:end;}
/* a newly ticked item prints onto the slip */
.slip__line.is-new{animation:print-in .5s var(--ease) both;}
/* the normal price sits struck through just above the bundle price */
.slip__per{font:600 .8rem/1 var(--font-mono);letter-spacing:.04em;}
[lang="ar"] .slip__per{font-family:var(--font-ar);}
.slip__was{display:block;font-weight:500;font-size:.78rem;color:var(--soft-on-cream);text-decoration-thickness:1.5px;}
/* nothing picked yet: the slip says so, and there is nothing to send */
.slip__empty{font-size:.95rem;line-height:1.45;color:var(--soft-on-cream);}
/* "How long: not picked yet", under the package line until it is answered */
.slip__ask{font-style:italic;}
.order.is-empty .slip__send{opacity:.45;}
.order.is-empty .slip__send > *{pointer-events:none;box-shadow:none;}
@keyframes print-in{from{opacity:0;transform:translateY(-.55rem);clip-path:inset(0 0 100% 0);}}
.slip__tear{
  position:relative;height:0;margin-block:1.45rem 1.2rem;
  margin-inline:calc(clamp(1.45rem,2.2vw,1.95rem) * -1);
  border-block-start:2px dashed color-mix(in srgb,var(--ink) 45%,transparent);
}
/* the punched notches at both ends: the card's own ground, ringed in ink */
.slip__tear::before,.slip__tear::after{
  content:"";position:absolute;top:-.62rem;width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--bg);border:var(--edge);
}
.slip__tear::before{left:-.6rem;}
.slip__tear::after{right:-.6rem;}
.slip__total{display:flex;flex-direction:column;gap:.4rem;margin:0;}
.slip__label{font:600 .72rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft-on-cream);}
.slip__sum{font:600 clamp(1.9rem,2.7vw,2.55rem)/1.05 var(--font-mono);letter-spacing:-.035em;font-variant-numeric:tabular-nums;unicode-bidi:isolate;}
.slip__monthly{margin:.55rem 0 0;font:600 .86rem/1.3 var(--font-mono);font-variant-numeric:tabular-nums;}
.slip__fine{list-style:none;margin:1.15rem 0 1.45rem;padding:0;display:grid;gap:.4rem;font-size:.86rem;line-height:1.4;color:var(--soft-on-cream);}
.slip__fine li{position:relative;padding-inline-start:1.1rem;}
.slip__fine li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;width:.42rem;height:.42rem;border-radius:50%;background:var(--ink);}
.slip__send{display:grid;gap:.75rem;}
.slip__wa{justify-content:center;}
.slip__ico{width:1.2rem;height:1.2rem;flex:none;}
.slip__mail{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.3rem;cursor:pointer;
  background:var(--cream);color:var(--ink);
  border:var(--edge);border-radius:var(--pill);box-shadow:3px 3px 0 var(--ink);
  font:600 .95rem/1 var(--font-sans);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.slip__mail:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.slip__mail:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.slip__mail .slip__ico{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.slip__done{display:none;}
.slip__mail.is-done .slip__env{display:none;}
.slip__mail.is-done .slip__done{display:block;}
.slip__note{margin:1.05rem 0 0;font-size:.82rem;line-height:1.45;color:var(--soft-on-cream);}
.slip__said{margin:.55rem 0 0;font-size:.86rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere;}
.slip__said:empty{margin:0;}

/* ─── the section menu (2026-09-27) ──────────────────────────────────────
   The homepage dock (styles.css) with this page's parts. "Add-ons" shows
   once step 2 has come in. On a phone or tablet the running total
   (.dock__total) closes the menu and jumps to the slip; it only shows after
   the first choice. No "Your order" link: on a computer the slip is on screen. */
.dock--order .pnav__more{display:none;}
.dock--order.has-more .pnav__more{display:list-item;}
/* the total (2026-09-27, his calls): after a thin rule, "starting from"
   over the figure and a round down arrow in the menu's accent (marigold on
   the ink menu) that says it can be tapped. The chip fills with the accent
   only while pressed (and for a moment after, .is-tapped), then scrolls
   down to the slip. */
.dock__total{
  flex:none;display:inline-flex;align-items:center;gap:.55rem;min-height:2.5rem;
  margin-inline-start:.15rem;padding-block:.3rem;padding-inline:.85rem .35rem;
  color:var(--dock-fg);text-decoration:none;border-radius:0;   /* square at rest: the rule stays straight */
  border-inline-start:1.5px solid color-mix(in srgb,var(--dock-fg) 30%,transparent);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-radius .2s var(--ease);
}
.dock__total[hidden]{display:none;}
.dock__total:active,.dock__total.is-tapped{
  background:var(--dock-acc);color:var(--dock-acc-fg);border-inline-start-color:transparent;border-radius:.9rem;
}
.dock__total-t{display:grid;gap:.16rem;}
.dock__total-l{font:600 .56rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.75;white-space:nowrap;}
.dock__total-n{font:600 .88rem/1 var(--font-mono);letter-spacing:-.01em;font-variant-numeric:tabular-nums;unicode-bidi:isolate;white-space:nowrap;}
.dock__total-go{
  flex:none;width:1.45rem;height:1.45rem;padding:.26rem;border-radius:50%;
  background:var(--dock-acc);color:var(--dock-acc-fg);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  animation:total-nudge 2.4s var(--ease) 1s 2;
  transition:background-color .2s,color .2s;
}
/* pressed, the chip is the accent, so the arrow's disc turns the other way */
.dock__total:active .dock__total-go,.dock__total.is-tapped .dock__total-go{background:var(--dock-acc-fg);color:var(--dock-acc);}
@keyframes total-nudge{0%,70%,100%{transform:none;}80%{transform:translateY(2px);}90%{transform:translateY(-1px);}}
[lang="ar"] .dock__total-l{font-family:var(--font-ar);font-size:.68rem;letter-spacing:0;text-transform:none;}
[lang="ar"] .dock__total-n{font-family:"JetBrains Mono","Noto Sans Arabic",monospace;}
@media (max-width:24rem){
  .dock__total{gap:.4rem;padding-inline:.6rem .3rem;}
  .dock__total-n{font-size:.78rem;}
  .dock__total-go{width:1.25rem;height:1.25rem;padding:.2rem;}
}
@media (prefers-reduced-motion:reduce){.dock__total-go{animation:none;}}

/* ─── Arabic ─────────────────────────────────────────────────────────────
   Kufi for headings (never uppercase, never tracked), Noto Sans Arabic for
   every mono label — JetBrains Mono has no Arabic. The tier names stay
   English (his call); they simply lose the uppercase. */
[lang="ar"] .more .step > .step__t{font-family:var(--font-ar);font-size:.9rem;}
[lang="ar"] .step__t,[lang="ar"] .tier__t,[lang="ar"] .addon__t,[lang="ar"] .term__h{
  font-family:var(--font-ar-display);text-transform:none;letter-spacing:0;
}
[lang="ar"] .tier__from,[lang="ar"] .tier__pick,[lang="ar"] .tierinfo__facts,[lang="ar"] .incl__t,
[lang="ar"] .addon__from,[lang="ar"] .addon__per,[lang="ar"] .addon__free,[lang="ar"] .slip__t,
[lang="ar"] .slip__label,[lang="ar"] .tier__per,[lang="ar"] .tier__min,[lang="ar"] .term__free,[lang="ar"] .term__t{
  font-family:var(--font-ar);letter-spacing:0;text-transform:none;
}
[lang="ar"] .tier__from,[lang="ar"] .addon__from,[lang="ar"] .addon__per,[lang="ar"] .tier__per,[lang="ar"] .tier__min{font-size:.78rem;}
[lang="ar"] .term__free{font-size:.78rem;}
[lang="ar"] .tier__pick,[lang="ar"] .addon__free{font-size:.78rem;}
[lang="ar"] .tierinfo__facts,[lang="ar"] .incl__t,[lang="ar"] .slip__t,[lang="ar"] .slip__label,[lang="ar"] .term__t{font-size:.86rem;}
/* every figure keeps JetBrains Mono for its digits; ر.س, د.إ, شهريًا and the
   Measurement line take Noto Sans Arabic, never the device's own font */
[lang="ar"] .tier__n,[lang="ar"] .addon__n,[lang="ar"] .slip__sum,
[lang="ar"] .slip__val,[lang="ar"] .slip__monthly,[lang="ar"] .addon__was,[lang="ar"] .slip__was,
[lang="ar"] .term__n,[lang="ar"] .term__was{font-family:"JetBrains Mono","Noto Sans Arabic",monospace;letter-spacing:0;}

/* ─── phones ─────────────────────────────────────────────────────────── */
@media (max-width:40rem){
  .slip{transform:rotate(.6deg);}
  [dir="rtl"] .slip{transform:rotate(-.6deg);}
  .slip__stamp{inset-inline-end:-.6rem;inset-block-start:-2.4rem;width:5.6rem;}
}

@media (prefers-reduced-motion:reduce){
  .order .lead,.order__opts,.first,.slip,.slip__stamp,.slip__line.is-new,.more.is-arriving > *{animation:none;}
  .tier,.addon,.term__opt,.term__dot::after,.tier__check,.addon__box svg{transition:none;}
  @media (hover:hover){.tier:hover,.addon:hover,.term__opt:hover{transform:translateY(var(--lift,0px));}}
}