/* Naatkaatti landing page. The app's "Modernist" design: paper, ink, hairlines,
   square corners, one red-orange accent used only for the hero date sheet. */
@font-face{font-family:"Archivo";src:url("/naatkaatti/fonts/archivo.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans Tamil";src:url("/naatkaatti/fonts/notosanstamil.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC}

:root{
  --paper:#F3F2F2;--ink:#201E1D;--surface:#E8E7E6;--rule:#C9C6C3;--muted:#55514E;--accent:#EC3013;
  --wrap:min(1160px,100% - 32px);
  --sans:"Archivo","Noto Sans Tamil",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--sans);overflow-x:hidden}
:lang(ta){line-height:1.65}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wrap{width:var(--wrap);margin-inline:auto}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-100px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:10}
.skip:focus{top:12px}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
:lang(ta) h1,:lang(ta) h2,:lang(ta) h3,h1 :lang(ta),h2 :lang(ta){letter-spacing:0;line-height:1.3}
p{margin:0 0 1em}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
:lang(ta) .eyebrow,.eyebrow:lang(ta){letter-spacing:0;text-transform:none;font-size:15px}
.num{font-variant-numeric:tabular-nums;font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--muted)}

/* Header */
.hdr{border-top:4px solid var(--accent);border-bottom:1px solid var(--rule)}
.hdr .wrap{display:flex;align-items:center;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;text-decoration:none;margin-right:auto;letter-spacing:-.01em}
.brand img{width:32px;height:32px;border-radius:7px}
.brand .alt{font-weight:600;color:var(--muted)}
.lang{display:flex;border:1px solid var(--ink);font-size:15px;font-weight:600}
.lang a,.lang span{padding:6px 12px;text-decoration:none;line-height:1.3}
.lang [aria-current]{background:var(--ink);color:var(--paper)}
.lang a:hover{background:var(--surface)}
.hdr .badge{display:none}
.badge img{width:180px;height:auto}
.badge{display:inline-block;line-height:0}
@media (min-width:860px){.hdr .badge{display:inline-block}.hdr .badge img{width:136px}}
@media (max-width:420px){.brand .alt{display:none}}

/* Hero */
.hero{padding:48px 0 64px}
.hero .wrap{display:grid;gap:48px;align-items:center}
.hero h1{font-size:clamp(42px,9vw,84px);margin-bottom:20px}
.hero h1 span{display:block}
.hero h1 .sep{display:none}
.hero h1 .second{font-weight:700;color:var(--muted)}
.hero .sub{font-size:clamp(22px,3.2vw,30px);font-weight:700;line-height:1.25;letter-spacing:-.01em;margin-bottom:20px;max-width:24ch}
.sub:lang(ta){letter-spacing:0;line-height:1.45;max-width:22ch}
.lead{font-size:19px;max-width:36em;margin-bottom:28px}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cta .note{font-size:16px;color:var(--muted);margin:0}
.hero-visual{position:relative;justify-self:center;width:min(300px,78vw);margin-bottom:24px}
.device{background:var(--ink);padding:8px;border-radius:26px}
.device img{border-radius:18px}
.hero-visual .watch{position:absolute;width:40%;left:-10%;bottom:-28px}
@media (min-width:900px){.hero-visual .watch{width:44%;left:-26%}}
.watch{background:var(--ink);border-radius:50%;padding:6%;aspect-ratio:1}
.watch img{border-radius:50%;width:100%}
@media (min-width:900px){
  .hero{padding:72px 0 96px}
  .hero .wrap{grid-template-columns:1.15fr .85fr}
  .hero-visual{width:330px;justify-self:end;margin-right:24px}
}

/* Three points */
.points{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.points ul{list-style:none;margin:0;padding:0;display:grid}
.points li{padding:28px 0;border-top:1px solid var(--rule)}
.points li:first-child{border-top:0}
.points strong{display:block;font-size:21px;line-height:1.25;margin:6px 0 8px}
.points p{margin:0;color:var(--muted)}
@media (min-width:800px){
  .points ul{grid-template-columns:repeat(3,1fr)}
  .points li{border-top:0;border-left:1px solid var(--rule);padding:36px 32px}
  .points li:first-child{border-left:0;padding-left:0}
}

/* Sections */
.section{padding:72px 0}
.section+.section{border-top:1px solid var(--rule)}
.section h2{font-size:clamp(32px,5.4vw,56px);margin-bottom:24px}
.section .intro{font-size:19px;max-width:40em}
.section h2:lang(ta),:lang(ta) .section h2{font-size:clamp(28px,4.4vw,48px)}
.feature h3:lang(ta),:lang(ta) .feature h3{font-size:clamp(24px,3vw,34px)}

/* Features */
.features h2.vh+.feature{border-top:0}
.feature{display:grid;gap:28px;padding:56px 0;border-top:1px solid var(--rule);align-items:center}
.feature:first-of-type{padding-top:8px;border-top:0}
.feature h3{font-size:clamp(26px,3.6vw,38px);margin:10px 0 16px}
.feature p{max-width:34em}
.feature figure{margin:0;justify-self:center;width:min(280px,72vw)}
.feature figure.tablet{width:100%;padding:6px;border-radius:14px}
.feature figure.tablet img{border-radius:8px}
@media (min-width:860px){
  .feature{grid-template-columns:1fr 1fr;gap:64px;padding:80px 0}
  .feature .text{padding-left:0}
  .feature figure{width:300px}
  .feature.flip .text{order:2}
  .feature.flip figure{order:1}
  .feature.wide{grid-template-columns:.8fr 1.2fr}
  .feature figure.tablet{width:100%;padding:8px}
}

/* Watch band */
.band{background:var(--ink);color:var(--paper)}
.band .eyebrow{color:#B9B5B2}
.band .intro{color:#E3E1DF}
.watches{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.watches .watch{background:#000;padding:0;border:1px solid #3A3735}
@media (min-width:860px){.watches{grid-template-columns:repeat(4,1fr);gap:40px}}

/* Every screen */
.screens{position:relative;margin-top:40px;padding-bottom:7%}
.tablet{background:var(--ink);padding:10px;border-radius:20px;width:88%}
.tablet img{border-radius:10px}
.screens .device{position:absolute;right:0;bottom:0;width:24%;padding:4px;border-radius:16px}
.screens .device img{border-radius:13px}
@media (min-width:860px){.screens{display:block;width:90%;margin-inline:auto}.screens .device{padding:7px}}

/* Cities */
.groups{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:36px;border-top:1px solid var(--ink)}
.groups details{min-width:0}
.groups details{border-bottom:1px solid var(--rule)}
.groups summary{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 4px;cursor:pointer;font-weight:700;font-size:19px;list-style:none}
.groups summary::-webkit-details-marker{display:none}
.groups summary .count{font-variant-numeric:tabular-nums;font-weight:600;color:var(--muted);display:flex;gap:14px;align-items:baseline}
.groups summary .count::after{content:"+";font-weight:400;font-size:24px;line-height:1;width:14px;text-align:center;color:var(--ink)}
.groups details[open] summary .count::after{content:"−"}
.groups summary:hover{background:var(--surface)}
.groups ul{list-style:none;margin:0;padding:4px 4px 20px;columns:2;column-gap:24px;font-size:16px}
.groups li{break-inside:avoid;padding:3px 0;overflow-wrap:anywhere}
@media (min-width:860px){
  .groups{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;border-top:0}
  .groups details{border-top:1px solid var(--ink);border-bottom:0;align-self:start}
  .groups summary{padding:16px 0}
}

/* Privacy */
.privacy .wrap{display:grid;gap:28px}
.privacy ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.privacy li{padding:16px 0 16px 28px;border-bottom:1px solid var(--rule);position:relative}
.privacy li::before{content:"";position:absolute;left:4px;top:1.15em;width:9px;height:9px;border:2px solid var(--ink)}
.more{display:inline-block;margin-top:24px;font-weight:700}
@media (min-width:860px){.privacy .wrap{grid-template-columns:1fr 1.4fr;gap:64px}}

/* Price */
.price-card{background:var(--surface);padding:36px 24px}
.price-card h2{margin-bottom:20px}
.prices{list-style:none;margin:0 0 24px;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;gap:8px;font-size:18px}
.prices b{font-size:28px;font-weight:800;letter-spacing:-.01em;margin-right:4px}
.prices li:lang(ta) b,.prices:lang(ta) b{margin:0 4px}
@media (min-width:900px){.price-card{padding:56px 64px;display:grid;grid-template-columns:1fr 1fr;column-gap:64px;align-items:start}.price-card>.eyebrow,.price-card>h2{grid-column:1}.price-card .prices{grid-column:1;grid-row:3;margin:0}.price-card>p:not(.eyebrow),.price-card>.badge{grid-column:2}.price-card>p:not(.eyebrow){grid-row:1/span 3;margin-top:4px}.price-card>.badge{grid-row:4;margin-top:8px}}

/* FAQ */
.faq-list{margin-top:32px;border-top:1px solid var(--ink);max-width:880px}
.faq-list details{border-bottom:1px solid var(--rule)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-weight:700;font-size:20px;line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-weight:400;font-size:28px;line-height:1}
.faq-list details[open] summary::after{content:"−"}
.faq-list summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.faq-list p{margin:0;padding:0 0 24px;max-width:44em}

/* Footer */
.foot{border-top:1px solid var(--ink);padding:40px 0 48px;font-size:16px}
.foot .row{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-bottom:24px}
.foot .name{font-weight:800;font-size:19px;margin-right:auto}
.foot .legal{color:var(--muted);font-size:14px}
.foot .legal p{margin:0 0 6px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;margin-top:16px}

/* Quiet fade-in on scroll, only where supported and wanted. No script. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
    @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  }
}