/*
 * PalliOS public landing page — styles (D-036).
 * External file so the page keeps a strict Content-Security-Policy (style-src 'self'): an inline
 * <style> block or style="" attribute is blocked by that policy, which left the page unstyled.
 * Responsive by construction — clamp() type + auto-fit minmax() grids + flex-wrap, no breakpoints.
 */

/* Layout is page-local; colour/type come from pallios.css tokens. Handoff hexes used verbatim
   where the page departs from the app palette (deep gold text, section grounds). */
:root { --pub-ink: #26322d; --pub-ink-2: #16211c; --pub-body: #4a554f; --pub-body-2: #54605b;
  --pub-line: #e7e1d0; --pub-line-2: #e4dcc7; --pub-cream: #fbf8f1; --pub-sand: #f1ebdc;
  --pub-feat-bg: #f6f1e5; --pub-gold: #c07e12; --pub-gold-text: #7a5411; --pub-kicker: #565e5b;
  --pub-link: #8f2f2b; --pub-live: #3f7a5a; --pub-soon: #b9b2a0; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--pub-cream); color: var(--pub-ink); }
/* Body links, scoped away from the button classes. `.pub a` is (0,1,1) and every button rule is
   (0,1,0), so an unscoped rule here wins the cascade and paints the button labels --pub-link — dark
   red on the dark-green ground, i.e. invisible until :hover, whose (0,2,0) beats it. */
.pub a:not(.btn-dark):not(.btn-hero):not(.btn-gold):not(.feat-card) { color: var(--pub-link); text-decoration: none; }
.pub a:not(.btn-dark):not(.btn-hero):not(.btn-gold):not(.feat-card):hover { text-decoration: underline; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 20px; padding:20px}
.kicker { font-size: 10.5px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--pub-kicker); }
.h-serif { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.14; text-wrap: pretty; }
:lang(ta) .h-serif, :lang(ta) .hero h1 { font-family: var(--font-tamil); }

/* Header — sticky, translucent, wraps at narrow widths so the Login control never leaves the row. */
.pub-head { position: sticky; top: 0; z-index: 50; background: rgba(251,248,241,0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--pub-line); }
.pub-head .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding-block: 12px; }
.pub-brand { display: flex; align-items: center; gap: 11px; min-height: 44px; color: inherit; text-decoration: none; }
.pub-brand:hover { text-decoration: none; }
/* The horizontal lockup carries its own wordmark, so the brand row only holds a height. */
.pub-brand .brandlogo { display: block; height: 38px; width: auto; flex: none; }
.pub-spacer { flex: 1; }
/* Locale switch — an icon link, not a segmented pair of labels, and not a button: switching language
   is a navigation, so it stays a link and works with JS off. Sized to the 44px touch floor. */
.pub-lang { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid #dcd5c2; border-radius: 9px; background: #fff;
  color: var(--pub-body-2); }
.pub-lang:hover { border-color: var(--pub-ink); color: var(--pub-ink); text-decoration: none; }
.pub-lang svg { display: block; }
/* Contact actions — "write a mail" / "make a call", after the fofood contact-page pattern.
   Plain links either way, so they work with no JavaScript and the OS handles mailto:/tel:. */
.contact-actions { display: inline-flex; flex: none; }
.contact-action { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; text-decoration: none; }
.contact-action svg { flex: none; }

/* Header: each action is its own control, styled exactly like the locale switch beside it, so the
   row reads as three peers — mail, call, language — rather than a group boxed off from the rest. */
.contact-actions--icon { align-items: center; gap: 6px; }
.contact-actions--icon .contact-action {
  width: 44px; height: 44px; justify-content: center; gap: 0;
  border: 1px solid #dcd5c2; border-radius: 9px; background: #fff; color: var(--pub-body-2);
}
.contact-actions--icon .contact-action:hover { border-color: var(--pub-ink); color: var(--pub-ink); }

/* Footer: the column's own type scale (.pub-foot p is 12.5px/1.62), in the page link colour, so the
   details sit with the copy around them instead of introducing a third size. Stacked, and the number
   never wraps — a phone number broken across two lines stops reading as one number. */
.contact-actions--inline { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 10px; }
.contact-actions--inline .contact-action { font-size: 12.5px; line-height: 1.62; color: var(--pub-link); }
.contact-actions--inline .contact-action:hover { text-decoration: underline; }
.contact-actions--inline .contact-action span { white-space: nowrap; }

.btn-dark { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--pub-ink); color: var(--pub-cream); border-radius: 10px; padding: 0 20px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.btn-dark:hover { background: var(--pub-ink-2); text-decoration: none; color: var(--pub-cream); }

/* Hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--pub-line); }
.hero .ring { position: absolute; top: -230px; right: -170px; opacity: 0.22; pointer-events: none; }
.hero .wrap { position: relative; padding: clamp(44px, 7vw, 64px) 20px clamp(42px, 7vw, 62px); }
.badge { display: inline-flex; align-items: center; gap: 8px; background: var(--pub-sand); border: 1px solid var(--pub-line-2); border-radius: 100px; padding: 6px 14px 6px 11px; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pub-gold); flex: none; animation: pub-pulse 2.6s ease-in-out infinite; }
.badge span:last-child { font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--pub-gold-text); }
@keyframes pub-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.hero h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.06;
  font-size: clamp(32px, 5.4vw, 60px); margin: 20px 0 0; max-width: 900px; text-wrap: pretty; }
.hero p.lead { font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.62; color: var(--pub-body); max-width: 640px; margin: 22px 0 0; text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
.btn-hero { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px;
  background: var(--pub-ink); color: var(--pub-cream); border-radius: 12px; padding: 0 26px; font-size: 15px; font-weight: 700; }
.btn-hero:hover { background: var(--pub-ink-2); text-decoration: none; color: var(--pub-cream); }
.link-alt { display: inline-flex; align-items: center; min-height: 52px; font-size: 14.5px; font-weight: 700;
  color: var(--pub-ink); border-bottom: 1.5px solid #c9c0a9; padding: 0 2px; }
.link-alt:hover { border-color: var(--pub-ink); text-decoration: none; color: var(--pub-ink); }

/* Sections */
.sec { border-bottom: 1px solid var(--pub-line); }
.sec .wrap { padding-block: clamp(44px, 7vw, 62px); }
.sec h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 12px 0 0; max-width: 760px; }
.sec .lead2 { font-size: 15px; line-height: 1.62; color: var(--pub-body); max-width: 620px; margin: 16px 0 0; text-wrap: pretty; }

/* Why — bordered grid whose 1px gaps become hairline dividers between cells. */
.adv-grid { list-style: none; margin: 38px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--pub-line);
  border: 1px solid var(--pub-line); border-radius: 16px; overflow: hidden; }
.adv-grid li { background: var(--pub-cream); padding: 24px 22px; display: flex; gap: 14px; align-items: flex-start; }
.adv-n { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--pub-sand); border: 1px solid var(--pub-line-2);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--pub-gold-text); }
.adv-grid h3 { font-size: 14.5px; font-weight: 700; margin: 5px 0 0; letter-spacing: -0.005em; }
.adv-grid p { font-size: 13px; line-height: 1.58; color: var(--pub-body-2); margin: 7px 0 0; text-wrap: pretty; }

/* Features */
.feat { background: var(--pub-feat-bg); border-bottom: 1px solid var(--pub-line); }
.feat-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 11.5px; font-weight: 600; color: var(--pub-body-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend .d { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--pub-live); }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; margin-top: 36px; }
.feat-card { background: #fff; border: 1px solid var(--pub-line); border-radius: 15px; padding: 22px; display: block; color: inherit; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
a.feat-card:hover { border-color: var(--marigold); transform: translateY(-1px); text-decoration: none; }
.feat-card .top { display: flex; align-items: flex-start; gap: 12px; }
.feat-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--pub-ink); display: flex; align-items: center; justify-content: center; }
.feat-ic svg { width: 19px; height: 19px; stroke: var(--marigold); }
.feat-card h3 { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -0.005em; text-wrap: pretty; }
.feat-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; margin-top: 6px; color: var(--pub-live); }
.feat-card p { font-size: 13px; line-height: 1.6; color: var(--pub-body-2); margin: 14px 0 0; text-wrap: pretty; }
.open-in { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--pub-link); }

/* Services — dark ground */
.svc { background: var(--pub-ink); color: var(--pub-cream); }
.svc .wrap { padding-block: clamp(44px, 7vw, 62px); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: start; }
.svc .kicker { color: #a3afa9; }
.svc h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 12px 0 0; color: var(--pub-cream); }
.svc .body { font-size: 14.5px; line-height: 1.65; color: #bcc6c1; margin: 18px 0 0; max-width: 400px; text-wrap: pretty; }
.btn-gold { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; margin-top: 24px; background: var(--marigold); color: #241c08; border-radius: 11px; padding: 0 22px; font-size: 14px; font-weight: 800; }
.btn-gold:hover { background: var(--marigold-deep); text-decoration: none; color: #241c08; }
.svc ul { list-style: none; margin: 0; padding: 0; }
.svc li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-top: 1px solid rgba(251,248,241,0.14); }
.svc li svg { flex: none; margin-top: 2px; stroke: var(--marigold); }
.svc li h3 { font-size: 14.5px; font-weight: 700; margin: 0; color: var(--pub-cream); text-wrap: pretty; }
.svc li p { font-size: 13px; line-height: 1.58; color: #a3afa9; margin: 6px 0 0; text-wrap: pretty; }

/* Who */
.who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 36px; }
.who-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.who-card .top { display: flex; align-items: center; gap: 11px; }
.who-i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pub-sand); border: 1px solid var(--pub-line-2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--pub-gold-text); }
.who-card h3 { font-size: 14.5px; font-weight: 700; margin: 0; letter-spacing: -0.005em; }
.who-card p { font-size: 13px; line-height: 1.6; color: var(--pub-body-2); margin: 13px 0 0; text-wrap: pretty; }

/* End CTA */
.end .wrap { padding-block: clamp(40px, 6vw, 54px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.end h2 { font-size: clamp(23px, 2.6vw, 30px); line-height: 1.18; margin: 0; max-width: 520px; }
.end p { font-size: 14px; line-height: 1.6; color: var(--pub-body-2); margin: 12px 0 0; max-width: 520px; text-wrap: pretty; }

/* Footer */
.pub-foot { background: var(--pub-sand); border-top: 1px solid var(--pub-line-2); }
.pub-foot .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 36px; padding: 44px 20px 34px; max-width: 1200px; margin: 0 auto; }
.pub-foot h2 { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pub-kicker); margin: 0; }
.pub-foot p { font-size: 12.5px; line-height: 1.62; color: var(--pub-body-2); margin: 14px 0 0; max-width: 280px; text-wrap: pretty; }
.pub-foot .brand { display: flex; align-items: center; gap: 10px; }
.pub-foot .brand .brandlogo { display: block; height: 30px; width: auto; flex: none; }
/* Developer credit. Sits under the footer tagline, quieter than it: the logo carries the name, so
   the row is a short label plus the mark. Height is fixed and width follows the 160:49 artwork, so a
   flex parent cannot squash it. */
.dev-by { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 11.5px;
  color: var(--pub-kicker); }
.dev-by img { display: block; height: 26px; width: auto; flex: none; opacity: 0.85; }
.dev-by a { display: inline-flex; align-items: center; min-height: 44px; }
.dev-by a:hover img { opacity: 1; }

.foot-bar { border-top: 1px solid var(--pub-line-2); }
.foot-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-block: 16px; font-size: 12px; color: var(--pub-kicker); }

/* Utilities — replace inline style="" attrs, which a strict style-src blocks. */
.u-iflex { display: inline-flex; }
.u-mw0 { min-width: 0; }
.u-flex1 { flex: 1; }
.u-grow { flex: 1; min-width: 0; }
.u-mxw-640 { max-width: 640px; }
.u-mxw-700 { max-width: 700px; }

/* Brand mark svg — was inline style="flex:none" (blocked by strict style-src). */
.brandmark { flex: none; }

/* ── Tamil optical sizing ───────────────────────────────────────────────────
   Noto Sans Tamil sets larger than Public Sans at the same px, so Tamil reads as if it is
   shouting next to the Latin. The app shell solves this by scaling the root, because its type is
   in rem — this page cannot, because the design handoff fixes every size in px and clamp(), and a
   root scale would leave all of them untouched.

   So each size is restated for Tamil at 0.92 of its designed value. Restating rather than
   applying a blanket em multiplier is deliberate: `font-size: calc(1em * s)` resolves against the
   PARENT, so it would flatten the page's carefully-set scale into "0.92 of whatever contains me"
   instead of shrinking each step proportionally. vw terms in clamp() are left alone — they are
   already viewport-relative.

   Generated from the declarations above; if a size changes there, change its pair here. */
html[lang="ta"] .kicker { font-size: 9.66px; }
html[lang="ta"] .contact-actions--inline .contact-action { font-size: 11.5px; }
html[lang="ta"] .btn-dark { font-size: 12.42px; }
html[lang="ta"] .badge span:last-child { font-size: 9.66px; }
html[lang="ta"] .hero h1 { font-size: clamp(29.44px, 5.4vw, 55.2px); }
html[lang="ta"] .hero p.lead { font-size: clamp(13.8px, 1.5vw, 16.1px); }
html[lang="ta"] .btn-hero { font-size: 13.8px; }
html[lang="ta"] .link-alt { font-size: 13.34px; }
html[lang="ta"] .sec h2 { font-size: clamp(23.92px, 3.2vw, 34.96px); }
html[lang="ta"] .sec .lead2 { font-size: 13.8px; }
html[lang="ta"] .adv-n { font-size: 13.8px; }
html[lang="ta"] .adv-grid h3 { font-size: 13.34px; }
html[lang="ta"] .adv-grid p { font-size: 11.96px; }
html[lang="ta"] .legend { font-size: 10.58px; }
html[lang="ta"] .feat-card h3 { font-size: 13.8px; }
html[lang="ta"] .feat-tag { font-size: 9.2px; }
html[lang="ta"] .feat-card p { font-size: 11.96px; }
html[lang="ta"] .open-in { font-size: 11.5px; }
html[lang="ta"] .svc h2 { font-size: clamp(23.92px, 3.2vw, 34.96px); }
html[lang="ta"] .svc .body { font-size: 13.34px; }
html[lang="ta"] .btn-gold { font-size: 12.88px; }
html[lang="ta"] .svc li h3 { font-size: 13.34px; }
html[lang="ta"] .svc li p { font-size: 11.96px; }
html[lang="ta"] .who-i { font-size: 10.12px; }
html[lang="ta"] .who-card h3 { font-size: 13.34px; }
html[lang="ta"] .who-card p { font-size: 11.96px; }
html[lang="ta"] .end h2 { font-size: clamp(21.16px, 2.6vw, 27.6px); }
html[lang="ta"] .end p { font-size: 12.88px; }
html[lang="ta"] .pub-foot h2 { font-size: 9.66px; }
html[lang="ta"] .pub-foot p { font-size: 11.5px; }
html[lang="ta"] .dev-by { font-size: 10.58px; }
html[lang="ta"] .foot-bar .wrap { font-size: 11.04px; }
@media (min-width: 821px) {
  body { padding-inline-start: 0; }
}