/* ============================================================================
   form-desktop.css — «Графит» desktop skin for form.html (≥900px only) · 2026-09-17
   Loaded LAST on form.html with media="(min-width: 900px)"; every rule also
   lives inside @media (min-width:900px). Phones/tablets (<900px) are untouched
   (form-mobile.css owns them) and nothing here may reach them.

   Idea: the whole page becomes the graphite stage (dark frame: header, intro
   rail, footer), and the form itself sits on a white card — the one reading
   surface — with a lime submit. Lime is used as light: the active step, the
   hairline accents, the CTA. Never lime text on white.

   Contrast (WCAG AA / IS 5568): on graphite ≥ rgba(255,255,255,.74) (≈ 9.8:1);
   inside the card #17191B / #54585B on white (≈ 7.3:1+); input hairlines ≥ 3:1;
   focus ring 3px white on graphite, 3px graphite inside the card.

   Technique note: the markup carries inline `style` attributes that resolve
   `var(--color-*)`, so instead of fighting them with !important this file
   RE-DEFINES those variables per zone — dark values on <body>, light values
   back on the form card. Markup, field names, order and JS are untouched.
   ========================================================================== */
@media (min-width: 900px) {

  /* ---- 0. Tokens ---------------------------------------------------------- */
  :root{
    --fd-wrap:1180px;
    --fd-gutter:clamp(28px,4.5vw,64px);
    --fd-ease:cubic-bezier(.23,1,.32,1);
    --fd-on-dark:rgba(255,255,255,.78);
    --fd-on-dark-2:rgba(255,255,255,.74);
    --fd-hair:rgba(255,255,255,.13);
    --fd-lime-line:rgba(205,245,104,.42);
  }

  /* ---- 1. The graphite stage ---------------------------------------------- */
  body{
    background-color:var(--graphite);
    background-image:
      radial-gradient(62% 40% at 50% 0%,rgba(205,245,104,.085),transparent 72%),
      /* a soft pool of light under the left rail, so the open stage below it
         reads as lit space rather than an empty hole */
      radial-gradient(34% 40% at 16% 76%,rgba(205,245,104,.06),transparent 70%);
    background-repeat:no-repeat;
    background-attachment:fixed;
    color:var(--white);
    /* dark-zone values for the legacy vars the inline styles read */
    --color-heading:#fff;
    --color-foreground:#fff;
    --color-muted-foreground:var(--fd-on-dark-2);
    --color-border:var(--fd-hair);
    --color-surface-alt:rgba(255,255,255,.045);
    --color-primary:var(--lime);
    --color-primary-dark:var(--lime);
  }
  body :focus-visible{outline:3px solid var(--white);outline-offset:2px}
  .skip-link{background:var(--lime);color:var(--graphite);font-weight:700}

  /* ---- 2. Header ----------------------------------------------------------- */
  header.border-b{border-bottom-width:1px}
  header > div.max-w-6xl{
    max-width:var(--fd-wrap);height:88px;
    padding-inline:var(--fd-gutter);
  }
  .brand-logo svg{height:36px!important}
  .brand-logo svg g{fill:var(--white)}
  .brand-logo svg g:first-child{fill:var(--lime)}
  header a[href="index.html"]{
    font-size:.9375rem;gap:.55rem;padding:10px 2px;border-radius:6px;
    transition:color 200ms var(--fd-ease);
  }
  header a[href="index.html"] svg{transition:transform 260ms var(--fd-ease)}
  @media (hover:hover) and (pointer:fine){
    header a[href="index.html"]:hover{color:var(--white)!important}
    header a[href="index.html"]:hover svg{transform:translateX(-4px)}
  }

  /* ---- 3. Page grid: stepper across the top, rail left, card right --------- */
  main#main{
    max-width:var(--fd-wrap);
    padding-inline:var(--fd-gutter);
    padding-block:clamp(52px,6.5vh,80px) clamp(64px,8vh,104px);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);
    grid-template-rows:auto auto auto 1fr;
    column-gap:clamp(48px,5.5vw,84px);
  }
  /* hairline between the rail and the card, fading down the empty stage */
  main#main::before{
    content:"";grid-column:1;grid-row:2 / -1;justify-self:end;align-self:stretch;
    width:1px;margin-right:calc(clamp(48px,5.5vw,84px) / -2);
    background:linear-gradient(180deg,var(--fd-hair),rgba(255,255,255,0) 72%);
  }
  main#main > ol{grid-column:1 / -1;grid-row:1}
  main#main > div.text-center{grid-column:1;grid-row:2;align-self:start}
  main#main > p{grid-column:1;grid-row:3;align-self:start}
  main#main > form{grid-column:2;grid-row:2 / -1;align-self:start}

  /* ---- 4. Step rail — a hairline progress line ----------------------------- */
  main#main > ol{
    justify-content:flex-start;gap:0;flex-wrap:nowrap;
    font-size:.9375rem;line-height:1.3;
    margin-bottom:clamp(48px,6vw,76px);
    padding-bottom:clamp(28px,3vw,38px);
    border-bottom:1px solid var(--fd-hair);
  }
  main#main > ol > li{gap:.7rem;white-space:nowrap}
  main#main > ol > li[aria-hidden="true"]{
    flex:1 1 auto;width:auto;height:1px;
    margin-inline:16px;background:var(--fd-hair)!important;
  }
  main#main > ol > li > span{
    width:32px;height:32px;font-size:.8125rem;font-weight:700;
    font-variant-numeric:tabular-nums;flex:none;
  }
  /* active step: graphite numeral on lime (≈ 14:1), not white-on-lime */
  main#main > ol > li > span.text-white{color:var(--graphite)}
  main#main > ol > li:not(.font-extrabold) > span{
    border-width:1px;border-color:rgba(255,255,255,.3)!important;color:rgba(255,255,255,.62)!important;
  }
  main#main > ol > li:not(.font-extrabold){color:rgba(255,255,255,.62)!important}

  /* ---- 5. Intro rail ------------------------------------------------------- */
  main#main > div.text-center{text-align:left;margin-bottom:clamp(26px,3vw,34px)}
  main#main h1{
    font-size:clamp(2.5rem,3.5vw,3.5rem);font-weight:800;
    line-height:1.02;letter-spacing:-.035em;color:var(--white);
    margin-bottom:.6em;max-width:11ch;
  }
  main#main > div.text-center > p{
    font-size:1.1875rem;line-height:1.6;max-width:26rem;color:var(--fd-on-dark);
  }
  /* the consent / data note — a quiet panel with a lime hairline */
  main#main > p.rounded-lg{
    font-size:1rem;line-height:1.65!important;
    padding:20px 22px 20px 24px;
    border:1px solid var(--fd-hair);
    border-left:2px solid var(--fd-lime-line);
    border-radius:4px 14px 14px 4px;
    max-width:27rem;margin-bottom:0;
  }
  main#main > p.rounded-lg a{
    text-decoration-thickness:1px;text-underline-offset:3px;
    transition:color 200ms var(--fd-ease);
  }
  @media (hover:hover) and (pointer:fine){
    main#main > p.rounded-lg a:hover{color:var(--white)!important;text-decoration-thickness:2px}
  }

  /* ---- 6. The card --------------------------------------------------------- */
  form.card{
    /* light zone: put the legacy vars back to their readable values */
    --color-heading:#17191B;
    --color-foreground:#17191B;
    --color-muted-foreground:#54585B;
    --color-border:rgba(23,25,27,.42);   /* input hairlines ≈ 3.3:1 */
    --color-surface-alt:var(--ivory);
    --color-primary:#17191B;
    --color-primary-dark:#17191B;
    --radius:10px;
    border:0;border-radius:24px;
    padding:clamp(32px,2.8vw,44px)!important;
    box-shadow:0 44px 90px -50px rgba(0,0,0,.85);
    color:var(--graphite);
  }
  form.card :focus-visible{outline:3px solid var(--graphite);outline-offset:2px}
  form.card.space-y-5 > :not([hidden]) ~ :not([hidden]){margin-top:1.6rem}

  /* labels, fields, help, errors */
  form.card label.block{font-size:1rem;font-weight:700;line-height:1.4;margin-bottom:.55rem;color:var(--graphite)}
  form.card input[type=text],
  form.card input[type=tel],
  form.card select{
    min-height:56px;padding:0 18px;font-size:1rem;
    background-color:var(--white);color:var(--graphite);
    border-width:1px;
    transition:border-color 180ms var(--fd-ease),box-shadow 180ms var(--fd-ease);
  }
  form.card select{
    appearance:none;-webkit-appearance:none;
    padding-right:52px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317191B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 18px center;background-size:20px 20px;
  }
  form.card select:invalid{color:#6B6E71}
  @media (hover:hover) and (pointer:fine){
    form.card input[type=text]:hover,
    form.card input[type=tel]:hover,
    form.card select:hover{border-color:var(--graphite)!important}
  }
  form.card input:focus-visible,
  form.card select:focus-visible{border-color:var(--graphite)!important;box-shadow:0 0 0 1px var(--graphite)}
  form.card [aria-invalid="true"]{border-color:var(--danger)!important;background-color:#FDF6F5!important}

  form.card p.text-xs{font-size:.9375rem;line-height:1.55;margin-top:.55rem;color:var(--color-muted-foreground)}
  /* error text keeps its class + the [hidden] gate; :not([hidden]) so a hidden
     error is never forced back on screen by this display rule */
  form.card .consent-error:not([hidden]){
    display:flex;align-items:flex-start;gap:.45rem;
    font-size:.9375rem;font-weight:600;line-height:1.5;color:var(--danger);
    margin:.6rem 0 0;
  }
  form.card .consent-error:not([hidden])::before{
    content:"";flex:none;width:1.15em;height:1.15em;margin-top:.1em;
    background-color:var(--danger);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2V7Zm0 9h2v2h-2v-2Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2V7Zm0 9h2v2h-2v-2Z'/%3E%3C/svg%3E");
    -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }

  /* ---- 7. Consent block ---------------------------------------------------- */
  form.card .consent-fieldset{
    background:var(--ivory);
    border-color:#E2DED1;
    border-radius:16px;
    padding:22px 24px 24px;
  }
  /* float pulls the legend out of the fieldset's border line and makes it a
     normal heading inside the ivory panel (the border then draws unbroken) */
  form.card .consent-fieldset legend{
    float:left;width:100%;padding:0 0 14px;margin:0 0 16px;
    font-size:1rem;font-weight:700;color:var(--graphite);
    border-bottom:1px solid #E2DED1;
  }
  form.card .consent-row{
    gap:.85rem;font-size:1rem;line-height:1.65;color:#414548;
    padding:.55rem;margin-inline:-.55rem;border-radius:10px;
    min-height:44px;cursor:pointer;
    transition:background-color 180ms var(--fd-ease);
  }
  form.card .consent-row + .consent-row{
    margin-top:.8rem;padding-top:.95rem;border-top:1px solid #E2DED1;
  }
  form.card .consent-row input[type=checkbox]{
    width:1.3rem;height:1.3rem;margin-top:.22rem;accent-color:var(--graphite);cursor:pointer;
  }
  form.card .consent-row strong{color:var(--graphite)}
  form.card .consent-row a{color:var(--graphite);text-decoration-thickness:1px;text-underline-offset:3px}
  @media (hover:hover) and (pointer:fine){
    form.card .consent-row:hover{background-color:rgba(23,25,27,.045)}
    form.card .consent-row a:hover{text-decoration-thickness:2px;text-decoration-color:var(--lime)}
  }
  form.card #rc-error{margin-top:.9rem}

  /* ---- 8. Submit ----------------------------------------------------------- */
  form.card button.btn-whatsapp{
    background:var(--lime);color:var(--graphite);
    border-color:var(--lime);
    min-height:60px;font-size:1.0625rem;font-weight:700;letter-spacing:-.005em;
    margin-top:1.9rem;
  }
  form.card button.btn-whatsapp:focus-visible{background:var(--lime);color:var(--graphite)}
  @media (hover:hover) and (pointer:fine){
    form.card button.btn-whatsapp:hover{background:var(--white);border-color:var(--white);color:var(--graphite)}
  }
  form.card > p.text-center{font-size:.9375rem;line-height:1.55}
  form.card > p.text-center + p.text-center{margin-top:.6rem}

  /* ---- 9. Footer ----------------------------------------------------------- */
  footer.border-t{
    margin-top:0;padding-block:clamp(40px,4.5vw,56px);
  }
  footer.border-t > div{max-width:var(--fd-wrap);padding-inline:var(--fd-gutter)}
  footer nav.text-xs,footer p.text-xs{font-size:.9375rem}
  footer nav a,footer nav button{transition:color 200ms var(--fd-ease)}
  @media (hover:hover) and (pointer:fine){
    footer nav a:hover,footer nav button:hover{color:var(--white)!important;text-decoration-color:var(--lime)}
  }

  /* ---- 10. Entrance — calm, staggered, transform/opacity only -------------- */
  @media (prefers-reduced-motion: no-preference){
    header > div.max-w-6xl{animation:fd-rise 700ms var(--fd-ease) both}
    main#main > ol{animation:fd-rise 750ms var(--fd-ease) 90ms both}
    main#main > div.text-center{animation:fd-rise 750ms var(--fd-ease) 170ms both}
    main#main > p.rounded-lg{animation:fd-rise 750ms var(--fd-ease) 250ms both}
    main#main > form.card{animation:fd-card 900ms var(--fd-ease) 200ms both}
  }
  @keyframes fd-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes fd-card{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
}

/* 900–1099px: the split gets cramped — one centred column instead.
   (Selectors mirror the ≥900 block's specificity so they actually win.) */
@media (min-width: 900px) and (max-width: 1099px) {
  main#main{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
  }
  main#main::before{display:none}
  main#main > ol{grid-column:1;grid-row:1}
  main#main > div.text-center,
  main#main > p.rounded-lg,
  main#main > form.card{
    grid-column:1;justify-self:center;width:100%;max-width:40rem;
  }
  main#main > div.text-center{grid-row:2}
  main#main > p.rounded-lg{grid-row:3;margin-bottom:clamp(26px,3vw,34px)}
  main#main > form.card{grid-row:4}
  main#main h1{max-width:none}
  main#main > div.text-center > p{max-width:36rem}
  /* a touch tighter so the 5-step rail never overflows */
  main#main > ol{font-size:.875rem}
  main#main > ol > li{gap:.6rem}
  main#main > ol > li[aria-hidden="true"]{margin-inline:12px}
  main#main > ol > li > span{width:30px;height:30px}
}