/* Connect Me website: what the server-rendered site adds to the design export's
   styles.css (kept untouched beside it). Same tokens, same type, same radii. */

/* Announcement bar, above the header (Website › Contact & links in the panel). */
.site-announcement{background:var(--navy);color:#fff;font-size:.86rem;font-weight:600}
.site-announcement p{margin:0;padding:.7rem 0;color:#dce6f5;text-align:center}
.site-announcement a{color:#fff;text-decoration:underline;text-underline-offset:3px;margin-left:.35rem}

/* Store badges are links once a store listing exists. */
a.store-badge{transition:transform .2s,box-shadow .2s}
a.store-badge:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(11,21,38,.2)}
a.store-badge:focus-visible{outline:3px solid #f3ab3b;outline-offset:4px}

/* Links inside editable text. */
.faq-list details p a,.rich a,.soft-card p a,.legal-callout a,.deletion-more a,.form-actions a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.contact-panel .lead a{color:#fff;text-decoration:underline;text-decoration-color:#739ff4;text-underline-offset:4px;overflow-wrap:anywhere}

/* Footer with a fourth column for social links. */
.footer-grid.has-social{grid-template-columns:1.35fr 1fr 1fr 1fr}

/* Support: the app's FAQ, grouped by topic. */
.faq-group+.faq-group{margin-top:2.6rem}
.faq-group-title{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:800;margin-bottom:.4rem}

/* Support: phone and address beside the email. */
.contact-lines{margin:1.2rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.92rem}
.contact-lines dt{color:#a7bbd7;font-weight:700}.contact-lines dd{margin:0;color:#fff}.contact-lines a{color:#fff;text-decoration:underline;text-decoration-color:#739ff4;text-underline-offset:4px}

/* Support: the contact form. */
.form-panel{margin-top:1rem;border:1px solid var(--line);border-radius:32px;padding:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:start;scroll-margin-top:2rem}
.form-panel h2{font-size:clamp(1.9rem,3vw,2.8rem)}
.contact-form{display:grid;gap:1.1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:grid;gap:.45rem;min-width:0}
.field span{font-size:.82rem;font-weight:700;color:var(--navy);letter-spacing:.01em}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid #cbdcf3;border-radius:14px;padding:.8rem 1rem;line-height:1.5}
.field textarea{resize:vertical;min-height:9rem}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--blue) 50%),linear-gradient(135deg,var(--blue) 50%,transparent 50%);background-position:calc(100% - 1.25rem) 1.3rem,calc(100% - .9rem) 1.3rem;background-size:.35rem .35rem;background-repeat:no-repeat;padding-right:2.5rem}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.contact-form button:focus-visible{outline:3px solid #f3ab3b;outline-offset:3px}
.field [aria-invalid=true]{border-color:#c43d3d}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:.3rem}
.form-actions .button{cursor:pointer}
.form-actions small{color:var(--muted);font-size:.82rem;max-width:320px;line-height:1.55}
.form-status{border-radius:20px;padding:1.4rem 1.6rem;margin-bottom:1.4rem}
.form-status strong{display:block;color:var(--navy);margin-bottom:.35rem}
.form-status p,.form-status ul{margin:0;font-size:.95rem}
.form-status ul{padding-left:1.2rem;color:#7a2424}
.form-status.is-success{background:#eaf6ef;border:1px solid #b9e0c8}
.form-status.is-success .feature-link{margin-top:1rem}
.form-status.is-error{background:#fdf0f0;border:1px solid #f0c4c4}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Legal pages: the policy's short version, and its versions. */
.legal-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1rem}
.legal-summary ul{margin:.2rem 0 0;padding-left:1.1rem;font-size:.9rem}
.legal-summary li{margin:.35rem 0}
.legal-callout{margin:1rem 0}.legal-callout p{margin:0;color:var(--ink);font-size:.95rem}
.legal-versions{margin-top:2rem}.legal-versions h3{font-size:1rem}.legal-versions ul{list-style:none;padding:0;font-size:.9rem}

/* Delete account. */
.steps-grid{grid-template-columns:repeat(3,1fr)}
.steps-grid .support-card p:last-child{color:var(--ink);font-weight:600}
.deletion-split{align-items:stretch;gap:1rem}
.plain-list{padding-left:1.15rem;margin:0;color:var(--muted)}.plain-list li{margin:.55rem 0}
.deletion-note{margin-top:1rem}.deletion-note p{margin:0;font-size:.95rem}
.deletion-more{margin:1.4rem 0 0;font-size:.92rem}

@media(max-width:900px){.form-panel{gap:2rem}.footer-grid.has-social{grid-template-columns:1fr 1fr 1fr}.footer-grid.has-social>div:first-child{grid-column:1/-1}}
@media(max-width:720px){.form-panel{grid-template-columns:1fr;gap:1.5rem;padding:2rem 1.4rem}.field-row{grid-template-columns:1fr}.steps-grid{grid-template-columns:1fr}.footer-grid.has-social{grid-template-columns:1fr 1fr}}
/* One store badge (the App Store link not set yet): keep its natural width on phones. */
@media(max-width:480px){.store-row .store-badge:only-child{flex:0 1 auto;min-width:188px}}

/* Features page: bigger icons (Adil, 6 Oct 2026). */
.feature-row .icon{width:200px;height:200px;border-radius:22px}
.feature-row .icon svg{width:100px;height:100px}
@media(max-width:720px){.feature-row .icon{width:64px;height:64px;border-radius:18px}.feature-row .icon svg{width:32px;height:32px}}

/* Legal pages: "On this page" marks the section being read (toc.js). */
.legal-sidebar a{transition:color .15s,box-shadow .15s}
.legal-sidebar a.is-active{color:var(--blue);font-weight:700}
@media(min-width:721px){.legal-sidebar a{padding-left:.85rem}.legal-sidebar a.is-active{box-shadow:inset 2px 0 0 var(--blue)}}