/* Infertiva — site-specific styles. Loaded after base.css. RTL, Arabic-first. */

/* Readex Pro, variable 400–700: one Arabic file + one Latin file, both preloaded in <head>. */
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:400 700;font-display:optional;
  src:url(https://fonts.gstatic.com/s/readexpro/v27/SLXYc1bJ7HE5YDoGPuzj_dh8uc7wUy8ZQQyX2Iw1ZEzMhQ.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:400 700;font-display:optional;
  src:url(https://fonts.gstatic.com/s/readexpro/v27/SLXYc1bJ7HE5YDoGPuzj_dh8uc7wUy8ZQQyX2IwwZEw.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- RTL + Arabic typography over base.css ---------------------- */
body{line-height:1.85}
h1,h2,h3,h4,.bigtype,.pullquote{letter-spacing:0;line-height:1.4;color:var(--olive)}
h1{font-weight:700}
h2{font-weight:700;font-size:clamp(1.6rem,1.3rem + 1.4vw,2.4rem)}
h3{font-weight:600}
ul,ol{padding-left:0;padding-inline-start:1.25em}
.skip{left:auto;right:-999px}
.skip:focus{right:var(--s-4)}
.nav .btn{margin-left:0;margin-inline-start:var(--s-2)}
.list-rows li>span:last-child{white-space:normal}
p{max-width:62ch}
.btn{font-weight:600}

/* ---- Header ----------------------------------------------------- */
:root{--header-h:76px}
.brand img{height:50px;width:auto}
.nav a{font-size:var(--fs-sm)}

/* ---- Hero: words on the start side, "where do you start?" on the end side */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(2.5rem,6vw,5rem)}
.hero-grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:960px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.hero h1{font-size:clamp(2.2rem,1.5rem + 3.2vw,3.9rem);margin-bottom:var(--s-5);max-width:13ch}
.hero .lede{font-size:var(--fs-lg);color:var(--ink-2);max-width:42ch;text-wrap:pretty}
.hero .actions{margin-top:var(--s-6)}
.hero .honest{margin-top:var(--s-6);padding-inline-start:var(--s-4);border-inline-start:3px solid var(--accent);color:var(--ink-2);font-size:var(--fs-sm);max-width:46ch}

/* The memorable element: sentences in the visitor's own voice, each a door */
.paths{background:var(--sage);border-radius:calc(var(--radius) * 1.4);padding:clamp(1.25rem,3vw,2rem)}
.paths h2{font-size:var(--fs-xl);margin-bottom:var(--s-2)}
.paths>p{color:var(--ink-2);font-size:var(--fs-sm);margin-bottom:var(--s-4)}
.paths ul{list-style:none;margin:0;padding:0}
.paths li+li{border-top:1px solid var(--line)}
.paths a{display:block;padding:var(--s-4) 0;text-decoration:none;color:var(--ink)}
.paths q{display:block;font-size:var(--fs-lg);font-weight:600;color:var(--olive);quotes:"«" "»"}
.paths span{display:block;margin-top:.15em;font-size:var(--fs-sm);color:var(--brand);font-weight:500}
.paths a:hover q{color:var(--brand)}
.paths a:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:6px}

/* ---- Sections --------------------------------------------------- */
.section-head{max-width:760px}
.section-head p{color:var(--ink-2)}
.cols{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.cols h3{font-size:var(--fs-md);margin-bottom:var(--s-3)}
.plain{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4em .6em}
.plain li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.2em .85em;font-size:var(--fs-sm)}
.section .more{margin-top:var(--s-6)}

/* Support groups as rows */
.groups li{grid-template-columns:minmax(0,1fr)}
.groups h3{font-size:var(--fs-lg)}

/* Cost */
.cost{background:var(--blush);border-radius:calc(var(--radius) * 1.6);padding:clamp(1.5rem,4vw,3rem)}
.cost dl{display:grid;gap:var(--s-5) var(--s-7);margin:var(--s-5) 0 0;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.cost dt{font-weight:600;color:var(--olive);font-size:var(--fs-lg)}
.cost dd{margin:.2em 0 0;color:var(--ink-2);max-width:62ch}
.cost .note{margin-top:var(--s-5);font-size:var(--fs-sm);color:var(--ink-2)}

/* Treatments in plain words */
.terms{display:grid;gap:var(--s-5) var(--s-7);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin:0}
.terms div{border-top:2px solid var(--accent);padding-top:var(--s-4)}
.terms dt{font-weight:600;color:var(--olive);font-size:var(--fs-lg)}
.terms dd{margin:.3em 0 .5em;color:var(--ink-2)}

/* Latest posts */
.posts{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.posts li{border-bottom:1px solid var(--line)}
.posts a{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25em var(--s-5);padding:var(--s-4) 0;text-decoration:none;color:var(--ink)}
.posts strong{font-weight:600}
.posts a:hover strong{color:var(--brand)}
.posts time{color:var(--ink-3);font-size:var(--fs-sm)}

/* Ask */
.ask{display:grid;gap:var(--s-7);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.ask{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.form select{font:inherit;padding:.75em .9em;border:1px solid var(--line);border-radius:calc(var(--radius) * .7);background:var(--surface);color:var(--ink);width:100%}
.form .check{display:flex;gap:.6em;align-items:flex-start;font-weight:400}
.form .check input{width:auto;margin-top:.45em}
.disclaimer{margin-top:var(--s-6);font-size:var(--fs-sm);color:var(--ink-2)}
.disclaimer strong{color:var(--olive)}

/* Footer */
.site-footer{background:#2C2E22}
.site-footer .brand img{background:#fff;border-radius:10px;padding:6px 10px;height:56px}
.social{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5em 1.2em}

/* The shared demo strip/bar/form notice are English: lay them out left-to-right inside this RTL page
   so their punctuation lands in the right place. Colours, size and position untouched. */
.demo-top,.demo-banner,.demo-form-notice{direction:ltr}

@media(max-width:600px){
  .hero .actions .btn{width:100%}
  .paths q{font-size:var(--fs-md)}
}