/* =================================================================
   policy.css · shared stylesheet for the karthikonteddu.com
   policy pages (contact / terms / privacy / refund).
   Design system sampled from the main site (index.html):
   Wispr lavender + deep green, Fraunces + Inter, paper grain,
   layered iOS-material shadows, automatic dark mode.
   Keep this file in the SAME folder as the four .html pages.
   ================================================================= */

/* 1. DESIGN SYSTEM ------------------------------------------------ */
:root{
  --cream:      #FAFAF6;
  --cream-2:    #F2F0E8;
  --ink:        #2A2925;
  --ink-soft:   #6B6963;
  --ink-faint:  #A8A69C;
  --label:      #8B8980;
  --lav:        #F0D7FF;   /* exact Wispr lavender */
  --pink:       #BB8FDC;   /* deeper lavender, readable on cream */
  --green:      #045145;   /* exact Wispr deep green */
  --accent:     #045145;   /* link + CTA colour (green in light) */
  --hairline:   rgba(42,41,37,0.09);
  --shadow-tile:   0 1px 2px rgba(42,41,37,0.05), 0 8px 20px rgba(42,41,37,0.07);
  --shadow-tile-h: 0 2px 6px rgba(42,41,37,0.07), 0 16px 34px rgba(42,41,37,0.11);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --measure: 720px;
}

@media (prefers-color-scheme: dark){
  :root{
    --cream:    #1E1D1A;
    --cream-2:  #28261F;
    --ink:      #F2F0E8;
    --ink-soft: #C4C1B7;
    --ink-faint:#7E7B72;
    --label:    #8B8980;
    --accent:   #E7CBFF;   /* lavender reads better than green on dark */
    --hairline: rgba(242,240,232,0.12);
    --shadow-tile:   0 1px 2px rgba(0,0,0,0.40), 0 10px 24px rgba(0,0,0,0.36);
    --shadow-tile-h: 0 2px 6px rgba(0,0,0,0.46), 0 18px 38px rgba(0,0,0,0.50);
  }
}

/* 2. BASE -------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* paper grain · degrades to nothing if CSP blocks the data URI */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){ body::before{ opacity:0.05; } }

::selection{ background:var(--lav); color:#2A2925; }

a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px;
   text-decoration-thickness:1px; text-decoration-color:rgba(4,81,69,0.35);
   transition:text-decoration-color .15s ease, color .15s ease; }
a:hover{ text-decoration-color:currentColor; }
@media (prefers-color-scheme: dark){ a{ text-decoration-color:rgba(231,203,255,0.4); } }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* skip link (a11y, matches the main site) */
.skip{ position:absolute; left:-9999px; top:0; background:var(--green); color:#fff;
  padding:10px 16px; border-radius:0 0 10px 0; z-index:50; }
.skip:focus{ left:0; }

/* 3. LAYOUT ------------------------------------------------------ */
.wrap{ width:100%; max-width:var(--measure); margin:0 auto; padding:0 22px; }

/* 4. HEADER ------------------------------------------------------ */
.site-head{
  border-bottom:1px solid var(--hairline);
  background:color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter:saturate(140%) blur(8px);
  position:sticky; top:0; z-index:20;
}
.site-head .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; min-height:62px; flex-wrap:wrap;
}
.wordmark{
  font-family:var(--serif); font-weight:600; font-size:1.45rem;
  color:var(--ink); text-decoration:none; letter-spacing:-0.01em;
}
.wordmark .dot{ color:var(--pink); }
.nav{ display:flex; gap:4px; flex-wrap:wrap; }
.nav a{
  font-size:0.86rem; font-weight:500; color:var(--ink-soft);
  text-decoration:none; padding:6px 11px; border-radius:9px; line-height:1;
  transition:background .15s ease, color .15s ease;
}
.nav a:hover{ background:var(--cream-2); color:var(--ink); }
.nav a[aria-current="page"]{ background:var(--lav); color:#3A2A47; font-weight:600; }
@media (prefers-color-scheme: dark){
  .nav a[aria-current="page"]{ background:rgba(240,215,255,0.16); color:var(--lav); }
}

/* 5. PROSE / CONTENT --------------------------------------------- */
main{ padding:46px 0 28px; }

.eyebrow{
  font-size:0.74rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--green); margin:0 0 14px;
}
@media (prefers-color-scheme: dark){ .eyebrow{ color:var(--accent); } }

h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(2rem,5vw,2.7rem);
  line-height:1.12; letter-spacing:-0.015em; margin:0 0 10px; color:var(--ink);
}
h2{
  font-family:var(--serif); font-weight:600; font-size:1.32rem; line-height:1.25;
  letter-spacing:-0.01em; margin:42px 0 12px; color:var(--ink);
}
h3{ font-size:1.02rem; font-weight:600; margin:26px 0 8px; color:var(--ink); }

.updated{ color:var(--ink-soft); font-size:0.92rem; margin:0 0 8px; }
.lede{ font-size:1.12rem; color:var(--ink-soft); margin:18px 0 4px; }

p{ margin:0 0 16px; }
ul,ol{ margin:0 0 18px; padding-left:1.3em; }
li{ margin:0 0 9px; }
strong{ font-weight:600; color:var(--ink); }

hr{ border:0; border-top:1px solid var(--hairline); margin:40px 0; }

.section-rule{ height:1px; background:var(--hairline); border:0; margin:8px 0 4px; }

/* tidy in-text reference back to the contact page */
.callout{
  background:var(--cream-2); border:1px solid var(--hairline);
  border-radius:14px; padding:16px 20px; margin:22px 0;
  box-shadow:var(--shadow-tile); font-size:0.96rem;
}
.callout p:last-child{ margin-bottom:0; }

/* 6. CONTACT CARD (contact.html only) ---------------------------- */
.card{
  background:var(--cream-2); border:1px solid var(--hairline);
  border-radius:20px; padding:26px 26px 22px; margin:26px 0;
  box-shadow:var(--shadow-tile);
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow:var(--shadow-tile-h); }

.detail-list{ margin:6px 0 0; padding:0; list-style:none; }
.detail-list > div{
  display:grid; grid-template-columns:128px 1fr; gap:6px 18px;
  padding:14px 0; border-top:1px solid var(--hairline); align-items:start;
}
.detail-list > div:first-child{ border-top:0; padding-top:4px; }
.detail-list dt, .detail-list .k{
  font-size:0.74rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--label); padding-top:2px;
}
.detail-list dd, .detail-list .v{ margin:0; color:var(--ink); font-weight:500; }
.detail-list a{ font-weight:500; }
.muted{ color:var(--ink-soft); font-weight:400; font-size:0.95rem; }

/* 7. FOOTER ------------------------------------------------------ */
.site-foot{
  border-top:1px solid var(--hairline); margin-top:40px;
  padding:30px 0 46px; color:var(--ink-soft); font-size:0.88rem;
}
.foot-links{ display:flex; flex-wrap:wrap; gap:6px 4px; margin-bottom:14px; }
.foot-links a{
  color:var(--ink-soft); text-decoration:none; padding:5px 10px;
  border-radius:8px; transition:background .15s ease, color .15s ease;
}
.foot-links a:hover{ background:var(--cream-2); color:var(--ink); }
.foot-fine{ margin:0; line-height:1.6; }
.foot-fine .sep{ color:var(--ink-faint); margin:0 7px; }

/* 7b. ASK AI ABOUT ME · matches the block on the home page ------- */
.ask-ai{
  display:flex; flex-direction:column; align-items:center; gap:11px;
  text-align:center; margin:0 0 24px; padding-bottom:22px;
  border-bottom:1px solid var(--hairline);
}
.ask-ai-label{
  margin:0; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--label); font-weight:600;
}
.ask-ai-label .spk{ color:var(--pink); }
.ask-ai-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.ai-pill{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--cream); border:1px solid var(--hairline); border-radius:999px;
  font-family:var(--sans); font-size:0.82rem; font-weight:500; color:var(--ink-soft);
  padding:8px 16px; text-decoration:none; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.ai-pill:hover{
  color:#2A2925; background:var(--lav); border-color:#2A2925;
  transform:translateY(-2px); text-decoration:none;
}

/* 8. RESPONSIVE -------------------------------------------------- */
@media (max-width:560px){
  body{ font-size:16px; }
  main{ padding:34px 0 22px; }
  .detail-list > div{ grid-template-columns:1fr; gap:3px; padding:13px 0; }
  .card{ padding:22px 20px 18px; }
  .nav a{ padding:6px 9px; }
}