@font-face {
    font-family: 'Nunito';
    src: url('/static/fonts/Nunito.ttf') format('truetype');
    font-weight: 200 900;
}

@font-face {
    font-family: 'Baloo2';
    src: url('/static/fonts/Baloo2.ttf') format('truetype');
    font-weight: 400 800;
}

/* ---------------------------------------------------------------------
   Paper texture: a very faint grain wash across the whole page, so the
   background reads as warm paper rather than a flat digital fill. Pure
   CSS/SVG (feTurbulence noise + two soft color washes), no image assets.
--------------------------------------------------------------------- */
body {
    background-color: #FFF9EE;
    background-image:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(232, 160, 92, 0.08), transparent),
        radial-gradient(ellipse 60% 40% at 100% 30%, rgba(143, 166, 142, 0.07), transparent),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.29  0 0 0 0 0.22  0 0 0 0 0.16  0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, repeat;
}

/* ---------------------------------------------------------------------
   Deckled edge: a torn-paper mask, replacing the old "hand-drawn-border"
   class that was really just a plain border-radius. Applied to hero art,
   sample cards, and section dividers so the site's illustrated warmth
   isn't confined to the product photos alone.
--------------------------------------------------------------------- */
.deckled-edge {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cpath d='M8,14 Q20,2 34,10 T64,6 T96,12 T130,4 T162,10 T196,3 T228,9 T260,2 T294,8 T326,3 T358,9 T392,5 L396,392 Q382,398 368,391 T336,397 T304,390 T270,396 T238,389 T204,397 T170,391 T136,396 T104,389 T70,395 T38,390 T8,394 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cpath d='M8,14 Q20,2 34,10 T64,6 T96,12 T130,4 T162,10 T196,3 T228,9 T260,2 T294,8 T326,3 T358,9 T392,5 L396,392 Q382,398 368,391 T336,397 T304,390 T270,396 T238,389 T204,397 T170,391 T136,396 T104,389 T70,395 T38,390 T8,394 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.deckled-shadow {
    filter: drop-shadow(0 18px 28px rgba(74, 55, 40, 0.18));
}

/* Gentle scatter/tilt so grids of cards don't read as a rigid template
   grid - each card sits a couple degrees off, like photos on a table. */
.tilt-1 { transform: rotate(-1.4deg); }
.tilt-2 { transform: rotate(1.1deg); }
.tilt-3 { transform: rotate(-0.7deg); }
.tilt-4 { transform: rotate(1.6deg); }
.tilt-5 { transform: rotate(-1.1deg); }
.tilt-6 { transform: rotate(0.9deg); }
.tilt-card:hover { transform: rotate(0deg) scale(1.02); }
.tilt-card { transition: transform 220ms ease; }

/* Torn-paper wave used as a section divider instead of a flat color
   boundary - reads as a page edge rather than a UI panel break. */
.page-divider {
    height: 48px;
    background-color: #FFF9EE;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0,20 Q30,2 60,18 T120,14 T180,22 T240,10 T300,20 T360,8 T420,18 T480,12 T540,22 T600,6 T660,18 T720,10 T780,20 T840,14 T900,22 T960,8 T1020,18 T1080,12 T1140,20 T1200,14 L1200,48 L0,48 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0,20 Q30,2 60,18 T120,14 T180,22 T240,10 T300,20 T360,8 T420,18 T480,12 T540,22 T600,6 T660,18 T720,10 T780,20 T840,14 T900,22 T960,8 T1020,18 T1080,12 T1140,20 T1200,14 L1200,48 L0,48 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.page-divider.flip {
    transform: scaleY(-1);
}

/* Dotted trail connecting the "How it works" steps - stands in for the
   generic "1 2 3 in circles" pattern with something closer to a map/path
   through the story. */
.trail-dots {
    background-image: radial-gradient(circle, rgba(74,55,40,0.25) 2px, transparent 2.5px);
    background-size: 14px 14px;
    background-repeat: repeat-x;
    background-position: center;
    height: 2px;
}

.paw-mark {
    color: rgba(74, 55, 40, 0.15);
}