/* Graphite & electric, the app's default palette
   (app/lib/interface/palettes.dart), light and dark. The layout is
   Pflegerunde's site (site/style.css there), the same for every DGMD app. System fonts only:
   nothing is loaded from anywhere else, so there is nothing to consent to.
   Sized for reading on a phone at 70: 18px body, 1.65 line height. */
:root{
  color-scheme:light dark;
  --bg:#FBFBFC; --surface:#EFF0F3; --ink:#111318; --mute:#5E6470; --rule:#C9CDD6;
  --accent:#2F52E0; --wash:#DFE4FD; --on-wash:#0A1C78; --paper:#FFFFFF;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#08090C; --surface:#16181D; --ink:#F3F4F7; --mute:#9AA0AB; --rule:#2A2E37;
    --accent:#7C97FF; --wash:#232C57; --on-wash:#DFE4FD; --paper:#1B1E25;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font:400 18px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
/* Hidden by clipping, not by moving it off to the left: in a right-to-left
   page the space to the left scrolls, and the page became 10,000 px wide. */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none;inset-inline-start:8px;top:8px;background:var(--surface);padding:10px 14px;border-radius:8px}

.bar{background:color-mix(in srgb,var(--surface) 88%,transparent);border-bottom:1px solid var(--rule);
     position:sticky;top:0;z-index:5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bar-in{max-width:72rem;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:20px;
        /* Where a translation's words do not fit beside the name (Russian
           "К приложению" at 375 px), the links take a second line instead
           of the page scrolling sideways. */
        flex-wrap:wrap;row-gap:0}
nav{margin-inline-start:auto}
.brand{font-weight:700;font-size:1.1rem;color:var(--ink);text-decoration:none;margin-inline-end:auto;
       display:flex;align-items:center;gap:10px}
.brand img{border-radius:8px;flex:none}
nav{display:flex;align-items:center;gap:18px}
nav a{font-weight:600;text-decoration:none;padding:12px 4px}
.bar .pill{background:var(--accent);color:var(--bg);padding:10px 18px;border-radius:999px;white-space:nowrap}
@media (max-width:40rem){.bar .wide{display:none}.bar-in{gap:10px;padding:10px 16px}nav{gap:10px}
  .brand{font-size:1rem;gap:8px}.bar .pill{padding:8px 14px}}
@media (max-width:23rem){.bar .pill{display:none}}

main{max-width:44rem;margin:0 auto;padding:28px 20px 48px}
h1,h2{font-family:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;letter-spacing:-.01em}
h1{font-size:1.9rem;line-height:1.25;margin:.4em 0 .5em}
h2{font-size:1.35rem;line-height:1.3;margin:1.8em 0 .5em}
h3{font-size:1.1rem;margin:1.4em 0 .4em}
.lead{font-size:1.12rem}
.note,.checked,.crumb,.desc{color:var(--mute)}
.checked,.crumb{font-size:.95rem;margin:0}
.hero{padding:8px 0 12px}

ul,ol{padding-inline-start:1.3em}
li{margin:.35em 0}
/* The guide's articles as cards: the whole card is the link, so the tap
   target is the card, not a line of text. One column on a phone, two when
   there is room. */
.cards{list-style:none;padding:0;margin:.6em 0 0;display:grid;gap:14px;
       grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.cards li{margin:0;display:flex}
.card{display:flex;flex-direction:column;gap:6px;width:100%;padding:16px 18px;
      background:var(--surface);border:1px solid var(--rule);border-radius:14px;
      color:var(--ink);text-decoration:none}
.card:hover{border-color:var(--accent)}
.card-title{font-weight:700;font-size:1.08rem;line-height:1.35}
.card .desc{flex:1}
.more{color:var(--accent);font-weight:600;font-size:.95rem}
.desc{font-size:.95rem}

blockquote{margin:1.2em 0;padding:14px 18px;background:var(--wash);color:var(--on-wash);border-radius:12px}
blockquote p{margin:0}
table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.95rem;display:block;overflow-x:auto}
th,td{text-align:start;padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
th{background:var(--surface)}

.sources{margin-top:2.4em;padding-top:.4em;border-top:2px solid var(--rule);font-size:.95rem}
.foot{border-top:1px solid var(--rule);background:var(--surface);color:var(--mute);font-size:.92rem}
.foot-in{max-width:72rem;margin:0 auto;padding:28px 20px 36px}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);margin:0}
.foot-brand img{border-radius:7px}

/* ---- The home page ----------------------------------------------------
   Wide sections instead of the reading column. Everything here is CSS
   and inline SVG: no script, no image from elsewhere (site/firebase.json
   allows neither). The phones show the app's own screenshots. */
.home main{max-width:none;padding:0}
.wrap{max-width:72rem;margin:0 auto;padding:0 20px}
.narrow{max-width:46rem}
.i{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kicker{color:var(--accent);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .4em}

.hero h1{margin:.15em 0 .45em}
.hl{color:var(--accent)}
.hero .lead{font-size:1.2rem;max-width:40rem}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 8px}
.ctas.center{justify-content:center}
.store{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:8px 22px 8px 16px;border-radius:14px;
       background:var(--ink);color:var(--bg);text-decoration:none;font-weight:700;font-size:1.08rem;line-height:1.15}
.store small{display:block;font-weight:500;font-size:.75rem;opacity:.8}
.store .i{width:28px;height:28px}
a.store:hover{transform:translateY(-1px)}
.store.soon{background:transparent;color:var(--ink);border:1.5px dashed var(--rule)}
.store.ghost{background:var(--accent);color:var(--bg)}
.hero-alt{margin:10px 0 0}
.hero-alt a{display:inline-flex;align-items:center;gap:8px;font-weight:600;padding:10px 0}
.chips{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--mute);font-size:.95rem}
.chips li{display:flex;align-items:center;gap:6px;margin:0}
.chips .i{width:20px;height:20px;color:var(--accent)}

/* ---- The home page, in the manner of a product page ---------------------
   Marius, 15 Nov 2026: effects like Apple's product pages (the Safari
   "switch" page). One phone is held while the steps of the app's story
   scroll past beside it; large numbers count up; the screens are tiles to swipe;
   every headline and tile rises as it comes into view. Real screenshots
   only. All of it is CSS: scroll-driven animations, scroll snapping and,
   where the browser draws them, the gallery's arrows (::scroll-button).
   Nothing runs and nothing is loaded from elsewhere. Without those
   features, or for anyone who asked their system for less motion, the
   page is complete and still. Positions are logical, so Arabic gets the
   mirror image. */
.home h1,.home h2,.home h3{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.home h1,.home .sec h2{font-weight:700;letter-spacing:-.03em}
.hero{position:relative;overflow:clip;isolation:isolate;padding:36px 0 0}
.aurora{position:absolute;inset:-20% -10% auto;height:120%;z-index:-1;pointer-events:none;filter:blur(60px);opacity:.7}
.aurora i{position:absolute;border-radius:50%;width:46vw;height:46vw;max-width:40rem;max-height:40rem}
.aurora i:nth-child(1){background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 50%,transparent),transparent);top:4%;inset-inline-start:6%}
.aurora i:nth-child(2){background:radial-gradient(closest-side,color-mix(in srgb,#9B5CFF 36%,transparent),transparent);top:26%;inset-inline-end:2%}
.aurora i:nth-child(3){background:radial-gradient(closest-side,color-mix(in srgb,#22C3E6 28%,transparent),transparent);top:52%;inset-inline-start:34%}
.hero-in{display:grid;justify-items:center;text-align:center;padding-top:clamp(20px,5vh,56px)}
.hero-text{max-width:54rem}
.hero .lead{margin-inline:auto}
.hero .ctas,.hero .chips{justify-content:center}
.hero h1{font-size:clamp(2.4rem,6vw,4.9rem);line-height:1.03;letter-spacing:-.04em}
.hero .hl{background:linear-gradient(100deg,var(--accent),#9B5CFF 55%,#22C3E6);-webkit-background-clip:text;background-clip:text;color:transparent}
/* The hero's story (DGMD product-website standard, this product's
   variant: scrollytelling). Still, it is a list: each step with its own
   screenshot beside its text. With scroll timelines one phone is held at
   the inline end of the screen (the right; the left in Arabic, by the
   grid alone) while the steps scroll past at its side, and its screen
   crossfades to each step's screenshot as the step reaches the middle.
   On a phone the phone is held at the top and the steps pass under it. */
.story{--ph:min(36rem,80svh);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,7vw,112px);
       width:min(100% - 40px,64rem);margin:48px auto 0;text-align:start}
.story-phone{display:none}
.story-steps{grid-column:1/-1;list-style:none;padding:0;margin:0 0 24px;display:grid;gap:48px}
.story-step{margin:0;display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:center}
.story-step .device{position:relative;width:100%}
.story-text h3{font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.12;letter-spacing:-.025em;margin:0 0 .35em}
.story-text p{margin:0;color:var(--mute);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:30rem}
.device{position:absolute;aspect-ratio:1/2;border-radius:2.4rem;padding:.55rem;background:linear-gradient(145deg,#2A2E37,#0B0C10 60%,#2A2E37);
        box-shadow:0 0 0 1px rgb(255 255 255 / .08) inset,0 2.5rem 5rem -1.5rem rgb(0 0 0 / .5),0 0 0 1px rgb(0 0 0 / .4)}
.device img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:1.9rem;background:#fff}
@media (prefers-reduced-motion:no-preference){
  .aurora i{animation:drift 18s ease-in-out infinite alternate}
  .aurora i:nth-child(2){animation-duration:23s;animation-delay:-6s}
  .aurora i:nth-child(3){animation-duration:27s;animation-delay:-11s}
  @keyframes drift{to{transform:translate(8%,10%) scale(1.15)}}
  .hero-text>*{animation:up .9s cubic-bezier(.2,.7,.2,1) backwards}
  .hero-text>:nth-child(2){animation-delay:.08s}
  .hero-text>:nth-child(3){animation-delay:.16s}
  .hero-text>:nth-child(n+4){animation-delay:.24s}
  @keyframes up{from{opacity:0;transform:translateY(1.4rem)}}
  /* As the page scrolls the headline steps back, and the bar's button
     to the app comes in once the hero's are gone. */
  @supports (animation-timeline:scroll()){
    .hero-text{animation:recede linear both;animation-timeline:scroll(root);animation-range:10vh 75vh}
    @keyframes recede{to{opacity:.15;transform:translateY(-4vh) scale(.95)}}
    .home .bar .pill{animation:pill linear both;animation-timeline:scroll(root);animation-range:45vh 65vh}
    @keyframes pill{from{opacity:0;transform:scale(.8);visibility:hidden}}
  }
  /* The story: each step names its own view timeline, the story makes
     the names visible to the phone beside them (timeline-scope), and
     each screenshot after the first fades in over the one before as its
     step passes the middle of the screen; scrolling back fades it out.
     The text of the step in the middle is full, the others dimmed. */
  @supports (animation-timeline:view()) and (timeline-scope:--a){
    .story{timeline-scope:--s1,--s2,--s3,--s4;--fade:cover 38% cover 50%;--lit:cover 22% cover 78%}
    .story-phone{display:block;grid-column:2;grid-row:1;align-self:start;position:sticky;
                 top:calc((100svh - var(--ph)) / 2);width:calc(var(--ph) / 2);height:var(--ph)}
    .story-phone .device{position:relative;width:100%;height:100%}
    .story-phone .device img{position:absolute;top:.55rem;inset-inline-start:.55rem;width:calc(100% - 1.1rem);height:calc(100% - 1.1rem)}
    .story-steps{grid-column:1;grid-row:1;gap:0;margin:0}
    .story-step{display:flex;min-height:max(80svh,var(--ph))}
    .story-step .device{display:none}
    .story-step:nth-child(1){view-timeline:--s1}
    .story-step:nth-child(2){view-timeline:--s2}
    .story-step:nth-child(3){view-timeline:--s3}
    .story-step:nth-child(4){view-timeline:--s4}
    .story-shot:nth-child(n+2){animation:shot linear both}
    /* After the shorthand, which resets both. */
    .story-shot:nth-child(2){animation-timeline:--s2}
    .story-shot:nth-child(3){animation-timeline:--s3}
    .story-shot:nth-child(4){animation-timeline:--s4}
    .story-shot:nth-child(n+2){animation-range:var(--fade)}
    @keyframes shot{from{opacity:0;transform:scale(1.03)}}
    .story-text{animation:lit linear both;animation-timeline:view();animation-range:var(--lit)}
    @keyframes lit{0%,100%{opacity:.25}30%,70%{opacity:1}}
  }
}

/* ---- Three numbers that count up ----------------------------------------
   The number is in the page as text; where the browser can read data-n as
   an integer and drive animation by scrolling, the text is set aside for
   a counter that climbs from 0 as the tile comes into view. */
@property --n{syntax:"<integer>";inherits:false;initial-value:0}
.stats{padding:56px 0 0}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat{margin:0;padding:30px 30px 34px;border-radius:28px;background:var(--surface);color:var(--mute);font-size:1.02rem;line-height:1.5}
.num{display:block;font-size:clamp(4.2rem,9vw,7.5rem);font-weight:800;line-height:1;letter-spacing:-.05em;
     background:linear-gradient(100deg,var(--accent),#9B5CFF 60%,#22C3E6);-webkit-background-clip:text;background-clip:text;color:transparent}
.unit{display:block;color:var(--ink);font-size:1.45rem;line-height:1.25;margin:.25em 0 .3em}
@supports (animation-timeline:view()) and (x:attr(x type(*))){
@media (prefers-reduced-motion:no-preference){
  .num{--n:attr(data-n type(<integer>));counter-reset:n var(--n);
       animation:count linear both;animation-timeline:view();animation-range:entry 30% cover 50%}
  .num span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .num::after{content:counter(n) / ""}
  @keyframes count{from{--n:0}}
}}

/* ---- The screens as tiles -------------------------------------------------
   Large rounded tiles with the phone coming up out of the bottom edge, the
   feature's name and a line under each. Swiped, or with the arrows where
   the browser draws them; the tiles slide in as the section comes into
   view, and each phone rises as its tile comes in from the side. */
.btn{display:inline-flex;align-items:center;min-height:48px;padding:10px 22px;border-radius:999px;
     background:var(--accent);color:var(--bg);font-weight:700;text-decoration:none}
.btn:hover{text-decoration:underline}
.gallery-sec{--gut:max(20px,calc((100vw - 72rem) / 2 + 20px));overflow:clip}
.gallery-sec h2{max-width:46rem}
.gallery-box{position:relative}
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,23rem);gap:20px;
         overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
         padding:12px var(--gut) 8px;scroll-padding-inline:var(--gut);scrollbar-width:none;margin-top:18px}
.gallery::-webkit-scrollbar{display:none}
.gallery:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:28px}
.tile{margin:0;scroll-snap-align:start;display:flex;flex-direction:column}
.tile-art{position:relative;height:clamp(25rem,46vw,32rem);border-radius:28px;overflow:hidden;
          background:radial-gradient(120% 70% at 50% 100%,var(--wash),var(--surface) 70%)}
.tile .device{width:64%;left:18%;top:11%;border-radius:2rem;padding:.45rem}
.tile .device img{border-radius:1.6rem}
.tile figcaption{padding:18px 6px 0;color:var(--mute);font-size:1.02rem;line-height:1.5}
.tile figcaption b{display:block;color:var(--ink);font-size:1.12rem;margin-bottom:.15em}
.hint{color:var(--mute);font-size:.95rem;margin:.6em auto 0}
@supports selector(::scroll-button(*)){
  .gallery-box{padding-bottom:60px}
  .gallery::scroll-button(*){position:absolute;bottom:4px;width:40px;height:40px;border:0;border-radius:50%;
       background:var(--surface);color:var(--ink);font:600 1.5rem/1 system-ui,sans-serif;cursor:pointer;
       display:grid;place-items:center;padding:0 0 3px}
  .gallery::scroll-button(*):hover{background:var(--rule)}
  .gallery::scroll-button(*):disabled{opacity:.35;cursor:default}
  .gallery::scroll-button(*):focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  .gallery::scroll-button(inline-start){content:"‹" / attr(data-prev);inset-inline-end:calc(var(--gut) + 52px)}
  .gallery::scroll-button(inline-end){content:"›" / attr(data-next);inset-inline-end:var(--gut)}
  /* ‹ and › are mirrored characters: in Arabic they turn by themselves. */
  .hint{display:none}
}
@supports (animation-timeline:view()) and (timeline-scope:--a){
@media (prefers-reduced-motion:no-preference){
  .gallery-sec{view-timeline:--gal}
  .tile{animation:slidein linear both;animation-timeline:--gal;animation-range:entry 25% cover 45%}
  .tile:nth-child(2){animation-range:entry 30% cover 50%}
  .tile:nth-child(3){animation-range:entry 35% cover 55%}
  .tile:nth-child(n+4){animation-range:entry 40% cover 60%}
  @keyframes slidein{from{opacity:0;translate:40vw 0}}
  [dir=rtl] .tile{animation-name:slidein-rtl}
  @keyframes slidein-rtl{from{opacity:0;translate:-40vw 0}}
  .tile .device{animation:peek linear both;animation-timeline:view(inline);animation-range:entry 0% entry 90%}
  @keyframes peek{from{transform:translateY(16%) scale(.92)}}
}}

.sec{padding:88px 0}
.sec h2{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.08;margin:.1em 0 .6em;max-width:44rem}
.sec.alt{background:var(--surface)}
.features{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.features li{margin:0;background:var(--surface);border-radius:28px;padding:30px}
.features .i{width:52px;height:52px;padding:12px;border-radius:14px;background:var(--wash);color:var(--on-wash);box-sizing:border-box;stroke-width:1.6}
.features h3{margin:.9em 0 .3em;font-size:1.25rem;letter-spacing:-.01em}
.features p{margin:0;color:var(--mute);font-size:1rem}

.steps{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:20px;grid-template-columns:repeat(5,1fr);counter-reset:s}
.steps li{margin:0;counter-increment:s;background:var(--bg);border-radius:28px;padding:26px 24px}
.steps li::before{content:"0" counter(s);display:block;font-size:2.6rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:.5em;
       background:linear-gradient(100deg,var(--accent),#9B5CFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps h3{margin:0 0 .3em;font-size:1.12rem}
.steps p{margin:0;color:var(--mute);font-size:.98rem}

.dark{background:#0B1233;color:#EEF1FF}
.dark .kicker{color:#A9B9FF}
.dark a{color:#A9B9FF}
.split{display:grid;gap:48px;grid-template-columns:1fr 1fr;align-items:center}
.trust{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.trust li{margin:0;display:flex;gap:14px;align-items:flex-start;background:rgb(255 255 255 / .06);border:1px solid rgb(255 255 255 / .1);border-radius:22px;padding:20px 22px}
.trust b{display:block;color:#EEF1FF}
.trust span{color:#C3CBEA;font-size:.98rem}
.trust .i{color:#A9B9FF;margin-top:2px}

.plans{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);margin:32px 0 16px}
.plan{position:relative;border-radius:28px;padding:30px;background:var(--surface)}
.plan.best{background:var(--bg);box-shadow:0 0 0 2px var(--accent),0 1.5em 3em -1.5em rgb(47 82 224 / .45)}
.plan h3{margin:0;font-size:1.25rem}
.price{font-size:2.8rem;font-weight:800;letter-spacing:-.03em;margin:.2em 0 0;line-height:1.1}
.price small{font-size:1rem;font-weight:400;color:var(--mute)}
.per{color:var(--mute);font-size:.95rem;margin:.2em 0 1em}
.plan ul{list-style:none;padding:0;margin:0 0 1em}
.plan li{padding-inline-start:28px;position:relative}
.plan li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--accent);font-weight:700}
.tag{position:absolute;top:-14px;inset-inline-start:24px;margin:0;background:var(--accent);color:var(--bg);font-size:.82rem;font-weight:700;padding:4px 12px;border-radius:999px}

.group{margin-top:1.6em}
.alt .card{background:var(--bg)}

details{border-bottom:1px solid var(--rule)}
/* The question's marker inside the column, with the text indented beside
   it: the browser's own marker hung outside, at the screen's edge. */
summary{cursor:pointer;font-weight:600;font-size:1.08rem;padding:18px 0 18px 30px;padding-inline:30px 0;
        list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::before{content:"";position:absolute;inset-inline-start:6px;top:1.55em;width:9px;height:9px;
        border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}
[dir=rtl] summary::before{transform:rotate(135deg)}
details[open] summary::before{transform:rotate(45deg)}
details p{margin:0 0 18px;padding-inline-start:30px;color:var(--mute)}
.value{margin:0 0 1em;padding:12px 14px;background:var(--wash);color:var(--on-wash);border-radius:12px;font-size:.98rem}

.cta{text-align:center;background:radial-gradient(40rem 20rem at 50% 0%,var(--wash),transparent 70%)}
.cta h2,.cta .lead{margin-inline:auto}
.cta .lead{max-width:36rem}

@media (max-width:70rem){.steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:60rem){
  .split{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:40rem){
  .hero{padding-top:20px}
  .features,.plans,.stat-grid,.steps{grid-template-columns:1fr}
  .story-step{grid-template-columns:1fr;justify-items:center;text-align:center;gap:20px}
  .story-step .device{width:min(62vw,15rem)}
  .story-text p{margin-inline:auto}
  .stats{padding-top:32px}
  .stat{padding:24px 24px 28px}
  .sec{padding:60px 0}
  .store{flex:1 1 12rem}
}

/* On a phone the story's phone is held under the bar, on a band that
   hides the text passing beneath it, and the steps pass in the space
   below; the crossfade comes as a step enters that space. */
@media (max-width:40rem) and (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()) and (timeline-scope:--a){
  .story{--ph:min(25rem,50svh,100vw);grid-template-columns:minmax(0,1fr);width:100%;margin-top:28px;
         --fade:cover 14% cover 26%;--lit:cover 8% cover 62%}
  .story-phone{grid-column:1;grid-row:1;justify-self:stretch;width:auto;height:auto;top:75px;z-index:1;margin:0;
               padding:12px 0 28px;background:linear-gradient(var(--bg) 82%,transparent)}
  .story-phone .device{width:calc(var(--ph) / 2);height:var(--ph);margin:0 auto}
  .story-steps{grid-column:1;grid-row:2;padding:0 20px}
  .story-step{min-height:50svh;align-items:flex-start;justify-content:center}
}}

/* Headlines and tiles rise as they come into view: from the scroll
   position, not a timer, so nothing moves while reading. */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
  .stat,.features li,.steps li,.trust li,.plan,.cards li,.sec h2,.sec .kicker,.sec .lead,.sec details,.gallery-sec .btn{
    animation:reveal linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
  @keyframes reveal{from{opacity:0;transform:translateY(3rem)}}
  .stat:nth-child(2),.features li:nth-child(3n+2),.plan:nth-child(2),.steps li:nth-child(2n){animation-range:entry 12% cover 36%}
  .stat:nth-child(3),.features li:nth-child(3n),.plan:nth-child(3),.steps li:nth-child(3n){animation-range:entry 19% cover 42%}
}}

/* The box at an article's end that leads to the app. */
.appbox{margin:2.4em 0 0;padding:20px 22px;background:var(--wash);color:var(--on-wash);border-radius:16px}
.appbox .kicker{color:var(--on-wash)}
.appbox h2{margin:.1em 0 .4em}
.appbox p{margin:.4em 0}
.appbox .ctas{margin:16px 0 4px}
.appbox .store.soon{color:var(--on-wash);border-color:var(--on-wash)}
.appbox a:not(.store){color:var(--on-wash);font-weight:700}
.appbox-more a{display:inline-block;padding:10px 0}

/* Pictures inside an article (a story told with the app's screens). */
article img{display:block;max-width:min(100%,20rem);height:auto;margin:1em auto;border-radius:16px;border:1px solid var(--rule)}

/* The language switch: one line, a <details> that opens without a script.
   The eleven names in a row took two lines above every page's title
   (walkthrough 2026-11-02, gap 16). The page's own language is the
   summary, so "Deutsch" is always there to come back to. */
.langs{display:block;margin:-12px 0 8px}
.home .langs{margin:4px 0 0}
.langs details{border:0}
.langs summary{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 4px;
       font-size:.95rem;font-weight:600;color:var(--accent)}
.langs summary::before{position:static;order:3;margin:-4px 2px 0;width:7px;height:7px;transform:rotate(45deg)}
[dir=rtl] .langs summary::before{transform:rotate(45deg)}
.langs details[open] summary::before{transform:rotate(-135deg);margin-top:4px}
.langs ul{list-style:none;margin:0 0 8px;padding:6px 0;display:flex;flex-wrap:wrap;gap:0 18px}
.langs li{margin:0}
.langs li a,.langs .here{display:inline-block;padding:10px 0;font-weight:400}
.langs .here{font-weight:700}

/* The web app beside the "Bald" badges: the one that works today. */
.store.web{background:var(--accent);color:var(--bg)}
.appbox .store.web{background:var(--on-wash);color:var(--wash)}
.all{margin:22px 0 0}

/* The diary article's link to the printable template. */
.template-box{display:flex;gap:14px;align-items:flex-start;margin:2em 0 0;padding:16px 18px;
       border:1.5px solid var(--rule);border-radius:16px}
.template-box .i{margin-top:4px;color:var(--accent)}
.template-box p{margin:0}
.template-box a{font-weight:700;display:inline-block;padding:6px 0}

/* The printable diary (ratgeber/pflegetagebuch-vorlage.html): on screen a
   page like the others, on paper one sheet per module, black on white,
   without the site's bar, footer or the app box. */
.vorlage table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.9rem}
.vorlage th,.vorlage td{border:1px solid var(--rule);padding:6px;text-align:start;vertical-align:top}
.vorlage td{height:2.6em}
.vorlage .c-date{width:22%}.vorlage .c-help{width:16%}.vorlage .c-min{width:13%}.vorlage .c-who{width:13%}
.vorlage .examples,.vorlage .legend{color:var(--mute);font-size:.95rem}
.sheet h2{font-size:1.2rem}
@media print{
  :root{--bg:#fff;--ink:#000;--mute:#333;--rule:#000;--accent:#000}
  body{font-size:11pt;line-height:1.4;background:#fff;color:#000}
  .bar,.foot,.langs,.noprint,.skip{display:none !important}
  main{max-width:none;padding:0}
  .sheet{break-before:page}
  .sheet h2{margin-top:0}
  .vorlage td{height:12mm}
  .vorlage th,.vorlage td{border-color:#000}
}