/* The sections the site's content pages share: Studio, and the language and use-case pages
   under /text-to-speech/. A section's label and heading, the buttons, Free to start, the
   questions and the language line are written once, here, so a change reaches every page.
   A page keeps only what is its own. The header, rules, closing band and footer come from
   /site-chrome.css and /home-sections.css. */

:root{
    /* One rhythm for every section: its padding, and the gap under its head. */
    --sec:clamp(56px,6vw,88px); --head-gap:clamp(28px,3.2vw,44px);
    --label:#927B5F;
}

/* A section is padded inside the column, so the column's rails run its full height. */
section.pad > .wrap{ padding-top:var(--sec); padding-bottom:var(--sec); }

/* Type */
h1,h2,h3{ font-family:var(--serif); font-weight:500; color:var(--ink); }
h2{ font-size:clamp(30px,3.06vw,44px); line-height:1.1; letter-spacing:-.04em; text-wrap:balance; }
h2 .quiet{ color:var(--muted); }
.eyebrow{ margin:0 0 18px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; color:var(--label); }
.sub{ margin-top:12px; max-width:56ch; font-size:16px; line-height:1.5; color:var(--body); text-wrap:pretty; }
.sub a{ color:var(--ink); }
.meta{ font-size:12.5px; color:var(--muted); }

/* A section's head: its label and heading, and on a wide screen the line that explains it beside them. */
.head{ display:grid; gap:14px; margin-bottom:var(--head-gap); }
.head .sub{ margin-top:0; }
@media (min-width:900px){ .head{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:end; } .head .sub{ max-width:46ch; } }

/* The homepage's button, and its outlined second. */
.btn{ display:inline-block; font-family:var(--mono); font-size:14px; font-weight:500; letter-spacing:-.01em; color:#f5f2ec; background:var(--orange); padding:11px 18px; border-radius:2px; text-decoration:none; transition:background .15s ease; }
.btn:hover{ background:var(--orange-deep); color:#f5f2ec; }
.btn.ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.btn.ghost:hover{ background:#f4f0ea; color:var(--ink); }
.cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:26px; }
/* On a phone a row's buttons are one under another at the column's full width, their words centred. */
@media (max-width:560px){ .cta-row{ gap:10px; } .cta-row > .btn{ flex:1 1 100%; text-align:center; } }

/* Ruled rows: a numbered key beside what it opens, ruled like the steps and the questions.
   On a wide screen the key stays in view while the rest is read. */
.ruled{ border-top:1px solid var(--ink); }
.ruled-row{ display:grid; gap:14px 48px; padding:clamp(28px,3.6vw,44px) 0; border-bottom:1px solid var(--line); }
@media (min-width:900px){ .ruled-row{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); } .ruled-k{ position:sticky; top:96px; align-self:start; } }
.ruled-k .n{ display:block; margin-bottom:10px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.ruled-k :is(h2,h3){ font-size:clamp(1.45rem,2.3vw,1.85rem); line-height:1.18; letter-spacing:-.03em; max-width:16em; }
.ruled-k p{ margin-top:10px; font-size:15px; line-height:1.5; color:var(--body); max-width:42ch; }
.ruled-v p{ font-size:16.5px; line-height:1.6; color:var(--body); max-width:62ch; }
.ruled-v p + p{ margin-top:14px; }
/* Rows the page numbers itself: one hidden for this visitor takes no number. */
.ruled.counted{ counter-reset:ruled; }
.ruled.counted > .ruled-row{ counter-increment:ruled; }
.ruled.counted .ruled-k .n::before{ content:counter(ruled, decimal-leading-zero); }

/* Free to start: the offer beside three ruled steps. */
.free{ display:grid; gap:var(--head-gap); }
@media (min-width:900px){ .free{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:start; } }
.free .sub{ margin-top:14px; }
.free .paid{ margin-top:14px; font-size:13px; }
.free .paid a{ color:var(--ink); }
.steps{ border-top:1px solid var(--ink); }
.steps li{ list-style:none; display:grid; grid-template-columns:40px minmax(0,1fr); gap:6px 16px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--line); }
.steps .n{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.steps h3{ font-size:clamp(19px,1.6vw,22px); line-height:1.25; letter-spacing:-.02em; }
.steps p{ grid-column:2; font-size:.95rem; line-height:1.5; color:var(--body); max-width:52ch; }
.steps p a{ color:var(--ink); }

/* Questions: on a wide screen the heading stays beside them as they scroll. A page that
   clips its sideways overflow does it on <html>; on <body> it would stop the heading. */
.faq{ display:grid; gap:var(--head-gap); }
@media (min-width:900px){ .faq{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:48px; } .faq .side{ position:sticky; top:96px; align-self:start; } }
.faq .side .sub{ margin-top:14px; }
.faq-list{ border-top:1px solid var(--ink); }
.faq-list details{ border-bottom:1px solid var(--line); }
.faq-list summary{ list-style:none; display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:18px 0; cursor:pointer; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary:hover h3{ color:var(--orange-deep); }
.faq-list h3{ font-size:clamp(18px,1.6vw,22px); line-height:1.25; letter-spacing:-.02em; transition:color .15s ease; }
.faq-list .pm{ flex:none; font-size:20px; line-height:1; color:var(--muted); transition:transform .2s ease; }
.faq-list .pm::before{ content:"+"; }
.faq-list details[open] .pm{ transform:rotate(45deg); }
.faq-list p{ padding:0 0 20px; max-width:62ch; font-size:16px; line-height:1.5; color:var(--body); }
.faq-list p a{ color:var(--ink); }

/* The language line: each language in its own script, its English name under it. */
.langs{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px 26px; font-size:1.25rem; line-height:1.4; }
.langs a{ text-decoration:none; color:var(--ink); }
.langs a:hover{ color:var(--orange); }
.langs a .meta{ display:block; font-size:12px; }
/* On a phone the languages sit in even columns, so none is left alone on a line. */
@media (max-width:560px){ .langs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 10px; } }

/* A row of links set as chips. */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.chips a{ display:inline-flex; align-items:center; padding:9px 14px; border:1px solid var(--line); border-radius:99px; background:var(--card, #fffefb); font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--ink); text-decoration:none; transition:border-color .15s ease; }
.chips a:hover{ border-color:var(--ink); color:var(--ink); }

/* India's version of a part and the international one (/site-geo.js marks <html>): India's
   until the visitor's country is known to be elsewhere. */
html.geo-intl [data-geo="in"], html:not(.geo-intl) [data-geo="intl"]{ display:none !important; }

@media (prefers-reduced-motion:reduce){ .faq-list .pm, .btn{ transition:none; } }