/* Intake form (form.html) — phones only (linked with media="(max-width: 899px)"), live since 2026-09-17, approved by George.
   Larger screens keep the original style.css + inline <style> + form-tw.css (scoped with media="(min-width: 900px)"). */
/* ============================================================================
   form-v2.css — intake form (form.html), DEMO v1 · 2026-09-17
   Replaces style.css + the inline <style> + form-tw.css for this page only.
   Self-contained. Tokens = site.css / funnel.css (design-system MASTER.md).
   Phones (≤899px): «Графит» top zone (header + stepper + title + notice on
   graphite), then the form as a white card on ivory.
   Desktop (≥900px): the light funnel look (ivory page, white card).
   The markup is unchanged: its Tailwind-like classes and inline
   style="…var(--color-*)…" hooks are styled here, by structure.
   ========================================================================== */

/* ---- 1. Tokens ------------------------------------------------------------ */
:root{
  --graphite:#17191B;
  --graphite-90:#2A2D30;
  --lime:#CDF568;
  --lime-ink:#3A4A12;
  --ivory:#F5F3EC;
  --ivory-dim:#ECE9DE;
  --white:#FFFFFF;
  --ink-70:#4A4D50;
  --ink-45:#63666A;
  --line:#D6D2C4;
  --field-line:#85888C;        /* input outline on white: 3.55:1 (non-text ≥3:1) */
  --danger:#B4231C;
  --danger-tint:#FDF3F2;

  --on-dark:rgba(255,255,255,.78);
  --on-dark-2:rgba(255,255,255,.70);
  --hair-dark:rgba(255,255,255,.10);

  --font:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.2,.6,.2,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --dur:180ms;
  --gutter:16px;

  /* legacy hooks used by inline styles in the markup (light values) */
  --color-border:var(--ivory-dim);
  --color-muted-foreground:var(--ink-70);
  --color-heading:var(--graphite);
  --color-primary:var(--graphite);
  --color-primary-dark:var(--graphite);
  --color-surface-alt:var(--ivory-dim);
  --radius:12px;
}

/* ---- 2. Base -------------------------------------------------------------- */
:root{color-scheme:light}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
a,button,label,input,select{touch-action:manipulation}
body{
  font-family:var(--font);background:var(--ivory);color:var(--graphite);
  font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:100svh;display:flex;flex-direction:column;overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer}
::selection{background:var(--lime);color:var(--lime-ink)}
:focus-visible{outline:3px solid var(--graphite);outline-offset:2px;border-radius:2px}
[hidden]{display:none!important}
h1{font-weight:800;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
strong{font-weight:600}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--graphite);color:var(--white);padding:12px 20px;border-radius:0 0 6px 0}
.skip-link:focus{left:0}

/* ---- 3. Header ------------------------------------------------------------ */
body>header{border-bottom:1px solid var(--ivory-dim)}
body>header>div{
  width:100%;max-width:1200px;margin-inline:auto;min-height:60px;
  padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
body>header .brand-logo{min-height:44px}
body>header .brand-logo svg{height:28px!important}
/* «На главную» */
body>header a[href="index.html"]{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:.9375rem;font-weight:600;line-height:1.2;text-decoration:none;
}
body>header a[href="index.html"] svg{width:16px;height:16px;flex:none}

/* ---- 4. Page column ------------------------------------------------------- */
#main{
  flex:1 0 auto;width:100%;max-width:calc(560px + 2 * var(--gutter));margin-inline:auto;
  padding:0 max(var(--gutter),env(safe-area-inset-right,0px)) 48px max(var(--gutter),env(safe-area-inset-left,0px));
}

/* ---- 5. Stepper (5 steps, same markup) ------------------------------------ */
#main>ol{
  position:relative;list-style:none;
  display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;column-gap:6px;
  font-size:.8125rem;line-height:1.25;font-weight:500;
}
#main>ol>li[aria-hidden="true"]{display:none}
#main>ol>li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;white-space:nowrap}
#main>ol>li:first-child{font-weight:700}
/* the track behind the dots */
#main>ol::before{
  content:"";position:absolute;left:22px;right:22px;height:1px;
  top:calc(var(--ol-pt,0px) + 14px);background:var(--line);
}
#main>ol>li>span{
  position:relative;width:28px;height:28px;border-radius:999px;
  display:grid;place-items:center;
  font-size:.8125rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  border:1.5px solid var(--line);background:var(--white);
}
#main>ol>li:first-child>span{border-color:var(--graphite);color:var(--lime)}

/* ---- 6. Title + notice ---------------------------------------------------- */
#main>.text-center{text-align:center}
#main>.text-center>h1{font-size:clamp(1.875rem,1.3rem + 2.4vw,2.5rem);margin-bottom:10px}
#main>.text-center>p{font-size:1.0625rem;line-height:1.5;max-width:34ch;margin-inline:auto}
#main>p.text-sm{
  font-size:.9375rem;line-height:1.55!important;padding:14px 16px;
  border-radius:14px!important;
}
#main>p.text-sm a{text-underline-offset:3px}

/* ---- 7. Form card --------------------------------------------------------- */
#main>form{
  position:relative;z-index:1;
  background:var(--white);border:1px solid var(--ivory-dim);border-radius:20px;padding:20px;
  box-shadow:0 1px 0 var(--ivory-dim),0 24px 48px -32px rgba(23,25,27,.35);
}
#main>form>*+*{margin-top:24px}
#main>form>input[type="hidden"]{display:none}
#main>form>input[type="hidden"]+:not(input){margin-top:0}

/* labels */
#main>form label.block{display:block;font-size:1rem;font-weight:600;line-height:1.35;color:var(--graphite);margin-bottom:8px}

/* text inputs + selects (inline border-color/radius are overridden on purpose) */
#main>form input:is([type="text"],[type="tel"]),
#main>form select{
  display:block;width:100%;min-height:52px;padding:12px 16px;
  font:inherit;font-size:1.0625rem;line-height:1.3;color:var(--graphite);
  background-color:var(--white);
  border:1.5px solid var(--field-line)!important;border-radius:12px!important;
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
#main>form input::placeholder{color:var(--ink-45);opacity:1}
#main>form select{
  padding-right:48px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2317191B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:20px 20px;
}
/* «Выберите класс» still selected: read as a prompt, not a value */
#main>form select:has(option[value=""]:checked){color:var(--ink-45)}
#main>form select option{color:var(--graphite)}
@media(hover:hover) and (pointer:fine){
  #main>form input:is([type="text"],[type="tel"]):hover,
  #main>form select:hover{border-color:var(--graphite)!important}
}
#main>form input:is([type="text"],[type="tel"]):focus-visible,
#main>form select:focus-visible,
#main>form input:is([type="text"],[type="tel"]):focus,
#main>form select:focus{
  outline:3px solid var(--graphite);outline-offset:2px;border-color:var(--graphite)!important;border-radius:12px;
}

/* helper text under a field */
#main>form p.text-xs.mt-1{margin-top:8px;font-size:.875rem;line-height:1.5}

/* errors: danger text with a mark (colour is not the only cue) */
#main>form .consent-error{
  display:flex;gap:8px;align-items:flex-start;margin-top:8px;
  font-size:.875rem;line-height:1.45;font-weight:600;color:var(--danger);
}
#main>form .consent-error::before{
  content:"!";flex:none;width:18px;height:18px;margin-top:1px;border-radius:999px;
  display:grid;place-items:center;background:var(--danger);color:var(--white);
  font-size:.75rem;font-weight:800;line-height:1;
}
#main>form [aria-invalid="true"]:is(input[type="text"],input[type="tel"],select){
  border-color:var(--danger)!important;background-color:var(--danger-tint);
  box-shadow:inset 0 0 0 1px var(--danger);
}
#main>form [aria-invalid="true"]:is(input[type="text"],input[type="tel"],select):focus{outline-color:var(--danger)}

/* ---- 8. Consent ----------------------------------------------------------- */
.consent-fieldset{border:0;border-radius:14px;background:var(--ivory);padding:16px;min-width:0}
.consent-fieldset legend{
  float:left;width:100%;padding:0;margin-bottom:12px;
  font-size:1rem;font-weight:700;line-height:1.3;color:var(--graphite);
}
.consent-fieldset legend+*{clear:both}
.consent-row{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-size:.9375rem;line-height:1.55;color:var(--ink-70);
}
.consent-row+.consent-row,
.consent-fieldset .consent-error+.consent-row{margin-top:14px;padding-top:14px;border-top:1px solid rgba(23,25,27,.1)}
.consent-row strong{color:var(--graphite)}
#rc-name-out{color:var(--graphite);font-weight:700}
.consent-row a{color:var(--graphite);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media(hover:hover) and (pointer:fine){.consent-row a:hover{text-decoration-thickness:2px}}
/* custom checkbox, 24px, graphite fill + lime tick */
.consent-row input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;flex:none;
  width:24px;height:24px;margin-top:0;border-radius:7px;cursor:pointer;
  background:var(--white) center/16px 16px no-repeat;border:1.5px solid var(--field-line);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.consent-row input[type="checkbox"]:checked{
  background-color:var(--graphite);border-color:var(--graphite);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CDF568' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
}
.consent-row input[type="checkbox"]:focus-visible{outline:3px solid var(--graphite);outline-offset:2px;border-radius:7px}
.consent-row input[type="checkbox"][aria-invalid="true"]{border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
@media(hover:hover) and (pointer:fine){.consent-row:hover input[type="checkbox"]:not(:checked){border-color:var(--graphite)}}
.consent-fieldset .consent-error{margin-top:10px;padding-left:36px}

/* ---- 9. Submit + notes ---------------------------------------------------- */
#main>form .btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:56px;padding:14px 24px;border-radius:999px;border:0;
  font-size:1.0625rem;font-weight:700;line-height:1.2;letter-spacing:-.005em;
  -webkit-user-select:none;user-select:none;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),transform 150ms var(--ease-out),box-shadow var(--dur) var(--ease);
}
#main>form .btn svg{width:22px;height:22px;flex:none}
#main>form .btn:active{transform:scale(.98)}
#main>form .btn:focus-visible{outline:3px solid var(--graphite);outline-offset:3px;border-radius:999px}
#main>form>p.text-center{margin-top:12px;font-size:.875rem;line-height:1.5;text-align:center}
#main>form>.btn+p.text-center{margin-top:14px}
#main>form>p.text-center a{display:inline-block;padding-block:10px;margin-block:-10px;text-underline-offset:3px;white-space:nowrap}

/* ---- 10. Footer ----------------------------------------------------------- */
body>footer{border-top:1px solid var(--ivory-dim);padding:24px 0 calc(24px + env(safe-area-inset-bottom,0px))}
body>footer>div{max-width:calc(560px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);text-align:center}
body>footer nav{font-size:.875rem;line-height:1.5;margin-bottom:8px}
body>footer nav :is(a,button){display:inline-block;padding:8px 2px;color:var(--ink-70)!important}
body>footer p{font-size:.875rem;line-height:1.5}
@media(hover:hover) and (pointer:fine){body>footer nav :is(a,button):hover{color:var(--graphite)!important}}

/* ===========================================================================
   PHONES ≤899px — «Графит» top zone
   ========================================================================== */
@media (max-width:899px){
  /* header: graphite, white wordmark, lime mark (= landing skin) */
  body>header{background:var(--graphite);border-bottom:1px solid var(--hair-dark);--color-border:var(--hair-dark)}
  body>header .brand-logo svg g{fill:var(--white)}
  body>header .brand-logo svg g:first-child{fill:var(--lime)}
  body>header :focus-visible{outline-color:var(--white)}
  /* DECISION FOR OWNER: «На главную» hidden on phones (logo still links to /) */
  body>header a[href="index.html"]{display:none}

  /* the dark zone: stepper, title, notice. Each block paints graphite
     full-bleed with a clipped spread shadow (no layout overflow). */
  #main>ol,#main>.text-center,#main>p.text-sm{
    --color-border:rgba(255,255,255,.24);
    --color-muted-foreground:var(--on-dark);
    --color-heading:var(--white);
    --color-primary:var(--lime);
    --color-primary-dark:var(--white);
    --color-surface-alt:rgba(255,255,255,.06);
    box-shadow:0 0 0 100vmax var(--graphite);
    clip-path:inset(-1px -100vmax);
  }
  #main>ol,#main>.text-center{background:var(--graphite)}
  #main :is(ol,.text-center,p.text-sm) :focus-visible{outline-color:var(--white)}

  #main>ol{--ol-pt:22px;padding:22px 0 26px;margin:0!important;color:var(--on-dark-2)!important}
  #main>ol::before{background:rgba(255,255,255,.18)}
  #main>ol>li>span{background:var(--graphite);border-color:rgba(255,255,255,.34)!important;color:var(--on-dark)!important}
  #main>ol>li:first-child>span{background:var(--lime)!important;border-color:var(--lime)!important;color:var(--graphite)!important;
    box-shadow:0 0 0 4px rgba(205,245,104,.16)}

  /* stepper hidden on phones (2026-09-30): the title block takes over the top padding */
  #main>ol{display:none}
  #main>.text-center{margin:0!important;padding-top:22px;padding-bottom:22px}
  #main>.text-center>h1{color:var(--white);font-size:clamp(1.875rem,8.4vw,2.25rem)}
  #main>.text-center>p{color:var(--on-dark)!important}

  #main>p.text-sm{
    margin-bottom:0!important;color:var(--on-dark-2)!important;
    /* the page behind is ivory: paint graphite under the translucent panel */
    background:linear-gradient(var(--color-surface-alt),var(--color-surface-alt)) var(--graphite)!important;
    border:1px solid var(--hair-dark);
    /* graphite continues 40px below the notice; the card rises over it */
    clip-path:inset(-1px -100vmax -40px);
  }
  #main>p.text-sm a{color:var(--white)!important}

  /* collapsible legal note (toggle button + .is-collapsed are added by JS only) */
  #main>p.text-sm.is-collapsed{display:none}
  #main>.legal-toggle{
    --color-border:rgba(255,255,255,.24);
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;min-height:44px;margin:0;padding:10px 0;border:0;border-radius:0;
    background:var(--graphite);color:var(--on-dark-2);
    font:inherit;font-size:.9375rem;line-height:1.4;text-align:start;
    box-shadow:0 0 0 100vmax var(--graphite);
    clip-path:inset(-1px -100vmax 0);
  }
  #main>.legal-toggle[aria-expanded="false"]{clip-path:inset(-1px -100vmax -40px)}
  #main>.legal-toggle__more,#main>.legal-toggle .legal-toggle__more{color:var(--white);text-decoration:underline;text-underline-offset:3px}
  #main>.legal-toggle::after{
    content:"";flex:none;width:8px;height:8px;margin-inline-end:4px;
    border-right:2px solid var(--on-dark);border-bottom:2px solid var(--on-dark);
    transform:rotate(45deg) translateY(-2px);transition:transform var(--dur) var(--ease);
  }
  #main>.legal-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
  #main>.legal-toggle:focus-visible{outline:3px solid var(--white);outline-offset:-3px}
  #main>form{margin-top:16px;border-color:transparent;box-shadow:0 24px 48px -28px rgba(23,25,27,.45)}

  /* submit: lime pill with graphite label (= landing CTAs) */
  #main>form .btn{
    background:var(--lime);color:var(--graphite);
    box-shadow:inset 0 0 0 1px rgba(23,25,27,.14),0 12px 26px -14px rgba(58,74,18,.55);
  }
  #main>form .btn:active{background:#C2EA5B}
}
/* the consent text carries long no-break phrases («Правилами и условиями
   участия» ≈ 238px at 15px): on narrow phones the fieldset becomes a band
   across the card so the text column is wide enough */
@media (max-width:479px){
  .consent-fieldset{margin-inline:-20px;border-radius:0;padding:16px 20px}
}
@media (max-width:359px){
  :root{--gutter:12px}
  #main>ol{font-size:.75rem}
  #main>form{padding:16px}
  .consent-fieldset{margin-inline:-16px;padding:14px 12px}
  .consent-row{font-size:.875rem;gap:10px}
  .consent-fieldset .consent-error{padding-left:34px}
}

/* ===========================================================================
   DESKTOP ≥900px — light funnel look
   ========================================================================== */
@media (min-width:900px){
  body>header{background:color-mix(in srgb,var(--ivory) 92%,transparent)}
  body>header>div{min-height:72px;padding-inline:clamp(1.25rem,4vw,2.5rem)}
  body>header .brand-logo svg{height:32px!important}
  body>header a[href="index.html"]{color:var(--ink-70)!important;border-radius:999px;padding:0 4px}
  @media(hover:hover) and (pointer:fine){body>header a[href="index.html"]:hover{color:var(--graphite)!important}}

  #main{padding-top:48px;padding-bottom:64px}
  #main>ol{--ol-pt:0px;margin-bottom:36px!important;font-size:.875rem;max-width:460px;margin-inline:auto}
  #main>ol>li>span{color:var(--ink-70)!important;border-color:var(--line)!important}
  #main>ol>li:first-child>span{background:var(--graphite)!important;border-color:var(--graphite)!important;color:var(--lime)!important}
  #main>.text-center{margin-bottom:24px!important}
  #main>.text-center>p{max-width:44ch}
  #main>p.text-sm{margin-bottom:24px!important;background:var(--ivory-dim)!important}
  #main>form{padding:32px}

  #main>form .btn{background:var(--graphite);color:var(--white)}
  #main>form .btn:focus-visible{background:var(--lime);color:var(--lime-ink)}
  @media(hover:hover) and (pointer:fine){#main>form .btn:hover{background:var(--lime);color:var(--lime-ink)}}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  #main>form .btn:active{transform:none}
}

/* Phones: the page (html) background is graphite, so iOS paints the status-bar
   strip above the dark header in graphite too — theme-color alone doesn't cover it.
   body keeps its own ivory background, so content is unaffected. */
@media (max-width: 899px){html{background:#17191B}}