/* ============================================================
   aram.css — rMAR ARAM community platform page (REDESIGN)
   ------------------------------------------------------------
   Header and footer are the shared site-wide components and are
   NOT touched by this file — same rule as the original.

   WHY THIS LOOKS DIFFERENT FROM THE REST OF THE SITE:
   Every other rMAR division (eeVee, Complex, Porkudil) is a tech
   or property product, and reads correctly in the site's cool
   navy-tech register. Aram is the odd one out on purpose: it's a
   private social space for families and neighbourhoods, named
   after the Tamil word "aram" (virtue/right conduct — the first
   of the three pursuits in the Thirukkural, closely tied to
   everyday kindness toward one's neighbours). The brand's own
   product mark (images/rMARaram.png — hands, a heart, red ring)
   already carries that warmth. This page leans into it instead
   of forcing the app into the same navy SaaS shell as the mobility
   and real-estate pages:
     - Palette shifts from cool navy/sky to warm terracotta
       (the site's OWN --color-accent, already brand-correct —
       see images/rMARaram.png) + a paper/turmeric warmth.
     - Headings switch to Fraunces, a warm-curved serif, scoped
       to `.aram-page main` only — the header/footer keep the
       site-wide Plus Jakarta Sans untouched.
     - The phone-mockup UI pattern (borrowed from generic app
       landing pages) is replaced by a physical-world vocabulary
       that actually matches what this product is for: a
       neighbourhood noticeboard. Feed items are pinned notices,
       not chat screenshots; the hero mockup is gone in favour of
       a hand-drawn kolam motif — the geometric threshold pattern
       drawn each morning at a Tamil doorway to welcome people in,
       which is a fairly direct visual echo of "welcoming people
       into your community."
   All numeric stats and sample posts remain INVENTED placeholder
   content (same status as the previous version of this file) —
   flagged here and in the page's HTML comments.
   ============================================================ */

/* ---------------- page-scoped tokens ----------------
   Layered on top of base.css, not replacing it: --color-primary /
   --color-accent are untouched so header, footer and buttons stay
   exactly as they are everywhere else on the site. */
.aram-page main {
  overflow-x: clip;
  --font-heading: 'Fraunces', 'Plus Jakarta Sans', serif; /* scoped to <main> only */

  --ar-clay: var(--color-accent);         /* #A71501 — already brand-correct, see logo */
  --ar-clay-deep: var(--color-accent-hover);
  --ar-turmeric: #D89A2E;                 /* decorative fills / rings / dots ONLY — see contrast note below */
  --ar-turmeric-text: #8A6115;            /* darkened for use as actual text (5.5:1 on paper) */
  --ar-turmeric-soft: #FBF0DC;
  --ar-clay-soft: #F2DCD9;               /* light tint of --ar-clay, ~15% mix into white */
  --ar-leaf: #3F6B4C;                     /* 6.1:1 on paper — safe for small text/icons too */
  --ar-paper: #FFFCF6;
  --ar-paper-line: #EADFC8;
  --ar-ink: #2B1B12;                      /* warm near-black, replaces navy for this page's headings */
  --ar-ink-muted: var(--color-text-muted);
  --ar-r-sm: 8px;
  --ar-r-md: 16px;
  --ar-r-lg: 26px;
  --ar-elev: 0 18px 40px -22px rgba(43, 27, 18, 0.38);
}
/* NOTE ON --ar-turmeric: #D89A2E measures ~2.4:1 on the paper background —
   fine for large decorative fills, rings and dots, but NOT compliant as a
   text colour at any size used on this page. Anywhere turmeric carries
   actual reading text, --ar-turmeric-text is used instead. */

.aram-page h1, .aram-page h2, .aram-page h3, .aram-page h4 { color: var(--ar-ink); }

/* ---------------- shared section shell ---------------- */
.ar-sec { padding: clamp(2.75rem, 5vw, 4.5rem) 0; }
.ar-sec--tint { background: var(--ar-clay-soft); }
.ar-head { text-align: center; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.ar-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ar-clay); margin: 0 0 0.6rem;
}
.ar-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--ar-clay); opacity: 0.55; }
.ar-title { font-size: clamp(1.55rem, 2.7vw, 2.2rem); font-weight: 700; letter-spacing: -0.01em; color: var(--ar-ink); margin: 0 0 0.6rem; }
.ar-sub { font-size: 0.93rem; color: var(--ar-ink-muted); margin: 0; max-width: 54ch; margin-inline: auto; line-height: 1.6; }

/* dotted "kolam" rule — a lightweight nod to the hero motif used as a
   section-level divider so the full SVG isn't repeated everywhere. */
.ar-kolam-rule {
  height: 8px; margin: 0 auto 2rem; width: min(220px, 60%);
  background-image: radial-gradient(circle, var(--ar-clay) 1.6px, transparent 2px);
  background-size: 20px 8px; background-repeat: repeat-x; background-position: center;
  opacity: 0.5;
}

/* ---------------- badge / meaning strip ---------------- */
.ar-badge {
  display: inline-flex; align-items: center; gap: 0.7rem; background: var(--ar-paper);
  border: 1px solid var(--ar-paper-line); border-radius: 999px; padding: 0.45rem 1rem 0.45rem 0.5rem;
  margin-bottom: 1.1rem; box-shadow: 0 6px 18px -14px rgba(43,27,18,0.4);
}
.ar-badge-mark {
  font-family: 'Noto Sans Tamil', 'Fraunces', sans-serif; /* Fraunces/Plus Jakarta Sans have no Tamil glyphs */
  font-size: 0.85rem; font-weight: 700; line-height: 1; color: var(--ar-clay);
  background: var(--ar-turmeric-soft); border-radius: 50%; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; flex: none;
  overflow: hidden; /* hard safety net if any fallback font still runs wide */
}
.ar-badge-text { font-size: 0.74rem; color: var(--ar-ink-muted); line-height: 1.4; max-width: 34ch; }

/* ---------------- hero ---------------- */
/* The shared header (.navbar-premium) is already transparent at rest by
   design — see css/header.css — so it's meant to let whatever is behind it
   show through. On this page that "whatever" was the plain body background
   (#F8FAFD, cool pale blue) for the 92px the fixed header occupies, because
   .ar-hero's own box only started below that reserved space — producing a
   visible seam between a cool header strip and the warm hero directly under
   it. Pulling the hero's box up by exactly the header's reserved height
   (and padding it back down by the same amount) lets its REAL gradient — not
   an approximated flat colour — paint straight through behind the header,
   so header and hero read as one continuous surface. 92px is used literally
   rather than var(--header-h) because base.css's own body.has-header rule
   (loaded after header.css) always resolves to 92px regardless of viewport,
   overriding header.css's intended 78px on mobile — matching that actual
   behaviour keeps this pixel-exact rather than reintroducing a gap. */
.ar-hero {
  background: linear-gradient(160deg, var(--ar-turmeric-soft) 0%, var(--ar-clay-soft) 45%, var(--ar-paper) 100%);
  margin-top: -92px;
  padding-top: calc(92px + clamp(2.25rem, 4.5vw, 3.75rem));
  padding-bottom: clamp(2.75rem, 5vw, 4.25rem);
  overflow: hidden;
}
.ar-hero-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }

.ar-hero-title { font-family: var(--font-heading); font-size: clamp(2.1rem, 3.9vw, 3.1rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; color: var(--ar-ink); margin: 0 0 1rem; }
.ar-hero-title em { font-style: italic; color: var(--ar-clay); display: block; }
.ar-hero-lede { font-size: 0.96rem; font-weight: 700; color: var(--ar-ink); margin: 0 0 0.6rem; max-width: 40ch; line-height: 1.4; }
.ar-hero-copy { font-size: 0.92rem; line-height: 1.65; color: var(--ar-ink-muted); margin: 0 0 1.5rem; max-width: 42ch; }

.ar-hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.75rem; }

.ar-hero-stats { display: flex; flex-wrap: wrap; gap: 1.75rem; padding-top: 1.25rem; border-top: 1px dashed var(--ar-paper-line); }
.ar-hero-stat b { font-family: var(--font-heading); display: block; font-size: 1.4rem; font-weight: 600; color: var(--ar-clay); line-height: 1.15; }
.ar-hero-stat span { font-size: 0.7rem; color: var(--ar-ink-muted); letter-spacing: 0.03em; }

/* hero visual: kolam motif + pinned notes, replacing the phone mockup */
.ar-hero-visual { position: relative; min-height: 400px; display: grid; place-items: center; }
.ar-kolam-wrap { width: min(360px, 88%); aspect-ratio: 1; opacity: 0.92; }
.ar-kolam-svg { width: 100%; height: 100%; overflow: visible; }
.ar-kolam-line { fill: none; stroke: var(--ar-clay); stroke-width: 2; stroke-linecap: round; }
.ar-kolam-ring { fill: none; stroke: var(--ar-clay); stroke-width: 1.4; stroke-dasharray: 3 7; opacity: 0.55; }
.ar-kolam-dot { fill: var(--ar-turmeric); }
.ar-kolam-dot--center { fill: var(--ar-clay); }
/* draw-on animation, keyed off the site-wide .reveal/.reveal-scale → .active
   class (see js/site.js) so no page-specific script is needed. The hero
   wrapper uses .reveal-scale, so both are watched. */
.ar-kolam-line { stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1); }
.reveal.active .ar-kolam-line, .reveal-scale.active .ar-kolam-line { stroke-dashoffset: 0; }
.ar-kolam-dot, .ar-kolam-ring { opacity: 0; transform: scale(.4); transform-origin: 200px 200px; transition: opacity .6s ease .9s, transform .6s cubic-bezier(.22,1,.36,1) .9s; }
.reveal.active .ar-kolam-dot, .reveal-scale.active .ar-kolam-dot,
.reveal.active .ar-kolam-ring, .reveal-scale.active .ar-kolam-ring { opacity: 1; transform: scale(1); }
.reveal.active .ar-kolam-ring, .reveal-scale.active .ar-kolam-ring { opacity: 0.55; }

.ar-hero-badge {
  position: absolute; z-index: 2; left: 4%; bottom: 2%;
  display: inline-flex; align-items: center; gap: 0.5rem; background: var(--ar-paper);
  border: 1px solid var(--ar-paper-line); border-radius: 999px; padding: 0.35rem 0.85rem 0.35rem 0.35rem;
  box-shadow: var(--ar-elev); font-size: 0.66rem; font-weight: 700; color: var(--ar-ink);
}
.ar-hero-badge img { width: 26px; height: 26px; border-radius: 50%; }

/* pinned note card — the recurring "physical noticeboard" component */
.ar-note {
  background: var(--ar-paper); border: 1px solid var(--ar-paper-line); border-radius: var(--ar-r-sm);
  box-shadow: var(--ar-elev); position: relative;
}
.ar-note::before {
  content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FF7A61, var(--ar-clay-deep));
  box-shadow: 0 2px 5px rgba(0,0,0,0.28);
}
.ar-note--hero {
  position: absolute; z-index: 2; max-width: 178px; padding: 0.65rem 0.8rem;
  display: flex; align-items: center; gap: 0.55rem; font-size: 0.68rem; color: var(--ar-ink-muted);
}
.ar-note--hero i { font-size: 1rem; color: var(--ar-clay); flex: none; }
.ar-note--hero b { display: block; font-size: 0.72rem; color: var(--ar-ink); font-family: var(--font-heading); font-weight: 600; }
.ar-hc-1 { top: 2%; left: -4%; transform: rotate(-3deg); }
.ar-hc-2 { top: 14%; right: -6%; transform: rotate(2.5deg); }
.ar-hc-3 { bottom: 10%; left: 6%; transform: rotate(-1.5deg); }

@media (max-width: 991.98px) {
  .ar-hero-grid { grid-template-columns: 1fr; }
  .ar-hero-visual { order: -1; margin-bottom: 0.5rem; min-height: 320px; }
  .ar-hc-1, .ar-hc-2, .ar-hc-3, .ar-hero-badge { display: none; }
}

/* ---------------- pinned-note feature grid ---------------- */
.ar-grid-6 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem 1.1rem; padding: 0 0.5rem; }
.ar-note--feature { padding: 1.35rem 1.1rem 1.15rem; text-align: center; transition: transform 260ms cubic-bezier(.22,1,.36,1), box-shadow 260ms cubic-bezier(.22,1,.36,1); }
.ar-note--feature:nth-child(6n+1) { transform: rotate(-1.1deg); }
.ar-note--feature:nth-child(6n+2) { transform: rotate(0.8deg); }
.ar-note--feature:nth-child(6n+3) { transform: rotate(-0.6deg); }
.ar-note--feature:nth-child(6n+4) { transform: rotate(1.2deg); }
.ar-note--feature:nth-child(6n+5) { transform: rotate(-1.3deg); }
.ar-note--feature:nth-child(6n+6) { transform: rotate(0.7deg); }
.ar-note--feature:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 22px 40px -20px rgba(43,27,18,0.42); }
.ar-note-ico {
  width: 42px; height: 42px; margin: 0 auto 0.7rem; border-radius: 50%; border: 1.5px solid var(--ar-clay);
  color: var(--ar-clay); display: grid; place-items: center; font-size: 1.05rem; background: var(--ar-paper);
}
.ar-note--feature h4 { font-family: var(--font-heading); font-size: 0.92rem; font-weight: 600; color: var(--ar-ink); margin: 0 0 0.3rem; }
.ar-note--feature p { font-size: 0.74rem; color: var(--ar-ink-muted); margin: 0; line-height: 1.45; }

@media (max-width: 767.98px) { .ar-grid-6 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 479.98px) { .ar-grid-6 { grid-template-columns: 1fr; } }

/* ---------------- platform section: chip row + notepads ---------------- */
.ar-platform-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start; }
.ar-grid-12 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0.75rem; }
.ar-chip {
  background: var(--ar-paper); border: 1px solid var(--ar-paper-line); border-top: 2px solid var(--ar-turmeric);
  border-radius: 0 0 var(--ar-r-sm) var(--ar-r-sm); padding: 0.9rem 0.7rem; text-align: center;
}
.ar-chip-ico { width: 34px; height: 34px; margin: 0 auto 0.5rem; border-radius: 50%; background: var(--ar-turmeric-soft); color: var(--ar-clay); display: grid; place-items: center; font-size: 0.9rem; }
.ar-chip h4 { font-size: 0.7rem; font-weight: 700; color: var(--ar-ink); margin: 0; }

.ar-mini-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.ar-notepad { background: var(--ar-paper); border: 1px solid var(--ar-paper-line); border-radius: var(--ar-r-md); padding: 0.9rem 0.85rem 1rem; box-shadow: var(--ar-elev); }
.ar-notepad-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; font-weight: 800; color: var(--ar-clay); letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 0.55rem; margin-bottom: 0.6rem; border-bottom: 1px dashed var(--ar-paper-line); }
.ar-note-line { display: block; font-size: 0.72rem; line-height: 1.55; padding: 0.3rem 0; }
.ar-note-line + .ar-note-line { border-top: 1px dotted var(--ar-paper-line); }
.ar-note-line b { color: var(--ar-ink); font-weight: 700; }
.ar-note-line span { color: var(--ar-ink-muted); }
.ar-note-line--reply { padding-left: 1rem; position: relative; }
.ar-note-line--reply::before { content: "—"; position: absolute; left: 0; color: var(--ar-turmeric-text); }

@media (max-width: 991.98px) { .ar-platform-grid { grid-template-columns: 1fr; } .ar-grid-12 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 575.98px) { .ar-grid-12 { grid-template-columns: repeat(3, minmax(0,1fr)); } .ar-mini-phones { grid-template-columns: 1fr; } }

/* ---------------- share-moments / build-communities split ---------------- */
.ar-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.75rem, 3vw, 3rem); align-items: center; }
.ar-feat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.ar-feat-list li { display: flex; align-items: flex-start; gap: 0.85rem; }
.ar-feat-ico { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1.5px solid var(--ar-leaf); color: var(--ar-leaf); display: grid; place-items: center; font-size: 0.95rem; background: var(--ar-paper); }
.ar-feat-list b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; color: var(--ar-ink); margin-bottom: 0.1rem; }
.ar-feat-list span { font-size: 0.78rem; color: var(--ar-ink-muted); line-height: 1.45; }

/* polaroid — replaces the phone screenshot for "share your moments" */
.ar-polaroid { background: #FFFFFF; padding: 0.8rem 0.8rem 3rem; box-shadow: var(--ar-elev); transform: rotate(-2.2deg); border-radius: 3px; max-width: 300px; margin-inline: auto; position: relative; }
.ar-polaroid::after {
  content: ""; position: absolute; top: -10px; right: 22px; width: 56px; height: 22px;
  background: rgba(216,154,46,0.55); transform: rotate(4deg); border-radius: 1px;
}
.ar-polaroid-photo { aspect-ratio: 4/3; border-radius: 2px; background: linear-gradient(135deg,#DCEBDD,#C9E4CC); display: grid; place-items: center; color: var(--ar-leaf); font-size: 1.6rem; }
.ar-polaroid-caption { margin-top: 0.9rem; text-align: center; }
.ar-polaroid-caption b { display: block; font-family: var(--font-heading); font-size: 0.82rem; color: var(--ar-ink); }
.ar-polaroid-caption span { font-size: 0.68rem; color: var(--ar-ink-muted); }

/* veranda plaques — "build strong communities" cards */
.ar-comm-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.ar-plaque { background: var(--ar-paper); border: 1px solid var(--ar-paper-line); border-top: 3px solid var(--ar-turmeric); border-radius: 2px 2px var(--ar-r-md) var(--ar-r-md); padding: 1.35rem 1.15rem; box-shadow: var(--ar-elev); }
.ar-plaque-ico { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ar-clay); color: var(--ar-clay); display: grid; place-items: center; font-size: 1.2rem; margin-bottom: 0.85rem; }
.ar-plaque h4 { font-family: var(--font-heading); font-size: 0.98rem; font-weight: 600; color: var(--ar-ink); margin: 0 0 0.4rem; }
.ar-plaque p { font-size: 0.79rem; color: var(--ar-ink-muted); margin: 0 0 0.55rem; line-height: 1.5; }
.ar-plaque a { font-size: 0.76rem; font-weight: 700; color: var(--ar-clay); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.ar-plaque a:hover { color: var(--ar-clay-deep); }

@media (max-width: 991.98px) {
  .ar-split { grid-template-columns: 1fr; }
  .ar-split .ar-polaroid-wrap { order: -1; }
  .ar-comm-cards { grid-template-columns: 1fr; }
}

/* ---------------- feed preview (pinned notices) + privacy promise ---------------- */
.ar-feed-priv { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 2.5vw, 2.25rem); }
.ar-feed-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.ar-feed-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem 0.9rem; padding-top: 0.4rem; }
.ar-note--feed { padding: 0.95rem 0.9rem; }
.ar-note--feed:nth-child(3n+1) { transform: rotate(-1.6deg); }
.ar-note--feed:nth-child(3n+2) { transform: rotate(1.3deg); }
.ar-note--feed:nth-child(3n+3) { transform: rotate(-0.8deg); }
.ar-feed-user { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.55rem; }
.ar-avatar-sm { width: 26px; height: 26px; border-radius: 50%; background: var(--ar-turmeric-soft); color: var(--ar-clay); display: grid; place-items: center; font-size: 0.62rem; font-weight: 800; flex: none; font-family: var(--font-heading); }
.ar-feed-user b { font-family: var(--font-heading); font-weight: 600; font-size: 0.78rem; color: var(--ar-ink); }
.ar-feed-user span { display: block; font-size: 0.62rem; color: var(--ar-ink-muted); }
.ar-note--feed p { font-size: 0.74rem; color: var(--ar-ink); margin: 0 0 0.6rem; line-height: 1.5; }
.ar-note--feed .btn-primary-premium { height: 34px; padding: 0 0.9rem; font-size: 0.74rem; margin-bottom: 0.6rem; }
.ar-feed-meta { display: flex; gap: 0.7rem; font-size: 0.62rem; color: var(--ar-ink-muted); padding-top: 0.5rem; border-top: 1px dotted var(--ar-paper-line); }

.ar-promise {
  background: linear-gradient(160deg, var(--ar-clay) 0%, var(--ar-clay-deep) 100%); color: #FFFFFF;
  border-radius: var(--ar-r-lg); padding: clamp(1.4rem, 2vw, 1.9rem); position: relative; overflow: hidden;
}
.ar-promise::before {
  content: ""; position: absolute; inset: 0; opacity: 0.14; pointer-events: none;
  background-image: radial-gradient(circle, #FFFFFF 1.4px, transparent 1.6px);
  background-size: 22px 22px;
}
.ar-promise-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; margin: 0 0 1.1rem; position: relative; }
.ar-promise-item { display: flex; gap: 0.75rem; margin-bottom: 1.05rem; position: relative; }
.ar-promise-item:last-child { margin-bottom: 0; }
.ar-promise-ico { width: 36px; height: 36px; flex: none; border-radius: 50%; background: rgba(255,255,255,0.16); display: grid; place-items: center; font-size: 1rem; }
.ar-promise-item b { display: block; font-size: 0.83rem; margin-bottom: 0.15rem; }
.ar-promise-item span { font-size: 0.75rem; color: rgba(255,255,255,0.82); line-height: 1.45; }

@media (max-width: 991.98px) { .ar-feed-priv { grid-template-columns: 1fr; } .ar-feed-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .ar-note--feature { transition: none; }
  .ar-note--feature:hover { transform: none; }
  .ar-kolam-line, .ar-kolam-dot, .ar-kolam-ring { transition: none; stroke-dashoffset: 0; opacity: 1; transform: none; }
}